create-einja-app 0.2.17 → 0.2.18

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

@@ -0,0 +1,176 @@
+"use client";
+
+import { showSubmittedData } from "@/lib/show-submitted-data";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "{{packageName}}/admin-ui/ui/select";
+import { Textarea } from "{{packageName}}/admin-ui/ui/textarea";
+import Link from "next/link";
+import { useFieldArray, useForm } from "react-hook-form";
+import { z } from "zod";
+import { ContentSection } from "../_components/content-section";
+
+const profileFormSchema = z.object({
+  username: z
+    .string()
+    .min(2, "Username must be at least 2 characters.")
+    .max(30, "Username must not be longer than 30 characters."),
+  email: z.string().email("Please select a valid email."),
+  bio: z.string().max(160).min(4),
+  urls: z
+    .array(
+      z.object({
+        value: z.string().url("Please enter a valid URL."),
+      })
+    )
+    .optional(),
+});
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>;
+
+const defaultValues: Partial<ProfileFormValues> = {
+  username: "shadcn",
+  email: "m@example.com",
+  bio: "I own a computer.",
+  urls: [{ value: "https://shadcn.com" }, { value: "http://twitter.com/shadcn" }],
+};
+
+export default function ProfilePage() {
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues,
+    mode: "onChange",
+  });
+
+  const { fields, append } = useFieldArray({
+    name: "urls",
+    control: form.control,
+  });
+
+  function onSubmit(data: ProfileFormValues) {
+    showSubmittedData(data);
+  }
+
+  return (
+    <ContentSection title="Profile" desc="This is how others will see you on the site.">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input placeholder="shadcn" {...field} />
+                </FormControl>
+                <FormDescription>
+                  This is your public display name. It can be your real name or a pseudonym. You can
+                  only change this once every 30 days.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select a verified email to display" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="m@example.com">m@example.com</SelectItem>
+                    <SelectItem value="m@google.com">m@google.com</SelectItem>
+                    <SelectItem value="m@support.com">m@support.com</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  You can manage verified email addresses in your{" "}
+                  <Link href="#" className="underline">
+                    email settings
+                  </Link>
+                  .
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="bio"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Bio</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Tell us a little bit about yourself"
+                    className="resize-none"
+                    {...field}
+                  />
+                </FormControl>
+                <FormDescription>
+                  You can <span>@mention</span> other users and organizations to link to them.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div>
+            {fields.map((field, index) => (
+              <FormField
+                control={form.control}
+                key={field.id}
+                name={`urls.${index}.value`}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className={cn(index !== 0 && "sr-only")}>URLs</FormLabel>
+                    <FormDescription className={cn(index !== 0 && "sr-only")}>
+                      Add links to your website, blog, or social media profiles.
+                    </FormDescription>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ))}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="mt-2"
+              onClick={() => append({ value: "" })}
+            >
+              Add URL
+            </Button>
+          </div>
+          <Button type="submit">Update profile</Button>
+        </form>
+      </Form>
+    </ContentSection>
+  );
+}

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

@@ -0,0 +1,183 @@
+"use client";
+
+import { type Task, priorities, statuses } from "@/data/tasks";
+import { DataTableBulkActions as BulkActionsToolbar } from "{{packageName}}/admin-ui/data-table";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "{{packageName}}/admin-ui/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "{{packageName}}/admin-ui/ui/tooltip";
+import type { Table } from "@tanstack/react-table";
+import { ArrowUpDown, CircleArrowUp, Download, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { TasksMultiDeleteDialog } from "./tasks-multi-delete-dialog";
+
+type DataTableBulkActionsProps<TData> = {
+  table: Table<TData>;
+};
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export function DataTableBulkActions<TData>({ table }: DataTableBulkActionsProps<TData>) {
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const selectedRows = table.getFilteredSelectedRowModel().rows;
+
+  const handleBulkStatusChange = (status: string) => {
+    const selectedTasks = selectedRows.map((row) => row.original as Task);
+    toast.promise(sleep(2000), {
+      loading: "Updating status...",
+      success: () => {
+        table.resetRowSelection();
+        return `Status updated to "${status}" for ${selectedTasks.length} task${selectedTasks.length > 1 ? "s" : ""}.`;
+      },
+      error: "Error",
+    });
+    table.resetRowSelection();
+  };
+
+  const handleBulkPriorityChange = (priority: string) => {
+    const selectedTasks = selectedRows.map((row) => row.original as Task);
+    toast.promise(sleep(2000), {
+      loading: "Updating priority...",
+      success: () => {
+        table.resetRowSelection();
+        return `Priority updated to "${priority}" for ${selectedTasks.length} task${selectedTasks.length > 1 ? "s" : ""}.`;
+      },
+      error: "Error",
+    });
+    table.resetRowSelection();
+  };
+
+  const handleBulkExport = () => {
+    const selectedTasks = selectedRows.map((row) => row.original as Task);
+    toast.promise(sleep(2000), {
+      loading: "Exporting tasks...",
+      success: () => {
+        table.resetRowSelection();
+        return `Exported ${selectedTasks.length} task${selectedTasks.length > 1 ? "s" : ""} to CSV.`;
+      },
+      error: "Error",
+    });
+    table.resetRowSelection();
+  };
+
+  return (
+    <>
+      <BulkActionsToolbar table={table} entityName="task">
+        <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="size-8"
+                  aria-label="Update status"
+                  title="Update status"
+                >
+                  <CircleArrowUp />
+                  <span className="sr-only">Update status</span>
+                </Button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Update status</p>
+            </TooltipContent>
+          </Tooltip>
+          <DropdownMenuContent sideOffset={14}>
+            {statuses.map((status) => (
+              <DropdownMenuItem
+                key={status.value}
+                onClick={() => handleBulkStatusChange(status.value)}
+              >
+                {status.icon && <status.icon className="size-4 text-muted-foreground" />}
+                {status.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="size-8"
+                  aria-label="Update priority"
+                  title="Update priority"
+                >
+                  <ArrowUpDown />
+                  <span className="sr-only">Update priority</span>
+                </Button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Update priority</p>
+            </TooltipContent>
+          </Tooltip>
+          <DropdownMenuContent sideOffset={14}>
+            {priorities.map((priority) => (
+              <DropdownMenuItem
+                key={priority.value}
+                onClick={() => handleBulkPriorityChange(priority.value)}
+              >
+                {priority.icon && <priority.icon className="size-4 text-muted-foreground" />}
+                {priority.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => handleBulkExport()}
+              className="size-8"
+              aria-label="Export tasks"
+              title="Export tasks"
+            >
+              <Download />
+              <span className="sr-only">Export tasks</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Export tasks</p>
+          </TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="destructive"
+              size="icon"
+              onClick={() => setShowDeleteConfirm(true)}
+              className="size-8"
+              aria-label="Delete selected tasks"
+              title="Delete selected tasks"
+            >
+              <Trash2 />
+              <span className="sr-only">Delete selected tasks</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Delete selected tasks</p>
+          </TooltipContent>
+        </Tooltip>
+      </BulkActionsToolbar>
+
+      <TasksMultiDeleteDialog
+        open={showDeleteConfirm}
+        onOpenChange={setShowDeleteConfirm}
+        table={table}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,79 @@
+"use client";
+
+import { labels, taskSchema } from "@/data/tasks";
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "{{packageName}}/admin-ui/ui/dropdown-menu";
+import type { Row } from "@tanstack/react-table";
+import { Trash2 } from "lucide-react";
+import { useTasks } from "./tasks-provider";
+
+type DataTableRowActionsProps<TData> = {
+  row: Row<TData>;
+};
+
+export function DataTableRowActions<TData>({ row }: DataTableRowActionsProps<TData>) {
+  const task = taskSchema.parse(row.original);
+
+  const { setOpen, setCurrentRow } = useTasks();
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted">
+          <DotsHorizontalIcon className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[160px]">
+        <DropdownMenuItem
+          onClick={() => {
+            setCurrentRow(task);
+            setOpen("update");
+          }}
+        >
+          Edit
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>Make a copy</DropdownMenuItem>
+        <DropdownMenuItem disabled>Favorite</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuRadioGroup value={task.label}>
+              {labels.map((label) => (
+                <DropdownMenuRadioItem key={label.value} value={label.value}>
+                  {label.label}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={() => {
+            setCurrentRow(task);
+            setOpen("delete");
+          }}
+        >
+          Delete
+          <DropdownMenuShortcut>
+            <Trash2 size={16} />
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,107 @@
+"use client";
+
+import { type Task, labels, priorities, statuses } from "@/data/tasks";
+import { DataTableColumnHeader } from "{{packageName}}/admin-ui/data-table";
+import { Badge } from "{{packageName}}/admin-ui/ui/badge";
+import { Checkbox } from "{{packageName}}/admin-ui/ui/checkbox";
+import type { ColumnDef } from "@tanstack/react-table";
+import { DataTableRowActions } from "./data-table-row-actions";
+
+export const tasksColumns: ColumnDef<Task>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "id",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Task" />,
+    cell: ({ row }) => <div className="w-[80px]">{row.getValue("id")}</div>,
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "title",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Title" />,
+    meta: {
+      className: "ps-1 max-w-0 w-2/3",
+      tdClassName: "ps-4",
+    },
+    cell: ({ row }) => {
+      const label = labels.find((label) => label.value === row.original.label);
+
+      return (
+        <div className="flex space-x-2">
+          {label && <Badge variant="outline">{label.label}</Badge>}
+          <span className="truncate font-medium">{row.getValue("title")}</span>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "status",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
+    meta: { className: "ps-1", tdClassName: "ps-4" },
+    cell: ({ row }) => {
+      const status = statuses.find((status) => status.value === row.getValue("status"));
+
+      if (!status) {
+        return null;
+      }
+
+      return (
+        <div className="flex w-[100px] items-center gap-2">
+          {status.icon && <status.icon className="size-4 text-muted-foreground" />}
+          <span>{status.label}</span>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    accessorKey: "priority",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
+    meta: { className: "ps-1", tdClassName: "ps-3" },
+    cell: ({ row }) => {
+      const priority = priorities.find((priority) => priority.value === row.getValue("priority"));
+
+      if (!priority) {
+        return null;
+      }
+
+      return (
+        <div className="flex items-center gap-2">
+          {priority.icon && <priority.icon className="size-4 text-muted-foreground" />}
+          <span>{priority.label}</span>
+        </div>
+      );
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id));
+    },
+  },
+  {
+    id: "actions",
+    cell: ({ row }) => <DataTableRowActions row={row} />,
+  },
+];

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { ConfirmDialog } from "{{packageName}}/admin-ui/ui/confirm-dialog";
+import { toast } from "sonner";
+import { TasksImportDialog } from "./tasks-import-dialog";
+import { TasksMutateDrawer } from "./tasks-mutate-drawer";
+import { useTasks } from "./tasks-provider";
+
+export function TasksDialogs() {
+  const { open, setOpen, currentRow, setCurrentRow } = useTasks();
+
+  return (
+    <>
+      <TasksMutateDrawer
+        key="task-create"
+        open={open === "create"}
+        onOpenChange={() => setOpen("create")}
+      />
+
+      <TasksImportDialog
+        key="tasks-import"
+        open={open === "import"}
+        onOpenChange={() => setOpen("import")}
+      />
+
+      {currentRow && (
+        <>
+          <TasksMutateDrawer
+            key={`task-update-${currentRow.id}`}
+            open={open === "update"}
+            onOpenChange={() => {
+              setOpen("update");
+              setTimeout(() => {
+                setCurrentRow(null);
+              }, 500);
+            }}
+            currentRow={currentRow}
+          />
+
+          <ConfirmDialog
+            key="task-delete"
+            destructive
+            open={open === "delete"}
+            onOpenChange={() => {
+              setOpen("delete");
+              setTimeout(() => {
+                setCurrentRow(null);
+              }, 500);
+            }}
+            handleConfirm={() => {
+              setOpen(null);
+              setTimeout(() => {
+                setCurrentRow(null);
+              }, 500);
+              toast.success(`The following task has been deleted: ${currentRow.id}`);
+            }}
+            className="max-w-md"
+            title={`Delete this task: ${currentRow.id}?`}
+            desc={
+              <>
+                You are about to delete a task with the ID <strong>{currentRow.id}</strong>. <br />
+                This action cannot be undone.
+              </>
+            }
+            confirmText="Delete"
+          />
+        </>
+      )}
+    </>
+  );
+}