jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-1/render.jsx

@@ -0,0 +1,147 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardAction,
+  CardFooter,
+} from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  ArrowDown,
+  ArrowUp,
+  MoreHorizontal,
+  Pin,
+  Settings,
+  Share2,
+  Trash,
+  TriangleAlert,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const stats = [
+  {
+    title: "All Orders",
+    value: 122380,
+    delta: 15.1,
+    lastMonth: 105922,
+    positive: true,
+    prefix: "",
+    suffix: "",
+  },
+  {
+    title: "Order Created",
+    value: 1902380,
+    delta: -2.0,
+    lastMonth: 2002098,
+    positive: false,
+    prefix: "",
+    suffix: "",
+  },
+  {
+    title: "Organic Sales",
+    value: 98100000,
+    delta: 0.4,
+    lastMonth: 97800000,
+    positive: true,
+    prefix: "$",
+    suffix: "M",
+    format: (v: number) => `$${(v / 1_000_000).toFixed(1)}M`,
+    lastFormat: (v: number) => `$${(v / 1_000_000).toFixed(1)}M`,
+  },
+  {
+    title: "Active Users",
+    value: 48210,
+    delta: 3.7,
+    lastMonth: 46480,
+    positive: true,
+    prefix: "",
+    suffix: "",
+  },
+];
+
+function formatNumber(n: number) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
+  if (n >= 1_000) return n.toLocaleString();
+  return n.toString();
+}
+
+export default function Page() {
+  return (
+    <div className="bg-muted flex items-center justify-center px-4 py-10 lg:py-20">
+      <div className="mx-auto grid max-w-7xl grow grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        {stats.map((stat, i) => (
+          <Card key={i} className="shadow-none">
+            <CardHeader>
+              <CardTitle className="text-muted-foreground text-sm font-medium">
+                {stat.title}
+              </CardTitle>
+              <CardAction>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm">
+                      <MoreHorizontal />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" side="bottom">
+                    <DropdownMenuItem>
+                      <Settings />
+                      Settings
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <TriangleAlert /> Add Alert
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Pin /> Pin to Dashboard
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Share2 /> Share
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem variant="destructive">
+                      <Trash />
+                      Remove
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </CardAction>
+            </CardHeader>
+            <CardContent className="flex items-center gap-2.5 space-y-2.5">
+              <span className="text-foreground text-2xl font-bold tracking-tight">
+                {stat.format
+                  ? stat.format(stat.value)
+                  : stat.prefix + formatNumber(stat.value) + stat.suffix}
+              </span>
+              <Badge
+                variant="outline"
+                className={cn({
+                  "text-green-500": stat.positive,
+                  "text-destructive": !stat.positive,
+                })}
+              >
+                {stat.delta > 0 ? <ArrowUp /> : <ArrowDown />}
+                {stat.delta}%
+              </Badge>
+            </CardContent>
+            <CardFooter className="text-muted-foreground border-t text-xs">
+              Vs last month:{" "}
+              <span className="text-foreground font-medium">
+                {stat.lastFormat
+                  ? stat.lastFormat(stat.lastMonth)
+                  : stat.prefix + formatNumber(stat.lastMonth) + stat.suffix}
+              </span>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-2/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-2/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-2/render.jsx

@@ -0,0 +1,120 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const pipelineData = [
+  {
+    id: "lead",
+    name: "Lead",
+    count: 235,
+    value: 420500,
+    color: "bg-[var(--chart-1)]",
+  },
+  {
+    id: "qualified",
+    name: "Qualified",
+    count: 146,
+    value: 267800,
+    color: "bg-[var(--chart-2)]",
+  },
+  {
+    id: "proposal",
+    name: "Proposal",
+    count: 84,
+    value: 192400,
+    color: "bg-[var(--chart-3)]",
+  },
+  {
+    id: "negotiation",
+    name: "Negotiation",
+    count: 52,
+    value: 129600,
+    color: "bg-[var(--chart-4)]",
+  },
+  {
+    id: "closed",
+    name: "Closed Won",
+    count: 36,
+    value: 87200,
+    color: "bg-[var(--chart-5)]",
+  },
+];
+
+const totalValue = pipelineData.reduce((sum, stage) => sum + stage.value, 0);
+const totalCount = pipelineData.reduce((sum, stage) => sum + stage.count, 0);
+
+export default function CardStat() {
+  return (
+    <div className="bg-muted mx-auto p-4 lg:py-10">
+      <Card className="shadow-none max-w-md mx-auto">
+        <CardHeader>
+          <CardTitle>Sales Pipeline</CardTitle>
+          <CardDescription>
+            Current deals in your sales pipeline.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <TooltipProvider>
+            <div className="mb-6 flex h-4 w-full overflow-hidden rounded-full">
+              {pipelineData.map((stage) => (
+                <Tooltip key={stage.id}>
+                  <TooltipTrigger asChild>
+                    <div
+                      className={`${stage.color} h-full`}
+                      style={{ width: `${(stage.value / totalValue) * 100}%` }}
+                    ></div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <div className="mb-1 text-sm font-medium">{stage.name}</div>
+                    <div className="text-xs opacity-80">
+                      {stage.count} deals
+                    </div>
+                    <div className="text-xs opacity-80">
+                      ${stage.value.toLocaleString()}
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              ))}
+            </div>
+          </TooltipProvider>
+
+          <div className="space-y-4">
+            {pipelineData.map((stage) => (
+              <div key={stage.id} className="flex items-center gap-4">
+                <div className={`h-3 w-3 rounded-full ${stage.color}`}></div>
+                <div className="flex flex-1 items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium">{stage.name}</p>
+                    <p className="text-muted-foreground text-xs">
+                      {stage.count} deals · ${stage.value.toLocaleString()}
+                    </p>
+                  </div>
+                  <div className="flex w-24 items-center gap-2">
+                    <Progress
+                      value={(stage.count / totalCount) * 100}
+                      className="h-2"
+                    />
+                    <span className="text-muted-foreground w-10 text-right text-xs">
+                      {Math.round((stage.value / totalValue) * 100)}%
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-3/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-3/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-3/render.jsx

@@ -0,0 +1,62 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function CardStat() {
+  return (
+    <div className="bg-muted mx-auto p-4 lg:py-10">
+      <Card className="shadow-none max-w-md mx-auto">
+        <CardHeader>
+          <CardTitle>Website Analytics</CardTitle>
+          <CardDescription>
+            Total <span className="text-green-600">28.5%</span> conversion rate
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex items-center gap-2">
+              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">
+                432
+              </div>
+              <span className="text-sm">Direct</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">
+                216
+              </div>
+              <span className="text-sm">Organic</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">
+                29%
+              </div>
+              <span className="text-sm">Sessions</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">
+                2.3K
+              </div>
+              <span className="text-sm">Page Views</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">
+                1.6K
+              </div>
+              <span className="text-sm">Leads</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">
+                8%
+              </div>
+              <span className="text-sm">Conversions</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-4/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-4/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-4/render.jsx

@@ -0,0 +1,49 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function CardStat() {
+  return (
+    <div className="bg-muted mx-auto p-4 lg:py-10">
+      <Card className="shadow-none max-w-md mx-auto">
+        <CardHeader>
+          <CardTitle>Sales Overview</CardTitle>
+          <CardDescription>
+            <span className="text-green-600">+20.1%</span> from last month
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="text-2xl font-bold">$42.5k</div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="flex items-center gap-2 text-sm">
+              <div className="bg-muted rounded-md px-2 py-1 text-center text-xs">
+                62.2%
+              </div>
+              <span className="text-sm">Orders</span>
+            </div>
+            <div className="flex items-center justify-end gap-2 text-sm">
+              <div className="bg-muted rounded-md px-2 py-1 text-center text-xs">
+                25.5%
+              </div>
+              <span className="text-sm">Visits</span>
+            </div>
+          </div>
+          <div className="flex overflow-hidden rounded-lg">
+            <span
+              className="h-4 bg-lime-400 dark:bg-lime-700"
+              style={{ width: "70%" }}
+            ></span>
+            <span
+              className="h-4 bg-indigo-400 dark:bg-indigo-700"
+              style={{ width: "30%" }}
+            ></span>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-5/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-5/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-5/render.jsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { AlertTriangle, Check, ChevronRight, Eye } from "lucide-react";
+import Link from "next/link";
+
+const data = [
+  {
+    name: "Europe",
+    stat: "$10,023",
+    goalsAchieved: 3,
+    status: "observe",
+    href: "#",
+  },
+  {
+    name: "North America",
+    stat: "$14,092",
+    goalsAchieved: 5,
+    status: "within",
+    href: "#",
+  },
+  {
+    name: "Asia",
+    stat: "$113,232",
+    goalsAchieved: 1,
+    status: "critical",
+    href: "#",
+  },
+];
+
+export default function Stats06() {
+  return (
+    <div className="bg-muted container flex w-full items-center justify-center p-10">
+      <dl className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {data.map((item) => (
+          <Card key={item.name} className="relative p-6 shadow-none">
+            <CardContent className="p-0">
+              <dt className="text-muted-foreground mb-1 text-sm">
+                {item.name}
+              </dt>
+              <dd className="text-foreground text-3xl font-bold">
+                {item.stat}
+              </dd>
+              <div className="group bg-muted/60 hover:bg-muted relative mt-6 flex items-center space-x-4 rounded-md p-2">
+                <div className="flex w-full items-center justify-between truncate">
+                  <div className="flex items-center space-x-3">
+                    <span
+                      className={cn(
+                        "flex h-9 w-9 shrink-0 items-center justify-center rounded",
+                        item.status === "within"
+                          ? "bg-emerald-500 text-white"
+                          : item.status === "observe"
+                            ? "bg-yellow-500 text-white"
+                            : "bg-red-500 text-white",
+                      )}
+                    >
+                      {item.status === "within" ? (
+                        <Check className="size-4 shrink-0" aria-hidden={true} />
+                      ) : item.status === "observe" ? (
+                        <Eye className="size-4 shrink-0" aria-hidden={true} />
+                      ) : (
+                        <AlertTriangle
+                          className="size-4 shrink-0"
+                          aria-hidden={true}
+                        />
+                      )}
+                    </span>
+                    <dd>
+                      <p className="text-muted-foreground text-sm">
+                        <Link href={item.href} className="focus:outline-none">
+                          {/* Extend link to entire card */}
+                          <span
+                            className="absolute inset-0"
+                            aria-hidden={true}
+                          />
+                          {item.goalsAchieved}/5 goals
+                        </Link>
+                      </p>
+                      <p
+                        className={cn(
+                          "text-sm font-medium",
+                          item.status === "within"
+                            ? "text-emerald-800 dark:text-emerald-500"
+                            : item.status === "observe"
+                              ? "text-yellow-800 dark:text-yellow-500"
+                              : "text-red-800 dark:text-red-500",
+                        )}
+                      >
+                        {item.status}
+                      </p>
+                    </dd>
+                  </div>
+                  <ChevronRight
+                    className="text-muted-foreground/60 group-hover:text-muted-foreground size-5 shrink-0"
+                    aria-hidden={true}
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </dl>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-6/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-6/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-6/render.jsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts";
+
+const data = [
+  {
+    name: "Workspaces",
+    capacity: 20,
+    current: 1,
+    allowed: 5,
+    fill: "var(--chart-1)"
+  },
+  {
+    name: "Dashboards",
+    capacity: 10,
+    current: 2,
+    allowed: 20,
+    fill: "var(--chart-2)"
+  }
+];
+
+const chartConfig = {
+  capacity: {
+    label: "Capacity",
+    color: "hsl(var(--primary))"
+  }
+} satisfies ChartConfig;
+
+export default function Stats07() {
+  return (
+    <div className="bg-muted flex items-center justify-center px-4 py-10 lg:py-20">
+      <dl className="grid w-full max-w-lg grid-cols-1 gap-4 lg:grid-cols-2">
+        {data.map((item) => (
+          <Card key={item.name} className="p-4 shadow-none">
+            <CardContent className="flex items-center space-x-4 p-0">
+              <div className="relative flex items-center justify-center">
+                <ChartContainer config={chartConfig} className="h-[80px] w-[80px]">
+                  <RadialBarChart
+                    data={[item]}
+                    innerRadius={30}
+                    outerRadius={60}
+                    barSize={6}
+                    startAngle={90}
+                    endAngle={-270}>
+                    <PolarAngleAxis
+                      type="number"
+                      domain={[0, 100]}
+                      angleAxisId={0}
+                      tick={false}
+                      axisLine={false}
+                    />
+                    <RadialBar
+                      dataKey="capacity"
+                      background
+                      cornerRadius={10}
+                      fill="var(--primary)"
+                      angleAxisId={0}
+                    />
+                  </RadialBarChart>
+                </ChartContainer>
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <span className="text-foreground text-base font-medium">{item.capacity}%</span>
+                </div>
+              </div>
+              <div>
+                <dt className="text-foreground text-sm font-medium">{item.name}</dt>
+                <dd className="text-muted-foreground text-sm">
+                  {item.current} of {item.allowed} used
+                </dd>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </dl>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-7/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-7/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-7/render.jsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+
+const data = [
+  {
+    name: "Requests",
+    stat: "996",
+    limit: "10,000",
+    percentage: 9.96,
+  },
+  {
+    name: "Credits",
+    stat: "$672",
+    limit: "$1,000",
+    percentage: 67.2,
+  },
+  {
+    name: "Storage",
+    stat: "1.85",
+    limit: "10GB",
+    percentage: 18.5,
+  },
+  {
+    name: "API Calls",
+    stat: "4,328",
+    limit: "5,000",
+    percentage: 86.56,
+  },
+];
+
+export default function Stats09() {
+  return (
+    <div className="bg-muted flex w-full items-center justify-center p-10">
+      <dl className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        {data.map((item) => (
+          <Card key={item.name} className="py-4 shadow-none">
+            <CardContent className="">
+              <dt className="text-muted-foreground text-sm">{item.name}</dt>
+              <dd className="text-foreground text-2xl font-semibold">
+                {item.stat}
+              </dd>
+              <Progress value={item.percentage} className="mt-6 h-2" />
+              <dd className="mt-2 flex items-center justify-between text-sm">
+                <span className="text-primary">{item.percentage}&#37;</span>
+                <span className="text-muted-foreground">
+                  {item.stat} of {item.limit}
+                </span>
+              </dd>
+            </CardContent>
+          </Card>
+        ))}
+      </dl>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-8/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-8/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }