npm - @tuturuuu/ui - Versions diffs - 0.0.4 → 0.1.0 - Mend

@tuturuuu/ui 0.0.4 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1208) hide show

package/src/components/ui/finance/invoices/invoiceId/invoice-card.tsx ADDED Viewed

@@ -0,0 +1,360 @@
+'use client';
+import {
+  Download,
+  Expand,
+  ImageIcon,
+  Minimize,
+  Palette,
+  Printer,
+} from '@tuturuuu/icons';
+import type {
+  Invoice,
+  InvoiceProduct,
+  InvoicePromotion,
+} from '@tuturuuu/types';
+import type { WorkspaceConfig } from '@tuturuuu/types/primitives/WorkspaceConfig';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { useLocalStorage } from '@tuturuuu/ui/hooks/use-local-storage';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Tabs, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { CompactInvoiceTemplate } from './compact-invoice-template';
+import { FullInvoiceTemplate } from './full-invoice-template';
+export default function InvoiceCard({
+  lang,
+  configs,
+  invoice,
+  products,
+  promotions,
+  currency = 'VND',
+}: {
+  lang: string;
+  configs: WorkspaceConfig[];
+  invoice: Invoice & {
+    customer_display_name: string | null;
+    customer_full_name: string | null;
+    wallet: {
+      name: string | null;
+    } | null;
+    creator: {
+      display_name: string | null;
+      full_name: string | null;
+    } | null;
+  };
+  products: InvoiceProduct[];
+  promotions: InvoicePromotion[];
+  currency?: string;
+}) {
+  const t = useTranslations();
+  const printableRef = useRef<HTMLDivElement>(null);
+  const [isDarkPreview, setIsDarkPreview] = useState(false);
+  const [isCompact, setIsCompact, isCompactInitialized] = useLocalStorage(
+    'invoice-compact-view',
+    false
+  );
+  const [isExporting, setIsExporting] = useState(false);
+  const handlePrintExport = useCallback(() => {
+    const printableArea = document.getElementById('printable-area');
+    if (!printableArea) return;
+    const stylesheets = Array.from(document.styleSheets)
+      .map((styleSheet) => {
+        try {
+          if ((styleSheet as CSSStyleSheet).href) {
+            return `<link rel="stylesheet" href="${(styleSheet as CSSStyleSheet).href}">`;
+          } else if (styleSheet.ownerNode) {
+            const styleElement = styleSheet.ownerNode as HTMLStyleElement;
+            return `<style>${styleElement.innerHTML}</style>`;
+          }
+        } catch (_) {
+          if ((styleSheet as CSSStyleSheet).href) {
+            return `<link rel="stylesheet" href="${(styleSheet as CSSStyleSheet).href}">`;
+          }
+        }
+        return '';
+      })
+      .join('\n');
+    const printContent = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8">
+          <title>${t('invoices.invoice')} - ${invoice.id}</title>
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          ${stylesheets}
+          <style>
+            body { margin: 0; padding: 20px; font-family: system-ui, -apple-system, sans-serif; background: white; color: black; }
+            @media print {
+              body { margin: 0; padding: 0; }
+              #printable-area { height: auto !important; width: auto !important; max-width: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; background: white !important; }
+              .print\\:hidden { display: none !important; }
+              .print\\:text-black { color: black !important; }
+              .print\\:bg-white { background-color: white !important; }
+              .print\\:border-0 { border: none !important; }
+              .print\\:rounded-none { border-radius: 0 !important; }
+              .print\\:h-auto { height: auto !important; }
+              .print\\:w-auto { width: auto !important; }
+              .print\\:max-w-none { max-width: none !important; }
+              .print\\:shadow-none { box-shadow: none !important; }
+              .print\\:m-0 { margin: 0 !important; }
+            }
+          </style>
+        </head>
+        <body>
+          ${printableArea.outerHTML}
+        </body>
+      </html>
+    `;
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('aria-hidden', 'true');
+    iframe.style.position = 'fixed';
+    iframe.style.width = '0';
+    iframe.style.height = '0';
+    iframe.style.border = '0';
+    iframe.style.right = '0';
+    iframe.style.bottom = '0';
+    const cleanup = () => {
+      if (iframe.parentNode) {
+        iframe.parentNode.removeChild(iframe);
+      }
+    };
+    iframe.onload = () => {
+      const frameWindow = iframe.contentWindow;
+      if (!frameWindow) {
+        cleanup();
+        window.print();
+        return;
+      }
+      frameWindow.addEventListener('afterprint', cleanup, { once: true });
+      window.setTimeout(() => {
+        frameWindow.focus();
+        frameWindow.print();
+      }, 100);
+      window.setTimeout(cleanup, 60000);
+    };
+    iframe.srcdoc = printContent;
+    document.body.appendChild(iframe);
+  }, [invoice.id, t]);
+  const handlePngExport = useCallback(async () => {
+    setIsExporting(true);
+    try {
+      const html2canvas = (await import('html2canvas-pro')).default;
+      const element = document.getElementById('printable-area');
+      if (!element) throw new Error('Printable area not found');
+      const canvas = await html2canvas(element, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: isDarkPreview ? '#1a1a1a' : '#ffffff',
+        width: element.scrollWidth,
+        height: element.scrollHeight,
+      });
+      await new Promise<void>((resolve, reject) => {
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) {
+              reject(new Error('Failed to create image'));
+              return;
+            }
+            try {
+              const url = URL.createObjectURL(blob);
+              const link = document.createElement('a');
+              link.href = url;
+              const sanitizedId = invoice.id
+                .normalize('NFD')
+                .replace(/[\u0300-\u036f]/g, '')
+                .replace(/đ/g, 'd')
+                .replace(/Đ/g, 'D')
+                .replace(/[^a-z0-9]/gi, '_')
+                .toLowerCase()
+                .replace(/_+/g, '_')
+                .replace(/^_|_$/g, '');
+              link.download = `invoice-${sanitizedId}.png`;
+              document.body.appendChild(link);
+              link.click();
+              document.body.removeChild(link);
+              URL.revokeObjectURL(url);
+              resolve();
+            } catch (error) {
+              reject(error);
+            }
+          },
+          'image/png',
+          1.0
+        );
+      });
+      toast.success(t('common.export-success'));
+    } catch {
+      toast.error(t('common.export-error'));
+    } finally {
+      setIsExporting(false);
+    }
+  }, [invoice.id, isDarkPreview, t]);
+  // Auto trigger print or image download when URL contains ?print=true or ?image=true
+  useEffect(() => {
+    if (!isCompactInitialized) return;
+    const triggerExports = async () => {
+      try {
+        const params = new URLSearchParams(window.location.search);
+        const shouldPrint = params.get('print') === 'true';
+        const shouldDownloadImage = params.get('image') === 'true';
+        if (shouldPrint || shouldDownloadImage) {
+          try {
+            if (shouldPrint) {
+              handlePrintExport();
+            }
+            if (shouldDownloadImage) {
+              await handlePngExport();
+            }
+          } catch {
+            toast.error(t('common.export-error'));
+          }
+          const url = new URL(window.location.href);
+          url.searchParams.delete('print');
+          url.searchParams.delete('image');
+          window.history.replaceState({}, '', url.toString());
+        }
+      } catch {
+        toast.error(t('common.export-error'));
+      }
+    };
+    triggerExports();
+  }, [handlePrintExport, handlePngExport, isCompactInitialized, t]);
+  return (
+    <div className="overflow-x-auto xl:flex-none">
+      <div className="mb-4 flex justify-end gap-2 print:hidden">
+        {isCompactInitialized ? (
+          <Tabs
+            value={isCompact ? 'compact' : 'full'}
+            onValueChange={(value) => setIsCompact(value === 'compact')}
+          >
+            <TabsList>
+              <TabsTrigger value="full" className="gap-2">
+                <Expand className="h-4 w-4" />
+                {t('invoices.full')}
+              </TabsTrigger>
+              <TabsTrigger value="compact" className="gap-2">
+                <Minimize className="h-4 w-4" />
+                {t('invoices.compact')}
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        ) : (
+          <div className="h-10 w-50 animate-pulse rounded-md bg-muted" />
+        )}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="gap-2">
+              <Palette className="h-4 w-4" />
+              {t('common.theme')}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setIsDarkPreview(false)}>
+              {t('common.light')}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setIsDarkPreview(true)}>
+              {t('common.dark')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="gap-2">
+              <Download className="h-4 w-4" />
+              {t('common.export')}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              className="gap-2"
+              onClick={(e) => {
+                e.preventDefault();
+                handlePrintExport();
+              }}
+            >
+              <Printer className="h-4 w-4" />
+              {t('invoices.print')}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="gap-2"
+              disabled={isExporting}
+              onClick={(e) => {
+                e.preventDefault();
+                handlePngExport();
+              }}
+            >
+              <ImageIcon className="h-4 w-4" />
+              {isExporting
+                ? t('ws-reports.exporting_png')
+                : t('invoices.download_image')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="mx-auto h-fit w-full max-w-4xl flex-none rounded-xl shadow-lg dark:bg-foreground/10 print:bg-white print:text-black print:shadow-none">
+        <div
+          ref={printableRef}
+          id="printable-area"
+          className={`h-full rounded-lg p-6 text-foreground md:p-12 print:rounded-none ${isDarkPreview ? 'bg-foreground/10 text-foreground' : 'bg-white text-black'}`}
+        >
+          {!isCompactInitialized ? (
+            <div className="flex h-full min-h-100 items-center justify-center">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+            </div>
+          ) : isCompact ? (
+            <CompactInvoiceTemplate
+              invoice={invoice}
+              configs={configs}
+              isDarkPreview={isDarkPreview}
+              lang={lang}
+              currency={currency}
+            />
+          ) : (
+            <FullInvoiceTemplate
+              invoice={invoice}
+              products={products}
+              promotions={promotions}
+              configs={configs}
+              isDarkPreview={isDarkPreview}
+              lang={lang}
+              currency={currency}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/finance/invoices/invoiceId/invoice-details-page.test.tsx ADDED Viewed

@@ -0,0 +1,227 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import InvoiceDetailsPage from './invoice-details-page.js';
+type QueryOperation = {
+  eqs: Array<{ column: string; value: unknown }>;
+  schema?: string;
+  select?: string;
+  table: string;
+};
+const mocks = vi.hoisted(() => ({
+  createAdminClient: vi.fn(),
+  invoice: null as Record<string, unknown> | null,
+  notFound: vi.fn(() => {
+    throw new Error('not-found');
+  }),
+  operations: [] as QueryOperation[],
+}));
+function resultForTable(table: string) {
+  if (table === 'finance_invoices') {
+    return { data: mocks.invoice, error: null };
+  }
+  if (table === 'finance_invoice_products') {
+    return {
+      data: [
+        {
+          amount: 2,
+          created_at: null,
+          finance_invoices: { ws_id: 'workspace-1' },
+          invoice_id: 'invoice-1',
+          owner_id: null,
+          owner_name: '',
+          price: 100,
+          product_id: null,
+          product_name: 'Product',
+          product_unit: 'item',
+          total_diff: 0,
+          unit_id: 'unit-1',
+          warehouse: '',
+          warehouse_id: 'warehouse-1',
+        },
+      ],
+      error: null,
+    };
+  }
+  if (table === 'finance_invoice_promotions') {
+    return {
+      data: [
+        {
+          code: 'SAVE',
+          created_at: '2026-05-01T00:00:00.000Z',
+          description: null,
+          finance_invoices: { ws_id: 'workspace-1' },
+          invoice_id: 'invoice-1',
+          name: 'Save',
+          promo_id: 'promo-1',
+          use_ratio: false,
+          value: 10,
+        },
+      ],
+      error: null,
+    };
+  }
+  if (table === 'workspace_wallets') {
+    return {
+      data: {
+        name: 'Private Wallet',
+      },
+      error: null,
+    };
+  }
+  return { data: [], error: null };
+}
+function createQueryBuilder(table: string, schema?: string) {
+  const operation: QueryOperation = { eqs: [], schema, table };
+  mocks.operations.push(operation);
+  const builder = {
+    eq: vi.fn((column: string, value: unknown) => {
+      operation.eqs.push({ column, value });
+      return builder;
+    }),
+    in: vi.fn(() => builder),
+    maybeSingle: vi.fn(async () => resultForTable(table)),
+    order: vi.fn(() => builder),
+    select: vi.fn((select?: string) => {
+      operation.select = select;
+      return builder;
+    }),
+    // biome-ignore lint/suspicious/noThenProperty: Supabase query builders are awaited as thenables in component code.
+    then: vi.fn((resolve, reject) =>
+      Promise.resolve(resultForTable(table)).then(resolve, reject)
+    ),
+  };
+  return builder;
+}
+vi.mock('@tuturuuu/supabase/next/server', () => ({
+  createAdminClient: mocks.createAdminClient,
+}));
+vi.mock('next-intl/server', () => ({
+  getTranslations: () => (key: string) => key,
+}));
+vi.mock('next/navigation', () => ({
+  notFound: mocks.notFound,
+}));
+vi.mock('@tuturuuu/ui/custom/feature-summary', () => ({
+  default: () => <div data-testid="feature-summary" />,
+}));
+vi.mock('@tuturuuu/ui/finance/shared/finance-display-amount', () => ({
+  FinanceDisplayAmount: ({ value }: { value: string }) => <span>{value}</span>,
+}));
+vi.mock('./invoice-card', () => ({
+  default: () => <div data-testid="invoice-card" />,
+}));
+vi.mock('./invoice-edit-form', () => ({
+  default: () => <div data-testid="invoice-edit-form" />,
+}));
+vi.mock('@tuturuuu/ui/finance/invoices/invoiceId/product-card', () => ({
+  ProductCard: () => <div data-testid="product-card" />,
+}));
+vi.mock('@tuturuuu/ui/finance/invoices/invoiceId/promotion-card', () => ({
+  PromotionCard: () => <div data-testid="promotion-card" />,
+}));
+describe('InvoiceDetailsPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.operations.length = 0;
+    mocks.invoice = {
+      created_at: '2026-05-01T00:00:00.000Z',
+      customer_avatar_url: null,
+      customer_display_name: 'Customer',
+      customer_full_name: 'Customer One',
+      id: 'invoice-1',
+      legacy_creator: null,
+      note: null,
+      notice: null,
+      platform_creator: null,
+      price: 100,
+      total_diff: 0,
+      wallet_id: 'wallet-1',
+    };
+    mocks.createAdminClient.mockResolvedValue({
+      from: (table: string) => createQueryBuilder(table),
+      schema: (schema: string) => ({
+        from: (table: string) => createQueryBuilder(table, schema),
+      }),
+    });
+  });
+  it('loads invoice details and children through workspace-bound admin queries', async () => {
+    await InvoiceDetailsPage({
+      invoiceId: 'invoice-1',
+      locale: 'en',
+      wsId: 'workspace-1',
+    });
+    expect(mocks.operations).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          eqs: expect.arrayContaining([
+            { column: 'id', value: 'invoice-1' },
+            { column: 'ws_id', value: 'workspace-1' },
+          ]),
+          table: 'finance_invoices',
+        }),
+        expect.objectContaining({
+          eqs: expect.arrayContaining([
+            { column: 'invoice_id', value: 'invoice-1' },
+            { column: 'finance_invoices.ws_id', value: 'workspace-1' },
+          ]),
+          select: '*, finance_invoices!inner(ws_id)',
+          table: 'finance_invoice_products',
+        }),
+        expect.objectContaining({
+          eqs: expect.arrayContaining([
+            { column: 'invoice_id', value: 'invoice-1' },
+            { column: 'finance_invoices.ws_id', value: 'workspace-1' },
+          ]),
+          select: '*, finance_invoices!inner(ws_id)',
+          table: 'finance_invoice_promotions',
+        }),
+        expect.objectContaining({
+          eqs: expect.arrayContaining([
+            { column: 'id', value: 'wallet-1' },
+            { column: 'ws_id', value: 'workspace-1' },
+          ]),
+          schema: 'private',
+          select: 'name',
+          table: 'workspace_wallets',
+        }),
+      ])
+    );
+  });
+  it('does not load invoice children when the invoice is outside the workspace', async () => {
+    mocks.invoice = null;
+    await expect(
+      InvoiceDetailsPage({
+        invoiceId: 'invoice-from-another-workspace',
+        locale: 'en',
+        wsId: 'workspace-1',
+      })
+    ).rejects.toThrow('not-found');
+    expect(mocks.operations.map((operation) => operation.table)).toEqual([
+      'finance_invoices',
+    ]);
+  });
+});