create-einja-app 0.2.17 → 0.2.19

package/templates/default/apps/admin/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@repo/admin",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "rm -rf .next && next dev --turbopack --port ${PORT_ADMIN:-4000}",
+    "build": "next build",
+    "start": "next start",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write",
+    "format": "biome format .",
+    "format:fix": "biome format --write .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.1.1",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@repo/admin-ui": "workspace:*",
+    "@repo/front-core": "workspace:*",
+    "@repo/server-core": "workspace:*",
+    "@tailwindcss/postcss": "^4.1.10",
+    "@tanstack/react-query": "^5.81.5",
+    "@tanstack/react-table": "^8.21.3",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.523.0",
+    "next": "15.3.3",
+    "next-auth": "^5.0.0-beta.28",
+    "next-themes": "^0.4.6",
+    "postcss": "^8.5.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.59.0",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.10",
+    "zod": "^3.25.67"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@faker-js/faker": "^9.0.0",
+    "@repo/config": "workspace:*",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tw-animate-css": "^1.3.4",
+    "typescript": "^5",
+    "vitest": "^3.2.2"
+  }
+}

package/templates/default/apps/admin/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/templates/default/apps/admin/src/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "{{packageName}}/admin-ui/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { ArrowRight, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+  email: z.string().email("Invalid email address").min(1, "Please enter your email"),
+});
+
+export default function ForgotPasswordPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { email: "" },
+  });
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    setIsLoading(true);
+    console.log("Forgot Password Data:", data);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      form.reset();
+      alert(`Email sent to ${data.email}`);
+      router.push("/otp");
+    }, 2000);
+  }
+
+  return (
+    <Card className="gap-4">
+      <CardHeader>
+        <CardTitle className="text-lg tracking-tight">Forgot Password</CardTitle>
+        <CardDescription>
+          Enter your registered email and <br /> we will send you a link to reset your password.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={cn("grid gap-2")}>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="name@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button className="mt-2" disabled={isLoading}>
+              Continue
+              {isLoading ? <Loader2 className="animate-spin" /> : <ArrowRight />}
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+      <CardFooter>
+        <p className="mx-auto px-8 text-center text-sm text-balance text-muted-foreground">
+          Don&apos;t have an account?{" "}
+          <Link href="/sign-up" className="underline underline-offset-4 hover:text-primary">
+            Sign up
+          </Link>
+          .
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/templates/default/apps/admin/src/app/(auth)/layout.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+interface AuthLayoutProps {
+  children: ReactNode;
+}
+
+export default function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <div className="container grid h-svh max-w-none items-center justify-center">
+      <div className="mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8">
+        <div className="mb-4 flex items-center justify-center">
+          <h1 className="text-xl font-medium">Admin Portal</h1>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

package/templates/default/apps/admin/src/app/(auth)/otp/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "{{packageName}}/admin-ui/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "{{packageName}}/admin-ui/ui/input-otp";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+  otp: z.string().min(6, "Please enter the 6-digit code").max(6, "Please enter the 6-digit code"),
+});
+
+export default function OtpPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { otp: "" },
+  });
+
+  const otp = form.watch("otp");
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    setIsLoading(true);
+    console.log("OTP Data:", data);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      alert(`OTP verified: ${data.otp}`);
+      router.push("/");
+    }, 1000);
+  }
+
+  return (
+    <Card className="gap-4">
+      <CardHeader>
+        <CardTitle className="text-base tracking-tight">Two-factor Authentication</CardTitle>
+        <CardDescription>
+          Please enter the authentication code. <br /> We have sent the authentication code to your
+          email.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={cn("grid gap-2")}>
+            <FormField
+              control={form.control}
+              name="otp"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="sr-only">One-Time Password</FormLabel>
+                  <FormControl>
+                    <InputOTP
+                      maxLength={6}
+                      {...field}
+                      containerClassName="justify-between sm:[&>[data-slot='input-otp-group']>div]:w-12"
+                    >
+                      <InputOTPGroup>
+                        <InputOTPSlot index={0} />
+                        <InputOTPSlot index={1} />
+                      </InputOTPGroup>
+                      <InputOTPSeparator />
+                      <InputOTPGroup>
+                        <InputOTPSlot index={2} />
+                        <InputOTPSlot index={3} />
+                      </InputOTPGroup>
+                      <InputOTPSeparator />
+                      <InputOTPGroup>
+                        <InputOTPSlot index={4} />
+                        <InputOTPSlot index={5} />
+                      </InputOTPGroup>
+                    </InputOTP>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button className="mt-2" disabled={otp.length < 6 || isLoading}>
+              Verify
+            </Button>
+          </form>
+        </Form>
+      </CardContent>
+      <CardFooter>
+        <p className="px-8 text-center text-sm text-muted-foreground">
+          Haven&apos;t received it?{" "}
+          <Link href="/sign-in" className="underline underline-offset-4 hover:text-primary">
+            Resend a new code
+          </Link>
+          .
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/templates/default/apps/admin/src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "{{packageName}}/admin-ui/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { PasswordInput } from "{{packageName}}/admin-ui/ui/password-input";
+import { Separator } from "{{packageName}}/admin-ui/ui/separator";
+import { Loader2, LogIn } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+  email: z.string().email("Invalid email address").min(1, "Please enter your email"),
+  password: z
+    .string()
+    .min(1, "Please enter your password")
+    .min(7, "Password must be at least 7 characters long"),
+});
+
+export default function SignInPage() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    setIsLoading(true);
+    console.log("Sign In Data:", data);
+
+    // Simulate async operation
+    setTimeout(() => {
+      setIsLoading(false);
+      alert(`Welcome back, ${data.email}!`);
+    }, 2000);
+  }
+
+  return (
+    <Card className="gap-4">
+      <CardHeader>
+        <CardTitle className="text-lg tracking-tight">Sign in</CardTitle>
+        <CardDescription>
+          Enter your email and password below to <br />
+          log into your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={cn("grid gap-3")}>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="name@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem className="relative">
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <PasswordInput placeholder="********" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                  <Link
+                    href="/forgot-password"
+                    className="absolute end-0 -top-0.5 text-sm font-medium text-muted-foreground hover:opacity-75"
+                  >
+                    Forgot password?
+                  </Link>
+                </FormItem>
+              )}
+            />
+            <Button className="mt-2" disabled={isLoading}>
+              {isLoading ? <Loader2 className="animate-spin" /> : <LogIn />}
+              Sign in
+            </Button>
+
+            <div className="relative my-2">
+              <div className="absolute inset-0 flex items-center">
+                <Separator />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <Button variant="outline" type="button" disabled={isLoading}>
+                GitHub
+              </Button>
+              <Button variant="outline" type="button" disabled={isLoading}>
+                Google
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+      <CardFooter>
+        <p className="px-8 text-center text-sm text-muted-foreground">
+          By clicking sign in, you agree to our{" "}
+          <a href="/terms" className="underline underline-offset-4 hover:text-primary">
+            Terms of Service
+          </a>{" "}
+          and{" "}
+          <a href="/privacy" className="underline underline-offset-4 hover:text-primary">
+            Privacy Policy
+          </a>
+          .
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/templates/default/apps/admin/src/app/(auth)/sign-up/page.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cn } from "{{packageName}}/admin-ui/lib/utils";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "{{packageName}}/admin-ui/ui/card";
+import { Checkbox } from "{{packageName}}/admin-ui/ui/checkbox";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "{{packageName}}/admin-ui/ui/form";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import { PasswordInput } from "{{packageName}}/admin-ui/ui/password-input";
+import { Separator } from "{{packageName}}/admin-ui/ui/separator";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z
+  .object({
+    name: z.string().min(1, "Please enter your name"),
+    email: z.string().email("Invalid email address").min(1, "Please enter your email"),
+    password: z
+      .string()
+      .min(1, "Please enter your password")
+      .min(7, "Password must be at least 7 characters long"),
+    confirmPassword: z.string().min(1, "Please confirm your password"),
+    terms: z.boolean().refine((val) => val === true, {
+      message: "You must accept the terms and conditions",
+    }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ["confirmPassword"],
+  });
+
+export default function SignUpPage() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      password: "",
+      confirmPassword: "",
+      terms: false,
+    },
+  });
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    setIsLoading(true);
+    console.log("Sign Up Data:", data);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      alert(`Account created for ${data.email}!`);
+    }, 2000);
+  }
+
+  return (
+    <Card className="gap-4">
+      <CardHeader>
+        <CardTitle className="text-lg tracking-tight">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email and password to create an account. <br />
+          Already have an account?{" "}
+          <Link href="/sign-in" className="underline underline-offset-4 hover:text-primary">
+            Sign In
+          </Link>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={cn("grid gap-3")}>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="John Doe" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="name@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <PasswordInput placeholder="********" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="confirmPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm Password</FormLabel>
+                  <FormControl>
+                    <PasswordInput placeholder="********" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="terms"
+              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>
+                      I agree to the{" "}
+                      <a href="/terms" className="underline underline-offset-4 hover:text-primary">
+                        Terms and Conditions
+                      </a>
+                    </FormLabel>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <Button className="mt-2" disabled={isLoading}>
+              Create Account
+            </Button>
+
+            <div className="relative my-2">
+              <div className="absolute inset-0 flex items-center">
+                <Separator />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <Button variant="outline" className="w-full" type="button" disabled={isLoading}>
+                GitHub
+              </Button>
+              <Button variant="outline" className="w-full" type="button" disabled={isLoading}>
+                Google
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+      <CardFooter>
+        <p className="px-8 text-center text-sm text-muted-foreground">
+          By creating an account, you agree to our{" "}
+          <a href="/terms" className="underline underline-offset-4 hover:text-primary">
+            Terms of Service
+          </a>{" "}
+          and{" "}
+          <a href="/privacy" className="underline underline-offset-4 hover:text-primary">
+            Privacy Policy
+          </a>
+          .
+        </p>
+      </CardFooter>
+    </Card>
+  );
+}

package/templates/default/apps/admin/src/app/(errors)/401/page.tsx

@@ -0,0 +1,27 @@
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "401 - Unauthorized",
+  description: "Unauthorized Access",
+};
+
+export default function UnauthorizedPage() {
+  return (
+    <div className="h-svh">
+      <div className="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
+        <h1 className="text-[7rem] font-bold leading-tight">401</h1>
+        <span className="font-medium">Unauthorized Access</span>
+        <p className="text-center text-muted-foreground">
+          Please log in with the appropriate credentials <br /> to access this resource.
+        </p>
+        <div className="mt-6 flex gap-4">
+          <Button variant="outline" asChild>
+            <Link href="/dashboard">Back to Home</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}