@nextsparkjs/core 0.1.0-beta.83 → 0.1.0-beta.85

package/dist/templates/app/superadmin/teams/page.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@nextsparkjs/core/components/ui/card";
+import { Button } from "@nextsparkjs/core/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@nextsparkjs/core/components/ui/tabs";
+import {
+  ArrowLeft,
+  Users,
+  Shield,
+  Users2,
+  Loader2,
+  AlertTriangle,
+  RefreshCw,
+} from "lucide-react";
+import Link from "next/link";
+import { TeamsTable } from "@nextsparkjs/core/components/superadmin/tables/TeamsTable";
+import { getTemplateOrDefaultClient } from "@nextsparkjs/registries/template-registry.client";
+import {
+  SearchInput,
+  PaginationControls,
+} from "@nextsparkjs/core/components/superadmin/filters";
+import { sel } from "@nextsparkjs/core/selectors";
+import { useAdminTeams } from "@nextsparkjs/core/hooks/teams";
+
+/**
+ * Teams Management Page
+ *
+ * Comprehensive team viewing interface for superadmins (read-only).
+ * Displays all teams with filtering by type.
+ */
+function TeamsPage() {
+  const [activeTab, setActiveTab] = useState<"user" | "system">("user");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(20);
+
+  // Handle tab change - reset page
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab as "user" | "system");
+    setPage(1);
+  };
+
+  // Handle search change - reset page
+  const handleSearchChange = (value: string) => {
+    setSearchQuery(value);
+    setPage(1);
+  };
+
+  // Handle limit change - reset page
+  const handleLimitChange = (newLimit: number) => {
+    setLimit(newLimit);
+    setPage(1);
+  };
+
+  // Fetch teams data using the shared hook
+  const {
+    teams: filteredTeams,
+    counts,
+    pagination,
+    metadata,
+    isLoading,
+    error,
+    refetch,
+  } = useAdminTeams({
+    search: searchQuery || undefined,
+    type: activeTab,
+    page,
+    limit,
+  });
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Button variant="outline" size="sm" asChild>
+            <Link href="/superadmin" className="flex items-center gap-2">
+              <ArrowLeft className="h-4 w-4" />
+              Back to Super Admin
+            </Link>
+          </Button>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Team Management</h1>
+            <p className="text-muted-foreground">Loading team data...</p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-4">
+          <Button variant="outline" size="sm" asChild>
+            <Link href="/superadmin" className="flex items-center gap-2">
+              <ArrowLeft className="h-4 w-4" />
+              Back to Super Admin
+            </Link>
+          </Button>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Team Management</h1>
+            <p className="text-muted-foreground">Error loading data</p>
+          </div>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-destructive" />
+              Error Loading Teams
+            </CardTitle>
+            <CardDescription>
+              {error instanceof Error ? error.message : "Failed to load team data"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button
+              onClick={() => refetch()}
+              variant="outline"
+              className="flex items-center gap-2"
+            >
+              <RefreshCw className="h-4 w-4" />
+              Retry
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6" data-cy={sel('superadmin.teams.container')}>
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <Button variant="outline" size="sm" asChild>
+          <Link href="/superadmin" className="flex items-center gap-2">
+            <ArrowLeft className="h-4 w-4" />
+            Back to Super Admin
+          </Link>
+        </Button>
+        <div className="flex-1">
+          <h1 className="text-3xl font-bold tracking-tight">Team Management</h1>
+          <p className="text-muted-foreground">
+            View all teams and their members (read-only)
+          </p>
+        </div>
+        <Button
+          onClick={() => refetch()}
+          variant="outline"
+          size="sm"
+          className="flex items-center gap-2"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Refresh
+        </Button>
+      </div>
+
+      {/* Stats Overview */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Teams</CardTitle>
+            <Users2 className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{counts?.total || 0}</div>
+            <p className="text-xs text-muted-foreground">All registered teams</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Search */}
+      <div className="flex items-center gap-4">
+        <SearchInput
+          value={searchQuery}
+          onChange={handleSearchChange}
+          placeholder="Search teams by name or owner email..."
+          className="w-full max-w-sm"
+          data-cy={sel('superadmin.teams.filters.search')}
+        />
+        {searchQuery && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              setSearchQuery("");
+              setPage(1);
+            }}
+            data-cy={sel('superadmin.teams.filters.clearButton')}
+          >
+            Clear
+          </Button>
+        )}
+      </div>
+
+      {/* Tabs Section */}
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="space-y-4"
+      >
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="user" className="flex items-center gap-2">
+            <Users className="h-4 w-4" />
+            User Teams ({counts?.user || 0})
+          </TabsTrigger>
+          <TabsTrigger value="system" className="flex items-center gap-2">
+            <Shield className="h-4 w-4" />
+            System Admin ({counts?.system || 0})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="user" className="space-y-4">
+          <Card className="border-primary/20">
+            <CardHeader className="bg-primary/5">
+              <CardTitle className="flex items-center gap-2 text-primary">
+                <Users className="h-5 w-5" />
+                User Teams
+              </CardTitle>
+              <CardDescription>
+                Regular teams created by users for collaboration.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <TeamsTable teams={filteredTeams} isLoading={isLoading} />
+              {pagination && (
+                <PaginationControls
+                  page={pagination.page}
+                  totalPages={pagination.totalPages}
+                  total={pagination.total}
+                  limit={pagination.limit}
+                  onPageChange={setPage}
+                  onLimitChange={handleLimitChange}
+                  context="teams"
+                />
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="system" className="space-y-4">
+          <Card className="border-violet-500/30">
+            <CardHeader className="bg-violet-500/10">
+              <CardTitle className="flex items-center gap-2 text-violet-600 dark:text-violet-400">
+                <Shield className="h-5 w-5" />
+                System Admin Team
+              </CardTitle>
+              <CardDescription>
+                Special team for system administrators with cross-team access capabilities.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <TeamsTable teams={filteredTeams} isLoading={isLoading} />
+              {pagination && (
+                <PaginationControls
+                  page={pagination.page}
+                  totalPages={pagination.totalPages}
+                  total={pagination.total}
+                  limit={pagination.limit}
+                  onPageChange={setPage}
+                  onLimitChange={handleLimitChange}
+                  context="teams"
+                />
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* Metadata Footer */}
+      {metadata && (
+        <Card className="bg-muted/30">
+          <CardContent className="pt-4">
+            <div className="text-xs text-muted-foreground space-y-1">
+              <p>
+                Last updated:{" "}
+                {new Date(metadata.requestedAt).toLocaleString()}
+              </p>
+              <p>Requested by: {metadata.requestedBy}</p>
+              <p>Source: {metadata.source}</p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+export default getTemplateOrDefaultClient("app/superadmin/teams/page.tsx", TeamsPage);