create-blitzpack 0.1.0

package/template/apps/web/src/components/admin/sessions-management-table.tsx

@@ -0,0 +1,372 @@
+'use client';
+
+import type { AdminSession, QuerySessions } from '@repo/packages-types/session';
+import { Badge } from '@repo/packages-ui/badge';
+import { Button } from '@repo/packages-ui/button';
+import { DataTable } from '@repo/packages-ui/data-table/data-table';
+import { DataTableColumnHeader } from '@repo/packages-ui/data-table/data-table-column-header';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@repo/packages-ui/dropdown-menu';
+import { UserAvatar } from '@repo/packages-ui/user-avatar';
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+} from '@tanstack/react-table';
+import { formatDistanceToNow } from 'date-fns';
+import {
+  Filter,
+  Monitor,
+  MoreHorizontal,
+  Smartphone,
+  Tablet,
+} from 'lucide-react';
+import * as React from 'react';
+import { toast } from 'sonner';
+
+import { SessionRevokeAllDialog } from '@/components/admin/session-revoke-all-dialog';
+import { SessionRevokeDialog } from '@/components/admin/session-revoke-dialog';
+import { useFetchAdminSessions } from '@/hooks/api/use-admin-sessions';
+
+function copyToClipboard(text: string, label: string) {
+  navigator.clipboard.writeText(text);
+  toast.success(`${label} copied to clipboard`);
+}
+
+function parseUserAgent(ua: string | null): string {
+  if (!ua) return 'Unknown';
+
+  if (ua.includes('Chrome') && !ua.includes('Edg')) return 'Chrome';
+  if (ua.includes('Firefox')) return 'Firefox';
+  if (ua.includes('Safari') && !ua.includes('Chrome')) return 'Safari';
+  if (ua.includes('Edg')) return 'Edge';
+  if (ua.includes('Opera') || ua.includes('OPR')) return 'Opera';
+
+  return 'Other';
+}
+
+type DeviceType = 'Mobile' | 'Tablet' | 'Desktop' | 'Unknown';
+
+function getDeviceType(ua: string | null): DeviceType {
+  if (!ua) return 'Unknown';
+
+  if (ua.includes('Mobile') || ua.includes('Android')) return 'Mobile';
+  if (ua.includes('Tablet') || ua.includes('iPad')) return 'Tablet';
+  return 'Desktop';
+}
+
+const deviceIcons: Record<DeviceType, typeof Monitor> = {
+  Desktop: Monitor,
+  Mobile: Smartphone,
+  Tablet: Tablet,
+  Unknown: Monitor,
+};
+
+function isSessionActive(expiresAt: Date): boolean {
+  return new Date(expiresAt) > new Date();
+}
+
+const columns: ColumnDef<AdminSession>[] = [
+  {
+    accessorKey: 'user',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="User" />
+    ),
+    meta: { label: 'User' },
+    cell: ({ row }) => {
+      const user = row.original.user;
+
+      return (
+        <div className="flex items-center gap-3">
+          <UserAvatar
+            src={user.image}
+            name={user.name}
+            email={user.email}
+            size="sm"
+          />
+          <div>
+            <div className="font-medium">{user.name || 'No name'}</div>
+            <div className="text-muted-foreground font-mono text-xs">
+              {user.email}
+            </div>
+          </div>
+        </div>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    accessorKey: 'ipAddress',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="IP Address" />
+    ),
+    meta: { label: 'IP Address' },
+    cell: ({ row }) => (
+      <code className="bg-muted rounded px-1.5 py-0.5 text-xs">
+        {row.getValue('ipAddress') || 'Unknown'}
+      </code>
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: 'userAgent',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Device" />
+    ),
+    meta: { label: 'Device' },
+    cell: ({ row }) => {
+      const ua = row.getValue('userAgent') as string | null;
+      const browser = parseUserAgent(ua);
+      const device = getDeviceType(ua);
+      const DeviceIcon = deviceIcons[device];
+
+      return (
+        <div className="flex items-center gap-2">
+          <div className="bg-muted flex h-8 w-8 items-center justify-center rounded-md">
+            <DeviceIcon className="text-muted-foreground h-4 w-4" />
+          </div>
+          <div className="text-sm">
+            <div className="font-medium">{browser}</div>
+            <div className="text-muted-foreground text-xs">{device}</div>
+          </div>
+        </div>
+      );
+    },
+    enableSorting: false,
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Created" />
+    ),
+    meta: { label: 'Created' },
+    cell: ({ row }) => {
+      const date = row.getValue('createdAt') as string | Date;
+      return (
+        <div className="text-muted-foreground text-sm">
+          {formatDistanceToNow(new Date(date), { addSuffix: true })}
+        </div>
+      );
+    },
+  },
+  {
+    id: 'status',
+    accessorKey: 'expiresAt',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Status" />
+    ),
+    meta: { label: 'Status' },
+    cell: ({ row }) => {
+      const expiresAt = row.getValue('status') as string | Date;
+      const active = isSessionActive(new Date(expiresAt));
+
+      return (
+        <Badge variant={active ? 'default' : 'secondary'}>
+          {active ? 'Active' : 'Expired'}
+        </Badge>
+      );
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const session = row.original;
+      const active = isSessionActive(new Date(session.expiresAt));
+
+      if (!active) return null;
+
+      return (
+        <div className="flex items-center justify-end gap-2">
+          <SessionRevokeDialog session={session} />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">More options</span>
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuLabel>More Actions</DropdownMenuLabel>
+              <DropdownMenuItem
+                onClick={() => copyToClipboard(session.id, 'Session ID')}
+              >
+                Copy Session ID
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => copyToClipboard(session.user.id, 'User ID')}
+              >
+                Copy User ID
+              </DropdownMenuItem>
+              {session.ipAddress && (
+                <DropdownMenuItem
+                  onClick={() =>
+                    copyToClipboard(session.ipAddress!, 'IP Address')
+                  }
+                >
+                  Copy IP Address
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];
+
+type StatusFilter = 'active' | 'expired' | 'all';
+
+export function SessionsManagementTable() {
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const [sorting, setSorting] = React.useState<SortingState>([
+    { id: 'createdAt', desc: true },
+  ]);
+
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [statusFilter, setStatusFilter] =
+    React.useState<StatusFilter>('active');
+
+  const searchFilter = columnFilters.find((filter) => filter.id === 'user');
+  const searchValue = searchFilter?.value as string | undefined;
+
+  const queryParams: QuerySessions = {
+    page: pagination.pageIndex + 1,
+    limit: pagination.pageSize,
+    sortBy: (sorting[0]?.id as 'createdAt' | 'expiresAt') || 'createdAt',
+    sortOrder: sorting[0]?.desc ? 'desc' : 'asc',
+    status: statusFilter,
+    ...(searchValue && { search: searchValue }),
+  };
+
+  const {
+    data: response,
+    isLoading,
+    isError,
+    error,
+  } = useFetchAdminSessions(queryParams);
+
+  const sessions = React.useMemo(() => response?.data || [], [response?.data]);
+  const total = response?.pagination?.total || 0;
+
+  const userGroups = React.useMemo(() => {
+    const groups = new Map<
+      string,
+      { user: AdminSession['user']; count: number }
+    >();
+    sessions.forEach((s) => {
+      const existing = groups.get(s.user.id);
+      if (existing) {
+        existing.count++;
+      } else {
+        groups.set(s.user.id, { user: s.user, count: 1 });
+      }
+    });
+    return Array.from(groups.values()).filter((g) => g.count > 1);
+  }, [sessions]);
+
+  if (isError) {
+    return (
+      <div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
+        <p className="text-destructive text-sm">
+          Error loading sessions: {error?.message || 'Unknown error'}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm">
+                <Filter className="mr-2 h-4 w-4" />
+                Status:{' '}
+                {statusFilter.charAt(0).toUpperCase() + statusFilter.slice(1)}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-48">
+              <DropdownMenuLabel>Filter by Status</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuRadioGroup
+                value={statusFilter}
+                onValueChange={(value) =>
+                  setStatusFilter(value as StatusFilter)
+                }
+              >
+                <DropdownMenuRadioItem value="active">
+                  Active
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="expired">
+                  Expired
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="all">All</DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {userGroups.length > 0 && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  Bulk Actions
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="w-64">
+                <DropdownMenuLabel>Revoke All Sessions For</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {userGroups.slice(0, 5).map(({ user, count }) => (
+                  <div key={user.id} className="px-2 py-1.5">
+                    <SessionRevokeAllDialog
+                      userId={user.id}
+                      userName={user.name || ''}
+                      userEmail={user.email}
+                    />
+                    <span className="text-muted-foreground ml-2 text-xs">
+                      ({count} sessions)
+                    </span>
+                  </div>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+
+        <div className="text-muted-foreground text-sm">
+          {total} session{total !== 1 ? 's' : ''}
+        </div>
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={sessions}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+        sorting={sorting}
+        onSortingChange={setSorting}
+        columnFilters={columnFilters}
+        onColumnFiltersChange={setColumnFilters}
+        rowCount={total}
+        isLoading={isLoading}
+        searchPlaceholder="Search by user email or name..."
+        searchColumnId="user"
+      />
+    </div>
+  );
+}

package/template/apps/web/src/components/admin/stat-card.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { cn } from '@repo/packages-ui/lib/utils';
+import { Skeleton } from '@repo/packages-ui/skeleton';
+import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
+import type { LucideIcon } from 'lucide-react';
+import { useEffect } from 'react';
+
+interface StatCardProps {
+  title: string;
+  value: number;
+  icon: LucideIcon;
+  formatter?: (value: number) => string;
+  trend?: {
+    value: number;
+    label: string;
+  };
+  className?: string;
+  accentColor?: 'emerald' | 'blue' | 'amber' | 'rose' | 'violet' | 'cyan';
+}
+
+const accentColors = {
+  emerald: {
+    bg: 'bg-emerald-500/10',
+    icon: 'text-emerald-500',
+    trend: 'text-emerald-600',
+  },
+  blue: {
+    bg: 'bg-blue-500/10',
+    icon: 'text-blue-500',
+    trend: 'text-blue-600',
+  },
+  amber: {
+    bg: 'bg-amber-500/10',
+    icon: 'text-amber-500',
+    trend: 'text-amber-600',
+  },
+  rose: {
+    bg: 'bg-rose-500/10',
+    icon: 'text-rose-500',
+    trend: 'text-rose-600',
+  },
+  violet: {
+    bg: 'bg-violet-500/10',
+    icon: 'text-violet-500',
+    trend: 'text-violet-600',
+  },
+  cyan: {
+    bg: 'bg-cyan-500/10',
+    icon: 'text-cyan-500',
+    trend: 'text-cyan-600',
+  },
+};
+
+function AnimatedNumber({
+  value,
+  formatter = (v) => v.toLocaleString(),
+}: {
+  value: number;
+  formatter?: (value: number) => string;
+}) {
+  const motionValue = useMotionValue(0);
+  const rounded = useTransform(motionValue, (latest) =>
+    formatter(Math.round(latest))
+  );
+
+  useEffect(() => {
+    const controls = animate(motionValue, value, {
+      duration: 0.8,
+      ease: 'easeOut',
+    });
+    return controls.stop;
+  }, [value, motionValue]);
+
+  return <motion.span>{rounded}</motion.span>;
+}
+
+export function StatCard({
+  title,
+  value,
+  icon: Icon,
+  formatter,
+  trend,
+  className,
+  accentColor = 'blue',
+}: StatCardProps) {
+  const colors = accentColors[accentColor];
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={cn(
+        'bg-card relative overflow-hidden rounded-xl border p-5',
+        className
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1 space-y-1">
+          <p className="text-muted-foreground text-sm font-medium">{title}</p>
+          <p className="text-2xl font-semibold tracking-tight">
+            <AnimatedNumber value={value} formatter={formatter} />
+          </p>
+          {trend && (
+            <p className={cn('text-xs font-medium', colors.trend)}>
+              +{trend.value} {trend.label}
+            </p>
+          )}
+        </div>
+        <div className={cn('rounded-lg p-2.5', colors.bg)}>
+          <Icon className={cn('size-5', colors.icon)} />
+        </div>
+      </div>
+      <div
+        className={cn(
+          'absolute -bottom-8 -right-8 size-24 rounded-full opacity-5',
+          colors.bg
+        )}
+      />
+    </motion.div>
+  );
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div className="bg-card rounded-xl border p-5">
+      <div className="flex items-start justify-between">
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-8 w-16" />
+          <Skeleton className="h-3 w-20" />
+        </div>
+        <Skeleton className="size-10 rounded-lg" />
+      </div>
+    </div>
+  );
+}

package/template/apps/web/src/components/admin/user-create-dialog.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import type { Role } from '@repo/packages-types/role';
+import { RoleSchema } from '@repo/packages-types/role';
+import type { CreateUser } from '@repo/packages-types/user';
+import { Button } from '@repo/packages-ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@repo/packages-ui/dialog';
+import { Input } from '@repo/packages-ui/input';
+import { Label } from '@repo/packages-ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@repo/packages-ui/select';
+import { UserPlus } from 'lucide-react';
+import * as React from 'react';
+import { toast } from 'sonner';
+
+import { useCreateUser } from '@/hooks/api/use-users';
+
+const INITIAL_FORM_DATA: CreateUser = {
+  name: '',
+  email: '',
+  role: 'user',
+};
+
+export function UserCreateDialog() {
+  const [open, setOpen] = React.useState(false);
+  const [formData, setFormData] = React.useState<CreateUser>(INITIAL_FORM_DATA);
+
+  const { mutate: createUser, isPending } = useCreateUser();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    createUser(formData, {
+      onSuccess: () => {
+        toast.success('User created successfully');
+        setFormData(INITIAL_FORM_DATA);
+        setOpen(false);
+      },
+      onError: (error) => {
+        toast.error(error.message || 'Failed to create user');
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    if (!open) {
+      setFormData(INITIAL_FORM_DATA);
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <UserPlus className="mr-2 h-4 w-4" />
+          Add User
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Create New User</DialogTitle>
+            <DialogDescription>
+              Add a new user to the system with role assignment
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="create-name">Name</Label>
+              <Input
+                id="create-name"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, name: e.target.value }))
+                }
+                placeholder="Enter user name"
+                required
+                autoComplete="off"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="create-email">Email</Label>
+              <Input
+                id="create-email"
+                type="email"
+                value={formData.email}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, email: e.target.value }))
+                }
+                placeholder="user@example.com"
+                required
+                autoComplete="off"
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="create-role">Role</Label>
+              <Select
+                value={formData.role}
+                onValueChange={(value) =>
+                  setFormData((prev) => ({ ...prev, role: value as Role }))
+                }
+              >
+                <SelectTrigger id="create-role">
+                  <SelectValue placeholder="Select role" />
+                </SelectTrigger>
+                <SelectContent>
+                  {RoleSchema.options.map((role) => (
+                    <SelectItem key={role} value={role}>
+                      {role === 'super_admin'
+                        ? 'Super Admin'
+                        : role.charAt(0).toUpperCase() + role.slice(1)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={isPending}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isPending}>
+              {isPending ? 'Creating...' : 'Create User'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}