@tuturuuu/ui 0.22.0 → 0.24.0

package/src/components/ui/finance/transactions/inventory-reconciliation-panel.tsx

@@ -0,0 +1,407 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AlertTriangle, Link2, RefreshCw, Unlink } from '@tuturuuu/icons';
+import {
+  bulkLinkInventoryFinanceEntries,
+  bulkUnlinkInventoryFinanceEntries,
+  getInventoryFinanceMappings,
+  type InventoryFinanceEntryStatus,
+  type InventoryFinanceProvider,
+  listInventoryFinanceEntries,
+  syncInventoryFinanceProvider,
+} from '@tuturuuu/internal-api';
+import {
+  listTransactionCategories,
+  listWallets,
+} from '@tuturuuu/internal-api/finance';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { toast } from '@tuturuuu/ui/sonner';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import {
+  formatInventoryReconciliationAmount,
+  InventoryReconciliationEntryRow,
+  inventoryProviderTranslationKey,
+} from './inventory-reconciliation-entry-row';
+
+const ALL = 'all';
+const NONE = 'none';
+const providerValues: Array<InventoryFinanceProvider | typeof ALL> = [
+  ALL,
+  'cash',
+  'polar',
+  'square_pos',
+  'square_terminal',
+];
+
+export function InventoryReconciliationPanel({
+  defaultCurrency,
+  wsId,
+}: {
+  defaultCurrency: string;
+  wsId: string;
+}) {
+  const t = useTranslations('inventory-finance-reconciliation');
+  const queryClient = useQueryClient();
+  const [provider, setProvider] = useState<
+    InventoryFinanceProvider | typeof ALL
+  >(ALL);
+  const [status, setStatus] = useState<InventoryFinanceEntryStatus>('pending');
+  const [currency, setCurrency] = useState(defaultCurrency);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [walletId, setWalletId] = useState(NONE);
+  const [categoryId, setCategoryId] = useState(NONE);
+
+  const reconciliationQuery = useQuery({
+    queryKey: [
+      'inventory-finance-reconciliation',
+      wsId,
+      provider,
+      status,
+      currency,
+    ],
+    queryFn: () =>
+      listInventoryFinanceEntries(wsId, {
+        currency: currency || undefined,
+        limit: 100,
+        provider: provider === ALL ? undefined : provider,
+        status,
+      }),
+  });
+  const mappingsQuery = useQuery({
+    queryKey: ['inventory-finance-mappings', wsId],
+    queryFn: () => getInventoryFinanceMappings(wsId),
+  });
+  const walletsQuery = useQuery({
+    queryKey: ['workspace-wallets', wsId],
+    queryFn: () => listWallets(wsId),
+  });
+  const categoriesQuery = useQuery({
+    queryKey: ['transaction-categories', wsId],
+    queryFn: () => listTransactionCategories(wsId),
+  });
+  const entries = reconciliationQuery.data?.data ?? [];
+  const selectedEntries = entries.filter((entry) =>
+    selectedIds.includes(entry.id)
+  );
+  const selectedCurrencies = new Set(
+    selectedEntries.map((entry) => entry.currency)
+  );
+  const compatibleWallets = (walletsQuery.data ?? []).filter(
+    (wallet) =>
+      wallet.id &&
+      (selectedCurrencies.size !== 1 ||
+        selectedCurrencies.has((wallet.currency ?? '').toUpperCase()))
+  );
+
+  const invalidate = async () => {
+    setSelectedIds([]);
+    await Promise.all([
+      queryClient.invalidateQueries({
+        queryKey: ['inventory-finance-reconciliation', wsId],
+      }),
+      queryClient.invalidateQueries({ queryKey: ['transactions'] }),
+      queryClient.invalidateQueries({ queryKey: ['workspace-wallets', wsId] }),
+    ]);
+  };
+  const linkMutation = useMutation({
+    mutationFn: () =>
+      bulkLinkInventoryFinanceEntries(wsId, {
+        categoryId: categoryId === NONE ? null : categoryId,
+        entryIds: selectedIds,
+        walletId,
+      }),
+    onSuccess: async () => {
+      toast.success(t('bulk_link_success'));
+      await invalidate();
+    },
+    onError: () => toast.error(t('bulk_action_error')),
+  });
+  const unlinkMutation = useMutation({
+    mutationFn: () =>
+      bulkUnlinkInventoryFinanceEntries(wsId, { entryIds: selectedIds }),
+    onSuccess: async () => {
+      toast.success(t('bulk_unlink_success'));
+      await invalidate();
+    },
+    onError: () => toast.error(t('bulk_action_error')),
+  });
+  const applyDefaultsMutation = useMutation({
+    mutationFn: async () => {
+      const mappings = mappingsQuery.data?.mappings ?? [];
+      const groups = new Map<
+        string,
+        { categoryId: string | null; entryIds: string[]; walletId: string }
+      >();
+      for (const entry of selectedEntries) {
+        const mapping = mappings.find(
+          (item) =>
+            item.provider === entry.provider &&
+            item.currency === entry.currency &&
+            item.walletId
+        );
+        if (!mapping?.walletId) throw new Error('missing-mapping');
+        const key = `${mapping.walletId}:${mapping.categoryId ?? ''}`;
+        const group = groups.get(key) ?? {
+          categoryId: mapping.categoryId,
+          entryIds: [],
+          walletId: mapping.walletId,
+        };
+        group.entryIds.push(entry.id);
+        groups.set(key, group);
+      }
+      return Promise.all(
+        [...groups.values()].map((group) =>
+          bulkLinkInventoryFinanceEntries(wsId, group)
+        )
+      );
+    },
+    onSuccess: async () => {
+      toast.success(t('apply_defaults_success'));
+      await invalidate();
+    },
+    onError: () => toast.error(t('missing_mapping_error')),
+  });
+  const syncMutation = useMutation({
+    mutationFn: async () => {
+      const selectedProvider =
+        provider === 'polar' ? 'polar' : provider === ALL ? null : 'square';
+      const providers: ReadonlyArray<'polar' | 'square'> = selectedProvider
+        ? [selectedProvider]
+        : (['polar', 'square'] as const);
+      return Promise.all(
+        providers.map((item) =>
+          syncInventoryFinanceProvider(wsId, {
+            environment: 'production',
+            limit: 100,
+            provider: item,
+          })
+        )
+      );
+    },
+    onSuccess: async () => {
+      toast.success(t('sync_success'));
+      await invalidate();
+    },
+    onError: () => toast.error(t('sync_error')),
+  });
+
+  const pending = reconciliationQuery.data?.summary.pending ?? [];
+  const pendingLabel = useMemo(
+    () =>
+      pending.length
+        ? pending
+            .map(
+              (item) =>
+                `${item.count} · ${formatInventoryReconciliationAmount(item.amount, item.currency)}`
+            )
+            .join(' / ')
+        : t('nothing_pending'),
+    [pending, t]
+  );
+  const allSelected =
+    entries.length > 0 &&
+    entries.every((entry) => selectedIds.includes(entry.id));
+  const isMutating =
+    linkMutation.isPending ||
+    unlinkMutation.isPending ||
+    applyDefaultsMutation.isPending;
+
+  return (
+    <section className="mb-4 overflow-hidden rounded-2xl border bg-card shadow-sm">
+      <div className="flex flex-col gap-4 border-b bg-muted/30 p-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex gap-3">
+          <AlertTriangle className="mt-0.5 h-5 w-5 text-dynamic-orange" />
+          <div>
+            <h2 className="font-semibold">{t('title')}</h2>
+            <p className="text-muted-foreground text-sm">{t('description')}</p>
+            <p className="mt-1 font-medium text-sm">{pendingLabel}</p>
+          </div>
+        </div>
+        <Button
+          disabled={syncMutation.isPending || provider === 'cash'}
+          onClick={() => syncMutation.mutate()}
+          size="sm"
+          variant="outline"
+        >
+          <RefreshCw
+            className={syncMutation.isPending ? 'animate-spin' : undefined}
+          />
+          {t('sync_provider_history')}
+        </Button>
+      </div>
+
+      <div className="flex flex-wrap gap-2 border-b p-3">
+        <Select
+          value={status}
+          onValueChange={(value) => {
+            setStatus(value as InventoryFinanceEntryStatus);
+            setSelectedIds([]);
+          }}
+        >
+          <SelectTrigger className="w-44">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="pending">{t('view_needs_wallet')}</SelectItem>
+            <SelectItem value="linked">{t('view_linked')}</SelectItem>
+            <SelectItem value="error">{t('view_errors')}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select
+          value={provider}
+          onValueChange={(value) => {
+            setProvider(value as InventoryFinanceProvider | typeof ALL);
+            setSelectedIds([]);
+          }}
+        >
+          <SelectTrigger className="w-48">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {providerValues.map((value) => (
+              <SelectItem key={value} value={value}>
+                {value === ALL
+                  ? t('all_providers')
+                  : t(inventoryProviderTranslationKey(value))}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select value={currency} onValueChange={setCurrency}>
+          <SelectTrigger className="w-28">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {[...new Set([defaultCurrency, 'USD', 'VND'])].map((value) => (
+              <SelectItem key={value} value={value}>
+                {value}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {entries.length > 0 && (
+        <div className="flex items-center gap-2 border-b px-4 py-2 text-sm">
+          <Checkbox
+            checked={allSelected}
+            onCheckedChange={(checked) =>
+              setSelectedIds(
+                checked === true ? entries.map((entry) => entry.id) : []
+              )
+            }
+          />
+          {t('select_all', { count: entries.length })}
+        </div>
+      )}
+      <div>
+        {entries.map((entry) => (
+          <InventoryReconciliationEntryRow
+            checked={selectedIds.includes(entry.id)}
+            entry={entry}
+            key={entry.id}
+            onCheckedChange={(checked) =>
+              setSelectedIds((current) =>
+                checked
+                  ? [...new Set([...current, entry.id])]
+                  : current.filter((id) => id !== entry.id)
+              )
+            }
+          />
+        ))}
+        {!reconciliationQuery.isLoading && entries.length === 0 && (
+          <p className="p-8 text-center text-muted-foreground text-sm">
+            {t('empty_view')}
+          </p>
+        )}
+      </div>
+
+      {selectedIds.length > 0 && (
+        <div className="sticky bottom-3 m-3 flex flex-col gap-2 rounded-xl border bg-background/95 p-3 shadow-lg backdrop-blur sm:flex-row sm:items-center">
+          <Badge variant="secondary">
+            {t('selected_count', { count: selectedIds.length })}
+          </Badge>
+          {status === 'linked' ? (
+            <Button
+              disabled={isMutating}
+              onClick={() => unlinkMutation.mutate()}
+              size="sm"
+              variant="destructive"
+            >
+              <Unlink />
+              {t('unlink')}
+            </Button>
+          ) : (
+            <>
+              <Select value={walletId} onValueChange={setWalletId}>
+                <SelectTrigger className="min-w-48">
+                  <SelectValue placeholder={t('assign_wallet')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem disabled value={NONE}>
+                    {t('assign_wallet')}
+                  </SelectItem>
+                  {compatibleWallets.map((wallet) => (
+                    <SelectItem key={wallet.id} value={wallet.id as string}>
+                      {wallet.name} · {wallet.currency}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Select value={categoryId} onValueChange={setCategoryId}>
+                <SelectTrigger className="min-w-44">
+                  <SelectValue placeholder={t('set_category')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={NONE}>{t('uncategorized')}</SelectItem>
+                  {(categoriesQuery.data ?? [])
+                    .filter((category) => category.id)
+                    .map((category) => (
+                      <SelectItem
+                        key={category.id}
+                        value={category.id as string}
+                      >
+                        {category.name}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+              <Button
+                disabled={
+                  isMutating ||
+                  walletId === NONE ||
+                  selectedCurrencies.size !== 1
+                }
+                onClick={() => linkMutation.mutate()}
+                size="sm"
+              >
+                <Link2 />
+                {t('assign_or_move')}
+              </Button>
+              <Button
+                disabled={isMutating}
+                onClick={() => applyDefaultsMutation.mutate()}
+                size="sm"
+                variant="outline"
+              >
+                <RefreshCw />
+                {t('apply_defaults')}
+              </Button>
+            </>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/ui/finance/transactions/transaction-card.tsx

@@ -78,6 +78,7 @@ export function TransactionCard({
   isDaily = false,
 }: TransactionCardProps) {
   const t = useTranslations('workspace-finance-transactions');
+  const sourceT = useTranslations('inventory-finance-reconciliation');
   const commonT = useTranslations('common');
   const financeHref = useFinanceHref();
   const [isHovered, setIsHovered] = useState(false);
@@ -439,6 +440,20 @@ export function TransactionCard({
                   {t('confidential')}
                 </Badge>
               )}
+              {transaction.source && (
+                <Link
+                  href={transaction.source.inventoryHref}
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  <Badge
+                    variant="outline"
+                    className="border-dynamic-blue/40 bg-dynamic-blue/10 text-dynamic-blue"
+                  >
+                    {sourceT(`provider_${transaction.source.provider}`)} ·{' '}
+                    {sourceT(`kind_${transaction.source.kind}`)}
+                  </Badge>
+                </Link>
+              )}
             </div>
 
             {/* Amount + Actions */}

package/src/components/ui/finance/transactions/transaction-edit-dialog.test.tsx

@@ -122,4 +122,35 @@ describe('TransactionEditDialog', () => {
       })
     ).toBeDisabled();
   });
+
+  it('locks provider-controlled amount and occurrence controls', async () => {
+    renderDialog({
+      transaction: {
+        amount: 123,
+        category_id: 'category-1',
+        description: 'Polar sale',
+        id: 'transaction-1',
+        report_opt_in: true,
+        source: {
+          checkoutId: 'checkout-1',
+          entryId: 'entry-1',
+          inventoryHref: 'https://inventory.tuturuuu.com/ws-1/sales',
+          kind: 'sale',
+          provider: 'polar',
+          providerReferenceId: 'order-1',
+          reconciliationHref: '/ws-1/transactions?reconciliation=entry-1',
+          type: 'inventory',
+        },
+        taken_at: '2026-05-27T00:00:00.000Z',
+        wallet_id: 'wallet-1',
+      },
+    });
+
+    expect(await screen.findByText('provider_fields_locked')).toBeVisible();
+    expect(
+      screen.getByRole('switch', {
+        name: 'transaction-data-table.include_time',
+      })
+    ).toBeDisabled();
+  });
 });

package/src/components/ui/finance/transactions/transaction-edit-dialog.tsx

@@ -168,6 +168,7 @@ export function TransactionEditDialog({
   timezone,
 }: TransactionEditDialogProps) {
   const t = useTranslations();
+  const sourceT = useTranslations('inventory-finance-reconciliation');
   const locale = useLocale();
   const router = useRouter();
   const queryClient = useQueryClient();
@@ -197,6 +198,7 @@ export function TransactionEditDialog({
   // Disable all fields if user lacks permission to view/update confidential transaction
   const isDisabled =
     hasAnyConfidentialField && !canUpdateConfidentialTransactions;
+  const isProviderLinked = Boolean(transaction.source);
 
   // Check if user can delete this specific transaction
   const canDeleteThisTransaction =
@@ -345,15 +347,19 @@ export function TransactionEditDialog({
 
       const payload = {
         description,
-        amount: finalAmount,
         origin_wallet_id: walletId,
         category_id: categoryId,
-        taken_at: takenAt?.toISOString(),
         report_opt_in: reportOptIn,
         tag_ids: selectedTagIds,
         is_amount_confidential: isAmountConfidential,
         is_description_confidential: isDescriptionConfidential,
         is_category_confidential: isCategoryConfidential,
+        ...(isProviderLinked
+          ? {}
+          : {
+              amount: finalAmount,
+              taken_at: takenAt?.toISOString(),
+            }),
       };
 
       if (transaction?.id) {
@@ -388,6 +394,7 @@ export function TransactionEditDialog({
     canSave,
     canUpdateTransactions,
     isExpense,
+    isProviderLinked,
     amount,
     transaction,
     wsId,
@@ -519,6 +526,12 @@ export function TransactionEditDialog({
                         {t('workspace-finance-transactions.confidential')}
                       </Badge>
                     )}
+                    {transaction.source && (
+                      <Badge variant="outline">
+                        {sourceT(`provider_${transaction.source.provider}`)} ·{' '}
+                        {sourceT(`kind_${transaction.source.kind}`)}
+                      </Badge>
+                    )}
                   </div>
                   <DialogDescription className="text-xs">
                     {canUpdateTransactions
@@ -634,7 +647,9 @@ export function TransactionEditDialog({
                     value={amount}
                     onChange={setAmount}
                     placeholder="0"
-                    disabled={isDisabled || !canUpdateTransactions}
+                    disabled={
+                      isDisabled || !canUpdateTransactions || isProviderLinked
+                    }
                     locale={locale}
                     currencySuffix={selectedWalletCurrency}
                     className={cn(
@@ -667,6 +682,11 @@ export function TransactionEditDialog({
                           }).format(isExpense ? -amount : amount)}
                     </span>
                   </div>
+                  {isProviderLinked && (
+                    <p className="text-muted-foreground text-xs">
+                      {sourceT('provider_fields_locked')}
+                    </p>
+                  )}
                 </div>
               )}
 
@@ -760,7 +780,9 @@ export function TransactionEditDialog({
                   includeTimeLabel={t('transaction-data-table.include_time')}
                   allowClear={false}
                   showFooterControls={true}
-                  disabled={isDisabled || !canUpdateTransactions}
+                  disabled={
+                    isDisabled || !canUpdateTransactions || isProviderLinked
+                  }
                   preferences={{
                     timezone: timezone || 'auto',
                     timeFormat: locale === 'vi' ? '24h' : '12h',

package/src/components/ui/finance/transactions/transactionId/transaction-details-client-page.tsx

@@ -45,6 +45,7 @@ export function TransactionDetailsClientPage({
   timezone,
 }: Props) {
   const t = useTranslations();
+  const sourceT = useTranslations('inventory-finance-reconciliation');
   const financeHref = useFinanceHref();
   const [isEditOpen, setIsEditOpen] = useState(false);
   const { isConfidential: areNumbersHidden } =
@@ -89,6 +90,12 @@ export function TransactionDetailsClientPage({
                 {transaction.category && (
                   <Badge variant="outline">{transaction.category}</Badge>
                 )}
+                {transaction.source && (
+                  <Badge variant="outline">
+                    {sourceT(`provider_${transaction.source.provider}`)} ·{' '}
+                    {sourceT(`kind_${transaction.source.kind}`)}
+                  </Badge>
+                )}
               </div>
               <p className="text-muted-foreground text-sm">
                 {transaction.description || t('ws-transactions.no_description')}
@@ -152,6 +159,21 @@ export function TransactionDetailsClientPage({
             </div>
 
             <div className="space-y-3 p-4">
+              {transaction.source && (
+                <>
+                  <DetailItem
+                    icon={<Tag className="h-5 w-5 text-primary" />}
+                    label={sourceT('provider_source')}
+                    value={
+                      <span className="font-mono text-xs">
+                        {transaction.source.providerReferenceId}
+                      </span>
+                    }
+                    href={transaction.source.inventoryHref}
+                  />
+                  <Separator />
+                </>
+              )}
               <DetailItem
                 icon={<Wallet className="h-5 w-5 text-primary" />}
                 label={t('transaction-data-table.wallet')}

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

@@ -4,6 +4,7 @@ import {
   FinancePermissionWarningDialog,
 } from '@tuturuuu/ui/finance/shared/finance-permission-warning-dialog';
 import ExportDialogContent from '@tuturuuu/ui/finance/transactions/export-dialog-content';
+import { InventoryReconciliationPanel } from '@tuturuuu/ui/finance/transactions/inventory-reconciliation-panel';
 import { TransactionsCreateSummary } from '@tuturuuu/ui/finance/transactions/transactions-create-summary';
 import { TransactionsInfinitePage } from '@tuturuuu/ui/finance/transactions/transactions-infinite-page';
 import { Separator } from '@tuturuuu/ui/separator';
@@ -55,6 +56,7 @@ export default async function TransactionsPage({
   const workspaceCurrency = resolveSupportedCurrency(resolvedCurrency);
 
   const canViewTransactions = containsPermission('view_transactions');
+  const canManageFinance = containsPermission('manage_finance');
   const canExportFinanceData = containsPermission('export_finance_data');
   const canCreateTransactions = containsPermission('create_transactions');
   const canUpdateTransactions = containsPermission('update_transactions');
@@ -99,6 +101,12 @@ export default async function TransactionsPage({
 
   return (
     <>
+      {canManageFinance && (
+        <InventoryReconciliationPanel
+          defaultCurrency={workspaceCurrency}
+          wsId={wsId}
+        />
+      )}
       <TransactionsCreateSummary
         pluralTitle={t('ws-transactions.plural')}
         singularTitle={t('ws-transactions.singular')}