create-bluecopa-react-app 1.0.40 → 1.0.42

package/templates/latest/app/pages/dashboard.tsx

@@ -0,0 +1,246 @@
+import {
+  IconArrowDownRight,
+  IconArrowUpRight,
+  IconCreditCard,
+  IconReceipt,
+  IconTransfer,
+  IconUsers,
+} from "@tabler/icons-react";
+
+import { toast } from "sonner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { BarChart } from "~/components/charts/bar-chart";
+import { DonutChart } from "~/components/charts/donut-chart";
+
+/* ─── KPI Data ─── */
+
+const kpis = [
+  {
+    title: "Total Revenue",
+    value: "$45,231.89",
+    change: "+20.1%",
+    trend: "up" as const,
+    icon: IconCreditCard,
+  },
+  {
+    title: "Transactions",
+    value: "2,350",
+    change: "+18.2%",
+    trend: "up" as const,
+    icon: IconTransfer,
+  },
+  {
+    title: "Outstanding Invoices",
+    value: "$12,234.00",
+    change: "-4.5%",
+    trend: "down" as const,
+    icon: IconReceipt,
+  },
+  {
+    title: "Active Customers",
+    value: "573",
+    change: "+12.3%",
+    trend: "up" as const,
+    icon: IconUsers,
+  },
+];
+
+/* ─── Chart Data ─── */
+
+const revenueData = {
+  categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
+  series: [
+    {
+      name: "Revenue",
+      data: [4200, 3800, 5100, 4600, 5800, 6200, 5900, 7100],
+    },
+  ],
+};
+
+const expensesData = {
+  items: [
+    { name: "Payroll", value: 42 },
+    { name: "Operations", value: 28 },
+    { name: "Marketing", value: 16 },
+    { name: "Software", value: 9 },
+    { name: "Other", value: 5 },
+  ],
+};
+
+/* ─── Recent Transactions ─── */
+
+const recentTransactions = [
+  { id: "TXN-001", customer: "Acme Corp", amount: "$1,250.00", status: "Completed", date: "Feb 15, 2026" },
+  { id: "TXN-002", customer: "Globex Inc", amount: "$3,420.00", status: "Pending", date: "Feb 14, 2026" },
+  { id: "TXN-003", customer: "Initech LLC", amount: "$890.50", status: "Completed", date: "Feb 14, 2026" },
+  { id: "TXN-004", customer: "Umbrella Co", amount: "$2,100.00", status: "Failed", date: "Feb 13, 2026" },
+  { id: "TXN-005", customer: "Stark Industries", amount: "$5,670.00", status: "Completed", date: "Feb 13, 2026" },
+  { id: "TXN-006", customer: "Wayne Enterprises", amount: "$4,320.00", status: "Pending", date: "Feb 12, 2026" },
+];
+
+/* ─── Components ─── */
+
+function KpiCard({ title, value, change, trend, icon: Icon }: (typeof kpis)[number]) {
+  return (
+    <Card>
+      <CardContent className="copa:pt-6">
+        <div className="copa:flex copa:items-center copa:justify-between">
+          <div className="copa:flex copa:flex-col copa:gap-1">
+            <span className="copa:text-xs copa:font-medium copa:text-muted-foreground copa:uppercase copa:tracking-wide">
+              {title}
+            </span>
+            <span className="copa:text-2xl copa:font-bold">{value}</span>
+            <div className="copa:flex copa:items-center copa:gap-1 copa:text-xs">
+              {trend === "up" ? (
+                <IconArrowUpRight className="copa:size-3.5 copa:text-green-600" />
+              ) : (
+                <IconArrowDownRight className="copa:size-3.5 copa:text-red-500" />
+              )}
+              <span className={trend === "up" ? "copa:text-green-600" : "copa:text-red-500"}>
+                {change}
+              </span>
+              <span className="copa:text-muted-foreground">vs last month</span>
+            </div>
+          </div>
+          <div className="copa:flex copa:size-10 copa:items-center copa:justify-center copa:rounded-lg copa:bg-primary/10">
+            <Icon className="copa:size-5 copa:text-primary" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const styles: Record<string, string> = {
+    Completed: "copa:bg-green-100 copa:text-green-700",
+    Pending: "copa:bg-amber-100 copa:text-amber-700",
+    Failed: "copa:bg-red-100 copa:text-red-700",
+  };
+
+  return (
+    <span className={`copa:inline-flex copa:items-center copa:rounded-full copa:px-2 copa:py-0.5 copa:text-xs copa:font-medium ${styles[status] ?? "copa:bg-muted copa:text-muted-foreground"}`}>
+      {status}
+    </span>
+  );
+}
+
+function TransactionsTable() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Recent Transactions</CardTitle>
+        <CardDescription>Latest payment activity across your workspace.</CardDescription>
+      </CardHeader>
+      <CardContent className="copa:p-0">
+        <div className="copa:overflow-auto">
+          <table className="copa:w-full copa:text-sm">
+            <thead>
+              <tr className="copa:border-b copa:border-border">
+                <th className="copa:px-6 copa:py-3 copa:text-left copa:text-xs copa:font-medium copa:text-muted-foreground copa:uppercase copa:tracking-wide">
+                  ID
+                </th>
+                <th className="copa:px-6 copa:py-3 copa:text-left copa:text-xs copa:font-medium copa:text-muted-foreground copa:uppercase copa:tracking-wide">
+                  Customer
+                </th>
+                <th className="copa:px-6 copa:py-3 copa:text-right copa:text-xs copa:font-medium copa:text-muted-foreground copa:uppercase copa:tracking-wide">
+                  Amount
+                </th>
+                <th className="copa:px-6 copa:py-3 copa:text-left copa:text-xs copa:font-medium copa:text-muted-foreground copa:uppercase copa:tracking-wide">
+                  Status
+                </th>
+                <th className="copa:px-6 copa:py-3 copa:text-left copa:text-xs copa:font-medium copa:text-muted-foreground copa:uppercase copa:tracking-wide">
+                  Date
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {recentTransactions.map((txn) => (
+                <tr
+                  key={txn.id}
+                  className="copa:border-b copa:border-border/50 last:copa:border-0 copa:hover:bg-muted/50 copa:transition-colors"
+                >
+                  <td className="copa:px-6 copa:py-3 copa:font-medium">{txn.id}</td>
+                  <td className="copa:px-6 copa:py-3">{txn.customer}</td>
+                  <td className="copa:px-6 copa:py-3 copa:text-right copa:font-medium">{txn.amount}</td>
+                  <td className="copa:px-6 copa:py-3">
+                    <StatusBadge status={txn.status} />
+                  </td>
+                  <td className="copa:px-6 copa:py-3 copa:text-muted-foreground">{txn.date}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/* ─── Page ─── */
+
+export default function Dashboard() {
+  return (
+    <>
+      <div className="copa:flex copa:items-center copa:justify-between">
+        <h1 className="copa:text-2xl copa:font-semibold">Dashboard</h1>
+        <Button
+          onClick={() =>
+            toast.success("Event has been created", {
+              description: "Sunday, February 17, 2026 at 5:30 PM",
+            })
+          }
+        >
+          Show Toast
+        </Button>
+      </div>
+
+      <div className="copa:grid copa:gap-4 copa:sm:grid-cols-2 copa:lg:grid-cols-4">
+        {kpis.map((kpi) => (
+          <KpiCard key={kpi.title} {...kpi} />
+        ))}
+      </div>
+
+      <div className="copa:grid copa:gap-4 copa:lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Monthly Revenue</CardTitle>
+            <CardDescription>Revenue trend over the last 8 months.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <BarChart
+              data={revenueData}
+              height={280}
+              formatValue={(v) => `$${(v / 1000).toFixed(1)}K`}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Expenses Breakdown</CardTitle>
+            <CardDescription>Spending distribution by category.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DonutChart
+              data={expensesData}
+              height={280}
+              centerText="100%"
+              centerSubText="Total"
+              showLabels={false}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <TransactionsTable />
+    </>
+  );
+}

package/templates/latest/app/pages/payments.tsx

@@ -0,0 +1,182 @@
+import { useMemo, useCallback, useState } from "react";
+import { useDataset } from "@bluecopa/react";
+import { IconAlertTriangle, IconLoader2, IconSearch } from "@tabler/icons-react";
+import type { ColDef, GridReadyEvent } from "ag-grid-community";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { AgGridTable } from "~/components/ui/ag-grid-table";
+import { createServerSideDatasource } from "~/utils/ag-grid-datasource";
+import { Input } from "~/components/ui/input";
+
+const DATASET_ID = "0a3be3311769d7e9edb830adf72e41d9";
+const USE_SERVER_SIDE = false;
+
+type PaymentRow = Record<string, unknown>;
+
+function parseResponse(data: unknown): {
+  rows: PaymentRow[];
+  columns: string[];
+} {
+  const response = data as Record<string, unknown> | unknown[] | undefined;
+  let rows: PaymentRow[] = [];
+  let columns: string[] = [];
+
+  if (Array.isArray(response)) {
+    rows = response as PaymentRow[];
+  } else if (response && typeof response === "object") {
+    if ("data" in response && Array.isArray(response.data)) {
+      rows = response.data as PaymentRow[];
+    } else if ("records" in response && Array.isArray(response.records)) {
+      rows = response.records as PaymentRow[];
+    } else if ("rows" in response && Array.isArray(response.rows)) {
+      rows = response.rows as PaymentRow[];
+    }
+    if ("columns" in response && Array.isArray(response.columns)) {
+      columns = response.columns as string[];
+    }
+  }
+
+  if (columns.length === 0 && rows.length > 0) {
+    columns = Object.keys(rows[0]).filter(
+      (key) => !key.startsWith("_") && key !== "id",
+    );
+  }
+
+  return { rows, columns };
+}
+
+export default function Payments() {
+  const [quickFilter, setQuickFilter] = useState("");
+
+  const { data, isLoading, error } = useDataset(
+    USE_SERVER_SIDE ? undefined! : DATASET_ID,
+    { limit: 100 },
+  );
+
+  const { rows, columns } = useMemo(() => parseResponse(data), [data]);
+
+  const onGridReady = useCallback((event: GridReadyEvent) => {
+    if (!USE_SERVER_SIDE) return;
+    const datasource = createServerSideDatasource({ tableId: DATASET_ID });
+    event.api.setGridOption("serverSideDatasource", datasource);
+  }, []);
+
+  const columnDefs: ColDef[] = useMemo(
+    () =>
+      columns.map((col) => ({
+        field: col,
+        headerName: col
+          .replace(/([A-Z])/g, " $1")
+          .replace(/_/g, " ")
+          .trim(),
+      })),
+    [columns],
+  );
+
+  if (isLoading) {
+    return (
+      <>
+        <h1 className="copa:text-2xl copa:font-semibold">Payments</h1>
+        <Card className="copa:max-w-md">
+          <CardContent className="copa:flex copa:items-center copa:gap-3 copa:py-12 copa:justify-center">
+            <IconLoader2 className="copa:size-5 copa:animate-spin copa:text-primary" />
+            <span className="copa:text-sm copa:text-muted-foreground">
+              Loading payments data…
+            </span>
+          </CardContent>
+        </Card>
+      </>
+    );
+  }
+
+  if (error) {
+    return (
+      <>
+        <h1 className="copa:text-2xl copa:font-semibold">Payments</h1>
+        <Card className="copa:max-w-lg">
+          <CardContent className="copa:flex copa:items-start copa:gap-3 copa:py-8">
+            <IconAlertTriangle className="copa:size-5 copa:text-destructive copa:shrink-0 copa:mt-0.5" />
+            <div className="copa:flex copa:flex-col copa:gap-1">
+              <span className="copa:text-sm copa:font-medium">
+                Failed to load payments
+              </span>
+              <span className="copa:text-xs copa:text-muted-foreground">
+                {error.message}
+              </span>
+              <span className="copa:text-xs copa:text-muted-foreground copa:mt-1">
+                Dataset ID: {DATASET_ID}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="copa:flex copa:items-center copa:justify-between">
+        <h1 className="copa:text-2xl copa:font-semibold">Payments</h1>
+        <span className="copa:text-xs copa:text-muted-foreground copa:bg-muted copa:rounded-md copa:px-2 copa:py-1">
+          {USE_SERVER_SIDE ? "Server-side" : `${rows.length} records`}
+        </span>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Payment Records</CardTitle>
+          <CardDescription>
+            Live data from dataset {DATASET_ID.slice(0, 8)}…
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="copa:px-4 copa:pb-4 copa:pt-0">
+          <AgGridTable
+            columnDefs={columnDefs}
+            {...(!USE_SERVER_SIDE ? { rowData: rows } : {})}
+            height={600}
+            quickFilterText={quickFilter}
+            header={
+              <div className="copa:px-4 copa:pt-2">
+                <div className="copa:relative copa:max-w-xs">
+                  <IconSearch className="copa:absolute copa:left-2.5 copa:top-2.5 copa:size-4 copa:text-muted-foreground" />
+                  <Input
+                    placeholder="Search payments…"
+                    value={quickFilter}
+                    onChange={(e) => setQuickFilter(e.target.value)}
+                    className="copa:pl-9 copa:h-9"
+                  />
+                </div>
+              </div>
+            }
+            gridOptions={{
+              ...(USE_SERVER_SIDE
+                ? { rowModelType: "serverSide" as const }
+                : {}),
+              pagination: true,
+              paginationPageSize: 50,
+              paginationPageSizeSelector: [20, 50, 100],
+              ...(USE_SERVER_SIDE
+                ? { cacheBlockSize: 50, maxBlocksInCache: 5 }
+                : {}),
+              rowSelection: { mode: "multiRow" },
+              onGridReady,
+              defaultColDef: {
+                sortable: true,
+                filter: true,
+                resizable: true,
+                minWidth: 100,
+                flex: 1,
+              },
+            }}
+          />
+        </CardContent>
+      </Card>
+    </>
+  );
+}

package/templates/latest/app/pages/settings.tsx

@@ -0,0 +1,128 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { useAppContext } from "~/contexts/app-context";
+
+function SettingRow({
+  label,
+  value,
+}: {
+  label: string;
+  value: React.ReactNode;
+}) {
+  return (
+    <div className="copa:flex copa:items-center copa:justify-between copa:py-3 copa:border-b copa:border-border/50 last:copa:border-0">
+      <span className="copa:text-sm copa:text-muted-foreground">{label}</span>
+      <span className="copa:text-sm copa:font-medium">{value}</span>
+    </div>
+  );
+}
+
+function CurrencyTab() {
+  const { currentWorkspaceSettings } = useAppContext();
+
+  return (
+    <div className="copa:grid copa:gap-4 copa:max-w-2xl">
+      <Card>
+        <CardHeader>
+          <CardTitle>Currency</CardTitle>
+          <CardDescription>
+            Default currency used across reports and transactions.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <SettingRow label="Base currency" value={currentWorkspaceSettings.currency} />
+          <SettingRow label="Display format" value="1,234.56" />
+          <SettingRow label="Currency position" value="Before amount" />
+          <SettingRow label="Decimal places" value="2" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function NumberSettingsTab() {
+  const { currentWorkspaceSettings } = useAppContext();
+
+  return (
+    <div className="copa:grid copa:gap-4 copa:max-w-2xl">
+      <Card>
+        <CardHeader>
+          <CardTitle>Number Format</CardTitle>
+          <CardDescription>
+            How numbers, dates, and percentages are displayed.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <SettingRow label="Thousands separator" value="Comma (1,000)" />
+          <SettingRow label="Decimal separator" value="Period (0.00)" />
+          <SettingRow label="Date format" value={currentWorkspaceSettings.dateFormat} />
+          <SettingRow label="Timezone" value={currentWorkspaceSettings.timezone} />
+          <SettingRow label="Percentage format" value="45.2%" />
+          <SettingRow label="Negative numbers" value="(1,234.56)" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function ChartThemeTab() {
+  return (
+    <div className="copa:grid copa:gap-4 copa:max-w-2xl">
+      <Card>
+        <CardHeader>
+          <CardTitle>Chart Theme</CardTitle>
+          <CardDescription>
+            Visual appearance for charts and data visualizations.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <SettingRow label="Color palette" value="Bluecopa Default" />
+          <SettingRow label="Chart font" value="Satoshi" />
+          <SettingRow label="Grid lines" value="Subtle" />
+          <SettingRow label="Tooltip style" value="Floating card" />
+          <SettingRow label="Animation" value="Enabled" />
+          <SettingRow label="Legend position" value="Bottom" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function Settings() {
+  const { user, isAdmin } = useAppContext();
+
+  return (
+    <>
+      <div className="copa:flex copa:items-center copa:justify-between">
+        <h1 className="copa:text-2xl copa:font-semibold">Settings</h1>
+        <span className="copa:text-xs copa:text-muted-foreground copa:bg-muted copa:rounded-md copa:px-2 copa:py-1">
+          {isAdmin ? "Admin" : "Member"} &middot; {user?.email}
+        </span>
+      </div>
+
+      <Tabs defaultValue="currency">
+        <TabsList>
+          <TabsTrigger value="currency">Currency</TabsTrigger>
+          <TabsTrigger value="numbers">Number Settings</TabsTrigger>
+          <TabsTrigger value="charts">Chart Theme</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="currency">
+          <CurrencyTab />
+        </TabsContent>
+        <TabsContent value="numbers">
+          <NumberSettingsTab />
+        </TabsContent>
+        <TabsContent value="charts">
+          <ChartThemeTab />
+        </TabsContent>
+      </Tabs>
+    </>
+  );
+}

package/templates/latest/app/routes/index.tsx

@@ -0,0 +1,19 @@
+import { Routes, Route, Navigate } from "react-router-dom";
+import { AppLayout } from "~/components/layouts/app-layout";
+import Dashboard from "~/pages/dashboard";
+import Payments from "~/pages/payments";
+import Settings from "~/pages/settings";
+import { ROUTES } from "~/constants";
+
+export default function RouteConfig() {
+  return (
+    <Routes>
+      <Route element={<AppLayout />}>
+        <Route path={ROUTES.DASHBOARD} element={<Dashboard />} />
+        <Route path={ROUTES.PAYMENTS} element={<Payments />} />
+        <Route path={ROUTES.SETTINGS} element={<Settings />} />
+      </Route>
+      <Route path="*" element={<Navigate to={ROUTES.DASHBOARD} replace />} />
+    </Routes>
+  );
+}