@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,41 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+
+export type StatCardProps = {
+  title: string;
+  value: string | number | undefined;
+  href?: string;
+  onClick?: () => void;
+};
+
+export function StatCard({ title, value, href, onClick }: StatCardProps) {
+  const content = (
+    <Card className="cursor-pointer transition-colors hover:bg-accent/50">
+      <CardHeader className="pb-2">
+        <CardTitle className="font-medium text-muted-foreground text-sm">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="font-bold text-2xl">{value ?? 0}</div>
+      </CardContent>
+    </Card>
+  );
+
+  if (href) {
+    return (
+      <a href={href} onClick={onClick}>
+        {content}
+      </a>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} className="w-full text-left">
+        {content}
+      </button>
+    );
+  }
+
+  return content;
+}

package/src/components/dashboard/tax-collected-card/index.ts

@@ -0,0 +1,2 @@
+export { TaxCollectedCard, type TaxCollectedCardProps } from "./tax-collected-card";
+export { type TaxByRate, type TaxCollectedData, useTaxCollectedData } from "./use-tax-collected";

package/src/components/dashboard/tax-collected-card/tax-collected-card.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import { Skeleton } from "@/ui/components/ui/skeleton";
+import type { TaxByRate } from "./use-tax-collected";
+
+export type TaxCollectedCardProps = {
+  title: string;
+  periodLabel: string;
+  taxes: TaxByRate[];
+  total: number;
+  currency: string;
+  isLoading?: boolean;
+  locale?: string;
+};
+
+function formatCurrency(value: number, currency: string, locale?: string): string {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2,
+  }).format(value);
+}
+
+export function TaxCollectedCard({
+  title,
+  periodLabel,
+  taxes,
+  total,
+  currency,
+  isLoading,
+  locale,
+}: TaxCollectedCardProps) {
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="font-medium text-muted-foreground text-sm">{title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <Skeleton className="h-6 w-24" />
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-28" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="font-medium text-muted-foreground text-sm">{title}</CardTitle>
+        <span className="text-muted-foreground text-xs">{periodLabel}</span>
+      </CardHeader>
+      <CardContent>
+        {/* Total */}
+        <div className="mb-3 font-bold text-2xl">{formatCurrency(total, currency, locale)}</div>
+
+        {/* Tax breakdown */}
+        {taxes.length > 0 ? (
+          <div className="space-y-1">
+            {taxes.map((tax) => (
+              <div key={`${tax.name}-${tax.rate}`} className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">
+                  {tax.name} {tax.rate}%
+                </span>
+                <span className="font-medium">{formatCurrency(tax.amount, currency, locale)}</span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-muted-foreground text-sm">No tax data</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/tax-collected-card/use-tax-collected.ts

@@ -0,0 +1,145 @@
+/**
+ * Tax collected hook - uses stats API to aggregate tax amounts by rate.
+ * Shows tax breakdown for previous month and current year.
+ */
+import type { StatsQueryDataItem } from "@spaceinvoices/js-sdk";
+import { useQueries } from "@tanstack/react-query";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+export const TAX_COLLECTED_CACHE_KEY = "dashboard-tax-collected";
+
+function getPreviousMonthDateRange() {
+  const now = new Date();
+  const firstDay = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+  const lastDay = new Date(now.getFullYear(), now.getMonth(), 0);
+  return {
+    from: firstDay.toISOString().split("T")[0],
+    to: lastDay.toISOString().split("T")[0],
+    label: firstDay.toLocaleDateString("en-US", { month: "short", year: "numeric" }),
+  };
+}
+
+function getYearDateRange() {
+  const year = new Date().getFullYear();
+  return {
+    from: `${year}-01-01`,
+    to: `${year}-12-31`,
+    label: `${year}`,
+  };
+}
+
+export type TaxByRate = {
+  name: string;
+  rate: number;
+  amount: number;
+};
+
+export type TaxCollectedData = {
+  previousMonth: {
+    label: string;
+    taxes: TaxByRate[];
+    total: number;
+  };
+  currentYear: {
+    label: string;
+    taxes: TaxByRate[];
+    total: number;
+  };
+  currency: string;
+};
+
+/**
+ * Transform stats response to TaxByRate array
+ */
+function transformTaxData(data: StatsQueryDataItem[]): TaxByRate[] {
+  return data
+    .filter((row) => row.rate != null && row.tax_total != null)
+    .map((row) => ({
+      name: "Tax", // Could be enhanced to include tax name if available
+      rate: Number(row.rate),
+      amount: Number(row.tax_total),
+    }))
+    .sort((a, b) => b.rate - a.rate); // Sort by rate descending
+}
+
+export function useTaxCollectedData(entityId: string | undefined) {
+  const { sdk } = useSDK();
+  const prevMonthRange = getPreviousMonthDateRange();
+  const yearRange = getYearDateRange();
+
+  const queries = useQueries({
+    queries: [
+      // Previous month taxes - aggregated by rate using stats API
+      {
+        queryKey: [TAX_COLLECTED_CACHE_KEY, entityId, "prev-month", prevMonthRange.from],
+        queryFn: async () => {
+          if (!entityId || !sdk) throw new Error("Missing entity or SDK");
+          // Use invoice_taxes virtual table to aggregate taxes by rate
+          return sdk.entityStats.queryEntityStats(
+            {
+              table: "invoice_taxes",
+              metrics: [{ type: "sum", field: "tax", alias: "tax_total" }],
+              group_by: ["rate", "quote_currency"],
+              date_from: prevMonthRange.from,
+              date_to: prevMonthRange.to,
+              filters: { is_draft: false, voided_at: null },
+            },
+            { entity_id: entityId },
+          );
+        },
+        enabled: !!entityId && !!sdk,
+        staleTime: 60_000, // 1 minute
+      },
+      // Current year taxes - aggregated by rate using stats API
+      {
+        queryKey: [TAX_COLLECTED_CACHE_KEY, entityId, "year", yearRange.from],
+        queryFn: async () => {
+          if (!entityId || !sdk) throw new Error("Missing entity or SDK");
+          return sdk.entityStats.queryEntityStats(
+            {
+              table: "invoice_taxes",
+              metrics: [{ type: "sum", field: "tax", alias: "tax_total" }],
+              group_by: ["rate", "quote_currency"],
+              date_from: yearRange.from,
+              date_to: yearRange.to,
+              filters: { is_draft: false, voided_at: null },
+            },
+            { entity_id: entityId },
+          );
+        },
+        enabled: !!entityId && !!sdk,
+        staleTime: 60_000,
+      },
+    ],
+  });
+
+  const [prevMonthQuery, yearQuery] = queries;
+
+  // Transform stats data to TaxByRate arrays
+  const prevMonthTaxes = transformTaxData(prevMonthQuery.data?.data || []);
+  const yearTaxes = transformTaxData(yearQuery.data?.data || []);
+
+  // Get currency from first result or default
+  const currency =
+    (prevMonthQuery.data?.data?.[0]?.quote_currency as string) ||
+    (yearQuery.data?.data?.[0]?.quote_currency as string) ||
+    "EUR";
+
+  return {
+    data: {
+      previousMonth: {
+        label: prevMonthRange.label,
+        taxes: prevMonthTaxes,
+        total: prevMonthTaxes.reduce((sum, t) => sum + t.amount, 0),
+      },
+      currentYear: {
+        label: yearRange.label,
+        taxes: yearTaxes,
+        total: yearTaxes.reduce((sum, t) => sum + t.amount, 0),
+      },
+      currency,
+    } as TaxCollectedData,
+    isLoading: queries.some((q) => q.isLoading),
+    error: queries.find((q) => q.error)?.error,
+  };
+}

package/src/components/dashboard/top-customers-chart/index.ts

@@ -0,0 +1,4 @@
+export type { TopCustomersChartData, TopCustomersChartProps } from "./top-customers-chart";
+export { TopCustomersChart } from "./top-customers-chart";
+export type { TopCustomersData } from "./use-top-customers";
+export { TOP_CUSTOMERS_CACHE_KEY, useTopCustomersData } from "./use-top-customers";

package/src/components/dashboard/top-customers-chart/locales/sl.ts

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Najboljše stranke",
+  "Top 5 customers by revenue": "Najboljših 5 strank po prihodkih",
+  "No data available": "Ni podatkov",
+} as const;

package/src/components/dashboard/top-customers-chart/top-customers-chart.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { Bar, BarChart, 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 { useTopCustomersData } from "./use-top-customers";
+
+const translations = { sl } as const;
+
+export type TopCustomersChartData = { name: string; revenue: number }[];
+
+type BaseProps = {
+  locale?: string;
+  t?: (key: string) => string;
+  namespace?: string;
+};
+
+type DataProps = BaseProps & {
+  data: TopCustomersChartData;
+  currency: string;
+  entityId?: never;
+};
+
+type TurnkeyProps = BaseProps & {
+  entityId: string;
+  data?: never;
+  currency?: never;
+};
+
+export type TopCustomersChartProps = DataProps | TurnkeyProps;
+
+const chartConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+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 TopCustomersChart(props: TopCustomersChartProps) {
+  const { locale, t: externalT, namespace } = props;
+  const t = createTranslation({ t: externalT, namespace, locale, translations });
+
+  // Turnkey mode - fetch own data
+  const hookResult = useTopCustomersData("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-full min-h-[280px]" />;
+  }
+
+  const hasData = data.length > 0;
+
+  // Placeholder data for empty state
+  const placeholderData = [
+    { name: "Customer A", displayName: "Customer A", revenue: 1500 },
+    { name: "Customer B", displayName: "Customer B", revenue: 1200 },
+    { name: "Customer C", displayName: "Customer C", revenue: 900 },
+    { name: "Customer D", displayName: "Customer D", revenue: 600 },
+    { name: "Customer E", displayName: "Customer E", revenue: 300 },
+  ];
+
+  // Truncate long names for display
+  const chartData = hasData
+    ? data.map((d) => ({
+        ...d,
+        displayName: d.name.length > 18 ? `${d.name.substring(0, 18)}...` : d.name,
+      }))
+    : placeholderData;
+
+  const chartContent = (
+    <ChartContainer config={chartConfig} className="h-full min-h-[200px] w-full">
+      <BarChart data={chartData} layout="vertical" margin={{ left: 8, right: 12 }}>
+        <XAxis
+          type="number"
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={(value) => formatCurrency(value, currency, locale)}
+        />
+        <YAxis
+          type="category"
+          dataKey="displayName"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={4}
+          width={120}
+          style={{ fontSize: "12px" }}
+        />
+        <ChartTooltip
+          cursor={false}
+          content={
+            <ChartTooltipContent
+              labelFormatter={(_, payload) => payload?.[0]?.payload?.name || ""}
+              formatter={(value) => formatCurrency(Number(value), currency, locale)}
+            />
+          }
+        />
+        <Bar dataKey="revenue" fill="var(--chart-1)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  );
+
+  return (
+    <Card className="flex h-full flex-col">
+      <CardHeader>
+        <CardTitle>{t("Top Customers")}</CardTitle>
+        <CardDescription>{t("Top 5 customers by revenue")}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1">
+        {hasData ? chartContent : <ChartEmptyState label={t("No data available")}>{chartContent}</ChartEmptyState>}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/top-customers-chart/use-top-customers.ts

@@ -0,0 +1,72 @@
+/**
+ * Top customers hook using the entity stats API.
+ * Server-side aggregation by customer for accurate rankings.
+ */
+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 TOP_CUSTOMERS_CACHE_KEY = "dashboard-top-customers";
+
+export type TopCustomersData = { name: string; revenue: number }[];
+
+export function useTopCustomersData(entityId: string | undefined, limit = 5) {
+  const { sdk } = useSDK();
+
+  const query = useQuery({
+    queryKey: [STATS_QUERY_CACHE_KEY, entityId, "top-customers", limit],
+    queryFn: async () => {
+      if (!entityId || !sdk) throw new Error("Missing entity or SDK");
+      return sdk.entityStats.queryEntityStats(
+        {
+          metrics: [
+            { type: "sum", field: "total_with_tax_converted", alias: "revenue" },
+            { type: "count", alias: "invoice_count" },
+          ],
+          table: "invoices",
+          filters: { is_draft: false, voided_at: null },
+          group_by: ["customer_name", "quote_currency"], // Include currency for display
+          order_by: [{ field: "revenue", direction: "desc" }],
+          limit: limit * 2, // Get more results to aggregate across currencies
+        },
+        { entity_id: entityId },
+      );
+    },
+    enabled: !!entityId && !!sdk,
+    staleTime: 30_000,
+    select: (response) => {
+      const data = response.data || [];
+
+      // Aggregate by customer name (in case of multiple quote_currency rows)
+      const customerMap: Record<string, number> = {};
+      let currency = "EUR";
+
+      for (const row of data as StatsQueryDataItem[]) {
+        const name = String(row.customer_name || "Unknown");
+        customerMap[name] = (customerMap[name] || 0) + (Number(row.revenue) || 0);
+        // Get currency from first row with data
+        if (row.quote_currency && currency === "EUR") {
+          currency = String(row.quote_currency);
+        }
+      }
+
+      // Convert to array, sort by revenue, and take top 'limit'
+      const customers = Object.entries(customerMap)
+        .map(([name, revenue]) => ({ name, revenue }))
+        .sort((a, b) => b.revenue - a.revenue)
+        .slice(0, limit);
+
+      return {
+        data: customers,
+        currency, // Currency from document data
+      };
+    },
+  });
+
+  return {
+    data: query.data?.data || [],
+    currency: query.data?.currency || "EUR",
+    isLoading: query.isLoading,
+  };
+}