create-einja-app 0.2.15 → 0.2.18

package/templates/default/apps/admin/src/app/dashboard/tasks/_components/tasks-import-dialog.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "{{packageName}}/admin-ui/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const formSchema = z.object({
+  file: z
+    .instanceof(FileList)
+    .refine((files) => files.length > 0, {
+      message: "Please upload a file",
+    })
+    .refine((files) => ["text/csv"].includes(files?.[0]?.type), "Please upload csv format."),
+});
+
+type TaskImportDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function TasksImportDialog({ open, onOpenChange }: TaskImportDialogProps) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { file: undefined },
+  });
+
+  const fileRef = form.register("file");
+
+  const onSubmit = () => {
+    const file = form.getValues("file");
+
+    if (file?.[0]) {
+      const fileDetails = {
+        name: file[0].name,
+        size: file[0].size,
+        type: file[0].type,
+      };
+      toast.success(
+        `You have imported the following file: ${fileDetails.name} (${fileDetails.size} bytes)`
+      );
+    }
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(val) => {
+        onOpenChange(val);
+        form.reset();
+      }}
+    >
+      <DialogContent className="gap-2 sm:max-w-sm">
+        <DialogHeader className="text-start">
+          <DialogTitle>Import Tasks</DialogTitle>
+          <DialogDescription>Import tasks quickly from a CSV file.</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form id="task-import-form" onSubmit={form.handleSubmit(onSubmit)}>
+            <FormField
+              control={form.control}
+              name="file"
+              render={() => (
+                <FormItem className="my-2">
+                  <FormLabel>File</FormLabel>
+                  <FormControl>
+                    <Input type="file" {...fileRef} className="h-8 py-0" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button type="submit" form="task-import-form">
+            Import
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/tasks/_components/tasks-multi-delete-dialog.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "{{packageName}}/admin-ui/ui/alert";
+import { ConfirmDialog } from "{{packageName}}/admin-ui/ui/confirm-dialog";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { Label } from "{{packageName}}/admin-ui/ui/label";
+import type { Table } from "@tanstack/react-table";
+import { AlertTriangle } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+type TaskMultiDeleteDialogProps<TData> = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  table: Table<TData>;
+};
+
+const CONFIRM_WORD = "DELETE";
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export function TasksMultiDeleteDialog<TData>({
+  open,
+  onOpenChange,
+  table,
+}: TaskMultiDeleteDialogProps<TData>) {
+  const [value, setValue] = useState("");
+
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+
+  const handleDelete = () => {
+    if (value.trim() !== CONFIRM_WORD) {
+      toast.error(`Please type "${CONFIRM_WORD}" to confirm.`);
+      return;
+    }
+
+    onOpenChange(false);
+
+    toast.promise(sleep(2000), {
+      loading: "Deleting tasks...",
+      success: () => {
+        setValue("");
+        table.resetRowSelection();
+        return `Deleted ${selectedRows.length} ${selectedRows.length > 1 ? "tasks" : "task"}`;
+      },
+      error: "Error",
+    });
+  };
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      handleConfirm={handleDelete}
+      disabled={value.trim() !== CONFIRM_WORD}
+      title={
+        <span className="text-destructive">
+          <AlertTriangle className="me-1 inline-block stroke-destructive" size={18} /> Delete{" "}
+          {selectedRows.length} {selectedRows.length > 1 ? "tasks" : "task"}
+        </span>
+      }
+      desc={
+        <div className="space-y-4">
+          <p className="mb-2">
+            Are you sure you want to delete the selected tasks? <br />
+            This action cannot be undone.
+          </p>
+
+          <Label className="my-4 flex flex-col items-start gap-1.5">
+            <span className="">Confirm by typing "{CONFIRM_WORD}":</span>
+            <Input
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder={`Type "${CONFIRM_WORD}" to confirm.`}
+            />
+          </Label>
+
+          <Alert variant="destructive">
+            <AlertTitle>Warning!</AlertTitle>
+            <AlertDescription>
+              Please be careful, this operation can not be rolled back.
+            </AlertDescription>
+          </Alert>
+        </div>
+      }
+      confirmText="Delete"
+      destructive
+    />
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/tasks/_components/tasks-mutate-drawer.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { SelectDropdown } from "@/components/shared/select-dropdown";
+import type { Task } from "@/data/tasks";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { RadioGroup, RadioGroupItem } from "{{packageName}}/admin-ui/ui/radio-group";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "{{packageName}}/admin-ui/ui/sheet";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+type TaskMutateDrawerProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentRow?: Task;
+};
+
+const formSchema = z.object({
+  title: z.string().min(1, "Title is required."),
+  status: z.string().min(1, "Please select a status."),
+  label: z.string().min(1, "Please select a label."),
+  priority: z.string().min(1, "Please choose a priority."),
+});
+type TaskForm = z.infer<typeof formSchema>;
+
+export function TasksMutateDrawer({ open, onOpenChange, currentRow }: TaskMutateDrawerProps) {
+  const isUpdate = !!currentRow;
+
+  const form = useForm<TaskForm>({
+    resolver: zodResolver(formSchema),
+    defaultValues: currentRow ?? {
+      title: "",
+      status: "",
+      label: "",
+      priority: "",
+    },
+  });
+
+  const onSubmit = (data: TaskForm) => {
+    onOpenChange(false);
+    form.reset();
+    toast.success(isUpdate ? `Task updated: ${data.title}` : `Task created: ${data.title}`);
+  };
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(v) => {
+        onOpenChange(v);
+        form.reset();
+      }}
+    >
+      <SheetContent className="flex flex-col">
+        <SheetHeader className="text-start">
+          <SheetTitle>{isUpdate ? "Update" : "Create"} Task</SheetTitle>
+          <SheetDescription>
+            {isUpdate
+              ? "Update the task by providing necessary info."
+              : "Add a new task by providing necessary info."}
+            Click save when you&apos;re done.
+          </SheetDescription>
+        </SheetHeader>
+        <Form {...form}>
+          <form
+            id="tasks-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex-1 space-y-6 overflow-y-auto px-4"
+          >
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder="Enter a title" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <SelectDropdown
+                    defaultValue={field.value}
+                    onValueChange={field.onChange}
+                    placeholder="Select dropdown"
+                    items={[
+                      { label: "In Progress", value: "in progress" },
+                      { label: "Backlog", value: "backlog" },
+                      { label: "Todo", value: "todo" },
+                      { label: "Canceled", value: "canceled" },
+                      { label: "Done", value: "done" },
+                    ]}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="label"
+              render={({ field }) => (
+                <FormItem className="relative">
+                  <FormLabel>Label</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                      className="flex flex-col space-y-1"
+                    >
+                      <FormItem className="flex items-center">
+                        <FormControl>
+                          <RadioGroupItem value="documentation" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Documentation</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center">
+                        <FormControl>
+                          <RadioGroupItem value="feature" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Feature</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center">
+                        <FormControl>
+                          <RadioGroupItem value="bug" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Bug</FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="priority"
+              render={({ field }) => (
+                <FormItem className="relative">
+                  <FormLabel>Priority</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                      className="flex flex-col space-y-1"
+                    >
+                      <FormItem className="flex items-center">
+                        <FormControl>
+                          <RadioGroupItem value="high" />
+                        </FormControl>
+                        <FormLabel className="font-normal">High</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center">
+                        <FormControl>
+                          <RadioGroupItem value="medium" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Medium</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center">
+                        <FormControl>
+                          <RadioGroupItem value="low" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Low</FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+        <SheetFooter className="gap-2">
+          <SheetClose asChild>
+            <Button variant="outline">Close</Button>
+          </SheetClose>
+          <Button form="tasks-form" type="submit">
+            Save changes
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/tasks/_components/tasks-page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { tasks } from "@/data/tasks";
+import { Header, Main } from "{{packageName}}/admin-ui/layout";
+import { TasksDialogs } from "./tasks-dialogs";
+import { TasksPrimaryButtons } from "./tasks-primary-buttons";
+import { TasksProvider } from "./tasks-provider";
+import { TasksTable } from "./tasks-table";
+
+export function TasksPage() {
+  return (
+    <TasksProvider>
+      <Header />
+      <Main>
+        <div className="flex flex-1 flex-col gap-4 sm:gap-6">
+          <div className="flex flex-wrap items-end justify-between gap-2">
+            <div>
+              <h2 className="text-2xl font-bold tracking-tight">Tasks</h2>
+              <p className="text-muted-foreground">
+                Here&apos;s a list of your tasks for this month!
+              </p>
+            </div>
+            <TasksPrimaryButtons />
+          </div>
+          <TasksTable data={tasks} />
+        </div>
+      </Main>
+      <TasksDialogs />
+    </TasksProvider>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/tasks/_components/tasks-primary-buttons.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import { Download, Plus } from "lucide-react";
+import { useTasks } from "./tasks-provider";
+
+export function TasksPrimaryButtons() {
+  const { setOpen } = useTasks();
+  return (
+    <div className="flex gap-2">
+      <Button variant="outline" className="space-x-1" onClick={() => setOpen("import")}>
+        <span>Import</span> <Download size={18} />
+      </Button>
+      <Button className="space-x-1" onClick={() => setOpen("create")}>
+        <span>Create</span> <Plus size={18} />
+      </Button>
+    </div>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/tasks/_components/tasks-provider.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { Task } from "@/data/tasks";
+import useDialogState from "@/hooks/use-dialog-state";
+import React, { useState } from "react";
+
+type TasksDialogType = "create" | "update" | "delete" | "import";
+
+type TasksContextType = {
+  open: TasksDialogType | null;
+  setOpen: (str: TasksDialogType | null) => void;
+  currentRow: Task | null;
+  setCurrentRow: React.Dispatch<React.SetStateAction<Task | null>>;
+};
+
+const TasksContext = React.createContext<TasksContextType | null>(null);
+
+export function TasksProvider({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useDialogState<TasksDialogType>(null);
+  const [currentRow, setCurrentRow] = useState<Task | null>(null);
+
+  return (
+    <TasksContext.Provider value={{ open, setOpen, currentRow, setCurrentRow }}>
+      {children}
+    </TasksContext.Provider>
+  );
+}
+
+export const useTasks = () => {
+  const tasksContext = React.useContext(TasksContext);
+
+  if (!tasksContext) {
+    throw new Error("useTasks has to be used within <TasksProvider>");
+  }
+
+  return tasksContext;
+};

package/templates/default/apps/admin/src/app/dashboard/tasks/_components/tasks-table.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { type Task, priorities, statuses } from "@/data/tasks";
+import { DataTablePagination, DataTableToolbar } from "{{packageName}}/admin-ui/data-table";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "{{packageName}}/admin-ui/ui/table";
+import type {
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import { DataTableBulkActions } from "./data-table-bulk-actions";
+import { tasksColumns as columns } from "./tasks-columns";
+
+type DataTableProps = {
+  data: Task[];
+};
+
+export function TasksTable({ data }: DataTableProps) {
+  const [rowSelection, setRowSelection] = useState({});
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [globalFilter, setGlobalFilter] = useState("");
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      globalFilter,
+      pagination,
+    },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: setGlobalFilter,
+    onColumnFiltersChange: setColumnFilters,
+    onPaginationChange: setPagination,
+    globalFilterFn: (row, _columnId, filterValue) => {
+      const id = String(row.getValue("id")).toLowerCase();
+      const title = String(row.getValue("title")).toLowerCase();
+      const searchValue = String(filterValue).toLowerCase();
+
+      return id.includes(searchValue) || title.includes(searchValue);
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  return (
+    <div className={cn("max-sm:has-[div[role='toolbar']]:mb-16", "flex flex-1 flex-col gap-4")}>
+      <DataTableToolbar
+        table={table}
+        searchPlaceholder="Filter by title or ID..."
+        filters={[
+          {
+            columnId: "status",
+            title: "Status",
+            options: statuses,
+          },
+          {
+            columnId: "priority",
+            title: "Priority",
+            options: priorities,
+          },
+        ]}
+      />
+      <div className="overflow-hidden rounded-md border">
+        <Table className="min-w-xl">
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead
+                      key={header.id}
+                      colSpan={header.colSpan}
+                      className={cn(
+                        header.column.columnDef.meta?.className,
+                        header.column.columnDef.meta?.thClassName
+                      )}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      className={cn(
+                        cell.column.columnDef.meta?.className,
+                        cell.column.columnDef.meta?.tdClassName
+                      )}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} className="mt-auto" />
+      <DataTableBulkActions table={table} />
+    </div>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/tasks/page.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+import { TasksPage } from "./_components/tasks-page";
+
+export const metadata: Metadata = {
+  title: "Tasks",
+  description: "Manage your tasks",
+};
+
+// Force dynamic rendering to avoid FileList reference in server component
+export const dynamic = "force-dynamic";
+
+export default function Page() {
+  return <TasksPage />;
+}