create-einja-app 0.2.17 → 0.2.19

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

@@ -0,0 +1,196 @@
+"use client";
+
+import { showSubmittedData } from "@/lib/show-submitted-data";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import { Checkbox } from "{{packageName}}/admin-ui/ui/checkbox";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { RadioGroup, RadioGroupItem } from "{{packageName}}/admin-ui/ui/radio-group";
+import { Switch } from "{{packageName}}/admin-ui/ui/switch";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { ContentSection } from "../_components/content-section";
+
+const notificationsFormSchema = z.object({
+  type: z.enum(["all", "mentions", "none"], {
+    required_error: "Please select a notification type.",
+  }),
+  mobile: z.boolean().default(false).optional(),
+  communication_emails: z.boolean().default(false).optional(),
+  social_emails: z.boolean().default(false).optional(),
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+});
+
+type NotificationsFormValues = z.infer<typeof notificationsFormSchema>;
+
+const defaultValues: Partial<NotificationsFormValues> = {
+  type: "all",
+  communication_emails: false,
+  marketing_emails: false,
+  social_emails: true,
+  security_emails: true,
+};
+
+export default function NotificationsPage() {
+  const form = useForm<NotificationsFormValues>({
+    resolver: zodResolver(notificationsFormSchema),
+    defaultValues,
+  });
+
+  function onSubmit(data: NotificationsFormValues) {
+    showSubmittedData(data);
+  }
+
+  return (
+    <ContentSection title="Notifications" desc="Configure how you receive notifications.">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="type"
+            render={({ field }) => (
+              <FormItem className="space-y-3">
+                <FormLabel>Notify me about...</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                    className="flex flex-col space-y-1"
+                  >
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="all" />
+                      </FormControl>
+                      <FormLabel className="font-normal">All new messages</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="mentions" />
+                      </FormControl>
+                      <FormLabel className="font-normal">Direct messages and mentions</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="none" />
+                      </FormControl>
+                      <FormLabel className="font-normal">Nothing</FormLabel>
+                    </FormItem>
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div>
+            <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="communication_emails"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Communication emails</FormLabel>
+                      <FormDescription>Receive emails about your account activity.</FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="marketing_emails"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Marketing emails</FormLabel>
+                      <FormDescription>
+                        Receive emails about new products, features, and more.
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="social_emails"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Social emails</FormLabel>
+                      <FormDescription>
+                        Receive emails for friend requests, follows, and more.
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="security_emails"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Security emails</FormLabel>
+                      <FormDescription>
+                        Receive emails about your account activity and security.
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        disabled
+                        aria-readonly
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+          <FormField
+            control={form.control}
+            name="mobile"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+                <FormControl>
+                  <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+                </FormControl>
+                <div className="space-y-1 leading-none">
+                  <FormLabel>Use different settings for my mobile devices</FormLabel>
+                  <FormDescription>
+                    You can manage your mobile notifications in the{" "}
+                    <Link href="/dashboard/settings" className="underline">
+                      mobile settings
+                    </Link>{" "}
+                    page.
+                  </FormDescription>
+                </div>
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Update notifications</Button>
+        </form>
+      </Form>
+    </ContentSection>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function SettingsPage() {
+  redirect("/dashboard/settings/profile");
+}

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>
+  );
+}