create-einja-app 0.2.17 → 0.2.18

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

@@ -0,0 +1,182 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "{{packageName}}/admin-ui/ui/card";
+import { AnalyticsChart } from "./analytics-chart";
+
+export function Analytics() {
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Traffic Overview</CardTitle>
+          <CardDescription>Weekly clicks and unique visitors</CardDescription>
+        </CardHeader>
+        <CardContent className="px-6">
+          <AnalyticsChart />
+        </CardContent>
+      </Card>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Total Clicks</CardTitle>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="h-4 w-4 text-muted-foreground"
+              role="img"
+              aria-label="Chart icon"
+            >
+              <path d="M3 3v18h18" />
+              <path d="M7 15l4-4 4 4 4-6" />
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">1,248</div>
+            <p className="text-xs text-muted-foreground">+12.4% vs last week</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Unique Visitors</CardTitle>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="h-4 w-4 text-muted-foreground"
+              role="img"
+              aria-label="User icon"
+            >
+              <circle cx="12" cy="7" r="4" />
+              <path d="M6 21v-2a6 6 0 0 1 12 0v2" />
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">832</div>
+            <p className="text-xs text-muted-foreground">+5.8% vs last week</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Bounce Rate</CardTitle>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="h-4 w-4 text-muted-foreground"
+              role="img"
+              aria-label="Activity icon"
+            >
+              <path d="M3 12h6l3 6 3-6h6" />
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">42%</div>
+            <p className="text-xs text-muted-foreground">-3.2% vs last week</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Avg. Session</CardTitle>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="h-4 w-4 text-muted-foreground"
+              role="img"
+              aria-label="Clock icon"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 6v6l4 2" />
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">3m 24s</div>
+            <p className="text-xs text-muted-foreground">+18s vs last week</p>
+          </CardContent>
+        </Card>
+      </div>
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-7">
+        <Card className="col-span-1 lg:col-span-4">
+          <CardHeader>
+            <CardTitle>Referrers</CardTitle>
+            <CardDescription>Top sources driving traffic</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SimpleBarList
+              items={[
+                { name: "Direct", value: 512 },
+                { name: "Product Hunt", value: 238 },
+                { name: "Twitter", value: 174 },
+                { name: "Blog", value: 104 },
+              ]}
+              barClass="bg-primary"
+              valueFormatter={(n) => `${n}`}
+            />
+          </CardContent>
+        </Card>
+        <Card className="col-span-1 lg:col-span-3">
+          <CardHeader>
+            <CardTitle>Devices</CardTitle>
+            <CardDescription>How users access your app</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <SimpleBarList
+              items={[
+                { name: "Desktop", value: 74 },
+                { name: "Mobile", value: 22 },
+                { name: "Tablet", value: 4 },
+              ]}
+              barClass="bg-muted-foreground"
+              valueFormatter={(n) => `${n}%`}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function SimpleBarList({
+  items,
+  valueFormatter,
+  barClass,
+}: {
+  items: { name: string; value: number }[];
+  valueFormatter: (n: number) => string;
+  barClass: string;
+}) {
+  const max = Math.max(...items.map((i) => i.value), 1);
+  return (
+    <ul className="space-y-3">
+      {items.map((i) => {
+        const width = `${Math.round((i.value / max) * 100)}%`;
+        return (
+          <li key={i.name} className="flex items-center justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <div className="mb-1 truncate text-xs text-muted-foreground">{i.name}</div>
+              <div className="h-2.5 w-full rounded-full bg-muted">
+                <div className={`h-2.5 rounded-full ${barClass}`} style={{ width }} />
+              </div>
+            </div>
+            <div className="ps-2 text-xs font-medium tabular-nums">{valueFormatter(i.value)}</div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { Header } from "{{packageName}}/admin-ui/layout";
+import { Main } from "{{packageName}}/admin-ui/layout";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "{{packageName}}/admin-ui/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "{{packageName}}/admin-ui/ui/tabs";
+import { Download } from "lucide-react";
+import { Analytics } from "./analytics";
+import { MetricCards } from "./metric-cards";
+import { OverviewChart } from "./overview-chart";
+import { RecentSales } from "./recent-sales";
+
+export function DashboardPage() {
+  return (
+    <>
+      {/* ===== Top Heading ===== */}
+      <Header>
+        <div className="mb-2 flex items-center justify-between space-y-2">
+          <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
+          <div className="flex items-center space-x-2">
+            <Button>
+              <Download className="mr-2 h-4 w-4" />
+              Download
+            </Button>
+          </div>
+        </div>
+      </Header>
+
+      {/* ===== Main ===== */}
+      <Main>
+        <Tabs orientation="vertical" defaultValue="overview" className="space-y-4">
+          <div className="w-full overflow-x-auto pb-2">
+            <TabsList>
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="analytics">Analytics</TabsTrigger>
+              <TabsTrigger value="reports" disabled>
+                Reports
+              </TabsTrigger>
+              <TabsTrigger value="notifications" disabled>
+                Notifications
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="overview" className="space-y-4">
+            <MetricCards />
+            <div className="grid grid-cols-1 gap-4 lg:grid-cols-7">
+              <Card className="col-span-1 lg:col-span-4">
+                <CardHeader>
+                  <CardTitle>Overview</CardTitle>
+                </CardHeader>
+                <CardContent className="ps-2">
+                  <OverviewChart />
+                </CardContent>
+              </Card>
+              <Card className="col-span-1 lg:col-span-3">
+                <CardHeader>
+                  <CardTitle>Recent Sales</CardTitle>
+                  <CardDescription>You made 265 sales this month.</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <RecentSales />
+                </CardContent>
+              </Card>
+            </div>
+          </TabsContent>
+          <TabsContent value="analytics" className="space-y-4">
+            <Analytics />
+          </TabsContent>
+        </Tabs>
+      </Main>
+    </>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/_components/metric-cards.tsx

@@ -0,0 +1,49 @@
+import { Card, CardContent, CardHeader, CardTitle } from "{{packageName}}/admin-ui/ui/card";
+import { Activity, CreditCard, DollarSign, Users } from "lucide-react";
+
+export function MetricCards() {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
+          <DollarSign className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">$45,231.89</div>
+          <p className="text-xs text-muted-foreground">+20.1% from last month</p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
+          <Users className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+2350</div>
+          <p className="text-xs text-muted-foreground">+180.1% from last month</p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Sales</CardTitle>
+          <CreditCard className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+12,234</div>
+          <p className="text-xs text-muted-foreground">+19% from last month</p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Active Now</CardTitle>
+          <Activity className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+573</div>
+          <p className="text-xs text-muted-foreground">+201 since last hour</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+"use client";
+
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+
+const data = [
+  {
+    name: "Jan",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Feb",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Mar",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Apr",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "May",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Jun",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Jul",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Aug",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Sep",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Oct",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Nov",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+  {
+    name: "Dec",
+    total: Math.floor(Math.random() * 5000) + 1000,
+  },
+];
+
+export function OverviewChart() {
+  return (
+    <ResponsiveContainer width="100%" height={350}>
+      <BarChart data={data}>
+        <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
+        <YAxis
+          direction="ltr"
+          stroke="#888888"
+          fontSize={12}
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={(value) => `$${value}`}
+        />
+        <Bar dataKey="total" fill="currentColor" radius={[4, 4, 0, 0]} className="fill-primary" />
+      </BarChart>
+    </ResponsiveContainer>
+  );
+}

package/templates/default/apps/admin/src/app/dashboard/_components/recent-sales.tsx

@@ -0,0 +1,75 @@
+import { Avatar, AvatarFallback, AvatarImage } from "{{packageName}}/admin-ui/ui/avatar";
+
+export function RecentSales() {
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center gap-4">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/01.png" alt="Avatar" />
+          <AvatarFallback>OM</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-1 flex-wrap items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-sm leading-none font-medium">Olivia Martin</p>
+            <p className="text-sm text-muted-foreground">olivia.martin@email.com</p>
+          </div>
+          <div className="font-medium">+$1,999.00</div>
+        </div>
+      </div>
+      <div className="flex items-center gap-4">
+        <Avatar className="flex h-9 w-9 items-center justify-center space-y-0 border">
+          <AvatarImage src="/avatars/02.png" alt="Avatar" />
+          <AvatarFallback>JL</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-1 flex-wrap items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-sm leading-none font-medium">Jackson Lee</p>
+            <p className="text-sm text-muted-foreground">jackson.lee@email.com</p>
+          </div>
+          <div className="font-medium">+$39.00</div>
+        </div>
+      </div>
+      <div className="flex items-center gap-4">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/03.png" alt="Avatar" />
+          <AvatarFallback>IN</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-1 flex-wrap items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-sm leading-none font-medium">Isabella Nguyen</p>
+            <p className="text-sm text-muted-foreground">isabella.nguyen@email.com</p>
+          </div>
+          <div className="font-medium">+$299.00</div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/04.png" alt="Avatar" />
+          <AvatarFallback>WK</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-1 flex-wrap items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-sm leading-none font-medium">William Kim</p>
+            <p className="text-sm text-muted-foreground">will@email.com</p>
+          </div>
+          <div className="font-medium">+$99.00</div>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/avatars/05.png" alt="Avatar" />
+          <AvatarFallback>SD</AvatarFallback>
+        </Avatar>
+        <div className="flex flex-1 flex-wrap items-center justify-between">
+          <div className="space-y-1">
+            <p className="text-sm leading-none font-medium">Sofia Davis</p>
+            <p className="text-sm text-muted-foreground">sofia.davis@email.com</p>
+          </div>
+          <div className="font-medium">+$39.00</div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,135 @@
+"use client";
+
+import { apps } from "@/data/apps";
+import { Header, Main } from "{{packageName}}/admin-ui/layout";
+import { Button } from "{{packageName}}/admin-ui/ui/button";
+import { Input } from "{{packageName}}/admin-ui/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "{{packageName}}/admin-ui/ui/select";
+import { Separator } from "{{packageName}}/admin-ui/ui/separator";
+import { ArrowDownAZ, ArrowUpAZ, SlidersHorizontal } from "lucide-react";
+import { type ChangeEvent, useState } from "react";
+
+type AppType = "all" | "connected" | "notConnected";
+
+const appText = new Map<AppType, string>([
+  ["all", "All Apps"],
+  ["connected", "Connected"],
+  ["notConnected", "Not Connected"],
+]);
+
+export function AppsPage() {
+  const [sort, setSort] = useState<"asc" | "desc">("asc");
+  const [appType, setAppType] = useState<AppType>("all");
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredApps = apps
+    .sort((a, b) => (sort === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)))
+    .filter((app) =>
+      appType === "connected" ? app.connected : appType === "notConnected" ? !app.connected : true
+    )
+    .filter((app) => app.name.toLowerCase().includes(searchTerm.toLowerCase()));
+
+  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  const handleTypeChange = (value: AppType) => {
+    setAppType(value);
+  };
+
+  const handleSortChange = (value: "asc" | "desc") => {
+    setSort(value);
+  };
+
+  return (
+    <>
+      {/* ===== Top Heading ===== */}
+      <Header>
+        <div className="flex items-center gap-4">
+          <h1 className="text-2xl font-bold tracking-tight">Apps</h1>
+        </div>
+      </Header>
+
+      {/* ===== Content ===== */}
+      <Main fixed>
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">App Integrations</h1>
+          <p className="text-muted-foreground">
+            Here&apos;s a list of your apps for the integration!
+          </p>
+        </div>
+        <div className="my-4 flex items-end justify-between sm:my-0 sm:items-center">
+          <div className="flex flex-col gap-4 sm:my-4 sm:flex-row">
+            <Input
+              placeholder="Filter apps..."
+              className="h-9 w-40 lg:w-[250px]"
+              value={searchTerm}
+              onChange={handleSearch}
+            />
+            <Select value={appType} onValueChange={handleTypeChange}>
+              <SelectTrigger className="w-36">
+                <SelectValue>{appText.get(appType)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Apps</SelectItem>
+                <SelectItem value="connected">Connected</SelectItem>
+                <SelectItem value="notConnected">Not Connected</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Select value={sort} onValueChange={handleSortChange}>
+            <SelectTrigger className="w-16">
+              <SelectValue>
+                <SlidersHorizontal size={18} />
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent align="end">
+              <SelectItem value="asc">
+                <div className="flex items-center gap-4">
+                  <ArrowUpAZ size={16} />
+                  <span>Ascending</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="desc">
+                <div className="flex items-center gap-4">
+                  <ArrowDownAZ size={16} />
+                  <span>Descending</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <Separator className="shadow-sm" />
+        <ul className="faded-bottom no-scrollbar grid gap-4 overflow-auto pt-4 pb-16 md:grid-cols-2 lg:grid-cols-3">
+          {filteredApps.map((app) => (
+            <li key={app.name} className="rounded-lg border p-4 hover:shadow-md">
+              <div className="mb-8 flex items-center justify-between">
+                <div className="flex size-10 items-center justify-center rounded-lg bg-muted p-2">
+                  {app.logo}
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className={`${app.connected ? "border border-blue-300 bg-blue-50 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-950 dark:hover:bg-blue-900" : ""}`}
+                >
+                  {app.connected ? "Connected" : "Connect"}
+                </Button>
+              </div>
+              <div>
+                <h2 className="mb-1 font-semibold">{app.name}</h2>
+                <p className="line-clamp-2 text-gray-500">{app.desc}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </Main>
+    </>
+  );
+}

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

@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import { AppsPage } from "./_components/apps-page";
+
+export const metadata: Metadata = {
+  title: "Apps",
+};
+
+export default function Page() {
+  return <AppsPage />;
+}