@spaceinvoices/react-ui 0.1.1

package/src/components/dashboard/invoice-status-chart/invoice-status-chart.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { Cell, Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/ui/components/ui/chart";
+import { createTranslation } from "@/ui/lib/translation";
+import { ChartEmptyState } from "../chart-empty-state";
+import { LoadingCard } from "../loading-card";
+import sl from "./locales/sl";
+import { useInvoiceStatusData } from "./use-invoice-status";
+
+const translations = { sl } as const;
+
+export type InvoiceStatusChartData = {
+  paid: number;
+  pending: number;
+  overdue: number;
+  voided: number;
+};
+
+type BaseProps = {
+  locale?: string;
+  t?: (key: string) => string;
+  namespace?: string;
+};
+
+type DataProps = BaseProps & {
+  data: InvoiceStatusChartData;
+  entityId?: never;
+};
+
+type TurnkeyProps = BaseProps & {
+  entityId: string;
+  data?: never;
+};
+
+export type InvoiceStatusChartProps = DataProps | TurnkeyProps;
+
+const COLORS = {
+  paid: "var(--chart-2)", // green
+  pending: "var(--chart-3)", // yellow
+  overdue: "var(--chart-1)", // red
+  voided: "var(--chart-4)", // gray
+};
+
+export function InvoiceStatusChart(props: InvoiceStatusChartProps) {
+  const { locale, t: externalT, namespace } = props;
+  const t = createTranslation({ t: externalT, namespace, locale, translations });
+
+  // Turnkey mode - fetch own data
+  const hookResult = useInvoiceStatusData("entityId" in props ? props.entityId : undefined);
+
+  // Determine data source
+  const data = "entityId" in props ? hookResult.data : props.data;
+  const isLoading = "entityId" in props ? hookResult.isLoading : false;
+
+  if (isLoading) {
+    return <LoadingCard className="h-[280px]" />;
+  }
+
+  const chartConfig = {
+    paid: { label: t("Paid"), color: COLORS.paid },
+    pending: { label: t("Pending"), color: COLORS.pending },
+    overdue: { label: t("Overdue"), color: COLORS.overdue },
+    voided: { label: t("Voided"), color: COLORS.voided },
+  } satisfies ChartConfig;
+
+  const total = data.paid + data.pending + data.overdue + data.voided;
+  const hasData = total > 0;
+
+  // Use actual data or placeholder for empty state
+  const chartData = hasData
+    ? [
+        { name: "paid", value: data.paid, fill: COLORS.paid },
+        { name: "pending", value: data.pending, fill: COLORS.pending },
+        { name: "overdue", value: data.overdue, fill: COLORS.overdue },
+        { name: "voided", value: data.voided, fill: COLORS.voided },
+      ].filter((d) => d.value > 0)
+    : [
+        { name: "paid", value: 40, fill: COLORS.paid },
+        { name: "pending", value: 30, fill: COLORS.pending },
+        { name: "overdue", value: 20, fill: COLORS.overdue },
+        { name: "voided", value: 10, fill: COLORS.voided },
+      ];
+
+  const chartContent = (
+    <ChartContainer config={chartConfig} className="mx-auto h-[200px] w-full">
+      <PieChart>
+        <Pie
+          data={chartData}
+          dataKey="value"
+          nameKey="name"
+          cx="50%"
+          cy="50%"
+          innerRadius={50}
+          outerRadius={80}
+          paddingAngle={2}
+        >
+          {chartData.map((entry) => (
+            <Cell key={entry.name} fill={entry.fill} />
+          ))}
+        </Pie>
+        <ChartTooltip content={<ChartTooltipContent nameKey="name" formatter={(value) => `${value} invoices`} />} />
+        <ChartLegend
+          content={<ChartLegendContent nameKey="name" />}
+          className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+        />
+      </PieChart>
+    </ChartContainer>
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("Invoice Status")}</CardTitle>
+        <CardDescription>{t("Breakdown of invoices by payment status")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {hasData ? chartContent : <ChartEmptyState label={t("No data available")}>{chartContent}</ChartEmptyState>}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/invoice-status-chart/locales/sl.ts

@@ -0,0 +1,9 @@
+export default {
+  "Invoice Status": "Status računov",
+  "Breakdown of invoices by payment status": "Razčlenitev računov po statusu plačila",
+  Paid: "Plačano",
+  Pending: "V čakanju",
+  Overdue: "Zapadlo",
+  Voided: "Stornirano",
+  "No data available": "Ni podatkov",
+} as const;

package/src/components/dashboard/invoice-status-chart/use-invoice-status.ts

@@ -0,0 +1,105 @@
+/**
+ * Invoice status hook using the entity stats API.
+ * Server-side counting by invoice status.
+ */
+import type { StatsQueryDataItem } from "@spaceinvoices/js-sdk";
+import { useQueries } from "@tanstack/react-query";
+import { useSDK } from "@/ui/providers/sdk-provider";
+import { STATS_QUERY_CACHE_KEY } from "../shared/use-stats-query";
+
+export const INVOICE_STATUS_CACHE_KEY = "dashboard-invoice-status";
+
+export type InvoiceStatusData = {
+  paid: number;
+  pending: number;
+  overdue: number;
+  voided: number;
+};
+
+export function useInvoiceStatusData(entityId: string | undefined) {
+  const { sdk } = useSDK();
+
+  const queries = useQueries({
+    queries: [
+      // Paid invoices
+      {
+        queryKey: [STATS_QUERY_CACHE_KEY, entityId, "invoice-status-paid"],
+        queryFn: async () => {
+          if (!entityId || !sdk) throw new Error("Missing entity or SDK");
+          return sdk.entityStats.queryEntityStats(
+            {
+              metrics: [{ type: "count", alias: "count" }],
+              table: "invoices",
+              filters: { is_draft: false, voided_at: null, paid_in_full: true },
+            },
+            { entity_id: entityId },
+          );
+        },
+        enabled: !!entityId && !!sdk,
+        staleTime: 30_000,
+      },
+      // Unpaid invoices grouped by overdue bucket (current = pending, others = overdue)
+      {
+        queryKey: [STATS_QUERY_CACHE_KEY, entityId, "invoice-status-unpaid"],
+        queryFn: async () => {
+          if (!entityId || !sdk) throw new Error("Missing entity or SDK");
+          return sdk.entityStats.queryEntityStats(
+            {
+              metrics: [{ type: "count", alias: "count" }],
+              table: "invoices",
+              filters: { is_draft: false, voided_at: null, paid_in_full: false },
+              group_by: ["overdue_bucket"],
+            },
+            { entity_id: entityId },
+          );
+        },
+        enabled: !!entityId && !!sdk,
+        staleTime: 30_000,
+      },
+      // Total count to derive voided
+      {
+        queryKey: [STATS_QUERY_CACHE_KEY, entityId, "invoice-status-total"],
+        queryFn: async () => {
+          if (!entityId || !sdk) throw new Error("Missing entity or SDK");
+          return sdk.entityStats.queryEntityStats(
+            {
+              metrics: [{ type: "count", alias: "count" }],
+              table: "invoices",
+              filters: { is_draft: false },
+            },
+            { entity_id: entityId },
+          );
+        },
+        enabled: !!entityId && !!sdk,
+        staleTime: 30_000,
+      },
+    ],
+  });
+
+  const [paidQuery, unpaidQuery, totalQuery] = queries;
+
+  const paid = Number(paidQuery.data?.data?.[0]?.count) || 0;
+
+  // Parse unpaid buckets
+  const unpaidData = unpaidQuery.data?.data || [];
+  let pending = 0;
+  let overdue = 0;
+  for (const row of unpaidData as StatsQueryDataItem[]) {
+    const bucket = String(row.overdue_bucket);
+    const count = Number(row.count) || 0;
+    if (bucket === "current") {
+      pending = count;
+    } else {
+      overdue += count;
+    }
+  }
+
+  // Calculate voided as: total - paid - pending - overdue
+  const total = Number(totalQuery.data?.data?.[0]?.count) || 0;
+  const voided = Math.max(0, total - paid - pending - overdue);
+
+  return {
+    data: { paid, pending, overdue, voided } as InvoiceStatusData,
+    isLoading: queries.some((q) => q.isLoading),
+  };
+}

package/src/components/dashboard/loading-card.tsx

@@ -0,0 +1,19 @@
+import { Card, CardContent, CardHeader } from "@/ui/components/ui/card";
+import { cn } from "@/ui/lib/utils";
+
+export type LoadingCardProps = {
+  className?: string;
+};
+
+export function LoadingCard({ className }: LoadingCardProps) {
+  return (
+    <Card className={cn(className)}>
+      <CardHeader className="pb-2">
+        <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+      </CardHeader>
+      <CardContent>
+        <div className="h-8 w-16 animate-pulse rounded bg-muted" />
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/payment-methods-chart/index.ts

@@ -0,0 +1,4 @@
+export type { PaymentMethodsChartData, PaymentMethodsChartProps } from "./payment-methods-chart";
+export { PaymentMethodsChart } from "./payment-methods-chart";
+export type { PaymentMethodsData } from "./use-payment-methods";
+export { PAYMENT_METHODS_CACHE_KEY, usePaymentMethodsData } from "./use-payment-methods";

package/src/components/dashboard/payment-methods-chart/locales/sl.ts

@@ -0,0 +1,12 @@
+export default {
+  "Payment Methods": "Načini plačila",
+  "Breakdown of payments by method": "Razčlenitev plačil po načinu",
+  Cash: "Gotovina",
+  "Bank Transfer": "Bančno nakazilo",
+  Card: "Kartica",
+  Check: "Ček",
+  "Credit Note": "Dobropis",
+  Advance: "Avans",
+  Other: "Drugo",
+  "No data available": "Ni podatkov",
+} as const;

package/src/components/dashboard/payment-methods-chart/payment-methods-chart.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { Cell, Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/ui/components/ui/chart";
+import { createTranslation } from "@/ui/lib/translation";
+import { ChartEmptyState } from "../chart-empty-state";
+import { LoadingCard } from "../loading-card";
+import sl from "./locales/sl";
+import { usePaymentMethodsData } from "./use-payment-methods";
+
+const translations = { sl } as const;
+
+export type PaymentMethodsChartData = { type: string; count: number; amount: number }[];
+
+type BaseProps = {
+  locale?: string;
+  t?: (key: string) => string;
+  namespace?: string;
+};
+
+type DataProps = BaseProps & {
+  data: PaymentMethodsChartData;
+  entityId?: never;
+};
+
+type TurnkeyProps = BaseProps & {
+  entityId: string;
+  data?: never;
+};
+
+export type PaymentMethodsChartProps = DataProps | TurnkeyProps;
+
+const COLORS: Record<string, string> = {
+  cash: "var(--chart-1)",
+  bank_transfer: "var(--chart-2)",
+  card: "var(--chart-3)",
+  check: "var(--chart-4)",
+  credit_note: "var(--chart-5)",
+  advance: "var(--chart-6)",
+  other: "var(--chart-7)",
+};
+
+const PAYMENT_TYPE_LABELS: Record<string, string> = {
+  cash: "Cash",
+  bank_transfer: "Bank Transfer",
+  card: "Card",
+  check: "Check",
+  credit_note: "Credit Note",
+  advance: "Advance",
+  other: "Other",
+};
+
+export function PaymentMethodsChart(props: PaymentMethodsChartProps) {
+  const { locale, t: externalT, namespace } = props;
+  const t = createTranslation({ t: externalT, namespace, locale, translations });
+
+  // Turnkey mode - fetch own data
+  const hookResult = usePaymentMethodsData("entityId" in props ? props.entityId : undefined);
+
+  // Determine data source
+  const data = "entityId" in props ? hookResult.data : props.data;
+  const isLoading = "entityId" in props ? hookResult.isLoading : false;
+
+  if (isLoading) {
+    return <LoadingCard className="h-[280px]" />;
+  }
+
+  const hasData = data.length > 0 && data.some((d) => d.amount > 0);
+
+  // Placeholder data for empty state
+  const placeholderData = [
+    { name: "cash", value: 35, fill: COLORS.cash },
+    { name: "bank_transfer", value: 40, fill: COLORS.bank_transfer },
+    { name: "card", value: 20, fill: COLORS.card },
+    { name: "other", value: 5, fill: COLORS.other },
+  ];
+
+  const chartData = hasData
+    ? data.map((d) => ({
+        name: d.type,
+        value: d.amount,
+        fill: COLORS[d.type] || "var(--chart-5)",
+      }))
+    : placeholderData;
+
+  const chartConfig = (hasData ? data : placeholderData).reduce((acc, item) => {
+    const type = "type" in item ? item.type : item.name;
+    acc[type] = {
+      label: t(PAYMENT_TYPE_LABELS[type] || type),
+      color: COLORS[type] || "var(--chart-5)",
+    };
+    return acc;
+  }, {} as ChartConfig);
+
+  const chartContent = (
+    <ChartContainer config={chartConfig} className="mx-auto h-[200px] w-full">
+      <PieChart>
+        <Pie
+          data={chartData}
+          dataKey="value"
+          nameKey="name"
+          cx="30%"
+          cy="50%"
+          innerRadius={40}
+          outerRadius={70}
+          paddingAngle={2}
+        >
+          {chartData.map((entry) => (
+            <Cell key={entry.name} fill={entry.fill} />
+          ))}
+        </Pie>
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              nameKey="name"
+              formatter={(value) =>
+                new Intl.NumberFormat(locale, { style: "currency", currency: "EUR" }).format(Number(value))
+              }
+            />
+          }
+        />
+        <ChartLegend
+          content={<ChartLegendContent nameKey="name" />}
+          layout="vertical"
+          verticalAlign="middle"
+          align="right"
+          className="flex-col gap-1 [&>*]:justify-start"
+        />
+      </PieChart>
+    </ChartContainer>
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("Payment Methods")}</CardTitle>
+        <CardDescription>{t("Breakdown of payments by method")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {hasData ? chartContent : <ChartEmptyState label={t("No data available")}>{chartContent}</ChartEmptyState>}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/payment-methods-chart/use-payment-methods.ts

@@ -0,0 +1,50 @@
+/**
+ * Payment methods hook using the entity stats API.
+ * Server-side aggregation by payment type.
+ */
+import type { StatsQueryDataItem } from "@spaceinvoices/js-sdk";
+import { useQuery } from "@tanstack/react-query";
+import { useSDK } from "@/ui/providers/sdk-provider";
+import { STATS_QUERY_CACHE_KEY } from "../shared/use-stats-query";
+
+export const PAYMENT_METHODS_CACHE_KEY = "dashboard-payment-methods";
+
+export type PaymentMethodsData = { type: string; count: number; amount: number }[];
+
+export function usePaymentMethodsData(entityId: string | undefined) {
+  const { sdk } = useSDK();
+
+  const query = useQuery({
+    queryKey: [STATS_QUERY_CACHE_KEY, entityId, "payment-methods"],
+    queryFn: async () => {
+      if (!entityId || !sdk) throw new Error("Missing entity or SDK");
+      return sdk.entityStats.queryEntityStats(
+        {
+          metrics: [
+            { type: "count", alias: "count" },
+            { type: "sum", field: "amount", alias: "amount" },
+          ],
+          table: "payments",
+          group_by: ["type"],
+          order_by: [{ field: "amount", direction: "desc" }],
+        },
+        { entity_id: entityId },
+      );
+    },
+    enabled: !!entityId && !!sdk,
+    staleTime: 30_000,
+    select: (response) => {
+      const data = response.data || [];
+      return (data as StatsQueryDataItem[]).map((row) => ({
+        type: String(row.type || "other"),
+        count: Number(row.count) || 0,
+        amount: Number(row.amount) || 0,
+      }));
+    },
+  });
+
+  return {
+    data: query.data || [],
+    isLoading: query.isLoading,
+  };
+}

package/src/components/dashboard/payment-trend-chart/index.ts

@@ -0,0 +1,4 @@
+export type { PaymentTrendChartData, PaymentTrendChartProps } from "./payment-trend-chart";
+export { PaymentTrendChart } from "./payment-trend-chart";
+export type { PaymentTrendData } from "./use-payment-trend";
+export { PAYMENT_TREND_CACHE_KEY, usePaymentTrendData } from "./use-payment-trend";

package/src/components/dashboard/payment-trend-chart/locales/sl.ts

@@ -0,0 +1,5 @@
+export default {
+  "Payment Trend": "Trend plačil",
+  "Monthly payments received over the last 6 months": "Mesečna prejeta plačila v zadnjih 6 mesecih",
+  "No data available": "Ni podatkov",
+} as const;

package/src/components/dashboard/payment-trend-chart/payment-trend-chart.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/ui/components/ui/chart";
+import { createTranslation } from "@/ui/lib/translation";
+import { ChartEmptyState } from "../chart-empty-state";
+import { LoadingCard } from "../loading-card";
+import sl from "./locales/sl";
+import { usePaymentTrendData } from "./use-payment-trend";
+
+const translations = { sl } as const;
+
+export type PaymentTrendChartData = { month: string; amount: number }[];
+
+type BaseProps = {
+  locale?: string;
+  t?: (key: string) => string;
+  namespace?: string;
+};
+
+type DataProps = BaseProps & {
+  data: PaymentTrendChartData;
+  currency: string;
+  entityId?: never;
+};
+
+type TurnkeyProps = BaseProps & {
+  entityId: string;
+  data?: never;
+  currency?: never;
+};
+
+export type PaymentTrendChartProps = DataProps | TurnkeyProps;
+
+const chartConfig = {
+  amount: {
+    label: "Payments",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig;
+
+function formatMonth(month: string, locale?: string): string {
+  const date = new Date(`${month}-01`);
+  return date.toLocaleDateString(locale, { month: "short" });
+}
+
+function formatCurrency(value: number, currency: string, locale?: string): string {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+export function PaymentTrendChart(props: PaymentTrendChartProps) {
+  const { locale, t: externalT, namespace } = props;
+  const t = createTranslation({ t: externalT, namespace, locale, translations });
+
+  // Turnkey mode - fetch own data
+  const hookResult = usePaymentTrendData("entityId" in props ? props.entityId : undefined);
+
+  // Determine data source
+  const data = "entityId" in props ? hookResult.data : props.data;
+  const currency = "entityId" in props ? hookResult.currency : props.currency;
+  const isLoading = "entityId" in props ? hookResult.isLoading : false;
+
+  if (isLoading) {
+    return <LoadingCard className="h-[280px]" />;
+  }
+
+  const hasData = data.some((d) => d.amount > 0);
+
+  // Placeholder data for empty state
+  const placeholderData =
+    data.length > 0
+      ? data.map((d) => ({ ...d, amount: 100 }))
+      : [
+          { month: "2024-01", amount: 70 },
+          { month: "2024-02", amount: 110 },
+          { month: "2024-03", amount: 85 },
+          { month: "2024-04", amount: 130 },
+          { month: "2024-05", amount: 95 },
+          { month: "2024-06", amount: 120 },
+        ];
+
+  const chartContent = (
+    <ChartContainer config={chartConfig} className="h-[200px] w-full">
+      <AreaChart data={hasData ? data : placeholderData} margin={{ left: 12, right: 12 }}>
+        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+        <XAxis
+          dataKey="month"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(m) => formatMonth(m, locale)}
+        />
+        <YAxis
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(value) => formatCurrency(value, currency, locale)}
+          width={80}
+        />
+        <defs>
+          <linearGradient id="fillPayments" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="var(--chart-3)" stopOpacity={0.8} />
+            <stop offset="95%" stopColor="var(--chart-3)" stopOpacity={0.1} />
+          </linearGradient>
+        </defs>
+        <ChartTooltip
+          cursor={false}
+          content={
+            <ChartTooltipContent
+              labelFormatter={(label) => formatMonth(label, locale)}
+              formatter={(value) => formatCurrency(Number(value), currency, locale)}
+            />
+          }
+        />
+        <Area dataKey="amount" type="monotone" fill="url(#fillPayments)" stroke="var(--chart-3)" strokeWidth={2} />
+      </AreaChart>
+    </ChartContainer>
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("Payment Trend")}</CardTitle>
+        <CardDescription>{t("Monthly payments received over the last 6 months")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {hasData ? chartContent : <ChartEmptyState label={t("No data available")}>{chartContent}</ChartEmptyState>}
+      </CardContent>
+    </Card>
+  );
+}