@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/finance/wallets/walletId/interest/wallet-interest-section.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { TrendingUp } from '@tuturuuu/icons';
+import {
+  getWalletInterestSummary,
+  type WalletInterestSummaryResponse,
+} from '@tuturuuu/internal-api/finance';
+import type {
+  InterestSummary,
+  ProviderDetectionResult,
+  Wallet,
+} from '@tuturuuu/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import { useInterestPreferences } from '@tuturuuu/ui/hooks/use-interest-preferences';
+import { useWorkspaceConfig } from '@tuturuuu/ui/hooks/use-workspace-config';
+import { Separator } from '@tuturuuu/ui/separator';
+import { Skeleton } from '@tuturuuu/ui/skeleton';
+import { useTranslations } from 'next-intl';
+import { useCallback, useState } from 'react';
+import { WalletInterestChart } from './wallet-interest-chart';
+import { WalletInterestDetectionBanner } from './wallet-interest-detection-banner';
+import { WalletInterestHero } from './wallet-interest-hero';
+import { WalletInterestPendingDeposits } from './wallet-interest-pending-deposits';
+import { WalletInterestRateHistory } from './wallet-interest-rate-history';
+import { WalletInterestSettings } from './wallet-interest-settings';
+import { WalletInterestTransparency } from './wallet-interest-transparency';
+
+interface WalletInterestSectionProps {
+  wsId: string;
+  wallet: Wallet;
+}
+
+/**
+ * Main component that integrates all wallet interest features.
+ * Redesigned with hero card, interactive chart, and transparent calculation details.
+ */
+export function WalletInterestSection({
+  wsId,
+  wallet,
+}: WalletInterestSectionProps) {
+  const t = useTranslations('wallet-interest');
+  const [showSetup, setShowSetup] = useState(false);
+  const walletId = wallet.id ?? '';
+
+  // User preferences for display
+  const { preferences, updatePreference } = useInterestPreferences(walletId);
+
+  const { data: experimentalConfig } = useWorkspaceConfig(
+    wsId,
+    'ENABLE_EXPERIMENTAL_FINANCE',
+    'false'
+  );
+  const experimentalEnabled = experimentalConfig === 'true';
+
+  // Expanded state (starts based on user preference)
+  const [showDetails, setShowDetails] = useState(preferences.expandByDefault);
+
+  // Fetch interest data
+  const {
+    data: interestData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<WalletInterestSummaryResponse>({
+    queryKey: ['wallet-interest', wsId, walletId],
+    queryFn: () => getWalletInterestSummary(wsId, walletId),
+    enabled: Boolean(walletId),
+    staleTime: 30000, // 30 seconds
+  });
+
+  const handleEnableClick = useCallback(
+    (_detection: ProviderDetectionResult) => {
+      setShowSetup(true);
+    },
+    []
+  );
+
+  const handleConfigChange = useCallback(() => {
+    refetch();
+    setShowSetup(false);
+  }, [refetch]);
+
+  const handleToggleDetails = useCallback(() => {
+    setShowDetails((prev) => !prev);
+  }, []);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <>
+        <Card>
+          <CardHeader className="pb-2">
+            <Skeleton className="h-6 w-48" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <Skeleton className="h-24" />
+            <div className="grid gap-4 md:grid-cols-3">
+              {[...Array(3)].map((_, i) => (
+                <Skeleton key={i} className="h-16" />
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+        <Separator className="my-4" />
+      </>
+    );
+  }
+
+  // Error state - silently fail since interest is optional
+  if (error) {
+    return null;
+  }
+
+  if (!walletId) return null;
+
+  const hasConfig =
+    interestData && 'config' in interestData && interestData.config != null;
+  const isEnabled =
+    hasConfig && (interestData as InterestSummary).config?.enabled;
+
+  // If no config and not setting up, show detection banner
+  if (!hasConfig && !showSetup) {
+    if (!experimentalEnabled) return null;
+
+    return (
+      <WalletInterestDetectionBanner
+        wallet={wallet}
+        hasInterestConfig={false}
+        onEnableClick={handleEnableClick}
+      />
+    );
+  }
+
+  // If setting up (from banner click), show settings
+  if (showSetup && !hasConfig) {
+    return (
+      <>
+        <WalletInterestSettings
+          wsId={wsId}
+          walletId={walletId}
+          config={null}
+          currentRate={null}
+          onConfigChange={handleConfigChange}
+        />
+        <Separator className="my-4" />
+      </>
+    );
+  }
+
+  // Cast to InterestSummary now that we know it has config
+  const summary = interestData as InterestSummary;
+
+  // If config exists but disabled, show compact view with settings
+  if (hasConfig && !isEnabled) {
+    return (
+      <>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <TrendingUp className="h-5 w-5" />
+              {t('interest_tracking')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="mb-4 text-muted-foreground text-sm">
+              {t('tracking_paused')}
+            </p>
+            <div className="grid gap-4 md:grid-cols-2">
+              <WalletInterestSettings
+                wsId={wsId}
+                walletId={walletId}
+                config={summary.config}
+                currentRate={summary.currentRate}
+                onConfigChange={handleConfigChange}
+                embedded
+              />
+              <WalletInterestRateHistory
+                rates={summary.rateHistory || []}
+                embedded
+              />
+            </div>
+          </CardContent>
+        </Card>
+        <Separator className="my-4" />
+      </>
+    );
+  }
+
+  // Full interest UI for enabled configs
+  const hasProjections =
+    summary.projections &&
+    (summary.projections.week?.length > 0 ||
+      summary.projections.month?.length > 0);
+
+  const currency = wallet.currency ?? 'VND';
+
+  return (
+    <>
+      <div className="space-y-4">
+        {/* Always visible hero card */}
+        <WalletInterestHero
+          summary={summary}
+          currency={currency}
+          expanded={showDetails}
+          onToggle={handleToggleDetails}
+        />
+
+        {/* Expandable details section */}
+        {showDetails && (
+          <div className="space-y-4">
+            {/* Interactive chart */}
+            {hasProjections && preferences.showChart && (
+              <WalletInterestChart
+                projections={summary.projections}
+                currency={currency}
+                currentBalance={wallet.balance ?? 0}
+                defaultPeriod={preferences.chartPeriod}
+                showProjections={preferences.showProjections}
+                onPeriodChange={(period) =>
+                  updatePreference('chartPeriod', period)
+                }
+                onShowProjectionsChange={(show) =>
+                  updatePreference('showProjections', show)
+                }
+              />
+            )}
+
+            {/* Pending deposits */}
+            {summary.pendingDeposits.length > 0 && (
+              <WalletInterestPendingDeposits
+                deposits={summary.pendingDeposits}
+                currency={currency}
+              />
+            )}
+
+            {/* Transparency and Settings Grid */}
+            <div className="grid gap-4 md:grid-cols-2">
+              <WalletInterestTransparency
+                rate={summary.currentRate?.annual_rate ?? 0}
+                rateHistory={summary.rateHistory || []}
+                provider={summary.config.provider}
+                currency={currency}
+              />
+              <WalletInterestSettings
+                wsId={wsId}
+                walletId={walletId}
+                config={summary.config}
+                currentRate={summary.currentRate}
+                onConfigChange={handleConfigChange}
+                embedded
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      <Separator className="my-4" />
+    </>
+  );
+}

package/src/components/ui/finance/wallets/walletId/interest/wallet-interest-settings.tsx

@@ -0,0 +1,427 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { CalendarIcon, Settings, TrendingUp } from '@tuturuuu/icons';
+import {
+  createWalletInterestConfig,
+  createWalletInterestRate,
+  deleteWalletInterestConfig,
+  updateWalletInterestConfig,
+} from '@tuturuuu/internal-api/finance';
+import type {
+  ProviderDetectionResult,
+  WalletInterestConfig,
+  WalletInterestProvider,
+  WalletInterestRate,
+  ZaloPayTier,
+} from '@tuturuuu/types';
+import { Button } from '@tuturuuu/ui/button';
+import { Calendar } from '@tuturuuu/ui/calendar';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@tuturuuu/ui/card';
+import { Label } from '@tuturuuu/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Switch } from '@tuturuuu/ui/switch';
+import { cn } from '@tuturuuu/utils/format';
+import { format, parseISO } from 'date-fns';
+import { enUS, vi } from 'date-fns/locale';
+import { useLocale, useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { WalletInterestDisableDialog } from './wallet-interest-disable-dialog';
+import { WalletInterestRateDialog } from './wallet-interest-rate-dialog';
+import { WalletInterestSetupDialog } from './wallet-interest-setup-dialog';
+
+interface WalletInterestSettingsProps {
+  wsId: string;
+  walletId: string;
+  config: WalletInterestConfig | null;
+  currentRate: WalletInterestRate | null;
+  detection?: ProviderDetectionResult | null;
+  onConfigChange?: () => void;
+  /** When true, renders without card wrapper (for embedding in parent card) */
+  embedded?: boolean;
+}
+
+/**
+ * Settings component for enabling/configuring interest tracking.
+ * Uses extracted dialog components for cleaner architecture.
+ */
+export function WalletInterestSettings({
+  wsId,
+  walletId,
+  config,
+  currentRate,
+  detection,
+  onConfigChange,
+  embedded = false,
+}: WalletInterestSettingsProps) {
+  const locale = useLocale();
+  const t = useTranslations('wallet-interest');
+  const queryClient = useQueryClient();
+  const dateLocale = locale.startsWith('vi') ? vi : enUS;
+
+  // Dialog states
+  const [isSetupOpen, setIsSetupOpen] = useState(false);
+  const [isRateDialogOpen, setIsRateDialogOpen] = useState(false);
+  const [isDisableDialogOpen, setIsDisableDialogOpen] = useState(false);
+
+  // Create config mutation
+  const createMutation = useMutation({
+    mutationFn: (data: {
+      provider: WalletInterestProvider;
+      rate: number;
+      tier: ZaloPayTier | null;
+      trackingStartDate: string | null;
+    }) =>
+      createWalletInterestConfig(wsId, walletId, {
+        provider: data.provider,
+        zalopay_tier: data.tier,
+        initial_rate: data.rate,
+        tracking_start_date: data.trackingStartDate,
+      }),
+    onSuccess: () => {
+      toast.success(t('tracking_enabled'));
+      queryClient.invalidateQueries({
+        queryKey: ['wallet-interest', wsId, walletId],
+      });
+      setIsSetupOpen(false);
+      onConfigChange?.();
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+
+  // Update config mutation (tier, enabled, dates)
+  const updateMutation = useMutation({
+    mutationFn: (data: {
+      zalopay_tier?: ZaloPayTier | null;
+      enabled?: boolean;
+      tracking_start_date?: string | null;
+      tracking_end_date?: string | null;
+    }) => updateWalletInterestConfig(wsId, walletId, data),
+    onSuccess: () => {
+      toast.success(t('settings_updated'));
+      queryClient.invalidateQueries({
+        queryKey: ['wallet-interest', wsId, walletId],
+      });
+      onConfigChange?.();
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+
+  // Add rate mutation
+  const addRateMutation = useMutation({
+    mutationFn: (rate: number) =>
+      createWalletInterestRate(wsId, walletId, { annual_rate: rate }),
+    onSuccess: () => {
+      toast.success(t('rate_updated'));
+      queryClient.invalidateQueries({
+        queryKey: ['wallet-interest', wsId, walletId],
+      });
+      setIsRateDialogOpen(false);
+      onConfigChange?.();
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+
+  // Delete config mutation
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteWalletInterestConfig(wsId, walletId),
+    onSuccess: () => {
+      toast.success(t('tracking_disabled'));
+      queryClient.invalidateQueries({
+        queryKey: ['wallet-interest', wsId, walletId],
+      });
+      setIsDisableDialogOpen(false);
+      onConfigChange?.();
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+
+  // If no config, show setup button
+  if (!config) {
+    return (
+      <>
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <TrendingUp className="h-5 w-5" />
+              {t('interest_tracking')}
+            </CardTitle>
+            <CardDescription>
+              {t('interest_tracking_description')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button onClick={() => setIsSetupOpen(true)}>
+              {t('enable_tracking')}
+            </Button>
+          </CardContent>
+        </Card>
+
+        <WalletInterestSetupDialog
+          open={isSetupOpen}
+          onOpenChange={setIsSetupOpen}
+          onSetup={(data) => createMutation.mutate(data)}
+          isPending={createMutation.isPending}
+          defaultProvider={detection?.provider || 'momo'}
+          defaultTier={detection?.suggestedTier || 'standard'}
+        />
+      </>
+    );
+  }
+
+  // Show settings for existing config
+  const providerName = config.provider === 'momo' ? 'Momo' : 'ZaloPay';
+
+  // Parse tracking dates
+  const trackingStartDate = config.tracking_start_date
+    ? parseISO(config.tracking_start_date)
+    : undefined;
+  const trackingEndDate = config.tracking_end_date
+    ? parseISO(config.tracking_end_date)
+    : undefined;
+
+  const handleStartDateChange = (date: Date | undefined) => {
+    updateMutation.mutate({
+      tracking_start_date: date ? format(date, 'yyyy-MM-dd') : null,
+    });
+  };
+
+  const handleEndDateChange = (date: Date | undefined) => {
+    updateMutation.mutate({
+      tracking_end_date: date ? format(date, 'yyyy-MM-dd') : null,
+    });
+  };
+
+  const settingsBody = (
+    <>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <Label className="text-muted-foreground text-xs">
+            {t('provider')}
+          </Label>
+          <p className="font-medium">{providerName}</p>
+        </div>
+        {config.provider === 'zalopay' && config.zalopay_tier && (
+          <div>
+            <Label className="text-muted-foreground text-xs">{t('tier')}</Label>
+            <Select
+              value={config.zalopay_tier}
+              onValueChange={(v) =>
+                updateMutation.mutate({ zalopay_tier: v as ZaloPayTier })
+              }
+              disabled={updateMutation.isPending}
+            >
+              <SelectTrigger className="h-8">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="standard">Standard</SelectItem>
+                <SelectItem value="gold">Gold</SelectItem>
+                <SelectItem value="diamond">Diamond</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        <div>
+          <Label className="text-muted-foreground text-xs">
+            {t('current_rate')}
+          </Label>
+          <div className="flex items-center gap-2">
+            <p className="font-medium">{currentRate?.annual_rate ?? 0}%</p>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 text-xs"
+              onClick={() => setIsRateDialogOpen(true)}
+            >
+              {t('change')}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Tracking Date Range */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-1">
+          <Label className="text-muted-foreground text-xs">
+            {t('tracking_start_date')}
+          </Label>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn(
+                  'h-8 w-full justify-start text-left font-normal',
+                  !trackingStartDate && 'text-muted-foreground'
+                )}
+                disabled={updateMutation.isPending}
+              >
+                <CalendarIcon className="mr-2 h-3 w-3" />
+                {trackingStartDate ? (
+                  format(trackingStartDate, 'PP', { locale: dateLocale })
+                ) : (
+                  <span className="text-xs">{t('set_start_date')}</span>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={trackingStartDate}
+                onSelect={handleStartDateChange}
+                locale={dateLocale}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="space-y-1">
+          <Label className="text-muted-foreground text-xs">
+            {t('tracking_end_date')}
+          </Label>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className={cn(
+                  'h-8 w-full justify-start text-left font-normal',
+                  !trackingEndDate && 'text-muted-foreground'
+                )}
+                disabled={updateMutation.isPending}
+              >
+                <CalendarIcon className="mr-2 h-3 w-3" />
+                {trackingEndDate ? (
+                  format(trackingEndDate, 'PP', { locale: dateLocale })
+                ) : (
+                  <span className="text-xs">{t('no_end_date')}</span>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <div className="space-y-2 p-2">
+                <Calendar
+                  mode="single"
+                  selected={trackingEndDate}
+                  onSelect={handleEndDateChange}
+                  locale={dateLocale}
+                  initialFocus
+                />
+                {trackingEndDate && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="w-full"
+                    onClick={() => handleEndDateChange(undefined)}
+                  >
+                    {t('clear_date')}
+                  </Button>
+                )}
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+
+      <Button
+        variant="destructive"
+        size="sm"
+        onClick={() => setIsDisableDialogOpen(true)}
+      >
+        {t('disable_tracking')}
+      </Button>
+    </>
+  );
+
+  return (
+    <>
+      {embedded ? (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 font-semibold">
+              <Settings className="h-4 w-4" />
+              {t('interest_settings')}
+            </div>
+            <div className="flex items-center gap-2">
+              <Label htmlFor="interest-enabled" className="text-sm">
+                {t('enabled')}
+              </Label>
+              <Switch
+                id="interest-enabled"
+                checked={config.enabled}
+                onCheckedChange={(enabled) =>
+                  updateMutation.mutate({ enabled })
+                }
+                disabled={updateMutation.isPending}
+              />
+            </div>
+          </div>
+          {settingsBody}
+        </div>
+      ) : (
+        <Card>
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Settings className="h-5 w-5" />
+                {t('interest_settings')}
+              </CardTitle>
+              <div className="flex items-center gap-2">
+                <Label htmlFor="interest-enabled" className="text-sm">
+                  {t('enabled')}
+                </Label>
+                <Switch
+                  id="interest-enabled"
+                  checked={config.enabled}
+                  onCheckedChange={(enabled) =>
+                    updateMutation.mutate({ enabled })
+                  }
+                  disabled={updateMutation.isPending}
+                />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">{settingsBody}</CardContent>
+        </Card>
+      )}
+
+      <WalletInterestRateDialog
+        open={isRateDialogOpen}
+        onOpenChange={setIsRateDialogOpen}
+        onUpdateRate={(rate) => addRateMutation.mutate(rate)}
+        isPending={addRateMutation.isPending}
+        currentRate={currentRate?.annual_rate}
+      />
+
+      <WalletInterestDisableDialog
+        open={isDisableDialogOpen}
+        onOpenChange={setIsDisableDialogOpen}
+        onConfirm={() => deleteMutation.mutate()}
+        isPending={deleteMutation.isPending}
+      />
+    </>
+  );
+}