create-einja-app 0.2.17 → 0.2.18

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

@@ -0,0 +1,173 @@
+"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 {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "{{packageName}}/admin-ui/ui/command";
+import { DatePicker } from "{{packageName}}/admin-ui/ui/date-picker";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "{{packageName}}/admin-ui/ui/popover";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { ContentSection } from "../_components/content-section";
+
+const languages = [
+  { label: "English", value: "en" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Spanish", value: "es" },
+  { label: "Portuguese", value: "pt" },
+  { label: "Russian", value: "ru" },
+  { label: "Japanese", value: "ja" },
+  { label: "Korean", value: "ko" },
+  { label: "Chinese", value: "zh" },
+] as const;
+
+const accountFormSchema = z.object({
+  name: z
+    .string()
+    .min(2, "Name must be at least 2 characters.")
+    .max(30, "Name must not be longer than 30 characters."),
+  dob: z.date({
+    required_error: "Please select your date of birth.",
+  }),
+  language: z.string({
+    required_error: "Please select a language.",
+  }),
+});
+
+type AccountFormValues = z.infer<typeof accountFormSchema>;
+
+const defaultValues: Partial<AccountFormValues> = {
+  name: "",
+};
+
+export default function AccountPage() {
+  const form = useForm<AccountFormValues>({
+    resolver: zodResolver(accountFormSchema),
+    defaultValues,
+  });
+
+  function onSubmit(data: AccountFormValues) {
+    showSubmittedData(data);
+  }
+
+  return (
+    <ContentSection
+      title="Account"
+      desc="Update your account settings. Set your preferred language and timezone."
+    >
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="Your name" {...field} />
+                </FormControl>
+                <FormDescription>
+                  This is the name that will be displayed on your profile and in emails.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="dob"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Date of birth</FormLabel>
+                <DatePicker date={field.value} onDateChange={field.onChange} />
+                <FormDescription>Your date of birth is used to calculate your age.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="language"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Language</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        // biome-ignore lint/a11y/useSemanticElements: shadcn/ui Combobox pattern
+                        role="combobox"
+                        className={cn(
+                          "w-[200px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? languages.find((language) => language.value === field.value)?.label
+                          : "Select language"}
+                        <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[200px] p-0">
+                    <Command>
+                      <CommandInput placeholder="Search language..." />
+                      <CommandEmpty>No language found.</CommandEmpty>
+                      <CommandGroup>
+                        <CommandList>
+                          {languages.map((language) => (
+                            <CommandItem
+                              value={language.label}
+                              key={language.value}
+                              onSelect={() => {
+                                form.setValue("language", language.value);
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 size-4",
+                                  language.value === field.value ? "opacity-100" : "opacity-0"
+                                )}
+                              />
+                              {language.label}
+                            </CommandItem>
+                          ))}
+                        </CommandList>
+                      </CommandGroup>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                <FormDescription>
+                  This is the language that will be used in the dashboard.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Update account</Button>
+        </form>
+      </Form>
+    </ContentSection>
+  );
+}

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

@@ -0,0 +1,156 @@
+"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, buttonVariants } from "{{packageName}}/admin-ui/ui/button";
+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 { ChevronDown } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { ContentSection } from "../_components/content-section";
+
+const fonts = ["inter", "manrope", "system"] as const;
+
+const appearanceFormSchema = z.object({
+  theme: z.enum(["light", "dark"], {
+    required_error: "Please select a theme.",
+  }),
+  font: z.enum(fonts, {
+    required_error: "Please select a font.",
+  }),
+});
+
+type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
+
+const defaultValues: Partial<AppearanceFormValues> = {
+  theme: "light",
+  font: "inter",
+};
+
+export default function AppearancePage() {
+  const form = useForm<AppearanceFormValues>({
+    resolver: zodResolver(appearanceFormSchema),
+    defaultValues,
+  });
+
+  function onSubmit(data: AppearanceFormValues) {
+    showSubmittedData(data);
+  }
+
+  return (
+    <ContentSection
+      title="Appearance"
+      desc="Customize the appearance of the app. Automatically switch between day and night themes."
+    >
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="font"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Font</FormLabel>
+                <div className="relative w-max">
+                  <FormControl>
+                    <select
+                      className={cn(
+                        buttonVariants({ variant: "outline" }),
+                        "w-[200px] appearance-none font-normal capitalize"
+                      )}
+                      {...field}
+                    >
+                      {fonts.map((font) => (
+                        <option key={font} value={font}>
+                          {font}
+                        </option>
+                      ))}
+                    </select>
+                  </FormControl>
+                  <ChevronDown className="pointer-events-none absolute right-3 top-2.5 size-4 opacity-50" />
+                </div>
+                <FormDescription>Set the font you want to use in the dashboard.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="theme"
+            render={({ field }) => (
+              <FormItem className="space-y-1">
+                <FormLabel>Theme</FormLabel>
+                <FormDescription>Select the theme for the dashboard.</FormDescription>
+                <FormMessage />
+                <RadioGroup
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  className="grid max-w-md grid-cols-2 gap-8 pt-2"
+                >
+                  <FormItem>
+                    <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
+                      <FormControl>
+                        <RadioGroupItem value="light" className="sr-only" />
+                      </FormControl>
+                      <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
+                        <div className="space-y-2 rounded-sm bg-[#ecedef] p-2">
+                          <div className="space-y-2 rounded-md bg-white p-2 shadow-sm">
+                            <div className="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
+                            <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                          </div>
+                          <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
+                            <div className="size-4 rounded-full bg-[#ecedef]" />
+                            <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                          </div>
+                          <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
+                            <div className="size-4 rounded-full bg-[#ecedef]" />
+                            <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                          </div>
+                        </div>
+                      </div>
+                      <span className="block w-full p-2 text-center font-normal">Light</span>
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem>
+                    <FormLabel className="[&:has([data-state=checked])>div]:border-primary">
+                      <FormControl>
+                        <RadioGroupItem value="dark" className="sr-only" />
+                      </FormControl>
+                      <div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
+                        <div className="space-y-2 rounded-sm bg-slate-950 p-2">
+                          <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                            <div className="h-2 w-[80px] rounded-lg bg-slate-400" />
+                            <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
+                          </div>
+                          <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                            <div className="size-4 rounded-full bg-slate-400" />
+                            <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
+                          </div>
+                          <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                            <div className="size-4 rounded-full bg-slate-400" />
+                            <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
+                          </div>
+                        </div>
+                      </div>
+                      <span className="block w-full p-2 text-center font-normal">Dark</span>
+                    </FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Update preferences</Button>
+        </form>
+      </Form>
+    </ContentSection>
+  );
+}

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

@@ -0,0 +1,125 @@
+"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 { useForm } from "react-hook-form";
+import { z } from "zod";
+import { ContentSection } from "../_components/content-section";
+
+const items = [
+  {
+    id: "recents",
+    label: "Recents",
+  },
+  {
+    id: "home",
+    label: "Home",
+  },
+  {
+    id: "applications",
+    label: "Applications",
+  },
+  {
+    id: "desktop",
+    label: "Desktop",
+  },
+  {
+    id: "downloads",
+    label: "Downloads",
+  },
+  {
+    id: "documents",
+    label: "Documents",
+  },
+] as const;
+
+const displayFormSchema = z.object({
+  items: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "You have to select at least one item.",
+  }),
+});
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>;
+
+const defaultValues: Partial<DisplayFormValues> = {
+  items: ["recents", "home"],
+};
+
+export default function DisplayPage() {
+  const form = useForm<DisplayFormValues>({
+    resolver: zodResolver(displayFormSchema),
+    defaultValues,
+  });
+
+  function onSubmit(data: DisplayFormValues) {
+    showSubmittedData(data);
+  }
+
+  return (
+    <ContentSection
+      title="Display"
+      desc="Turn items on or off to control what's displayed in the app."
+    >
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="items"
+            render={() => (
+              <FormItem>
+                <div className="mb-4">
+                  <FormLabel className="text-base">Sidebar</FormLabel>
+                  <FormDescription>
+                    Select the items you want to display in the sidebar.
+                  </FormDescription>
+                </div>
+                {items.map((item) => (
+                  <FormField
+                    key={item.id}
+                    control={form.control}
+                    name="items"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key={item.id}
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes(item.id)}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, item.id])
+                                  : field.onChange(
+                                      field.value?.filter((value) => value !== item.id)
+                                    );
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal">{item.label}</FormLabel>
+                        </FormItem>
+                      );
+                    }}
+                  />
+                ))}
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Update display</Button>
+        </form>
+      </Form>
+    </ContentSection>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { Header, Main } from "{{packageName}}/admin-ui/layout";
+import { Separator } from "{{packageName}}/admin-ui/ui/separator";
+import { SidebarNav } from "./_components/sidebar-nav";
+
+export default function SettingsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Header />
+      <Main fixed>
+        <div className="space-y-0.5">
+          <h1 className="text-2xl font-bold tracking-tight md:text-3xl">Settings</h1>
+          <p className="text-muted-foreground">
+            Manage your account settings and set e-mail preferences.
+          </p>
+        </div>
+        <Separator className="my-4 lg:my-6" />
+        <div className="flex flex-1 flex-col space-y-2 overflow-hidden md:space-y-2 lg:flex-row lg:space-y-0 lg:space-x-12">
+          <aside className="top-0 lg:sticky lg:w-1/5">
+            <SidebarNav />
+          </aside>
+          <div className="flex w-full overflow-y-hidden p-1 pr-4">{children}</div>
+        </div>
+      </Main>
+    </>
+  );
+}

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