@spaceinvoices/react-ui 0.4.10 → 0.4.12

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

@@ -4,6 +4,7 @@
  * Sends 1 query in a batch request.
  */
 import type { StatsQueryDataItem } from "@spaceinvoices/js-sdk";
+import { formatLocalDate, formatLocalMonth } from "../shared/local-date";
 import { useStatsQuery } from "../shared/use-stats-query";
 
 export const PAYMENT_TREND_CACHE_KEY = "dashboard-payment-trend";
@@ -17,13 +18,13 @@ function getLastMonths(count: number): { months: string[]; startDate: string; en
 
   for (let i = count - 1; i >= 0; i--) {
     const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
-    months.push(d.toISOString().substring(0, 7));
+    months.push(formatLocalMonth(d));
   }
 
   return {
     months,
-    startDate: startDate.toISOString().substring(0, 10),
-    endDate: endDate.toISOString().substring(0, 10),
+    startDate: formatLocalDate(startDate),
+    endDate: formatLocalDate(endDate),
   };
 }
 
@@ -39,7 +40,13 @@ export function usePaymentTrendData(entityId: string | undefined) {
       table: "payments",
       date_from: startDate,
       date_to: endDate,
-      group_by: ["month", "currency_code"],
+      // The dashboard trend should reflect collected invoice payments only.
+      // Exclude AP-linked rows and credit note refunds that otherwise skew monthly totals.
+      filters: {
+        invoice_id: { not: null },
+        credit_note_id: null,
+      },
+      group_by: ["month"],
       order_by: [{ field: "month", direction: "asc" }],
     },
     {
@@ -50,20 +57,16 @@ export function usePaymentTrendData(entityId: string | undefined) {
         }
 
         const data = response.data || [];
-        let currency = "EUR";
         for (const row of data as StatsQueryDataItem[]) {
           const month = String(row.month);
           if (month in monthMap) {
             monthMap[month] += Number(row.amount) || 0;
           }
-          if (row.currency_code && currency === "EUR") {
-            currency = String(row.currency_code);
-          }
         }
 
         return {
           data: months.map((month) => ({ month, amount: monthMap[month] })),
-          currency,
+          currency: "EUR",
         };
       },
     },

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

@@ -35,12 +35,12 @@ export function RevenueCard({ title, value, currency, variant = "default", subti
   }).format(value);
 
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between pb-2">
+    <Card className="gap-2">
+      <CardHeader className="flex flex-row items-center justify-between pb-1">
         <CardTitle className="font-medium text-muted-foreground text-sm">{title}</CardTitle>
         {Icon && <Icon className={`h-4 w-4 ${variantStyles[variant]}`} />}
       </CardHeader>
-      <CardContent>
+      <CardContent className="pt-0">
         <div className={`font-bold text-2xl ${variantStyles[variant]}`}>{formattedValue}</div>
         {subtitle && <p className="mt-1 text-muted-foreground text-xs">{subtitle}</p>}
       </CardContent>

package/src/components/dashboard/revenue-trend-chart/locales/bg.ts

@@ -1,5 +1,5 @@
 export default {
-  "Revenue": "Приходи",
+  Revenue: "Приходи",
   "Revenue Trend": "Тенденция на приходите",
   "Monthly revenue over the last 6 months": "Месечни приходи за последните 6 месеца",
   "No data available": "Няма налични данни",

package/src/components/dashboard/revenue-trend-chart/locales/cs.ts

@@ -1,5 +1,5 @@
 export default {
-  "Revenue": "Tržby",
+  Revenue: "Tržby",
   "Revenue Trend": "Vývoj tržeb",
   "Monthly revenue over the last 6 months": "Měsíční tržby za posledních 6 měsíců",
   "No data available": "Žádná data k dispozici",

package/src/components/dashboard/revenue-trend-chart/locales/en.ts

@@ -0,0 +1,6 @@
+export default {
+  Revenue: "Revenue",
+  "Revenue Trend": "Revenue Trend",
+  "Monthly revenue over the last 6 months": "Monthly revenue over the last 6 months",
+  "No data available": "No data available",
+} as const;

package/src/components/dashboard/revenue-trend-chart/locales/et.ts

@@ -1,5 +1,5 @@
 export default {
-  "Revenue": "Käive",
+  Revenue: "Käive",
   "Revenue Trend": "Käibe trend",
   "Monthly revenue over the last 6 months": "Kuukäive viimase 6 kuu jooksul",
   "No data available": "Andmed puuduvad",

package/src/components/dashboard/revenue-trend-chart/locales/fi.ts

@@ -1,5 +1,5 @@
 export default {
-  "Revenue": "Revenue",
+  Revenue: "Revenue",
   "Revenue Trend": "Revenue Trend",
   "Monthly revenue over the last 6 months": "Monthly revenue over the last 6 months",
   "No data available": "No data available",

package/src/components/dashboard/revenue-trend-chart/locales/is.ts

@@ -1,5 +1,5 @@
 export default {
-  "Revenue": "Tekjur",
+  Revenue: "Tekjur",
   "Revenue Trend": "Tekjuþróun",
   "Monthly revenue over the last 6 months": "Mánaðarlegar tekjur síðustu 6 mánuði",
   "No data available": "Engin gögn tiltæk",

package/src/components/dashboard/revenue-trend-chart/locales/nb.ts

@@ -1,5 +1,5 @@
 export default {
-  "Revenue": "Omsetning",
+  Revenue: "Omsetning",
   "Revenue Trend": "Omsetningstrend",
   "Monthly revenue over the last 6 months": "Månedlig omsetning de siste 6 månedene",
   "No data available": "Ingen data tilgjengelig",

package/src/components/dashboard/revenue-trend-chart/locales/sk.ts

@@ -1,5 +1,5 @@
 export default {
-  "Revenue": "Príjmy",
+  Revenue: "Príjmy",
   "Revenue Trend": "Trend prijmov",
   "Monthly revenue over the last 6 months": "Mesačné príjmy za posledných 6 mesiacov",
   "No data available": "Žiadne dostupné údaje",

package/src/components/dashboard/revenue-trend-chart/locales/sv.ts

@@ -1,5 +1,5 @@
 export default {
-  "Revenue": "Intäkter",
+  Revenue: "Intäkter",
   "Revenue Trend": "Intäktsutveckling",
   "Monthly revenue over the last 6 months": "Månatliga intäkter de senaste 6 månaderna",
   "No data available": "Ingen data tillgänglig",

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

@@ -9,8 +9,8 @@ import { LoadingCard } from "../loading-card";
 import bg from "./locales/bg";
 import cs from "./locales/cs";
 import de from "./locales/de";
-import et from "./locales/et";
 import es from "./locales/es";
+import et from "./locales/et";
 import fi from "./locales/fi";
 import fr from "./locales/fr";
 import hr from "./locales/hr";
@@ -31,6 +31,7 @@ export type RevenueTrendChartData = { month: string; revenue: number }[];
 
 type BaseProps = {
   locale?: string;
+  translationLocale?: string;
   t?: (key: string) => string;
   namespace?: string;
 };
@@ -64,8 +65,8 @@ function formatCurrency(value: number, currency: string, locale?: string): strin
 }
 
 export function RevenueTrendChart(props: RevenueTrendChartProps) {
-  const { locale, t: externalT, namespace } = props;
-  const t = createTranslation({ t: externalT, namespace, locale, translations });
+  const { locale, translationLocale, t: externalT, namespace } = props;
+  const t = createTranslation({ t: externalT, namespace, locale, translationLocale, translations });
 
   // Turnkey mode - fetch own data
   const hookResult = useRevenueTrendData("entityId" in props ? props.entityId : undefined);

package/src/components/dashboard/revenue-trend-chart/use-revenue-trend.ts

@@ -4,6 +4,7 @@
  * Sends 2 queries in a single batch request.
  */
 import type { StatsQueryDataItem, StatsQueryRequest } from "@spaceinvoices/js-sdk";
+import { formatLocalDate, formatLocalMonth } from "../shared/local-date";
 import { useStatsBatchQuery } from "../shared/use-stats-query";
 
 export const REVENUE_TREND_CACHE_KEY = "dashboard-revenue-trend";
@@ -17,13 +18,13 @@ function getLastMonths(count: number): { months: string[]; startDate: string; en
 
   for (let i = count - 1; i >= 0; i--) {
     const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
-    months.push(d.toISOString().substring(0, 7));
+    months.push(formatLocalMonth(d));
   }
 
   return {
     months,
-    startDate: startDate.toISOString().substring(0, 10),
-    endDate: endDate.toISOString().substring(0, 10),
+    startDate: formatLocalDate(startDate),
+    endDate: formatLocalDate(endDate),
   };
 }
 

package/src/components/dashboard/shared/local-date.ts

@@ -0,0 +1,11 @@
+function pad(value: number): string {
+  return String(value).padStart(2, "0");
+}
+
+export function formatLocalDate(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+export function formatLocalMonth(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}`;
+}

package/src/components/dashboard/shared/use-revenue-data.ts

@@ -4,6 +4,7 @@
  * Sends 7 queries in a single batch request.
  */
 import type { StatsQueryDataItem, StatsQueryRequest } from "@spaceinvoices/js-sdk";
+import { formatLocalDate } from "./local-date";
 import { useStatsBatchQuery } from "./use-stats-query";
 
 export const REVENUE_DATA_CACHE_KEY = "dashboard-revenue-data";
@@ -13,8 +14,8 @@ function getMonthDateRange() {
   const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
   const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
   return {
-    from: firstDay.toISOString().split("T")[0],
-    to: lastDay.toISOString().split("T")[0],
+    from: formatLocalDate(firstDay),
+    to: formatLocalDate(lastDay),
   };
 }
 
@@ -61,7 +62,7 @@ export function useRevenueData(entityId: string | undefined) {
     {
       metrics: [{ type: "sum", field: "total_due", alias: "outstanding" }],
       table: "invoices",
-      filters: { is_draft: false, paid_in_full: false },
+      filters: { is_draft: false, voided_at: null, paid_in_full: false },
     },
     // [3] Overdue (past due date, unpaid)
     {
@@ -70,7 +71,7 @@ export function useRevenueData(entityId: string | undefined) {
         { type: "count", alias: "count" },
       ],
       table: "invoices",
-      filters: { is_draft: false, paid_in_full: false },
+      filters: { is_draft: false, voided_at: null, paid_in_full: false },
       group_by: ["overdue_bucket"],
     },
     // [4] Credit notes: this month
@@ -93,7 +94,7 @@ export function useRevenueData(entityId: string | undefined) {
     {
       metrics: [{ type: "sum", field: "total_due", alias: "outstanding" }],
       table: "credit_notes",
-      filters: { is_draft: false, paid_in_full: false },
+      filters: { is_draft: false, voided_at: null, paid_in_full: false },
     },
   ];
 

package/src/components/dashboard/shared/use-stats-query.ts

@@ -3,8 +3,8 @@
  * Provides server-side aggregation instead of client-side calculation.
  */
 import type { StatsQueryBatchResponse, StatsQueryRequest, StatsQueryResponse } from "@spaceinvoices/js-sdk";
+import { entityStats } from "@spaceinvoices/js-sdk";
 import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
-import { useSDK } from "@/ui/providers/sdk-provider";
 
 export const STATS_QUERY_CACHE_KEY = "entity-stats-query";
 
@@ -23,16 +23,14 @@ export function useStatsQuery<TData = StatsQueryResponse>(
   query: StatsQueryRequest,
   options?: StatsQueryOptions<TData>,
 ) {
-  const { sdk } = useSDK();
-
   return useQuery({
     queryKey: [STATS_QUERY_CACHE_KEY, entityId, query],
     queryFn: async () => {
-      if (!entityId || !sdk) throw new Error("Missing entity or SDK");
-      const results = await sdk.entityStats.queryEntityStats([query], { entity_id: entityId });
+      if (!entityId) throw new Error("Missing entity");
+      const results = await entityStats.queryEntityStats([query], { entity_id: entityId });
       return results[0];
     },
-    enabled: !!entityId && !!sdk,
+    enabled: !!entityId,
     staleTime: 120_000, // 2 minutes
     ...options,
   });
@@ -53,15 +51,13 @@ export function useStatsBatchQuery<TData = StatsQueryBatchResponse>(
   queries: StatsQueryRequest[],
   options?: StatsBatchQueryOptions<TData>,
 ) {
-  const { sdk } = useSDK();
-
   return useQuery({
     queryKey: [STATS_QUERY_CACHE_KEY, entityId, queryKey, queries],
     queryFn: async () => {
-      if (!entityId || !sdk) throw new Error("Missing entity or SDK");
-      return sdk.entityStats.queryEntityStats(queries, { entity_id: entityId });
+      if (!entityId) throw new Error("Missing entity");
+      return entityStats.queryEntityStats(queries, { entity_id: entityId });
     },
-    enabled: !!entityId && !!sdk,
+    enabled: !!entityId,
     staleTime: 120_000,
     ...options,
   });

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

@@ -11,11 +11,11 @@ export type StatCardProps = {
 
 export function StatCard({ title, value, href, onClick }: StatCardProps) {
   const content = (
-    <Card className="cursor-pointer transition-colors hover:bg-accent/50">
-      <CardHeader className="pb-2">
+    <Card className="cursor-pointer gap-2 transition-colors hover:bg-accent/50">
+      <CardHeader className="pb-1">
         <CardTitle className="font-medium text-muted-foreground text-sm">{title}</CardTitle>
       </CardHeader>
-      <CardContent>
+      <CardContent className="pt-0">
         <div className="font-bold text-2xl">{value ?? 0}</div>
       </CardContent>
     </Card>

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
-import { createTranslation } from "@/ui/lib/translation";
 import { Skeleton } from "@/ui/components/ui/skeleton";
+import { createTranslation } from "@/ui/lib/translation";
 import translations from "./locales";
 import type { TaxByRate } from "./use-tax-collected";
 
@@ -14,6 +14,7 @@ export type TaxCollectedCardProps = {
   currency: string;
   isLoading?: boolean;
   locale?: string;
+  translationLocale?: string;
   t?: (key: string) => string;
 };
 
@@ -33,17 +34,18 @@ export function TaxCollectedCard({
   currency,
   isLoading,
   locale,
+  translationLocale,
   t: externalT,
 }: TaxCollectedCardProps) {
-  const t = createTranslation({ t: externalT, locale, translations });
+  const t = createTranslation({ t: externalT, locale, translationLocale, translations });
 
   if (isLoading) {
     return (
-      <Card>
-        <CardHeader className="pb-2">
+      <Card className="gap-2">
+        <CardHeader className="pb-1">
           <CardTitle className="font-medium text-muted-foreground text-sm">{title}</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-2">
+        <CardContent className="space-y-2 pt-0">
           <Skeleton className="h-6 w-24" />
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-4 w-28" />
@@ -53,14 +55,14 @@ export function TaxCollectedCard({
   }
 
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between pb-2">
+    <Card className="gap-2">
+      <CardHeader className="flex flex-row items-center justify-between pb-1">
         <CardTitle className="font-medium text-muted-foreground text-sm">{title}</CardTitle>
         <span className="text-muted-foreground text-xs">{periodLabel}</span>
       </CardHeader>
-      <CardContent>
+      <CardContent className="pt-0">
         {/* Total */}
-        <div className="mb-3 font-bold text-2xl">{formatCurrency(total, currency, locale)}</div>
+        <div className="mb-2 font-bold text-2xl">{formatCurrency(total, currency, locale)}</div>
 
         {/* Tax breakdown */}
         {taxes.length > 0 ? (

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

@@ -4,6 +4,7 @@
  * Sends 2 queries in a single batch request.
  */
 import type { StatsQueryDataItem, StatsQueryRequest } from "@spaceinvoices/js-sdk";
+import { formatLocalDate } from "../shared/local-date";
 import { useStatsBatchQuery } from "../shared/use-stats-query";
 
 export const TAX_COLLECTED_CACHE_KEY = "dashboard-tax-collected";
@@ -13,8 +14,8 @@ function getPreviousMonthDateRange(locale?: string) {
   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],
+    from: formatLocalDate(firstDay),
+    to: formatLocalDate(lastDay),
     label: firstDay.toLocaleDateString(locale, { month: "short", year: "numeric" }),
   };
 }

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

@@ -1,6 +1,6 @@
 export default {
-  "Revenue": "Приходи",
-  "Unknown": "Неизвестен",
+  Revenue: "Приходи",
+  Unknown: "Неизвестен",
   "Top Customers": "Топ клиенти",
   "Top 5 customers by revenue": "Топ 5 клиенти по приходи",
   "No data available": "Няма налични данни",

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

@@ -1,6 +1,6 @@
 export default {
-  "Revenue": "Tržby",
-  "Unknown": "Neznámý",
+  Revenue: "Tržby",
+  Unknown: "Neznámý",
   "Top Customers": "Nejlepší zákazníci",
   "Top 5 customers by revenue": "Top 5 zákazníků podle tržeb",
   "No data available": "Žádná data k dispozici",

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

@@ -0,0 +1,7 @@
+export default {
+  Revenue: "Revenue",
+  Unknown: "Unknown",
+  "Top Customers": "Top Customers",
+  "Top 5 customers by revenue": "Top 5 customers by revenue",
+  "No data available": "No data available",
+} as const;

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

@@ -1,6 +1,6 @@
 export default {
-  "Revenue": "Käive",
-  "Unknown": "Tundmatu",
+  Revenue: "Käive",
+  Unknown: "Tundmatu",
   "Top Customers": "Parimad kliendid",
   "Top 5 customers by revenue": "5 parimat klienti käibe järgi",
   "No data available": "Andmed puuduvad",

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

@@ -1,6 +1,6 @@
 export default {
-  "Revenue": "Revenue",
-  "Unknown": "Unknown",
+  Revenue: "Revenue",
+  Unknown: "Unknown",
   "Top Customers": "Top Customers",
   "Top 5 customers by revenue": "Top 5 customers by revenue",
   "No data available": "No data available",

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

@@ -1,6 +1,6 @@
 export default {
-  "Revenue": "Tekjur",
-  "Unknown": "Óþekktur",
+  Revenue: "Tekjur",
+  Unknown: "Óþekktur",
   "Top Customers": "Efstu viðskiptavinir",
   "Top 5 customers by revenue": "5 efstu viðskiptavinir eftir tekjum",
   "No data available": "Engin gögn tiltæk",

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

@@ -1,6 +1,6 @@
 export default {
-  "Revenue": "Omsetning",
-  "Unknown": "Ukjent",
+  Revenue: "Omsetning",
+  Unknown: "Ukjent",
   "Top Customers": "Toppkunder",
   "Top 5 customers by revenue": "Topp 5 kunder etter omsetning",
   "No data available": "Ingen data tilgjengelig",

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

@@ -1,6 +1,6 @@
 export default {
-  "Revenue": "Príjmy",
-  "Unknown": "Neznámy",
+  Revenue: "Príjmy",
+  Unknown: "Neznámy",
   "Top Customers": "Najlepší zákazníci",
   "Top 5 customers by revenue": "Top 5 zákazníkov podľa prijmov",
   "No data available": "Žiadne dostupné údaje",

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

@@ -1,6 +1,6 @@
 export default {
-  "Revenue": "Intäkter",
-  "Unknown": "Okänd",
+  Revenue: "Intäkter",
+  Unknown: "Okänd",
   "Top Customers": "Toppkunder",
   "Top 5 customers by revenue": "Topp 5 kunder efter intäkter",
   "No data available": "Ingen data tillgänglig",

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

@@ -9,8 +9,8 @@ import { LoadingCard } from "../loading-card";
 import bg from "./locales/bg";
 import cs from "./locales/cs";
 import de from "./locales/de";
-import et from "./locales/et";
 import es from "./locales/es";
+import et from "./locales/et";
 import fi from "./locales/fi";
 import fr from "./locales/fr";
 import hr from "./locales/hr";
@@ -31,6 +31,7 @@ export type TopCustomersChartData = { name: string; revenue: number }[];
 
 type BaseProps = {
   locale?: string;
+  translationLocale?: string;
   t?: (key: string) => string;
   namespace?: string;
 };
@@ -59,8 +60,8 @@ function formatCurrency(value: number, currency: string, locale?: string): strin
 }
 
 export function TopCustomersChart(props: TopCustomersChartProps) {
-  const { locale, t: externalT, namespace } = props;
-  const t = createTranslation({ t: externalT, namespace, locale, translations });
+  const { locale, translationLocale, t: externalT, namespace } = props;
+  const t = createTranslation({ t: externalT, namespace, locale, translationLocale, translations });
 
   // Turnkey mode - fetch own data
   const hookResult = useTopCustomersData("entityId" in props ? props.entityId : undefined);

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

@@ -20,34 +20,21 @@ export function useTopCustomersData(entityId: string | undefined, limit = 5) {
       ],
       table: "invoices",
       filters: { is_draft: false, voided_at: null },
-      group_by: ["customer_name", "quote_currency"],
+      group_by: ["customer_name"],
       order_by: [{ field: "revenue", direction: "desc" }],
-      limit: limit * 2,
+      limit,
     },
     {
       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);
-          if (row.quote_currency && currency === "EUR") {
-            currency = String(row.quote_currency);
-          }
-        }
-
-        const customers = Object.entries(customerMap)
-          .map(([name, revenue]) => ({ name, revenue }))
-          .sort((a, b) => b.revenue - a.revenue)
-          .slice(0, limit);
+        const customers = (data as StatsQueryDataItem[]).map((row) => ({
+          name: String(row.customer_name || "Unknown"),
+          revenue: Number(row.revenue) || 0,
+        }));
 
         return {
           data: customers,
-          currency,
+          currency: "EUR",
         };
       },
     },