@tuturuuu/ui 0.0.4 → 0.1.0

package/src/components/ui/finance/finance-page.tsx

@@ -0,0 +1,169 @@
+import {
+  type InternalApiClientOptions,
+  listTransactions,
+  withForwardedInternalApiAuth,
+} from '@tuturuuu/internal-api';
+import type { Transaction } from '@tuturuuu/types/primitives/Transaction';
+import { CustomDataTable } from '@tuturuuu/ui/custom/tables/custom-data-table';
+import { BudgetAlerts } from '@tuturuuu/ui/finance/budgets/budget-alerts';
+import { FinanceOverviewMetrics } from '@tuturuuu/ui/finance/finance-overview-metrics';
+import { CategoryBreakdownChart } from '@tuturuuu/ui/finance/shared/charts/category-breakdown-chart';
+import { DailyTotalChartClient } from '@tuturuuu/ui/finance/shared/charts/daily-total-chart-client';
+import { MonthlyTotalChartClient } from '@tuturuuu/ui/finance/shared/charts/monthly-total-chart-client';
+import ConfidentialToggle from '@tuturuuu/ui/finance/shared/confidential-toggle';
+import { DashboardHeader } from '@tuturuuu/ui/finance/shared/dashboard-header';
+import { Filter } from '@tuturuuu/ui/finance/shared/filter';
+import LoadingStatisticCard from '@tuturuuu/ui/finance/shared/loaders/statistics';
+import type { FinanceDashboardSearchParams } from '@tuturuuu/ui/finance/shared/metrics';
+import { transactionColumns } from '@tuturuuu/ui/finance/transactions/columns';
+import { Separator } from '@tuturuuu/ui/separator';
+import {
+  getPermissions,
+  type PermissionsResult,
+} from '@tuturuuu/utils/workspace-helper';
+import { headers } from 'next/headers';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+
+interface Props {
+  wsId: string;
+  searchParams: FinanceDashboardSearchParams;
+  currency?: string;
+  isPersonalWorkspace?: boolean;
+  financePrefix?: string;
+  internalApiOptions?: InternalApiClientOptions;
+  permissions?: PermissionsResult;
+}
+
+export default async function FinancePage({
+  wsId,
+  searchParams,
+  currency = 'USD',
+  isPersonalWorkspace = false,
+  financePrefix = '/finance',
+  internalApiOptions,
+  permissions,
+}: Props) {
+  const sp = searchParams;
+
+  const resolvedPermissions = permissions ?? (await getPermissions({ wsId }));
+  if (!resolvedPermissions) return notFound();
+  const { containsPermission } = resolvedPermissions;
+
+  if (!containsPermission('view_finance_stats')) return notFound();
+
+  // Check if user has permission to view confidential amounts
+  const canViewConfidentialAmount = containsPermission(
+    'view_confidential_amount'
+  );
+
+  // Parse includeConfidential from URL param (defaults to true if not set)
+  const includeConfidentialBool = sp.includeConfidential !== 'false';
+
+  const resolvedInternalApiOptions =
+    internalApiOptions ?? withForwardedInternalApiAuth(await headers());
+  const { data: recentTransactions } = await getRecentTransactions(
+    wsId,
+    resolvedInternalApiOptions
+  );
+
+  // Map recent transactions to match the data structure expected by CustomDataTable
+  const transactionsData = (recentTransactions as Transaction[]).map((d) => ({
+    ...d,
+    href: `/${wsId}${financePrefix}/transactions/${d.id}`,
+    ws_id: wsId,
+  })) as Transaction[];
+
+  return (
+    <>
+      <DashboardHeader />
+
+      <Filter className="mb-4" />
+
+      {canViewConfidentialAmount && (
+        <ConfidentialToggle hasPermission={canViewConfidentialAmount} />
+      )}
+
+      <BudgetAlerts wsId={wsId} className="mb-4" currency={currency} />
+
+      <div className="grid items-end gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-4">
+        <Suspense fallback={<FinanceOverviewMetricsFallback />}>
+          <FinanceOverviewMetrics
+            wsId={wsId}
+            currency={currency}
+            financePrefix={financePrefix}
+            internalApiOptions={resolvedInternalApiOptions}
+            permissions={resolvedPermissions}
+            searchParams={sp}
+          />
+        </Suspense>
+
+        <Separator className="col-span-full my-3 sm:my-4" />
+
+        <DailyTotalChartClient
+          wsId={wsId}
+          currency={currency}
+          includeConfidential={includeConfidentialBool}
+          className="col-span-full"
+        />
+
+        <Separator className="col-span-full my-3 sm:my-4" />
+
+        <MonthlyTotalChartClient
+          wsId={wsId}
+          currency={currency}
+          includeConfidential={includeConfidentialBool}
+          className="col-span-full"
+        />
+
+        <Separator className="col-span-full my-3 sm:my-4" />
+
+        <CategoryBreakdownChart
+          wsId={wsId}
+          currency={currency}
+          includeConfidential={includeConfidentialBool}
+          className="col-span-full"
+        />
+
+        <Separator className="col-span-full my-3 sm:my-4" />
+
+        <CustomDataTable
+          data={transactionsData}
+          columnGenerator={transactionColumns}
+          extraData={{ currency, isPersonalWorkspace }}
+          namespace="transaction-data-table"
+          className="col-span-full"
+          defaultVisibility={{
+            id: false,
+            report_opt_in: false,
+            created_at: false,
+          }}
+          hideToolbar
+          hidePagination
+        />
+      </div>
+    </>
+  );
+}
+
+function FinanceOverviewMetricsFallback() {
+  return Array.from({ length: 8 }, (_, index) => (
+    <LoadingStatisticCard key={index} />
+  ));
+}
+
+async function getRecentTransactions(
+  wsId: string,
+  internalApiOptions: InternalApiClientOptions
+) {
+  const data = await listTransactions(
+    wsId,
+    {
+      itemsPerPage: 10,
+      page: 1,
+    },
+    internalApiOptions
+  );
+
+  return { data };
+}

package/src/components/ui/finance/finance-route-context.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+/**
+ * Context for the finance route prefix.
+ *
+ * In apps/web, finance routes live under `/{wsId}/finance/...`,
+ * so the prefix is "/finance" (the default).
+ *
+ * In apps/finance (the satellite app), routes are directly at `/{wsId}/...`,
+ * so the prefix should be set to "" via FinanceRouteProvider.
+ */
+const FinanceRouteContext = createContext('/finance');
+
+export function FinanceRouteProvider({
+  children,
+  prefix = '/finance',
+}: {
+  children: React.ReactNode;
+  prefix?: string;
+}) {
+  return (
+    <FinanceRouteContext.Provider value={prefix}>
+      {children}
+    </FinanceRouteContext.Provider>
+  );
+}
+
+/**
+ * Returns a function that prepends the finance route prefix to a path.
+ *
+ * Usage:
+ * ```tsx
+ * const financeHref = useFinanceHref();
+ * // In web app: financeHref('/transactions') → '/finance/transactions'
+ * // In finance satellite app: financeHref('/transactions') → '/transactions'
+ * ```
+ */
+export function useFinanceHref() {
+  const prefix = useContext(FinanceRouteContext);
+  return (path: string) => `${prefix}${path}`;
+}
+
+/**
+ * Returns the raw finance route prefix string.
+ */
+export function useFinanceRoutePrefix() {
+  return useContext(FinanceRouteContext);
+}

package/src/components/ui/finance/invoices/attendance-calendar.tsx

@@ -0,0 +1,247 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+import {
+  type BillableSession,
+  getMonthStartDate,
+  parseLocalCalendarDate,
+} from './utils';
+
+interface AttendanceCalendarProps {
+  userAttendance: {
+    date: string;
+    status: string;
+    group_id?: string;
+  }[];
+  selectedMonth: string;
+  sessions: BillableSession[];
+  locale: string;
+}
+
+export function AttendanceCalendar({
+  userAttendance,
+  selectedMonth,
+  sessions,
+  locale,
+}: AttendanceCalendarProps) {
+  const t = useTranslations();
+
+  const currentDate = useMemo(
+    () => getMonthStartDate(selectedMonth),
+    [selectedMonth]
+  );
+
+  // Create attendance map for quick lookup: date -> Map<groupId, status>
+  const attendanceMap = useMemo(() => {
+    const map = new Map<string, Map<string, string>>();
+    userAttendance.forEach((attendance) => {
+      const date = parseLocalCalendarDate(attendance.date);
+      const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+
+      if (!map.has(dateKey)) {
+        map.set(dateKey, new Map());
+      }
+      map
+        .get(dateKey)!
+        .set(
+          attendance.group_id || 'default',
+          attendance.status?.toUpperCase() || 'PRESENT'
+        );
+    });
+    return map;
+  }, [userAttendance]);
+
+  // Weekday headers
+  const days = Array.from({ length: 7 }, (_, i) => {
+    const newDay = new Date(currentDate);
+    newDay.setDate(currentDate.getDate() - currentDate.getDay() + i + 1);
+    return newDay.toLocaleString(locale, { weekday: 'narrow' });
+  });
+
+  // All days in the calendar grid (including previous/next month days)
+  const daysInMonth = Array.from({ length: 42 }, (_, i) => {
+    const newDay = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth(),
+      1
+    );
+    const dayOfWeek = newDay.getDay();
+    const adjustment = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // adjust for Monday start
+    newDay.setDate(newDay.getDate() - adjustment + i);
+    return newDay;
+  });
+
+  const isCurrentMonth = (date: Date) =>
+    date.getMonth() === currentDate.getMonth() &&
+    date.getFullYear() === currentDate.getFullYear();
+
+  const isDateAvailable = (currentDate: Date) => {
+    if (!sessions || !Array.isArray(sessions)) return false;
+
+    try {
+      const startOfMonth = getMonthStartDate(selectedMonth);
+      const nextMonth = new Date(startOfMonth);
+      nextMonth.setMonth(nextMonth.getMonth() + 1);
+
+      return sessions.some((session) => {
+        if (!session.date) return false;
+        const sessionDate = parseLocalCalendarDate(session.date);
+        // Check if date is valid
+        if (Number.isNaN(sessionDate.getTime())) return false;
+        return (
+          sessionDate >= startOfMonth &&
+          sessionDate < nextMonth &&
+          sessionDate.getDate() === currentDate.getDate() &&
+          sessionDate.getMonth() === currentDate.getMonth() &&
+          sessionDate.getFullYear() === currentDate.getFullYear()
+        );
+      });
+    } catch {
+      return false;
+    }
+  };
+
+  const getAttendanceStatus = (date: Date) => {
+    const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    return attendanceMap.get(dateKey);
+  };
+
+  const getDayStyles = (date: Date) => {
+    const isCurrentMonthDay = isCurrentMonth(date);
+    const hasSession = isDateAvailable(date);
+    const attendanceStatusMap = getAttendanceStatus(date);
+
+    if (!isCurrentMonthDay) {
+      return 'text-foreground/20 bg-transparent border-transparent';
+    }
+
+    if (!hasSession) {
+      return 'text-foreground/30 bg-muted/30 border-transparent';
+    }
+
+    // Has session - style based on attendance
+    if (!attendanceStatusMap || attendanceStatusMap.size === 0) {
+      return 'text-foreground/50 bg-muted/50 border-foreground/20';
+    }
+
+    const statuses = Array.from(attendanceStatusMap.values());
+
+    if (statuses.includes('ABSENT')) {
+      return 'text-dynamic-red bg-dynamic-red/10 border-dynamic-red/20 font-semibold';
+    }
+
+    if (statuses.includes('LATE')) {
+      return 'text-dynamic-yellow bg-dynamic-yellow/10 border-dynamic-yellow/20 font-semibold';
+    }
+
+    if (statuses.includes('PRESENT')) {
+      return 'text-dynamic-green bg-dynamic-green/10 border-dynamic-green/20 font-semibold';
+    }
+
+    return 'text-foreground/50 bg-muted/50 border-foreground/20';
+  };
+
+  return (
+    <div className="rounded-lg border p-3">
+      <div className="grid gap-1 text-xs">
+        {/* Weekday headers */}
+        <div className="grid grid-cols-7 gap-1">
+          {days.map((day, idx) => (
+            <div
+              key={`day-${idx}`}
+              className="flex justify-center rounded bg-foreground/5 p-2 font-semibold"
+            >
+              {day}
+            </div>
+          ))}
+        </div>
+
+        {/* Calendar days */}
+        <div className="grid grid-cols-7 gap-1">
+          {daysInMonth.map((day, idx) => {
+            const isCurrentMonthDay = isCurrentMonth(day);
+            const dateSessions = sessions.filter((session) => {
+              const sessionDate = parseLocalCalendarDate(session.date);
+              return (
+                sessionDate.getDate() === day.getDate() &&
+                sessionDate.getMonth() === day.getMonth() &&
+                sessionDate.getFullYear() === day.getFullYear()
+              );
+            });
+
+            const hasSession = dateSessions.length > 0;
+            const attendanceStatusMap = getAttendanceStatus(day);
+
+            const content = (
+              <div
+                key={`${selectedMonth}-day-${idx}`}
+                className={`flex justify-center rounded border p-2 transition-colors ${getDayStyles(day)}`}
+              >
+                {day.getDate()}
+              </div>
+            );
+
+            if (!isCurrentMonthDay) return content;
+
+            return (
+              <Tooltip key={`${selectedMonth}-day-${idx}`}>
+                <TooltipTrigger asChild>{content}</TooltipTrigger>
+                <TooltipContent className="flex flex-col gap-1 p-2">
+                  <p className="font-semibold">
+                    {day.toLocaleDateString(locale, {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    })}
+                  </p>
+                  {hasSession ? (
+                    <div className="flex flex-col gap-1">
+                      {dateSessions.map((session) => {
+                        const status = attendanceStatusMap?.get(
+                          session.groupId
+                        );
+                        return (
+                          <div
+                            key={session.groupId}
+                            className="flex items-center justify-between gap-4"
+                          >
+                            <span className="text-muted-foreground">
+                              {session.groupName}:
+                            </span>
+                            <span
+                              className={
+                                status === 'PRESENT'
+                                  ? 'font-medium text-dynamic-green'
+                                  : status === 'LATE'
+                                    ? 'font-medium text-dynamic-yellow'
+                                    : status === 'ABSENT'
+                                      ? 'font-medium text-dynamic-red'
+                                      : 'text-muted-foreground'
+                              }
+                            >
+                              {status === 'PRESENT'
+                                ? t('ws-invoices.present')
+                                : status === 'LATE'
+                                  ? t('ws-invoices.late')
+                                  : status === 'ABSENT'
+                                    ? t('ws-invoices.absent')
+                                    : t('ws-invoices.no_attendance')}
+                            </span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <p className="text-muted-foreground">
+                      {t('ws-invoices.no_session')}
+                    </p>
+                  )}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/finance/invoices/charts/invoice-totals-chart.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import type { InvoiceTotalsByGroup } from '@tuturuuu/types/primitives/Invoice';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { InvoiceTotalsChart } from './invoice-totals-chart';
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('next-themes', () => ({
+  useTheme: () => ({ resolvedTheme: 'light' }),
+}));
+
+const invoiceData = [
+  {
+    period: '2026-05-01',
+    group_id: 'wallet-1',
+    group_name: 'Cash',
+    group_avatar_url: null,
+    total_amount: 100,
+    invoice_count: 3,
+  },
+] satisfies InvoiceTotalsByGroup[];
+
+function renderInvoiceTotalsChart() {
+  return render(
+    <InvoiceTotalsChart
+      dailyCreatorData={[]}
+      dailyWalletData={invoiceData}
+      hasDateRange={false}
+      monthlyCreatorData={[]}
+      monthlyWalletData={[]}
+      period="daily"
+      setPeriod={vi.fn()}
+      weeklyCreatorData={[]}
+      weeklyWalletData={[]}
+    />
+  );
+}
+
+describe('InvoiceTotalsChart', () => {
+  beforeEach(() => {
+    // biome-ignore lint/suspicious/noDocumentCookie: test resets the finance visibility cookie.
+    document.cookie =
+      'finance-confidential-mode=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
+  });
+
+  it('masks invoice count totals when finance numbers are hidden', () => {
+    // biome-ignore lint/suspicious/noDocumentCookie: test sets the finance visibility cookie.
+    document.cookie = 'finance-confidential-mode=true;path=/';
+
+    renderInvoiceTotalsChart();
+
+    expect(screen.getAllByText('•••').length).toBeGreaterThanOrEqual(1);
+    expect(screen.queryByText('3 invoices')).not.toBeInTheDocument();
+  });
+
+  it('shows invoice count totals when finance numbers are visible', async () => {
+    // biome-ignore lint/suspicious/noDocumentCookie: test sets the finance visibility cookie.
+    document.cookie = 'finance-confidential-mode=false;path=/';
+
+    renderInvoiceTotalsChart();
+
+    await waitFor(() => expect(screen.getByText('3 invoices')).toBeVisible());
+  });
+});