jigsaw_engine 0.4.0

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

@@ -0,0 +1,219 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid } from "recharts";
+import { CalendarIcon, Download } from "lucide-react";
+
+const data: Record<
+  string,
+  {
+    booked: number;
+    visited: number;
+    performanceChange: number;
+    chartData: { date: string; visited: number; booked: number }[];
+  }
+> = {
+  "this-week": {
+    booked: 290,
+    visited: 638,
+    performanceChange: 12,
+    chartData: [
+      { date: "25-Nov", visited: 45, booked: 30 },
+      { date: "26-Nov", visited: 20, booked: 10 },
+      { date: "27-Nov", visited: 60, booked: 25 },
+      { date: "28-Nov", visited: 95, booked: 60 },
+      { date: "29-Nov", visited: 140, booked: 110 },
+      { date: "30-Nov", visited: 10, booked: 45 },
+      { date: "01-Dec", visited: 110, booked: 90 },
+    ],
+  },
+  "last-week": {
+    booked: 245,
+    visited: 520,
+    performanceChange: 8,
+    chartData: [
+      { date: "18-Nov", visited: 35, booked: 25 },
+      { date: "19-Nov", visited: 50, booked: 35 },
+      { date: "20-Nov", visited: 80, booked: 45 },
+      { date: "21-Nov", visited: 70, booked: 50 },
+      { date: "22-Nov", visited: 100, booked: 70 },
+      { date: "23-Nov", visited: 85, booked: 55 },
+      { date: "24-Nov", visited: 100, booked: 65 },
+    ],
+  },
+  "this-month": {
+    booked: 850,
+    visited: 1920,
+    performanceChange: 15,
+    chartData: [
+      { date: "1-Nov", visited: 180, booked: 120 },
+      { date: "8-Nov", visited: 220, booked: 150 },
+      { date: "15-Nov", visited: 280, booked: 190 },
+      { date: "22-Nov", visited: 320, booked: 210 },
+      { date: "29-Nov", visited: 290, booked: 180 },
+    ],
+  },
+  "last-month": {
+    booked: 780,
+    visited: 1750,
+    performanceChange: 10,
+    chartData: [
+      { date: "1-Oct", visited: 150, booked: 100 },
+      { date: "8-Oct", visited: 200, booked: 130 },
+      { date: "15-Oct", visited: 250, booked: 170 },
+      { date: "22-Oct", visited: 300, booked: 200 },
+      { date: "29-Oct", visited: 280, booked: 180 },
+    ],
+  },
+  "last-3-months": {
+    booked: 2100,
+    visited: 4800,
+    performanceChange: 22,
+    chartData: [
+      { date: "Sep", visited: 1400, booked: 600 },
+      { date: "Oct", visited: 1600, booked: 700 },
+      { date: "Nov", visited: 1800, booked: 800 },
+    ],
+  },
+};
+
+const chartConfig = {
+  visited: {
+    label: "Visited",
+    color: "var(--chart-1)",
+  },
+  booked: {
+    label: "Booked",
+    color: "var(--chart-4)",
+  },
+};
+
+export default function LineChartComponent() {
+  const [dateRange, setDateRange] = useState("this-week");
+  const campaignData = data[dateRange];
+
+  const handleDateRangeChange = (value: string) => {
+    setDateRange(value);
+  };
+
+  return (
+    <Card className="mx-auto max-w-3xl shadow-none">
+      <CardHeader>
+        <CardTitle>Campaign Overview</CardTitle>
+        <CardAction className="flex gap-2">
+          <Select value={dateRange} onValueChange={handleDateRangeChange}>
+            <SelectTrigger>
+              <CalendarIcon />
+              <div className="hidden lg:flex">
+                <SelectValue />
+              </div>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="this-week">This Week</SelectItem>
+              <SelectItem value="last-week">Last Week</SelectItem>
+              <SelectItem value="this-month">This Month</SelectItem>
+              <SelectItem value="last-month">Last Month</SelectItem>
+              <SelectItem value="last-3-months">Last 3 Months</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <Download />
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-4 grid items-end gap-4 lg:grid-cols-2 lg:gap-6">
+          <div className="order-2 grid grid-cols-2 divide-x rounded-lg border lg:order-1">
+            <div className="space-y-0.5 p-3">
+              <p className="text-muted-foreground text-sm">Booked</p>
+              <p className="text-xl font-semibold lg:text-2xl">
+                {campaignData.booked}
+              </p>
+            </div>
+            <div className="space-y-0.5 p-3">
+              <p className="text-muted-foreground text-sm">Visited</p>
+              <p className="text-xl font-semibold lg:text-2xl">
+                {campaignData.visited}
+              </p>
+            </div>
+          </div>
+          <div className="order-1 space-y-1 lg:order-2 lg:text-end">
+            <p>Performance</p>
+            <p className="text-sm">
+              <span className="text-green-500">
+                {campaignData.performanceChange}+
+              </span>
+              <span className="text-muted-foreground ml-1">
+                Compared to last week
+              </span>
+            </p>
+          </div>
+        </div>
+
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-video w-full md:h-[180px]"
+        >
+          <LineChart
+            data={campaignData.chartData}
+            margin={{ top: 20, right: 20, bottom: 20, left: -15 }}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              vertical={false}
+              stroke="hsl(var(--border))"
+            />
+            <XAxis
+              dataKey="date"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
+              dy={10}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
+              dx={-10}
+              domain={[0, 200]}
+              ticks={[0, 50, 100, 150, 200]}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Line
+              type="monotone"
+              dataKey="visited"
+              stroke="var(--color-visited)"
+              dot={false}
+            />
+            <Line
+              type="monotone"
+              dataKey="booked"
+              stroke="var(--color-booked)"
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

data/app/javascript/seeds/blocks/dashboard-ui/charts-8/render.jsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { Bar, BarChart, XAxis, YAxis } from "recharts";
+import { Calendar, TrendingUp } from "lucide-react";
+
+interface RevenueDataItem {
+  day: string;
+  revenue: number;
+  projected: number;
+}
+
+interface PeriodData {
+  data: RevenueDataItem[];
+  total: number;
+  percentageChange: number;
+}
+
+const items = {
+  weekly: {
+    data: [
+      { day: "Sat", revenue: 2500, projected: 1500 },
+      { day: "Sun", revenue: 4500, projected: 2000 },
+      { day: "Mon", revenue: 3200, projected: 1800 },
+      { day: "Tue", revenue: 6500, projected: 1500 },
+      { day: "Wed", revenue: 4200, projected: 1800 },
+      { day: "Thu", revenue: 5500, projected: 2000 },
+      { day: "Fri", revenue: 3800, projected: 1700 },
+    ],
+    total: 12480,
+    percentageChange: 16,
+  },
+  monthly: {
+    data: [
+      { day: "Week 1", revenue: 8500, projected: 3500 },
+      { day: "Week 2", revenue: 12000, projected: 4000 },
+      { day: "Week 3", revenue: 9500, projected: 4500 },
+      { day: "Week 4", revenue: 14000, projected: 3000 },
+    ],
+    total: 59000,
+    percentageChange: 22,
+  },
+  yearly: {
+    data: [
+      { day: "Jan", revenue: 28000, projected: 12000 },
+      { day: "Feb", revenue: 32000, projected: 10000 },
+      { day: "Mar", revenue: 38000, projected: 14000 },
+      { day: "Apr", revenue: 30000, projected: 15000 },
+      { day: "May", revenue: 42000, projected: 10000 },
+      { day: "Jun", revenue: 45000, projected: 12000 },
+      { day: "Jul", revenue: 40000, projected: 16000 },
+      { day: "Aug", revenue: 44000, projected: 14000 },
+      { day: "Sep", revenue: 48000, projected: 10000 },
+      { day: "Oct", revenue: 38000, projected: 18000 },
+      { day: "Nov", revenue: 52000, projected: 12000 },
+      { day: "Dec", revenue: 58000, projected: 15000 },
+    ],
+    total: 643000,
+    percentageChange: 35,
+  },
+  selectedPeriod: "weekly",
+};
+
+const chartConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "var(--color-chart-1)",
+  },
+  projected: {
+    label: "Projected",
+    color: "#d1d5db",
+  },
+} satisfies ChartConfig;
+
+const formatYAxisTick = (value: number) => {
+  if (value === 0) return "0";
+  if (value >= 1000000) return `${value / 1000000}M`;
+  if (value >= 1000) return `${value / 1000}K`;
+  return value.toString();
+};
+
+const formatCurrency = (value: number) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+  }).format(value);
+};
+
+const StripePattern = () => (
+  <pattern
+    id="stripePattern"
+    patternUnits="userSpaceOnUse"
+    width="8"
+    height="8"
+    patternTransform="rotate(-45)"
+  >
+    <rect width="8" height="8" fill="var(--muted)" />
+    <rect width="4" height="8" fill="var(--background)" />
+  </pattern>
+);
+
+const getYAxisConfig = (period: string) => {
+  switch (period) {
+    case "yearly":
+      return {
+        ticks: [0, 20000, 40000, 60000, 80000],
+        domain: [0, 80000],
+        refLine: 50000,
+      };
+    case "monthly":
+      return {
+        ticks: [0, 5000, 10000, 15000, 20000],
+        domain: [0, 20000],
+        refLine: 12000,
+      };
+    default:
+      return {
+        ticks: [0, 2000, 4000, 6000, 8000, 10000],
+        domain: [0, 10000],
+        refLine: 6000,
+      };
+  }
+};
+
+export default function RevenueStatComponent() {
+  const [selectedPeriod, setSelectedPeriod] = useState(items.selectedPeriod);
+
+  const currentData = items[selectedPeriod as keyof typeof items] as PeriodData;
+  const { data, total, percentageChange } = currentData;
+  const yAxisConfig = getYAxisConfig(selectedPeriod);
+
+  return (
+    <Card className="mx-auto max-w-xl shadow-none">
+      <CardHeader>
+        <CardTitle>Revenue Stat</CardTitle>
+        <CardAction>
+          <Select value={selectedPeriod} onValueChange={setSelectedPeriod}>
+            <SelectTrigger>
+              <Calendar />
+              <SelectValue placeholder="Select period" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="weekly">Weekly</SelectItem>
+              <SelectItem value="monthly">Monthly</SelectItem>
+              <SelectItem value="yearly">Yearly</SelectItem>
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-4 flex flex-col items-baseline justify-between lg:flex-row">
+          <span className="text-2xl font-semibold tracking-tight lg:text-3xl">
+            {formatCurrency(total)}
+          </span>
+          <div className="flex items-center gap-1 text-sm">
+            <TrendingUp className="size-4 text-green-600" />
+            <span className="text-success font-medium">
+              {percentageChange}%
+            </span>
+            <span className="text-muted-foreground">from last month</span>
+          </div>
+        </div>
+
+        <ChartContainer config={chartConfig} className="h-[240px] w-full">
+          <BarChart
+            data={data}
+            margin={{ top: 20, right: 0, left: -30, bottom: 0 }}
+          >
+            <defs>
+              <StripePattern />
+            </defs>
+            <XAxis
+              dataKey="day"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "var(--muted-foreground)" }}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fill: "var(--muted-foreground)" }}
+              tickFormatter={formatYAxisTick}
+              ticks={yAxisConfig.ticks}
+              domain={yAxisConfig.domain}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => `${value} 2026`}
+                  formatter={(value, name) => (
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="h-2.5 w-2.5 rounded-full"
+                        style={{
+                          backgroundColor:
+                            name === "revenue" ? "hsl(142 71% 45%)" : "#d1d5db",
+                        }}
+                      />
+                      <span className="text-muted-foreground capitalize">
+                        {name === "revenue" ? "Revenue" : "Projected"}:
+                      </span>
+                      <span className="font-medium">
+                        {formatCurrency(Number(value))}
+                      </span>
+                    </div>
+                  )}
+                />
+              }
+            />
+            <Bar
+              dataKey="revenue"
+              stackId="stack"
+              radius={[0, 0, 4, 4]}
+              fill="var(--color-revenue)"
+            />
+            <Bar
+              dataKey="projected"
+              stackId="stack"
+              radius={[4, 4, 0, 0]}
+              fill="url(#stripePattern)"
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/charts-9/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/charts-9/data.js

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

data/app/javascript/seeds/blocks/dashboard-ui/charts-9/render.jsx

@@ -0,0 +1,213 @@
+"use client";
+
+import * as React from "react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+
+const generateChartData = () => {
+  const data = [];
+  const today = new Date();
+
+  for (let i = 89; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+
+    data.push({
+      date: date.toISOString().split("T")[0],
+      desktop: Math.floor(Math.random() * (400 - 50) + 50),
+      mobile: Math.floor(Math.random() * (400 - 50) + 50),
+    });
+  }
+
+  return data;
+};
+
+const chartData = generateChartData();
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--secondary)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig;
+
+export default function ChartProjectOverviewComponent() {
+  const isMobile = useIsMobile();
+  const [timeRange, setTimeRange] = React.useState("90d");
+
+  React.useEffect(() => {
+    if (isMobile) {
+      setTimeRange("7d");
+    }
+  }, [isMobile]);
+
+  const filteredData = chartData.filter((item) => {
+    const date = new Date(item.date);
+    const referenceDate = new Date();
+    let daysToSubtract = 90;
+    if (timeRange === "30d") {
+      daysToSubtract = 30;
+    } else if (timeRange === "7d") {
+      daysToSubtract = 7;
+    }
+    const startDate = new Date(referenceDate);
+    startDate.setDate(startDate.getDate() - daysToSubtract);
+    return date >= startDate;
+  });
+
+  return (
+    <Card className="mx-auto max-w-5xl shadow-none">
+      <CardHeader>
+        <CardTitle>Projects Overview</CardTitle>
+        <CardDescription>
+          <span className="hidden @[540px]/card:block">
+            Total for the last 3 months
+          </span>
+          <span className="@[540px]/card:hidden">Last 3 months</span>
+        </CardDescription>
+        <CardAction>
+          <ToggleGroup
+            type="single"
+            value={timeRange}
+            onValueChange={setTimeRange}
+            variant="outline"
+            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+          >
+            <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
+            <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
+            <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
+          </ToggleGroup>
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger
+              className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
+              size="sm"
+              aria-label="Select a value"
+            >
+              <SelectValue placeholder="Last 3 months" />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl">
+              <SelectItem value="90d" className="rounded-lg">
+                Last 3 months
+              </SelectItem>
+              <SelectItem value="30d" className="rounded-lg">
+                Last 30 days
+              </SelectItem>
+              <SelectItem value="7d" className="rounded-lg">
+                Last 7 days
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[200px] w-full lg:h-[250px]"
+        >
+          <AreaChart data={filteredData}>
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={1.0}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-desktop)"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="var(--color-mobile)"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                });
+              }}
+            />
+            <ChartTooltip
+              cursor={false}
+              defaultIndex={isMobile ? -1 : 10}
+              content={
+                <ChartTooltipContent
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    });
+                  }}
+                  indicator="dot"
+                />
+              }
+            />
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#fillMobile)"
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#fillDesktop)"
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/form-layouts-1/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/form-layouts-1/data.js

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