create-einja-app 0.2.17 → 0.2.18

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

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

@@ -0,0 +1,28 @@
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "403 - Forbidden",
+  description: "Access Forbidden",
+};
+
+export default function ForbiddenPage() {
+  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">403</h1>
+        <span className="font-medium">Access Forbidden</span>
+        <p className="text-center text-muted-foreground">
+          You don't have necessary permission <br />
+          to view 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>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "500 - Internal Server Error",
+  description: "Something went wrong",
+};
+
+export const dynamic = "force-dynamic";
+
+export default function InternalServerErrorPage() {
+  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">500</h1>
+        <span className="font-medium">Oops! Something went wrong {":)"}</span>
+        <p className="text-center text-muted-foreground">
+          We apologize for the inconvenience. <br /> Please try again later.
+        </p>
+        <div className="mt-6 flex gap-4">
+          <Button variant="outline" asChild>
+            <Link href="/dashboard">Back to Home</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export default function ErrorsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="flex min-h-screen flex-col items-center justify-center">{children}</div>;
+}

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

@@ -0,0 +1,25 @@
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "503 - Maintenance",
+  description: "Website is under maintenance",
+};
+
+export default function MaintenancePage() {
+  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">503</h1>
+        <span className="font-medium">Website is under maintenance!</span>
+        <p className="text-center text-muted-foreground">
+          The site is not available at the moment. <br />
+          We'll be back online shortly.
+        </p>
+        <div className="mt-6 flex gap-4">
+          <Button variant="outline">Learn more</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/_components/analytics-chart.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+
+const data = [
+  {
+    name: "Mon",
+    clicks: Math.floor(Math.random() * 900) + 100,
+    uniques: Math.floor(Math.random() * 700) + 80,
+  },
+  {
+    name: "Tue",
+    clicks: Math.floor(Math.random() * 900) + 100,
+    uniques: Math.floor(Math.random() * 700) + 80,
+  },
+  {
+    name: "Wed",
+    clicks: Math.floor(Math.random() * 900) + 100,
+    uniques: Math.floor(Math.random() * 700) + 80,
+  },
+  {
+    name: "Thu",
+    clicks: Math.floor(Math.random() * 900) + 100,
+    uniques: Math.floor(Math.random() * 700) + 80,
+  },
+  {
+    name: "Fri",
+    clicks: Math.floor(Math.random() * 900) + 100,
+    uniques: Math.floor(Math.random() * 700) + 80,
+  },
+  {
+    name: "Sat",
+    clicks: Math.floor(Math.random() * 900) + 100,
+    uniques: Math.floor(Math.random() * 700) + 80,
+  },
+  {
+    name: "Sun",
+    clicks: Math.floor(Math.random() * 900) + 100,
+    uniques: Math.floor(Math.random() * 700) + 80,
+  },
+];
+
+export function AnalyticsChart() {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <AreaChart data={data}>
+        <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+        <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+        <Area
+          type="monotone"
+          dataKey="clicks"
+          stroke="currentColor"
+          className="text-primary"
+          fill="currentColor"
+          fillOpacity={0.15}
+        />
+        <Area
+          type="monotone"
+          dataKey="uniques"
+          stroke="currentColor"
+          className="text-muted-foreground"
+          fill="currentColor"
+          fillOpacity={0.1}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}