create-blitzpack 0.1.0

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

@@ -0,0 +1,73 @@
+'use client';
+
+import type { User } from '@repo/packages-types/user';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@repo/packages-ui/alert-dialog';
+import { Button } from '@repo/packages-ui/button';
+import { Trash2 } from 'lucide-react';
+import * as React from 'react';
+import { toast } from 'sonner';
+
+import { useDeleteUser } from '@/hooks/api/use-users';
+
+interface UserDeleteDialogProps {
+  user: User;
+}
+
+export function UserDeleteDialog({ user }: UserDeleteDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  const { mutate: deleteUser, isPending } = useDeleteUser();
+
+  const handleDelete = () => {
+    deleteUser(user.id, {
+      onSuccess: () => {
+        toast.success('User deleted successfully');
+        setOpen(false);
+      },
+      onError: (error) => {
+        toast.error(error.message || 'Failed to delete user');
+      },
+    });
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost" size="sm" className="text-destructive">
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete the user{' '}
+            <span className="font-semibold">{user.name}</span> (
+            <span className="font-mono text-sm">{user.email}</span>) and remove
+            all associated data from the system.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleDelete}
+            disabled={isPending}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isPending ? 'Deleting...' : 'Delete User'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

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

@@ -0,0 +1,170 @@
+'use client';
+
+import { RoleSchema } from '@repo/packages-types/role';
+import type { UpdateUser, User } 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 { Pencil } from 'lucide-react';
+import * as React from 'react';
+import { toast } from 'sonner';
+
+import { useUpdateUser } from '@/hooks/api/use-users';
+
+interface UserEditDialogProps {
+  user: User;
+}
+
+export function UserEditDialog({ user }: UserEditDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  const [formData, setFormData] = React.useState<UpdateUser>({
+    name: user.name,
+    email: user.email,
+    role: user.role,
+  });
+
+  const { mutate: updateUser, isPending } = useUpdateUser();
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const changes: UpdateUser = {};
+    if (formData.name !== user.name) changes.name = formData.name;
+    if (formData.email !== user.email) changes.email = formData.email;
+    if (formData.role !== user.role) changes.role = formData.role;
+
+    if (Object.keys(changes).length === 0) {
+      toast.info('No changes to save');
+      return;
+    }
+
+    updateUser(
+      { id: user.id, data: changes },
+      {
+        onSuccess: () => {
+          toast.success('User updated successfully');
+          setOpen(false);
+        },
+        onError: (error) => {
+          toast.error(error.message || 'Failed to update user');
+        },
+      }
+    );
+  };
+
+  React.useEffect(() => {
+    if (open) {
+      setFormData({
+        name: user.name,
+        email: user.email,
+        role: user.role,
+      });
+    }
+  }, [open, user]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <Pencil className="mr-2 h-4 w-4" />
+          Edit
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Edit User</DialogTitle>
+            <DialogDescription>
+              Update user information and role assignment
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="name">Name</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, name: e.target.value }))
+                }
+                placeholder="Enter user name"
+                required
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                value={formData.email}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, email: e.target.value }))
+                }
+                placeholder="user@example.com"
+                required
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="role">Role</Label>
+              <Select
+                value={formData.role}
+                onValueChange={(value) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    role: value as UpdateUser['role'],
+                  }))
+                }
+              >
+                <SelectTrigger id="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 ? 'Saving...' : 'Save changes'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,285 @@
+'use client';
+
+import type { Role } from '@repo/packages-types/role';
+import { RoleSchema } from '@repo/packages-types/role';
+import type { User } from '@repo/packages-types/user';
+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,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@repo/packages-ui/dropdown-menu';
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+} from '@tanstack/react-table';
+import { format } from 'date-fns';
+import { Filter, MoreHorizontal, UserCheck } from 'lucide-react';
+import * as React from 'react';
+
+import { UserCreateDialog } from '@/components/admin/user-create-dialog';
+import { UserDeleteDialog } from '@/components/admin/user-delete-dialog';
+import { UserEditDialog } from '@/components/admin/user-edit-dialog';
+import { useFetchUsers } from '@/hooks/api/use-users';
+
+const getRoleBadgeVariant = (role: Role) => {
+  switch (role) {
+    case 'super_admin':
+      return 'default';
+    case 'admin':
+      return 'secondary';
+    default:
+      return 'outline';
+  }
+};
+
+const getRoleDisplay = (role: Role) => {
+  switch (role) {
+    case 'super_admin':
+      return 'Super Admin';
+    case 'admin':
+      return 'Admin';
+    default:
+      return 'User';
+  }
+};
+
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: 'name',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Name" />
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center gap-2">
+        <div className="bg-primary/10 flex h-8 w-8 items-center justify-center rounded-full">
+          <UserCheck className="text-primary h-4 w-4" />
+        </div>
+        <div className="font-medium">{row.getValue('name')}</div>
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Email" />
+    ),
+    cell: ({ row }) => (
+      <div className="text-muted-foreground font-mono text-sm">
+        {row.getValue('email')}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'role',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Role" />
+    ),
+    cell: ({ row }) => {
+      const role = row.getValue('role') as Role;
+      return (
+        <Badge variant={getRoleBadgeVariant(role)}>
+          {getRoleDisplay(role)}
+        </Badge>
+      );
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Created" />
+    ),
+    cell: ({ row }) => {
+      const date = row.getValue('createdAt') as string | Date;
+      return (
+        <div className="text-muted-foreground text-sm">
+          {format(new Date(date), 'MMM dd, yyyy')}
+        </div>
+      );
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const user = row.original;
+
+      return (
+        <div className="flex items-center justify-end gap-2">
+          <UserEditDialog user={user} />
+          <UserDeleteDialog user={user} />
+          <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={() => {
+                  navigator.clipboard.writeText(user.id);
+                }}
+              >
+                Copy User ID
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => {
+                  navigator.clipboard.writeText(user.email);
+                }}
+              >
+                Copy Email
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];
+
+export function UsersManagementTable() {
+  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 [selectedRoles, setSelectedRoles] = React.useState<Role[]>([]);
+
+  const searchFilter = columnFilters.find((filter) => filter.id === 'name');
+  const searchValue = searchFilter?.value as string | undefined;
+
+  const queryParams: {
+    page: number;
+    limit: number;
+    sortBy: 'name' | 'email' | 'createdAt';
+    sortOrder: 'asc' | 'desc';
+    search?: string;
+  } = {
+    page: pagination.pageIndex + 1,
+    limit: pagination.pageSize,
+    sortBy: (sorting[0]?.id as 'name' | 'email' | 'createdAt') || 'createdAt',
+    sortOrder: sorting[0]?.desc ? 'desc' : 'asc',
+  };
+
+  if (searchValue) {
+    queryParams.search = searchValue;
+  }
+
+  const {
+    data: response,
+    isLoading,
+    isError,
+    error,
+  } = useFetchUsers(queryParams);
+
+  if (isError) {
+    return (
+      <div className="border-destructive/50 bg-destructive/10 rounded-lg border p-4">
+        <p className="text-destructive text-sm">
+          Error loading users: {error?.message || 'Unknown error'}
+        </p>
+      </div>
+    );
+  }
+
+  const allUsers = response?.data || [];
+  const filteredUsers =
+    selectedRoles.length > 0
+      ? allUsers.filter((user) => selectedRoles.includes(user.role))
+      : allUsers;
+
+  const total = response?.pagination?.total || 0;
+
+  const toggleRole = (role: Role) => {
+    setSelectedRoles((prev) =>
+      prev.includes(role) ? prev.filter((r) => r !== role) : [...prev, role]
+    );
+  };
+
+  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" />
+                Filter by Role
+                {selectedRoles.length > 0 && (
+                  <Badge variant="secondary" className="ml-2">
+                    {selectedRoles.length}
+                  </Badge>
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-48">
+              <DropdownMenuLabel>Filter by Role</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {RoleSchema.options.map((role) => (
+                <DropdownMenuCheckboxItem
+                  key={role}
+                  checked={selectedRoles.includes(role)}
+                  onCheckedChange={() => toggleRole(role)}
+                >
+                  {getRoleDisplay(role)}
+                </DropdownMenuCheckboxItem>
+              ))}
+              {selectedRoles.length > 0 && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => setSelectedRoles([])}>
+                    Clear filters
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {selectedRoles.length > 0 && (
+            <div className="text-muted-foreground text-sm">
+              Showing {filteredUsers.length} of {allUsers.length} users
+            </div>
+          )}
+        </div>
+
+        <UserCreateDialog />
+      </div>
+
+      <DataTable
+        columns={columns}
+        data={filteredUsers}
+        pagination={pagination}
+        onPaginationChange={setPagination}
+        sorting={sorting}
+        onSortingChange={setSorting}
+        columnFilters={columnFilters}
+        onColumnFiltersChange={setColumnFilters}
+        rowCount={total}
+        isLoading={isLoading}
+        searchPlaceholder="Search by name or email..."
+        searchColumnId="name"
+      />
+    </div>
+  );
+}

package/template/apps/web/src/components/auth/email-verification-banner.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { Alert, AlertDescription, AlertTitle } from '@repo/packages-ui/alert';
+import { Button } from '@repo/packages-ui/button';
+import { AlertCircle, Mail } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { authClient } from '@/lib/auth';
+
+export function EmailVerificationBanner() {
+  const { data: session } = authClient.useSession();
+  const [isResending, setIsResending] = useState(false);
+
+  if (!session?.user || session.user.emailVerified) {
+    return null;
+  }
+
+  const handleResendEmail = async () => {
+    setIsResending(true);
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/verification/resend`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({}),
+        }
+      );
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.message || 'Failed to resend verification email');
+      }
+
+      toast.success('Verification email sent!', {
+        description: 'Please check your inbox and spam folder.',
+      });
+    } catch (error) {
+      toast.error('Failed to resend verification email', {
+        description:
+          error instanceof Error ? error.message : 'Please try again later',
+      });
+    } finally {
+      setIsResending(false);
+    }
+  };
+
+  return (
+    <Alert className="border-amber-200 bg-amber-50">
+      <AlertCircle className="h-4 w-4 text-amber-600" />
+      <AlertTitle className="text-amber-900">
+        Email Verification Required
+      </AlertTitle>
+      <AlertDescription className="text-amber-700">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <span>
+            Please verify your email address ({session.user.email}) to access
+            all features.
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleResendEmail}
+            disabled={isResending}
+            className="border-amber-300 bg-white text-amber-900 hover:bg-amber-100"
+          >
+            {isResending ? (
+              'Sending...'
+            ) : (
+              <>
+                <Mail className="mr-2 h-4 w-4" />
+                Resend Email
+              </>
+            )}
+          </Button>
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}

package/template/apps/web/src/components/auth/github-button.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Button } from '@repo/packages-ui/button';
+import { useState } from 'react';
+
+import { authClient } from '@/lib/auth';
+
+export function GithubButton() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleGithubSignIn = async () => {
+    setIsLoading(true);
+    await authClient.signIn.social({
+      provider: 'github',
+      callbackURL: `${window.location.origin}/dashboard`,
+    });
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className="w-full"
+      onClick={handleGithubSignIn}
+      isLoading={isLoading}
+    >
+      {!isLoading && (
+        <svg
+          className="mr-2 h-5 w-5"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+        >
+          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+        </svg>
+      )}
+      Continue with GitHub
+    </Button>
+  );
+}