jigsaw_engine 0.4.0

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

@@ -0,0 +1,151 @@
+"use client";
+
+import * as React from "react";
+
+import { Label, Pie, PieChart } from "recharts";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { FolderUp } from "lucide-react";
+
+const chartData = [
+  { source: "social", leads: 275, fill: "var(--color-social)" },
+  { source: "email", leads: 200, fill: "var(--color-email)" },
+  { source: "call", leads: 287, fill: "var(--color-call)" },
+  { source: "others", leads: 173, fill: "var(--color-others)" },
+];
+
+const chartConfig = {
+  social: {
+    label: "Social",
+    color: "var(--chart-1)",
+  },
+  email: {
+    label: "Email",
+    color: "var(--chart-2)",
+  },
+  call: {
+    label: "Call",
+    color: "var(--chart-3)",
+  },
+  others: {
+    label: "Others",
+    color: "var(--chart-4)",
+  },
+} satisfies ChartConfig;
+
+type ChartConfigKeys = keyof typeof chartConfig;
+
+export default function LeadBySourceCardComponent() {
+  const totalVisitors = React.useMemo(() => {
+    return chartData.reduce((acc, curr) => acc + curr.leads, 0);
+  }, []);
+
+  return (
+    <Card className="mx-auto max-w-md shadow-none">
+      <CardHeader className="flex flex-row justify-between">
+        <CardTitle>Leads by Source</CardTitle>
+        <CardAction>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                <FolderUp /> <span className="hidden lg:inline">Export</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Excel</DropdownMenuItem>
+              <DropdownMenuItem>PDF</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px] max-w-[300px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="leads"
+              nameKey="source"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground font-display text-3xl"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Leads
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+        <div className="flex justify-around">
+          {chartData.map((item) => (
+            <div className="flex flex-col" key={item.source}>
+              <div className="mb-1 flex items-center gap-2">
+                <span
+                  className="block size-2 rounded-full"
+                  style={{
+                    backgroundColor:
+                      chartConfig[item.source as ChartConfigKeys]?.color,
+                  }}
+                ></span>
+                <div className="text-xs text-muted-foreground tracking-wide uppercase">
+                  {chartConfig[item.source as ChartConfigKeys]?.label}
+                </div>
+              </div>
+              <div className="ms-3.5 text-lg font-semibold">{item.leads}</div>
+            </div>
+          ))}
+          <div></div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,169 @@
+"use client";
+
+import {
+  AreaChartIcon,
+  DollarSignIcon,
+  FolderUp,
+  HandCoinsIcon,
+} from "lucide-react";
+import { Bar, BarChart, XAxis } from "recharts";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Progress } from "@/components/ui/progress";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+
+const chartData = [
+  { day: "Mo", sales: 35 },
+  { day: "Thu", sales: 30 },
+  { day: "We", sales: 37 },
+  { day: "Th", sales: 14 },
+  { day: "Fr", sales: 20 },
+  { day: "Sa", sales: 24 },
+  { day: "Su", sales: 38 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "Sales",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+export default function BarChartComponent() {
+  const isMobile = useIsMobile();
+
+  return (
+    <Card className="mx-auto max-w-5xl shadow-none">
+      <CardHeader>
+        <CardTitle>Earning Reports</CardTitle>
+        <CardDescription>Last 28 days</CardDescription>
+        <CardAction>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                <FolderUp /> <span className="hidden lg:inline">Export</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Excel</DropdownMenuItem>
+              <DropdownMenuItem>PDF</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4 lg:grid-cols-2">
+          <div>
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <div className="font-display text-2xl font-medium lg:text-3xl">
+                  $1.468
+                </div>
+                <Badge className="bg-green-600">+4.2%</Badge>
+              </div>
+              <ChartContainer
+                className="max-h-[245px] w-full"
+                config={chartConfig}
+              >
+                <BarChart accessibilityLayer data={chartData}>
+                  <XAxis
+                    dataKey="day"
+                    tickLine={false}
+                    tickMargin={10}
+                    axisLine={false}
+                    tickFormatter={(value) => value.slice(0, 3)}
+                  />
+                  <ChartTooltip
+                    cursor={false}
+                    content={
+                      <ChartTooltipContent color="var(--chart-2)" hideLabel />
+                    }
+                  />
+                  <Bar
+                    dataKey="sales"
+                    fill="url(#fillGradient)"
+                    radius={5}
+                    barSize={isMobile ? 30 : 50}
+                  />
+                  <defs>
+                    <linearGradient
+                      id="fillGradient"
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                    >
+                      <stop offset="5%" stopColor="var(--chart-2)" />
+                      <stop offset="95%" stopColor="var(--chart-1)" />
+                    </linearGradient>
+                  </defs>
+                </BarChart>
+              </ChartContainer>
+            </div>
+          </div>
+          <div>
+            <div className="flex flex-col space-y-4">
+              <div className="bg-muted border-border flex flex-col gap-4 rounded-md border p-4">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-4">
+                    <div className="bg-background border-border flex size-8 items-center justify-center rounded-md border">
+                      <DollarSignIcon className="size-4" />
+                    </div>
+                    <span>Earnings</span>
+                  </div>
+                  <div className="font-semibold">$545.69</div>
+                </div>
+                <Progress className="h-1" value={70} />
+              </div>
+              <div className="bg-muted border-border flex flex-col gap-4 rounded-md border p-4">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-4">
+                    <div className="bg-background border-border flex size-8 items-center justify-center rounded-md border">
+                      <AreaChartIcon className="size-4" />
+                    </div>
+                    <span>Profit</span>
+                  </div>
+                  <div className="font-semibold">$256.34</div>
+                </div>
+                <Progress className="h-1" value={45} />
+              </div>
+              <div className="bg-muted border-border flex flex-col gap-4 rounded-md border p-4">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center justify-between gap-4">
+                    <div className="bg-background border-border flex size-8 items-center justify-center rounded-md border">
+                      <HandCoinsIcon className="size-4" />
+                    </div>
+                    <span>Expense</span>
+                  </div>
+                  <div className="font-semibold">$74.19</div>
+                </div>
+                <Progress className="h-1" value={80} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,115 @@
+"use client";
+
+import { Label, Pie, PieChart } from "recharts";
+import { ClockIcon, MessageCircleReplyIcon, TicketIcon } from "lucide-react";
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+
+const chartData = [
+  { browser: "new", tickets: 40, fill: "var(--color-new)" },
+  { browser: "open", tickets: 25, fill: "var(--color-open)" },
+];
+
+const chartConfig = {
+  new: {
+    label: "New Tickets",
+    color: "var(--chart-1)",
+  },
+  open: {
+    label: "Open Tickets",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+export default function PieChartComponent() {
+  return (
+    <Card className="mx-auto max-w-xl shadow-none">
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[270px] max-w-[300px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData}
+              dataKey="tickets"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground font-display text-3xl"
+                        >
+                          88%
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Completed
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-start justify-start gap-4 border-t md:flex-row md:justify-between lg:items-center lg:gap-0">
+        <div className="flex w-full items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-full border">
+            <TicketIcon className="size-4" />
+          </div>
+          <div className="flex flex-1 flex-col justify-between md:justify-normal gap-1">
+            <div className="text-sm">New Tickets</div>
+            <div className="text-muted-foreground text-sm">40</div>
+          </div>
+        </div>
+        <div className="flex w-full items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-full border">
+            <ClockIcon className="size-4" />
+          </div>
+          <div className="flex flex-1 flex-col justify-between md:justify-normal gap-1">
+            <div className="text-sm">Open Tickets</div>
+            <div className="text-muted-foreground text-sm">25</div>
+          </div>
+        </div>
+        <div className="flex w-full items-center gap-3">
+          <div className="flex size-10 items-center justify-center rounded-full border">
+            <MessageCircleReplyIcon className="size-4" />
+          </div>
+          <div className="flex flex-1 flex-col justify-between md:justify-normal gap-1">
+            <div className="text-sm">Response Time</div>
+            <div className="text-muted-foreground text-sm">1 Day</div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,128 @@
+"use client";
+
+import { Bar, BarChart, XAxis } from "recharts";
+import { ChevronUpIcon, DollarSignIcon, HandCoinsIcon } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Badge } from "@/components/ui/badge";
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "Revenue",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Sales",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+export default function BarChartComponent() {
+  const isMobile = useIsMobile();
+
+  return (
+    <Card className="mx-auto max-w-md shadow-none">
+      <CardHeader>
+        <CardDescription>Total Earning</CardDescription>
+        <CardAction>
+          <Badge variant="outline" className="text-green-600">
+            <ChevronUpIcon className="size-4" /> 24.2%
+          </Badge>
+        </CardAction>
+        <div className="flex items-center gap-4">
+          <div className="font-display font-medium text-2xl lg:text-3xl">83%</div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer className="aspect-21/9! w-full" config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: -8,
+              right: -8,
+            }}
+          >
+            <Bar
+              dataKey="desktop"
+              stackId="a"
+              fill="var(--color-desktop)"
+              radius={[0, 0, 5, 5]}
+              barSize={50}
+            />
+            <Bar
+              dataKey="mobile"
+              stackId="a"
+              fill="var(--color-mobile)"
+              radius={[5, 5, 0, 0]}
+              barSize={isMobile ? 30 : 50}
+            />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--color)" />
+                <stop offset="95%" stopColor="var(--chart-1)" />
+              </linearGradient>
+            </defs>
+          </BarChart>
+        </ChartContainer>
+        <div className="mt-5 space-y-4">
+          <div className="flex items-center gap-3">
+            <div className="bg-muted flex size-10 items-center justify-center rounded-md border">
+              <HandCoinsIcon className="size-4" />
+            </div>
+            <div className="space-y-1">
+              <div className="font-medium text-sm">Total Revenue</div>
+              <div className="text-muted-foreground text-xs">
+                Client Payment
+              </div>
+            </div>
+            <div className="ms-auto text-sm text-green-600">+$126</div>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="bg-muted flex size-10 items-center justify-center rounded-md border">
+              <DollarSignIcon className="size-4" />
+            </div>
+            <div className="space-y-1">
+              <div className="font-medium text-sm">Total Sales</div>
+              <div className="text-muted-foreground text-xs">Refund</div>
+            </div>
+            <div className="ms-auto text-sm text-red-600">-$98</div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+  { month: "July", desktop: 123, mobile: 95 },
+  { month: "August", desktop: 298, mobile: 210 },
+  { month: "September", desktop: 175, mobile: 150 },
+  { month: "October", desktop: 290, mobile: 180 },
+  { month: "November", desktop: 220, mobile: 160 },
+  { month: "December", desktop: 310, mobile: 200 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+export default function BarChartComponent() {
+  return (
+    <Card className="mx-auto max-w-3xl shadow-none">
+      <CardHeader className="grid-cols-1">
+        <CardTitle>Monthly File Transfer</CardTitle>
+        <CardDescription>Last 28 days</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer className="w-full md:h-[280px]" config={chartConfig}>
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="desktop"
+              stackId="a"
+              fill="var(--color-desktop)"
+              radius={[0, 0, 5, 5]}
+            />
+            <Bar
+              dataKey="mobile"
+              stackId="a"
+              fill="var(--color-mobile)"
+              radius={[5, 5, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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