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

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

@@ -1,528 +0,0 @@
-"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);