create-blitzpack 0.1.0 → 0.1.2

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

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

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

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

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

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