@tuturuuu/ui 0.0.4 → 0.1.0

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

@@ -0,0 +1,468 @@
+import { FileCheck2, Plus } from '@tuturuuu/icons';
+import {
+  createAdminClient,
+  createClient,
+} from '@tuturuuu/supabase/next/server';
+import type { Invoice } from '@tuturuuu/types/primitives/Invoice';
+import {
+  type FullInvoiceData,
+  transformInvoiceSearchResults,
+} from '@tuturuuu/utils/finance/transform-invoice-results';
+import {
+  getPermissions,
+  getWorkspace,
+  type PermissionsResult,
+} from '@tuturuuu/utils/workspace-helper';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+import { z } from 'zod';
+import { Button } from '../../button';
+import FeatureSummary from '../../custom/feature-summary';
+import { Separator } from '../../separator';
+import { Skeleton } from '../../skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../tabs';
+import { InvoiceTotalsChartSkeleton } from './charts/invoice-totals-chart';
+import { InvoiceAnalytics } from './invoice-analytics';
+import { InvoicesTable } from './invoices-table';
+import { PendingInvoicesTab } from './pending-invoices-tab';
+import { PendingInvoicesTable } from './pending-invoices-table';
+
+type DeleteInvoiceAction = (
+  wsId: string,
+  invoiceId: string
+) => Promise<{ success: boolean; message?: string }>;
+
+async function attachWalletNames(
+  sbAdmin: unknown,
+  invoices: FullInvoiceData[]
+) {
+  const walletIds = [
+    ...new Set(
+      invoices
+        .map((invoice) => invoice.wallet_transactions?.wallet_id)
+        .filter((id): id is string => typeof id === 'string')
+    ),
+  ];
+
+  if (walletIds.length === 0) {
+    return invoices;
+  }
+
+  const privateClient = (
+    sbAdmin as {
+      schema: (schema: 'private') => {
+        from: (table: 'workspace_wallets') => {
+          select: (columns: 'id, name') => {
+            in: (
+              column: 'id',
+              values: string[]
+            ) => Promise<{
+              data: Array<{ id: string; name: string | null }> | null;
+            }>;
+          };
+        };
+      };
+    }
+  ).schema('private');
+
+  const { data: wallets } = await privateClient
+    .from('workspace_wallets')
+    .select('id, name')
+    .in('id', walletIds);
+
+  const walletNames = new Map(
+    (wallets ?? []).map((wallet) => [wallet.id, wallet.name])
+  );
+
+  return invoices.map((invoice) => {
+    const walletId = invoice.wallet_transactions?.wallet_id;
+
+    if (!walletId) {
+      return invoice;
+    }
+
+    return {
+      ...invoice,
+      wallet_transactions: {
+        ...invoice.wallet_transactions,
+        wallet: {
+          name: walletNames.get(walletId) ?? null,
+        },
+      },
+    };
+  });
+}
+
+/**
+ * Fetches the first day of week preference for a user/workspace
+ * Returns: 0 (Sunday), 1 (Monday), or 6 (Saturday)
+ */
+async function getWeekStartsOn(
+  wsId: string,
+  userId?: string
+): Promise<0 | 1 | 6> {
+  const supabase = userId
+    ? await createAdminClient({ noCookie: true })
+    : await createClient();
+
+  // Get current user
+  const user =
+    userId === undefined
+      ? (await supabase.auth.getUser()).data.user
+      : { id: userId };
+
+  // Try user preference first
+  if (user) {
+    const { data: userData } = await supabase
+      .from('user_private_details')
+      .select('first_day_of_week')
+      .eq('user_id', user.id)
+      .single();
+
+    if (userData?.first_day_of_week && userData.first_day_of_week !== 'auto') {
+      return firstDayStringToNumber(userData.first_day_of_week);
+    }
+  }
+
+  // Fall back to workspace preference
+  const { data: workspaceData } = await supabase
+    .from('workspaces')
+    .select('first_day_of_week')
+    .eq('id', wsId)
+    .single();
+
+  if (
+    workspaceData?.first_day_of_week &&
+    workspaceData.first_day_of_week !== 'auto'
+  ) {
+    return firstDayStringToNumber(workspaceData.first_day_of_week);
+  }
+
+  // Default to Monday (most common business standard)
+  return 1;
+}
+
+function firstDayStringToNumber(day: string): 0 | 1 | 6 {
+  switch (day) {
+    case 'sunday':
+      return 0;
+    case 'monday':
+      return 1;
+    case 'saturday':
+      return 6;
+    default:
+      return 1;
+  }
+}
+
+interface Props {
+  params: Promise<{
+    wsId: string;
+  }>;
+  searchParams: Promise<{
+    q: string;
+    page: string;
+    pageSize: string;
+  }>;
+  canCreateInvoices?: boolean;
+  canDeleteInvoices?: boolean;
+  deleteInvoiceAction?: DeleteInvoiceAction;
+  currency?: string;
+  financePrefix?: string;
+  permissions?: PermissionsResult;
+  userId?: string;
+  workspace?: {
+    id: string;
+  };
+}
+
+export default async function InvoicesPage({
+  params,
+  searchParams,
+  canCreateInvoices = false,
+  canDeleteInvoices = false,
+  deleteInvoiceAction,
+  currency = 'USD',
+  financePrefix = '/finance',
+  permissions,
+  userId,
+  workspace,
+}: Props) {
+  const t = await getTranslations();
+  const { wsId: id } = await params;
+  const resolvedSearchParams = await searchParams;
+
+  const resolvedWorkspace = workspace ?? (await getWorkspace(id));
+  if (!resolvedWorkspace) notFound();
+  const wsId = resolvedWorkspace.id;
+  const resolvedPermissions =
+    permissions ??
+    (await getPermissions({
+      wsId,
+    }));
+  if (!resolvedPermissions) notFound();
+  const { containsPermission } = resolvedPermissions;
+
+  const [initialData, weekStartsOn] = await Promise.all([
+    getInitialData(wsId, resolvedSearchParams),
+    getWeekStartsOn(wsId, userId),
+  ]);
+
+  const canExportFinanceData = containsPermission('export_finance_data');
+
+  return (
+    <>
+      <FeatureSummary
+        pluralTitle={t('ws-invoices.plural')}
+        singularTitle={t('ws-invoices.singular')}
+        description={t('ws-invoices.description')}
+        createTitle={t('ws-invoices.create')}
+        createDescription={t('ws-invoices.create_description')}
+        action={
+          <div className="flex gap-2">
+            {canCreateInvoices && (
+              <Link href={`/${wsId}${financePrefix}/invoices/new`}>
+                <Button>
+                  <Plus />
+                  {t('ws-invoices.create')}
+                </Button>
+              </Link>
+            )}
+          </div>
+        }
+      />
+      <Separator className="my-4" />
+
+      <Suspense fallback={<InvoiceTotalsChartSkeleton className="mb-4" />}>
+        <InvoiceAnalytics
+          wsId={wsId}
+          weekStartsOn={weekStartsOn}
+          currency={currency}
+          className="mb-4"
+        />
+      </Suspense>
+
+      <Tabs defaultValue="created" className="w-full">
+        <TabsList className="mb-4">
+          <TabsTrigger value="created" className="gap-2">
+            <FileCheck2 className="h-4 w-4" />
+            {t('ws-invoices.created_invoices')}
+          </TabsTrigger>
+          <PendingInvoicesTab
+            wsId={wsId}
+            label={t('ws-invoices.pending_invoices')}
+          />
+        </TabsList>
+        <TabsContent value="created">
+          <Suspense fallback={<Skeleton className="h-125 w-full" />}>
+            <InvoicesTable
+              wsId={wsId}
+              canDeleteInvoices={canDeleteInvoices}
+              canExport={canExportFinanceData}
+              deleteInvoiceAction={deleteInvoiceAction}
+              initialData={initialData}
+              currency={currency}
+            />
+          </Suspense>
+        </TabsContent>
+        <TabsContent value="pending">
+          <Suspense fallback={<Skeleton className="h-125 w-full" />}>
+            <PendingInvoicesTable
+              wsId={wsId}
+              canExport={canExportFinanceData}
+              currency={currency}
+            />
+          </Suspense>
+        </TabsContent>
+      </Tabs>
+    </>
+  );
+}
+
+/**
+ * Fetches initial page of invoices for SSR hydration
+ */
+async function getInitialData(
+  wsId: string,
+  {
+    q,
+    page = '1',
+    pageSize = '10',
+  }: {
+    q?: string;
+    page?: string;
+    pageSize?: string;
+  }
+) {
+  const sbAdmin = await createAdminClient();
+
+  // Validate and coerce pagination parameters
+  const paginationSchema = z.object({
+    page: z
+      .string()
+      .transform((val) => parseInt(val, 10))
+      .refine((val) => !Number.isNaN(val), 'page must be a valid number')
+      .pipe(
+        z
+          .number()
+          .int('page must be an integer')
+          .min(1, 'page must be at least 1')
+      )
+      .default(1)
+      .catch(1),
+    pageSize: z
+      .string()
+      .transform((val) => parseInt(val, 10))
+      .refine((val) => !Number.isNaN(val), 'pageSize must be a valid number')
+      .pipe(
+        z
+          .number()
+          .int('pageSize must be an integer')
+          .min(1, 'pageSize must be at least 1')
+          .max(100, 'pageSize must not exceed 100')
+      )
+      .default(10)
+      .catch(10),
+  });
+
+  const { page: parsedPage, pageSize: parsedSize } = paginationSchema.parse({
+    page: page ?? '1',
+    pageSize: pageSize ?? '10',
+  });
+
+  // If there's a search query, use the RPC function for customer name search
+  if (q) {
+    const { data: searchResults, error: rpcError } = await sbAdmin.rpc(
+      'search_finance_invoices',
+      {
+        p_ws_id: wsId,
+        p_search_query: q,
+        p_start_date: undefined,
+        p_end_date: undefined,
+        p_user_ids: undefined,
+        p_wallet_ids: undefined,
+        p_limit: parsedSize,
+        p_offset: (parsedPage - 1) * parsedSize,
+      }
+    );
+
+    if (rpcError) throw rpcError;
+
+    // Extract count from first row
+    const count = searchResults?.[0]?.total_count || 0;
+
+    // Fetch additional data for legacy/platform creators and wallet info
+    const invoiceIds = searchResults.map((r) => r.id);
+    if (invoiceIds.length === 0) {
+      return { data: [], count: 0 };
+    }
+
+    const { data: fullInvoices } = await sbAdmin
+      .from('finance_invoices')
+      .select(
+        `*, 
+         legacy_creator:workspace_users!creator_id(id, full_name, display_name, email, avatar_url), 
+         platform_creator:users!platform_creator_id(id, display_name, avatar_url, user_private_details(full_name, email)),
+         wallet_transactions!finance_invoices_transaction_id_fkey(wallet_id)`
+      )
+      .in('id', invoiceIds);
+
+    const invoicesWithWallets = await attachWalletNames(
+      sbAdmin,
+      fullInvoices || []
+    );
+
+    // Transform search results using shared utility
+    const data = transformInvoiceSearchResults(
+      searchResults,
+      invoicesWithWallets
+    );
+
+    return { data, count } as { data: Invoice[]; count: number };
+  }
+
+  // No search query - use regular query builder
+  const selectQuery = `*, customer:workspace_users!customer_id(full_name, avatar_url), legacy_creator:workspace_users!creator_id(id, full_name, display_name, email, avatar_url), platform_creator:users!platform_creator_id(id, display_name, avatar_url, user_private_details(full_name, email)), wallet_transactions!finance_invoices_transaction_id_fkey(wallet_id)`;
+
+  const startRange = (parsedPage - 1) * parsedSize;
+  const endRange = startRange + parsedSize - 1;
+
+  const {
+    data: rawData,
+    error,
+    count,
+  } = await sbAdmin
+    .from('finance_invoices')
+    .select(selectQuery, {
+      count: 'exact',
+    })
+    .eq('ws_id', wsId)
+    .order('created_at', { ascending: false })
+    .range(startRange, endRange)
+    .limit(parsedSize);
+  if (error) throw error;
+
+  const invoicesWithWallets = await attachWalletNames(sbAdmin, rawData ?? []);
+
+  const data = invoicesWithWallets.map(
+    ({
+      customer,
+      legacy_creator,
+      platform_creator,
+      wallet_transactions,
+      ...rest
+    }: any) => {
+      const platformCreator = platform_creator as {
+        id: string;
+        display_name: string | null;
+        avatar_url: string | null;
+        user_private_details: {
+          full_name: string | null;
+          email: string | null;
+        } | null;
+      } | null;
+
+      const legacyCreator = legacy_creator as {
+        id: string;
+        display_name: string | null;
+        full_name: string | null;
+        email: string | null;
+        avatar_url: string | null;
+      } | null;
+
+      const creator = {
+        id: platformCreator?.id ?? legacyCreator?.id ?? '',
+        display_name:
+          platformCreator?.display_name ??
+          legacyCreator?.display_name ??
+          platformCreator?.user_private_details?.email ??
+          null,
+        full_name:
+          platformCreator?.user_private_details?.full_name ??
+          legacyCreator?.full_name ??
+          null,
+        email:
+          platformCreator?.user_private_details?.email ??
+          legacyCreator?.email ??
+          null,
+        avatar_url:
+          platformCreator?.avatar_url ?? legacyCreator?.avatar_url ?? null,
+      };
+
+      const wallet = wallet_transactions?.wallet
+        ? { name: wallet_transactions.wallet.name }
+        : null;
+
+      return {
+        ...rest,
+        customer,
+        creator,
+        wallet,
+      };
+    }
+  );
+
+  return { data, count } as { data: Invoice[]; count: number };
+}

package/src/components/ui/finance/invoices/invoice-visibility-format.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest';
+import {
+  formatInvoicePromotionValue,
+  formatInvoiceRecalculationDescription,
+} from './invoice-visibility-format';
+
+const t = (key: string) => key;
+
+describe('invoice visibility formatting', () => {
+  it('masks promotion values when finance numbers are hidden', () => {
+    expect(
+      formatInvoicePromotionValue({
+        areNumbersHidden: true,
+        currency: 'VND',
+        useRatio: false,
+        value: 50000,
+      })
+    ).toBe('•••••');
+
+    expect(
+      formatInvoicePromotionValue({
+        areNumbersHidden: true,
+        currency: 'VND',
+        referralPercent: 15,
+        useRatio: true,
+        value: 10,
+      })
+    ).toBe('•••••');
+  });
+
+  it('formats promotion values when finance numbers are visible', () => {
+    expect(
+      formatInvoicePromotionValue({
+        areNumbersHidden: false,
+        currency: 'VND',
+        useRatio: false,
+        value: 50000,
+      })
+    ).toMatch(/50.000/);
+
+    expect(
+      formatInvoicePromotionValue({
+        areNumbersHidden: false,
+        currency: 'VND',
+        useRatio: true,
+        value: 10,
+      })
+    ).toBe('10%');
+
+    expect(
+      formatInvoicePromotionValue({
+        areNumbersHidden: false,
+        currency: 'VND',
+        referralPercent: 15,
+        useRatio: true,
+        value: 10,
+      })
+    ).toBe('15%');
+  });
+
+  it('masks recalculation totals and rounding when finance numbers are hidden', () => {
+    expect(
+      formatInvoiceRecalculationDescription({
+        areNumbersHidden: true,
+        calculatedTotal: 123456,
+        currency: 'VND',
+        frontendTotal: 120000,
+        roundingApplied: 3456,
+        t,
+      })
+    ).toBe(
+      'ws-invoices.server_calculated: ••••• | ws-invoices.frontend_calculated: ••••• | ws-invoices.rounding: •••••'
+    );
+  });
+
+  it('formats recalculation totals and rounding when finance numbers are visible', () => {
+    const description = formatInvoiceRecalculationDescription({
+      areNumbersHidden: false,
+      calculatedTotal: 123456,
+      currency: 'VND',
+      frontendTotal: 120000,
+      roundingApplied: 3456,
+      t,
+    });
+
+    expect(description).toContain('123.456');
+    expect(description).toContain('120.000');
+    expect(description).toContain('3.456');
+  });
+});

package/src/components/ui/finance/invoices/invoice-visibility-format.ts

@@ -0,0 +1,67 @@
+import { formatCurrency } from '@tuturuuu/utils/format';
+import { FINANCE_HIDDEN_AMOUNT } from '../shared/use-finance-confidential-visibility';
+
+type RecalculationTranslationKey =
+  | 'ws-invoices.frontend_calculated'
+  | 'ws-invoices.rounding'
+  | 'ws-invoices.server_calculated';
+
+type RecalculationTranslation = (key: RecalculationTranslationKey) => string;
+
+interface InvoicePromotionValueOptions {
+  areNumbersHidden: boolean;
+  currency: string;
+  referralPercent?: number | null;
+  useRatio?: boolean | null;
+  value?: number | null;
+}
+
+interface InvoiceRecalculationDescriptionOptions {
+  areNumbersHidden: boolean;
+  calculatedTotal: number;
+  currency: string;
+  frontendTotal: number;
+  roundingApplied: number;
+  t: RecalculationTranslation;
+}
+
+export function formatInvoicePromotionValue({
+  areNumbersHidden,
+  currency,
+  referralPercent,
+  useRatio,
+  value,
+}: InvoicePromotionValueOptions) {
+  if (areNumbersHidden) return FINANCE_HIDDEN_AMOUNT;
+
+  if (referralPercent !== null && referralPercent !== undefined) {
+    return `${referralPercent || 0}%`;
+  }
+
+  if (useRatio) return `${value || 0}%`;
+
+  return formatCurrency(value || 0, currency);
+}
+
+export function formatInvoiceRecalculationDescription({
+  areNumbersHidden,
+  calculatedTotal,
+  currency,
+  frontendTotal,
+  roundingApplied,
+  t,
+}: InvoiceRecalculationDescriptionOptions) {
+  const formatAmount = (amount: number) =>
+    areNumbersHidden ? FINANCE_HIDDEN_AMOUNT : formatCurrency(amount, currency);
+
+  const roundingInfo =
+    roundingApplied !== 0
+      ? ` | ${t('ws-invoices.rounding')}: ${formatAmount(roundingApplied)}`
+      : '';
+
+  return `${t('ws-invoices.server_calculated')}: ${formatAmount(
+    calculatedTotal
+  )} | ${t('ws-invoices.frontend_calculated')}: ${formatAmount(
+    frontendTotal
+  )}${roundingInfo}`;
+}