@tuturuuu/ui 0.23.0 → 0.25.0

package/src/components/ui/custom/workspace-select.tsx

@@ -29,7 +29,7 @@ import { workspaceHandleSchema } from '@tuturuuu/utils/workspace-handle';
 import { WORKSPACE_LIMIT_ERROR_CODE } from '@tuturuuu/utils/workspace-limits';
 import Image from 'next/image';
 import { usePathname, useRouter } from 'next/navigation';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -69,8 +69,10 @@ import { Input } from '../input';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
 import {
+  buildWorkspaceSetupHandoffUrl,
   mergeWorkspaceSelectWorkspaces,
   normalizeWorkspaceSwitchPath,
+  resolveWorkspaceAvatarUrl,
 } from './workspace-select-helpers';
 import { useOpenWorkspaceSelectWhenRevealed } from './workspace-select-reveal';
 
@@ -82,13 +84,6 @@ const JoinWorkspaceByHandleFormSchema = z.object({
   handle: workspaceHandleSchema,
 });
 
-function resolveWorkspaceAvatarUrl(
-  avatarUrl: string | null | undefined,
-  fallbackLogoUrl: string
-) {
-  return avatarUrl === TUTURUUU_LOGO_URL ? fallbackLogoUrl : avatarUrl;
-}
-
 function WorkspaceIcon({
   name,
   avatarUrl,
@@ -100,10 +95,7 @@ function WorkspaceIcon({
   className?: string;
   fallbackLogoUrl?: string;
 }) {
-  const resolvedAvatarUrl = resolveWorkspaceAvatarUrl(
-    avatarUrl,
-    fallbackLogoUrl
-  );
+  const resolvedAvatarUrl = resolveWorkspaceAvatarUrl(avatarUrl);
   const shouldSkipFallbackOptimization = /^https?:\/\//u.test(fallbackLogoUrl);
 
   return (
@@ -159,6 +151,7 @@ export function WorkspaceSelect({
   resolveNextPathname,
   triggerClassName,
   popoverModal = false,
+  platformWorkspaceSetupUrl,
 }: {
   wsId: string;
   hideLeading?: boolean;
@@ -177,8 +170,11 @@ export function WorkspaceSelect({
   triggerClassName?: string;
   /** Keep the picker interactive and scrollable when rendered inside a modal. */
   popoverModal?: boolean;
+  /** Platform origin used to prepare a newly created satellite workspace. */
+  platformWorkspaceSetupUrl?: string;
 }) {
   const t = useTranslations();
+  const locale = useLocale();
   const router = useRouter();
   const pathname = usePathname();
   const queryClient = useQueryClient();
@@ -280,11 +276,26 @@ export function WorkspaceSelect({
 
     try {
       const { id } = await createTeamWorkspace(formData);
+      const workspaceLandingPath = getWorkspaceLandingPath(id);
       form.reset();
-      router.push(getWorkspaceLandingPath(id));
-      router.refresh();
       setShowNewWorkspaceDialog(false);
       setOpen(false);
+
+      if (platformWorkspaceSetupUrl) {
+        window.location.assign(
+          buildWorkspaceSetupHandoffUrl({
+            locale,
+            platformUrl: platformWorkspaceSetupUrl,
+            returnOrigin: window.location.origin,
+            returnPath: workspaceLandingPath,
+            workspaceId: id,
+          })
+        );
+        return;
+      }
+
+      router.push(workspaceLandingPath);
+      router.refresh();
     } catch (error) {
       console.error('Error creating workspace:', error);
       if (
@@ -333,11 +344,9 @@ export function WorkspaceSelect({
           id: rootWorkspace.id,
           label: rootWorkspace.name || t('common.root'),
           value: ROOT_WORKSPACE_ID,
-          avatarUrl:
-            resolveWorkspaceAvatarUrl(
-              rootWorkspace.avatar_url,
-              fallbackLogoUrl
-            ) || fallbackLogoUrl,
+          avatarUrl: resolveWorkspaceAvatarUrl(rootWorkspace.avatar_url, {
+            rootWorkspaceLogoUrl: TUTURUUU_LOGO_URL,
+          }),
           tier: rootWorkspace.tier as
             | 'FREE'
             | 'PLUS'
@@ -355,10 +364,7 @@ export function WorkspaceSelect({
           id: personalWorkspace.id,
           label: personalWorkspace.name || 'Personal',
           value: PERSONAL_WORKSPACE_SLUG,
-          avatarUrl: resolveWorkspaceAvatarUrl(
-            personalWorkspace.avatar_url,
-            fallbackLogoUrl
-          ),
+          avatarUrl: resolveWorkspaceAvatarUrl(personalWorkspace.avatar_url),
           tier: personalWorkspace.tier as
             | 'FREE'
             | 'PLUS'
@@ -380,10 +386,7 @@ export function WorkspaceSelect({
           }),
           // Signal creator-owned workspaces for UI
           isCreator: workspace?.created_by_me === true,
-          avatarUrl: resolveWorkspaceAvatarUrl(
-            workspace.avatar_url,
-            fallbackLogoUrl
-          ),
+          avatarUrl: resolveWorkspaceAvatarUrl(workspace.avatar_url),
           tier: workspace.tier || null,
         })
       ),
@@ -398,10 +401,7 @@ export function WorkspaceSelect({
           personal: workspace?.personal,
         }),
         accessType: 'guest' as const,
-        avatarUrl: resolveWorkspaceAvatarUrl(
-          workspace.avatar_url,
-          fallbackLogoUrl
-        ),
+        avatarUrl: resolveWorkspaceAvatarUrl(workspace.avatar_url),
         guestBoardCount: workspace.guest_board_count ?? 0,
         guestLandingPath: workspace.guest_landing_path ?? '/tasks/boards',
         guestProducts: workspace.guest_products ?? ['tasks'],
@@ -579,13 +579,12 @@ export function WorkspaceSelect({
                 fallbackLogoUrl={fallbackLogoUrl}
                 name={workspace?.name}
                 avatarUrl={
-                  resolveWorkspaceAvatarUrl(
-                    workspace?.avatar_url,
-                    fallbackLogoUrl
-                  ) ||
-                  (workspace?.id === ROOT_WORKSPACE_ID
-                    ? fallbackLogoUrl
-                    : undefined)
+                  resolveWorkspaceAvatarUrl(workspace?.avatar_url, {
+                    rootWorkspaceLogoUrl:
+                      workspace?.id === ROOT_WORKSPACE_ID
+                        ? TUTURUUU_LOGO_URL
+                        : undefined,
+                  }) ?? undefined
                 }
               />
               <div

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

@@ -18,13 +18,16 @@ import {
 import { AnalyticsDateControls } from './analytics-date-controls';
 import { BalanceTrendChart } from './balance-trend-chart';
 import { IncomeExpenseChart } from './income-expense-chart';
+import { InventoryProviderSummary } from './inventory-provider-summary';
 
 interface AnalyticsPageProps {
+  canManageFinance?: boolean;
   wsId: string;
   currency?: string;
 }
 
 export default function AnalyticsPage({
+  canManageFinance = false,
   wsId,
   currency = 'USD',
 }: AnalyticsPageProps) {
@@ -102,6 +105,13 @@ export default function AnalyticsPage({
 
       {/* Charts Grid */}
       <div className="grid gap-6 lg:grid-cols-2">
+        <InventoryProviderSummary
+          canManageFinance={canManageFinance}
+          currency={currency}
+          endDate={filters.apiDateRange.endDate}
+          startDate={filters.apiDateRange.startDate}
+          wsId={wsId}
+        />
         {/* Income vs Expense Chart */}
         {showDailyChart ? (
           <IncomeExpenseChart

package/src/components/ui/finance/analytics/inventory-provider-summary.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { listInventoryFinanceEntries } from '@tuturuuu/internal-api';
+import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import { Skeleton } from '@tuturuuu/ui/skeleton';
+import { getCurrencyLocale } from '@tuturuuu/utils/currencies';
+import { useTranslations } from 'next-intl';
+
+function formatCurrency(value: number, currency: string) {
+  return new Intl.NumberFormat(getCurrencyLocale(currency), {
+    currency,
+    maximumFractionDigits: currency === 'VND' ? 0 : 2,
+    style: 'currency',
+  }).format(value);
+}
+
+export function InventoryProviderSummary({
+  canManageFinance,
+  currency,
+  endDate,
+  startDate,
+  wsId,
+}: {
+  canManageFinance: boolean;
+  currency: string;
+  endDate?: string | null;
+  startDate?: string | null;
+  wsId: string;
+}) {
+  const t = useTranslations('inventory-finance-reconciliation');
+  const { data, isLoading } = useQuery({
+    enabled: canManageFinance,
+    queryKey: [
+      'inventory-finance-analytics',
+      wsId,
+      currency,
+      startDate,
+      endDate,
+    ],
+    queryFn: () =>
+      listInventoryFinanceEntries(wsId, {
+        currency,
+        endDate: endDate
+          ? new Date(`${endDate}T23:59:59.999Z`).toISOString()
+          : undefined,
+        limit: 1,
+        startDate: startDate
+          ? new Date(`${startDate}T00:00:00.000Z`).toISOString()
+          : undefined,
+      }),
+  });
+  if (!canManageFinance) return null;
+  if (isLoading) return <Skeleton className="col-span-full h-48" />;
+  const summary = data?.summary;
+  const amount = (
+    values: Array<{ amount: number; currency: string }> | undefined
+  ) => values?.find((item) => item.currency === currency)?.amount ?? 0;
+  const rows = [
+    { label: t('gross_provider_sales'), value: amount(summary?.grossSales) },
+    { label: t('refunds'), value: amount(summary?.refunds) },
+    {
+      label: t('chargeback_holds'),
+      value: amount(summary?.chargebackHolds),
+    },
+    {
+      label: t('chargeback_releases'),
+      value: amount(summary?.chargebackReleases),
+    },
+    { label: t('net_provider_sales'), value: amount(summary?.netSales) },
+  ];
+
+  return (
+    <Card className="col-span-full">
+      <CardHeader>
+        <CardTitle>{t('analytics_title')}</CardTitle>
+        <p className="text-muted-foreground text-sm">
+          {t('analytics_description')}
+        </p>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+          {rows.map((row) => (
+            <div className="rounded-xl border bg-muted/20 p-4" key={row.label}>
+              <p className="text-muted-foreground text-xs">{row.label}</p>
+              <p className="mt-1 font-semibold text-lg">
+                {formatCurrency(row.value, currency)}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 grid gap-3 md:grid-cols-3">
+          {(summary?.providers ?? []).map((provider) => (
+            <div className="rounded-xl border p-4" key={provider.provider}>
+              <p className="font-medium">
+                {t(`provider_${provider.provider}`)}
+              </p>
+              <p className="mt-2 text-muted-foreground text-sm">
+                {t('net_provider_sales')}{' '}
+                <span className="font-medium text-foreground">
+                  {formatCurrency(amount(provider.netSales), currency)}
+                </span>
+              </p>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/finance/finance-overview-metrics.tsx

@@ -3,6 +3,7 @@ import {
   ArrowDownRight,
   ArrowRightLeft,
   ArrowUpRight,
+  CircleAlert,
   FileText,
   FolderTree,
   Wallet2,
@@ -55,6 +56,14 @@ export async function FinanceOverviewMetrics({
   );
 
   const transactionsHref = `/${wsId}${financePrefix}/transactions`;
+  const reconciliationHref = `${transactionsHref}?reconciliation=needs-wallet`;
+  const canManageFinance = permissions.containsPermission('manage_finance');
+  const currencyAmount = (
+    values: Array<{ amount: number; currency: string }>
+  ) => values.find((item) => item.currency === currency)?.amount ?? 0;
+  const pending = metrics.inventoryPending.find(
+    (item) => item.currency === currency
+  );
 
   return (
     <>
@@ -115,6 +124,46 @@ export async function FinanceOverviewMetrics({
         href={transactionsHref}
         icon={<Activity className="h-5 w-5" />}
       />
+      {canManageFinance && (
+        <>
+          <StatisticCard
+            title={t('inventory-finance-reconciliation.pending_metric')}
+            value={t('inventory-finance-reconciliation.pending_metric_value', {
+              amount: new Intl.NumberFormat(
+                currency === 'VND' ? 'vi-VN' : 'en-US',
+                { currency, style: 'currency' }
+              ).format(pending?.amount ?? 0),
+              count: pending?.count ?? 0,
+            })}
+            href={reconciliationHref}
+            icon={<CircleAlert className="h-5 w-5" />}
+          />
+          <StatisticCard
+            title={t('inventory-finance-reconciliation.gross_provider_sales')}
+            value={currencyAmount(metrics.inventoryReconciliation.grossSales)}
+            href={reconciliationHref}
+            icon={<ArrowUpRight className="h-5 w-5" />}
+            currency={currency}
+          />
+          <StatisticCard
+            title={t('inventory-finance-reconciliation.refunds_chargebacks')}
+            value={
+              currencyAmount(metrics.inventoryReconciliation.refunds) +
+              currencyAmount(metrics.inventoryReconciliation.chargebackHolds)
+            }
+            href={reconciliationHref}
+            icon={<ArrowDownRight className="h-5 w-5" />}
+            currency={currency}
+          />
+          <StatisticCard
+            title={t('inventory-finance-reconciliation.net_provider_sales')}
+            value={currencyAmount(metrics.inventoryReconciliation.netSales)}
+            href={reconciliationHref}
+            icon={<ArrowRightLeft className="h-5 w-5" />}
+            currency={currency}
+          />
+        </>
+      )}
     </>
   );
 }

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

@@ -0,0 +1,122 @@
+'use client';
+
+import type {
+  InventoryFinanceEntry,
+  InventoryFinanceProvider,
+} from '@tuturuuu/internal-api';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
+import { getCurrencyLocale } from '@tuturuuu/utils/currencies';
+import { minorToMajor } from '@tuturuuu/utils/money';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+
+export function formatInventoryReconciliationAmount(
+  amount: number,
+  currency: string
+) {
+  return new Intl.NumberFormat(getCurrencyLocale(currency), {
+    currency,
+    maximumFractionDigits: currency === 'VND' ? 0 : 2,
+    style: 'currency',
+  }).format(amount);
+}
+
+export function inventoryProviderTranslationKey(
+  provider: InventoryFinanceProvider
+) {
+  if (provider === 'cash') return 'provider_cash' as const;
+  if (provider === 'polar') return 'provider_polar' as const;
+  if (provider === 'square_pos') return 'provider_square_pos' as const;
+  return 'provider_square_terminal' as const;
+}
+
+export function InventoryReconciliationEntryRow({
+  checked,
+  entry,
+  onCheckedChange,
+}: {
+  checked: boolean;
+  entry: InventoryFinanceEntry;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  const t = useTranslations('inventory-finance-reconciliation');
+  return (
+    <div className="grid gap-3 border-b p-4 last:border-b-0 md:grid-cols-[auto_1.2fr_1fr_1fr_auto] md:items-center">
+      <Checkbox
+        checked={checked}
+        onCheckedChange={(value) => onCheckedChange(value === true)}
+        aria-label={t('select_entry')}
+      />
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge variant="outline">
+            {t(inventoryProviderTranslationKey(entry.provider))}
+          </Badge>
+          <Badge variant="secondary">{t(`kind_${entry.kind}`)}</Badge>
+          {entry.synchronizationError && (
+            <Badge variant="destructive">{t('mapping_error')}</Badge>
+          )}
+        </div>
+        <p className="mt-1 truncate font-medium text-sm">
+          {entry.customer?.name ||
+            entry.customer?.email ||
+            t('unknown_customer')}
+        </p>
+        {entry.allocations.length > 0 ? (
+          <details className="mt-2 text-xs">
+            <summary className="cursor-pointer text-muted-foreground">
+              {t('allocation_breakdown')}
+            </summary>
+            <div className="mt-2 grid gap-1">
+              {entry.allocations.map((allocation) => (
+                <div
+                  className="flex items-center justify-between gap-3"
+                  key={allocation.lineId}
+                >
+                  <span className="min-w-0 truncate">
+                    {allocation.quantity}× {allocation.title}
+                  </span>
+                  <span className="shrink-0 font-medium tabular-nums">
+                    {formatInventoryReconciliationAmount(
+                      minorToMajor(
+                        allocation.recognizedRevenueAmount,
+                        entry.currency
+                      ),
+                      entry.currency
+                    )}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </details>
+        ) : null}
+      </div>
+      <div className="min-w-0 text-sm">
+        <p className="truncate font-mono text-xs">
+          {entry.providerReferenceId}
+        </p>
+        <p className="text-muted-foreground text-xs">
+          {new Intl.DateTimeFormat(undefined, {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+          }).format(new Date(entry.occurredAt))}
+        </p>
+      </div>
+      <div className="text-sm">
+        <p className="font-semibold">
+          {formatInventoryReconciliationAmount(entry.amount, entry.currency)}
+        </p>
+        <p className="text-muted-foreground text-xs">
+          {entry.wallet?.name ?? t('needs_wallet')}
+        </p>
+      </div>
+      <div className="flex justify-end">
+        <Button asChild size="sm" variant="ghost">
+          <Link href={entry.source.inventoryHref}>{t('inventory_sale')}</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}