@tuturuuu/ui 0.0.4 → 0.1.0

package/src/components/ui/finance/invoices/invoiceId/promotion-card.tsx

@@ -0,0 +1,76 @@
+import { DollarSign, Percent } from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Card, CardContent } from '@tuturuuu/ui/card';
+import { FinanceDisplayAmount } from '@tuturuuu/ui/finance/shared/finance-display-amount';
+import { formatCurrency } from '@tuturuuu/utils/format';
+
+interface PromotionCardProps {
+  promotion: {
+    name?: string | null;
+    code: string;
+    use_ratio: boolean;
+    value: number;
+  };
+  currency?: string;
+}
+
+export function PromotionCard({
+  promotion,
+  currency = 'USD',
+}: PromotionCardProps) {
+  const isPercentage = promotion.use_ratio;
+  const displayName = promotion.name || promotion.code;
+  const isHighValue = isPercentage
+    ? promotion.value > 20
+    : promotion.value > 100000;
+
+  return (
+    <Card className="border-border bg-card shadow-sm transition-shadow duration-200 hover:shadow-md">
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex flex-1 items-center gap-3">
+            <div className="rounded-lg bg-accent/10 p-2">
+              {isPercentage ? (
+                <Percent className="h-5 w-5 text-foreground" />
+              ) : (
+                <DollarSign className="h-5 w-5 text-foreground" />
+              )}
+            </div>
+            <div className="min-w-0 flex-1">
+              <h4 className="truncate font-semibold text-card-foreground text-sm">
+                {displayName}
+              </h4>
+              <div className="mt-1 flex items-center gap-2">
+                <Badge
+                  variant={isPercentage ? 'default' : 'secondary'}
+                  className="px-2 py-0.5 text-xs"
+                >
+                  {isPercentage ? 'Percentage' : 'Fixed Amount'}
+                </Badge>
+                {isHighValue && (
+                  <Badge variant="destructive" className="px-2 py-0.5 text-xs">
+                    High Value
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="text-right">
+            <div className="font-bold text-foreground text-lg">
+              <FinanceDisplayAmount
+                value={
+                  isPercentage
+                    ? `${promotion.value}%`
+                    : `-${formatCurrency(promotion.value, currency)}`
+                }
+              />
+            </div>
+            <div className="text-muted-foreground text-xs">
+              {isPercentage ? 'Discount' : 'Off'}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/finance/invoices/invoices-table.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { Loader2 } from '@tuturuuu/icons';
+import { DataTable } from '@tuturuuu/ui/custom/tables/data-table';
+import { DateRangeFilterWrapper } from '@tuturuuu/ui/finance/shared/date-range-filter-wrapper';
+import { Skeleton } from '@tuturuuu/ui/skeleton';
+import { useTranslations } from 'next-intl';
+import {
+  parseAsArrayOf,
+  parseAsInteger,
+  parseAsString,
+  useQueryState,
+} from 'nuqs';
+import { Suspense, useCallback } from 'react';
+import { useFinanceHref } from '../finance-route-context';
+import { invoiceColumns } from './columns';
+import ExportDialogContent from './export-dialog-content';
+import {
+  type InvoicesParams,
+  type InvoicesResponse,
+  useWorkspaceInvoices,
+} from './hooks';
+import { UserFilterWrapper } from './user-filter-wrapper';
+import { WalletFilterWrapper } from './wallet-filter-wrapper';
+
+type DeleteInvoiceAction = (
+  wsId: string,
+  invoiceId: string
+) => Promise<{ success: boolean; message?: string }>;
+
+interface Props {
+  wsId: string;
+  canDeleteInvoices?: boolean;
+  canExport?: boolean;
+  invoiceType?: 'created' | 'pending';
+  deleteInvoiceAction?: DeleteInvoiceAction;
+  initialData: InvoicesResponse;
+  currency?: string;
+}
+
+export function InvoicesTable({
+  wsId,
+  canDeleteInvoices = false,
+  canExport = false,
+  invoiceType = 'created',
+  deleteInvoiceAction,
+  initialData,
+  currency = 'USD',
+}: Props) {
+  const t = useTranslations();
+  const queryClient = useQueryClient();
+  const financeHref = useFinanceHref();
+
+  // Use nuqs for URL state management (shallow: true for client-side only)
+  const [q, setQ] = useQueryState(
+    'q',
+    parseAsString.withDefault('').withOptions({
+      shallow: true,
+      throttleMs: 300,
+    })
+  );
+
+  const [page, setPage] = useQueryState(
+    'page',
+    parseAsInteger.withDefault(1).withOptions({
+      shallow: true,
+    })
+  );
+
+  const [pageSize, setPageSize] = useQueryState(
+    'pageSize',
+    parseAsInteger.withDefault(10).withOptions({
+      shallow: true,
+    })
+  );
+
+  const [start, setStart] = useQueryState(
+    'start',
+    parseAsString.withOptions({
+      shallow: true,
+    })
+  );
+
+  const [end, setEnd] = useQueryState(
+    'end',
+    parseAsString.withOptions({
+      shallow: true,
+    })
+  );
+
+  const [userIds, setUserIds] = useQueryState(
+    'userIds',
+    parseAsArrayOf(parseAsString).withDefault([]).withOptions({
+      shallow: true,
+    })
+  );
+
+  const [walletIds, setWalletIds] = useQueryState(
+    'walletIds',
+    parseAsArrayOf(parseAsString).withDefault([]).withOptions({
+      shallow: true,
+    })
+  );
+
+  // Compute pageIndex from 1-based page
+  const pageIndex = page > 0 ? page - 1 : 0;
+
+  // Build params for query
+  const params: InvoicesParams = {
+    q,
+    page,
+    pageSize,
+    start: start || undefined,
+    end: end || undefined,
+    userIds,
+    walletIds,
+  };
+
+  // Fetch data with React Query
+  const { data, isLoading, isFetching, error } = useWorkspaceInvoices(
+    wsId,
+    params,
+    {
+      // Use initial data for first render (SSR hydration)
+      initialData:
+        !q &&
+        page === 1 &&
+        pageSize === 10 &&
+        !start &&
+        !end &&
+        userIds.length === 0 &&
+        walletIds.length === 0
+          ? initialData
+          : undefined,
+    }
+  );
+
+  // Add href for navigation to each invoice
+  const invoices = data?.data
+    ? data.data.map((invoice) => ({
+        ...invoice,
+        href: `/${wsId}${financeHref(`/invoices/${invoice.id}`)}`,
+        ws_id: wsId,
+      }))
+    : isLoading
+      ? undefined
+      : [];
+
+  const extraData = {
+    canDeleteInvoices,
+    deleteInvoiceAction,
+    currency,
+  };
+
+  // Handler for search - uses nuqs setQ
+  const handleSearch = useCallback(
+    (query: string) => {
+      setQ(query || null);
+      setPage(1); // Reset to first page on search
+    },
+    [setQ, setPage]
+  );
+
+  // Handler for pagination params - uses nuqs setters
+  const handleSetParams = useCallback(
+    (params: { page?: number; pageSize?: string }) => {
+      if (params.page !== undefined) {
+        setPage(params.page);
+      }
+      if (params.pageSize !== undefined) {
+        setPageSize(Number(params.pageSize));
+      }
+    },
+    [setPage, setPageSize]
+  );
+
+  // Handler for reset - clears all nuqs state
+  const handleResetParams = useCallback(() => {
+    setQ(null);
+    setPage(null);
+    setPageSize(null);
+    setStart(null);
+    setEnd(null);
+    setUserIds(null);
+    setWalletIds(null);
+  }, [setQ, setPage, setPageSize, setStart, setEnd, setUserIds, setWalletIds]);
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <p className="text-destructive">{t('ws-invoices.error_loading')}</p>
+      </div>
+    );
+  }
+
+  // Show loading overlay when fetching new data (but not on initial load)
+  const showLoadingOverlay = isFetching && !isLoading;
+
+  return (
+    <div className="relative">
+      {/* Loading overlay on table when fetching */}
+      {showLoadingOverlay && (
+        <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/50 backdrop-blur-[1px]">
+          <div className="flex items-center gap-2 rounded-md border bg-background/90 px-4 py-2 shadow-lg">
+            <Loader2 className="h-5 w-5 animate-spin text-primary" />
+            <span className="text-muted-foreground text-sm">Loading...</span>
+          </div>
+        </div>
+      )}
+
+      <DataTable
+        t={t}
+        data={invoices}
+        namespace="invoice-data-table"
+        columnGenerator={invoiceColumns}
+        extraData={extraData}
+        count={data?.count ?? 0}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        defaultQuery={q}
+        onSearch={handleSearch}
+        setParams={handleSetParams}
+        resetParams={handleResetParams}
+        isFiltered={
+          q !== '' ||
+          page !== 1 ||
+          pageSize !== 10 ||
+          !!start ||
+          !!end ||
+          userIds.length > 0 ||
+          walletIds.length > 0
+        }
+        filters={
+          <div className="flex flex-wrap items-center gap-2">
+            <Suspense fallback={<Skeleton className="h-8 w-32" />}>
+              <UserFilterWrapper wsId={wsId} invoiceType={invoiceType} />
+            </Suspense>
+            {invoiceType === 'created' && (
+              <>
+                <Suspense fallback={<Skeleton className="h-8 w-32" />}>
+                  <WalletFilterWrapper wsId={wsId} />
+                </Suspense>
+                <Suspense fallback={<Skeleton className="h-8 w-32" />}>
+                  <DateRangeFilterWrapper />
+                </Suspense>
+              </>
+            )}
+          </div>
+        }
+        toolbarExportContent={
+          canExport ? (
+            <ExportDialogContent
+              wsId={wsId}
+              exportType="invoices"
+              invoiceType={invoiceType}
+              searchParams={{
+                q: q || undefined,
+                page: page?.toString() || undefined,
+                pageSize: pageSize?.toString() || undefined,
+                start: start || undefined,
+                end: end || undefined,
+                userIds,
+                walletIds,
+              }}
+            />
+          ) : undefined
+        }
+        onRefresh={() => {
+          queryClient.invalidateQueries({
+            queryKey: ['workspace-invoices', wsId],
+          });
+        }}
+        defaultVisibility={{
+          id: false,
+          customer_id: false,
+          price: false,
+          total_diff: false,
+          note: false,
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,215 @@
+'use client';
+
+import { ChevronDown } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { Separator } from '@tuturuuu/ui/separator';
+import { Skeleton } from '@tuturuuu/ui/skeleton';
+import { Switch } from '@tuturuuu/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import { useTranslations } from 'next-intl';
+import { useQueryState } from 'nuqs';
+import { useState } from 'react';
+import { useLocalStorage } from '../../../../hooks/use-local-storage';
+import { useWorkspaceConfig } from '../../../../hooks/use-workspace-config';
+import { StandardInvoice } from './standard-invoice';
+import { SubscriptionInvoice } from './subscription-invoice';
+
+interface Props {
+  wsId: string;
+  canChangeFinanceWallets?: boolean;
+  canSetFinanceWalletsOnCreate?: boolean;
+}
+
+export default function NewInvoicePage({
+  wsId,
+  canChangeFinanceWallets = true,
+  canSetFinanceWalletsOnCreate = true,
+}: Props) {
+  const t = useTranslations();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const [invoiceType, setInvoiceType] = useQueryState('type', {
+    defaultValue: 'standard',
+    parse: (value) => (value === 'subscription' ? 'subscription' : 'standard'),
+    serialize: (value) => value,
+  });
+
+  const [prefillAmount] = useQueryState('amount', {
+    parse: (value) => {
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : null;
+    },
+  });
+
+  const { data: defaultWalletId } = useWorkspaceConfig<string>(
+    wsId,
+    'default_wallet_id'
+  );
+
+  const { data: defaultCategoryId } = useWorkspaceConfig<string>(
+    wsId,
+    'DEFAULT_SUBSCRIPTION_CATEGORY_ID'
+  );
+
+  const { data: defaultCurrency } = useWorkspaceConfig<'VND' | 'USD'>(
+    wsId,
+    'DEFAULT_CURRENCY',
+    'USD'
+  );
+
+  const [
+    createMultipleInvoices,
+    setCreateMultipleInvoices,
+    createMultipleInvoicesInitialized,
+  ] = useLocalStorage('createMultipleInvoices', false);
+  const [printAfterCreate, setPrintAfterCreate, printAfterCreateInitialized] =
+    useLocalStorage('printAfterCreate', true);
+  const [
+    downloadImageAfterCreate,
+    setDownloadImageAfterCreate,
+    downloadImageAfterCreateInitialized,
+  ] = useLocalStorage('downloadImageAfterCreate', false);
+
+  const isInitialized =
+    createMultipleInvoicesInitialized &&
+    printAfterCreateInitialized &&
+    downloadImageAfterCreateInitialized;
+
+  return (
+    <>
+      <FeatureSummary
+        pluralTitle={t('ws-invoices.new_invoice')}
+        singularTitle={t('ws-invoices.new_invoice')}
+      />
+      <Separator className="my-4" />
+      <Tabs
+        value={invoiceType}
+        className="w-full"
+        onValueChange={(value) => setInvoiceType(value as any)}
+      >
+        <div className="flex items-center justify-between">
+          <TabsList>
+            <TabsTrigger value="standard">
+              {t('ws-invoices.standard_invoice')}
+            </TabsTrigger>
+            <TabsTrigger value="subscription">
+              {t('ws-invoices.subscription_invoice')}
+            </TabsTrigger>
+          </TabsList>
+
+          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="flex items-center gap-2"
+              >
+                {t('ws-invoices.options')}
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="w-56"
+              onCloseAutoFocus={(event: Event) => event.preventDefault()}
+            >
+              {isInitialized ? (
+                <div className="flex flex-col gap-3 p-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex flex-1 flex-col gap-1">
+                      <span className="font-medium text-sm">
+                        {t('ws-invoices.create_multiple_invoices')}
+                      </span>
+                      <span className="text-muted-foreground text-xs">
+                        {t('ws-invoices.create_multiple_invoices_tooltip')}
+                      </span>
+                    </div>
+                    <Switch
+                      id="create-multiple-invoices"
+                      checked={createMultipleInvoices}
+                      onCheckedChange={setCreateMultipleInvoices}
+                      disabled={printAfterCreate || downloadImageAfterCreate}
+                    />
+                  </div>
+                  <div className="h-px bg-border" />
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex flex-1 flex-col gap-1">
+                      <span className="font-medium text-sm">
+                        {t('ws-invoices.print_after_create')}
+                      </span>
+                      <span className="text-muted-foreground text-xs">
+                        {t('ws-invoices.print_after_create_tooltip')}
+                      </span>
+                    </div>
+                    <Switch
+                      id="print-after-create"
+                      checked={printAfterCreate}
+                      onCheckedChange={setPrintAfterCreate}
+                      disabled={createMultipleInvoices}
+                    />
+                  </div>
+                  <div className="h-px bg-border" />
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex flex-1 flex-col gap-1">
+                      <span className="font-medium text-sm">
+                        {t('ws-invoices.download_image_after_create')}
+                      </span>
+                      <span className="text-muted-foreground text-xs">
+                        {t('ws-invoices.download_image_after_create_tooltip')}
+                      </span>
+                    </div>
+                    <Switch
+                      id="download-image-after-create"
+                      checked={downloadImageAfterCreate}
+                      onCheckedChange={setDownloadImageAfterCreate}
+                      disabled={createMultipleInvoices}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-col gap-2 px-2 py-1.5">
+                  <Skeleton className="h-6 w-32 rounded" />
+                  <Skeleton className="h-6 w-32 rounded" />
+                  <Skeleton className="h-6 w-32 rounded" />
+                </div>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <TabsContent value="standard" className="mt-4">
+          <StandardInvoice
+            wsId={wsId}
+            defaultWalletId={defaultWalletId ?? undefined}
+            defaultCurrency={defaultCurrency ?? undefined}
+            canChangeFinanceWallets={canChangeFinanceWallets}
+            canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
+            createMultipleInvoices={createMultipleInvoices}
+            printAfterCreate={printAfterCreate}
+            downloadImageAfterCreate={downloadImageAfterCreate}
+          />
+        </TabsContent>
+        <TabsContent value="subscription" className="mt-4">
+          <SubscriptionInvoice
+            wsId={wsId}
+            prefillAmount={prefillAmount}
+            defaultWalletId={defaultWalletId ?? undefined}
+            defaultCategoryId={defaultCategoryId ?? undefined}
+            defaultCurrency={defaultCurrency ?? undefined}
+            canChangeFinanceWallets={canChangeFinanceWallets}
+            canSetFinanceWalletsOnCreate={canSetFinanceWalletsOnCreate}
+            createMultipleInvoices={createMultipleInvoices}
+            printAfterCreate={printAfterCreate}
+            downloadImageAfterCreate={downloadImageAfterCreate}
+          />
+        </TabsContent>
+      </Tabs>
+    </>
+  );
+}