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

package/templates/app/superadmin/users/page.tsx

@@ -0,0 +1,528 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useState, useCallback } 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 { Badge } from "@nextsparkjs/core/components/ui/badge";
+import {
+  ArrowLeft,
+  Users,
+  Users2,
+  Shield,
+  Loader2,
+  AlertTriangle,
+  RefreshCw,
+} from "lucide-react";
+import Link from "next/link";
+import { UsersTable } from "@nextsparkjs/core/components/users/tables/UsersTable";
+import { SuperAdminsTable } from "@nextsparkjs/core/components/users/tables/SuperAdminsTable";
+import { useSession } from "@nextsparkjs/core/lib/auth-client";
+import type { User } from "@nextsparkjs/core/types/user.types";
+import { getTemplateOrDefaultClient } from "@nextsparkjs/registries/template-registry.client";
+import {
+  SearchInput,
+  PaginationControls,
+  FilterDropdown,
+} from "@nextsparkjs/core/components/superadmin/filters";
+import { sel } from "@nextsparkjs/core/selectors";
+
+interface UsersData {
+  regularUsers: User[];
+  superadmins: User[];
+  counts: {
+    total: number;
+    regularUsers: number;
+    superadmins: number;
+    workTeams: number;
+    byRole: Record<string, number>;
+    statusDistribution: Record<string, number>;
+    teamRoleDistribution: Record<string, number>;
+  };
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+    hasMore: boolean;
+  };
+  filters: {
+    search: string;
+    role: string;
+    status: string;
+    tab: string;
+  };
+  metadata: {
+    requestedBy: string;
+    requestedAt: string;
+    source: string;
+  };
+}
+
+const roleOptions = [
+  { value: "member", label: "Member" },
+  { value: "colaborator", label: "Colaborator" },
+  { value: "admin", label: "Admin" },
+];
+
+const statusOptions = [
+  { value: "verified", label: "Verified" },
+  { value: "unverified", label: "Unverified" },
+];
+
+/**
+ * Users Management Page
+ *
+ * Comprehensive user management interface for superadmins.
+ * Displays regular users and superadmins with search, filters, and pagination.
+ */
+function UsersPage() {
+  const [activeTab, setActiveTab] = useState<"users" | "superadmins">("users");
+  const [search, setSearch] = useState("");
+  const [roleFilter, setRoleFilter] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [page, setPage] = useState(1);
+  const [limit, setLimit] = useState(20);
+  const { data: session } = useSession();
+
+  // Build query params
+  const getQueryParams = useCallback(() => {
+    const params = new URLSearchParams();
+    if (search) params.set("search", search);
+    if (roleFilter && roleFilter !== "__all__") params.set("role", roleFilter);
+    if (statusFilter && statusFilter !== "__all__") params.set("status", statusFilter);
+    params.set("tab", activeTab);
+    params.set("page", String(page));
+    params.set("limit", String(limit));
+    return params.toString();
+  }, [search, roleFilter, statusFilter, activeTab, page, limit]);
+
+  // Fetch users data from API
+  const {
+    data: rawUsersData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<UsersData>({
+    queryKey: ["superadmin-users", search, roleFilter, statusFilter, activeTab, page, limit],
+    queryFn: async () => {
+      const queryString = getQueryParams();
+      const response = await fetch(`/api/superadmin/users?${queryString}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch users data");
+      }
+      return response.json();
+    },
+    retry: 2,
+    staleTime: 30000,
+  });
+
+  // Transform users data to add fullName property
+  const usersData = rawUsersData
+    ? {
+        ...rawUsersData,
+        regularUsers: rawUsersData.regularUsers.map((user) => ({
+          ...user,
+          fullName:
+            [user.firstName, user.lastName].filter(Boolean).join(" ") ||
+            "No name",
+        })),
+        superadmins: rawUsersData.superadmins.map((user) => ({
+          ...user,
+          fullName:
+            [user.firstName, user.lastName].filter(Boolean).join(" ") ||
+            "No name",
+        })),
+      }
+    : undefined;
+
+  // Handle tab change - reset page
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab as "users" | "superadmins");
+    setPage(1);
+  };
+
+  // Handle search change - reset page
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+    setPage(1);
+  };
+
+  // Handle filter change - reset page
+  const handleRoleFilterChange = (value: string) => {
+    setRoleFilter(value === "__all__" ? "" : value);
+    setPage(1);
+  };
+
+  const handleStatusFilterChange = (value: string) => {
+    setStatusFilter(value === "__all__" ? "" : value);
+    setPage(1);
+  };
+
+  // Handle limit change - reset page
+  const handleLimitChange = (newLimit: number) => {
+    setLimit(newLimit);
+    setPage(1);
+  };
+
+  // Clear all filters
+  const clearFilters = () => {
+    setSearch("");
+    setRoleFilter("");
+    setStatusFilter("");
+    setPage(1);
+  };
+
+  const hasActiveFilters = search || roleFilter || statusFilter;
+
+  // Loading state
+  if (isLoading && !usersData) {
+    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">
+              User Management
+            </h1>
+            <p className="text-muted-foreground">Loading user 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">
+              User 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 Users
+            </CardTitle>
+            <CardDescription>
+              {error instanceof Error
+                ? error.message
+                : "Failed to load user 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.users.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">User Management</h1>
+          <p className="text-muted-foreground">
+            Manage all users and superadministrators
+          </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-4 gap-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Users</CardTitle>
+            <Users className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {usersData?.counts.total || 0}
+            </div>
+            <p className="text-xs text-muted-foreground">All registered users</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Work Teams</CardTitle>
+            <Users2 className="h-4 w-4 text-primary" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-primary">
+              {usersData?.counts.workTeams || 0}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Collaborative work teams
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Superadmins</CardTitle>
+            <Shield className="h-4 w-4 text-red-600" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">
+              {usersData?.counts.superadmins || 0}
+            </div>
+            <p className="text-xs text-muted-foreground">System administrators</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Distribution</CardTitle>
+            <Badge variant="outline">
+              {Object.keys(usersData?.counts.byRole || {}).length} roles
+            </Badge>
+          </CardHeader>
+          <CardContent>
+            <Tabs defaultValue="status" className="w-full">
+              <TabsList className="grid w-full grid-cols-2 h-7">
+                <TabsTrigger value="status" className="text-xs">
+                  Status
+                </TabsTrigger>
+                <TabsTrigger value="role" className="text-xs">
+                  Role
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent value="status" className="mt-2">
+                <div className="space-y-1">
+                  <div className="flex justify-between text-xs">
+                    <span>Verified:</span>
+                    <span className="font-medium text-green-600">
+                      {usersData?.counts.statusDistribution?.verified || 0}
+                    </span>
+                  </div>
+                  <div className="flex justify-between text-xs">
+                    <span>Unverified:</span>
+                    <span className="font-medium text-yellow-600">
+                      {usersData?.counts.statusDistribution?.unverified || 0}
+                    </span>
+                  </div>
+                </div>
+              </TabsContent>
+              <TabsContent value="role" className="mt-2">
+                <div className="space-y-1">
+                  {Object.entries(usersData?.counts.teamRoleDistribution || {}).map(
+                    ([role, count]) => (
+                      <div key={role} className="flex justify-between text-xs">
+                        <span className="capitalize">{role}:</span>
+                        <span className="font-medium">{count}</span>
+                      </div>
+                    )
+                  )}
+                </div>
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Search and Filters */}
+      <div className="flex flex-wrap items-center gap-4">
+        <SearchInput
+          value={search}
+          onChange={handleSearchChange}
+          placeholder="Search by name or email..."
+          className="w-full max-w-sm"
+          data-cy={sel('superadmin.users.filters.search')}
+        />
+
+        {activeTab === "users" && (
+          <FilterDropdown
+            value={roleFilter || "__all__"}
+            onChange={handleRoleFilterChange}
+            options={roleOptions}
+            label="Role"
+            allLabel="All Roles"
+            showIcon={false}
+            data-cy="users-role-filter"
+          />
+        )}
+
+        <FilterDropdown
+          value={statusFilter || "__all__"}
+          onChange={handleStatusFilterChange}
+          options={statusOptions}
+          label="Status"
+          allLabel="All Status"
+          showIcon={false}
+          data-cy="users-status-filter"
+        />
+
+        {hasActiveFilters && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={clearFilters}
+            data-cy="clear-filters-btn"
+          >
+            Clear filters
+          </Button>
+        )}
+      </div>
+
+      {/* Tabs Section */}
+      <Tabs
+        value={activeTab}
+        onValueChange={handleTabChange}
+        className="space-y-4"
+      >
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="users" className="flex items-center gap-2">
+            <Users className="h-4 w-4" />
+            Regular Users ({usersData?.counts.regularUsers || 0})
+          </TabsTrigger>
+          <TabsTrigger value="superadmins" className="flex items-center gap-2">
+            <Shield className="h-4 w-4" />
+            Superadmins ({usersData?.counts.superadmins || 0})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="users" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Regular Users</CardTitle>
+              <CardDescription>
+                All users excluding superadministrators. Includes members,
+                colaborators, and admins.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <UsersTable
+                users={usersData?.regularUsers || []}
+                isLoading={isLoading}
+                onRefresh={() => refetch()}
+              />
+              {usersData?.pagination && (
+                <PaginationControls
+                  page={usersData.pagination.page}
+                  totalPages={usersData.pagination.totalPages}
+                  total={usersData.pagination.total}
+                  limit={usersData.pagination.limit}
+                  onPageChange={setPage}
+                  onLimitChange={handleLimitChange}
+                  context="users"
+                />
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="superadmins" className="space-y-4">
+          <Card className="border-red-200">
+            <CardHeader className="bg-red-50">
+              <CardTitle className="flex items-center gap-2 text-red-700">
+                <Shield className="h-5 w-5" />
+                Superadministrators
+              </CardTitle>
+              <CardDescription>
+                Users with full system access and administrative privileges.
+                Handle with extreme caution.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-0">
+              <SuperAdminsTable
+                superadmins={usersData?.superadmins || []}
+                isLoading={isLoading}
+                currentUserId={session?.user?.id}
+              />
+              {usersData?.pagination && (
+                <div className="p-4 border-t">
+                  <PaginationControls
+                    page={usersData.pagination.page}
+                    totalPages={usersData.pagination.totalPages}
+                    total={usersData.pagination.total}
+                    limit={usersData.pagination.limit}
+                    onPageChange={setPage}
+                    onLimitChange={handleLimitChange}
+                    context="users"
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* Metadata Footer */}
+      {usersData?.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(usersData.metadata.requestedAt).toLocaleString()}
+              </p>
+              <p>Requested by: {usersData.metadata.requestedBy}</p>
+              <p>Source: {usersData.metadata.source}</p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+export default getTemplateOrDefaultClient("app/superadmin/users/page.tsx", UsersPage);