create-blitzpack 0.1.0 → 0.1.1

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

@@ -1,372 +0,0 @@
-'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

@@ -1,137 +0,0 @@
-'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

@@ -1,152 +0,0 @@
-'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>
-  );
-}