@burdenoff/microfe-coolandlovely 2026.625.2 → 2026.628.1

package/dist/coolandlovely/pages/investor/InvestorPortfolioPage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InvestorPortfolioPage.js","names":[],"sources":["../../../../src/coolandlovely/pages/investor/InvestorPortfolioPage.tsx"],"sourcesContent":["/**\n * Investor Portfolio Page\n * @module coolandlovely/pages/investor\n *\n * Portfolio summary cards, 3-tab UI (overview/investments/transactions),\n * asset allocation bars, category filter, transactions list, withdrawal action,\n * and performance metrics per investment.\n */\n\nimport { useState, useCallback, useMemo } from'react';\nimport {\n  Wallet,\n  TrendingUp,\n  TrendingDown,\n  Briefcase,\n  IndianRupee,\n  Star,\n  Eye,\n  ArrowDownCircle,\n  BarChart3,\n  CreditCard,\n  LayoutList,\n} from'lucide-react';\nimport { EmphasisPanel, PagePurpose, NextSteps } from'@burdenoff/fe-libs/ui';\nimport { PageLayout } from'../../components/PageLayout';\nimport { MetricsCard } from'../../components/MetricsCard';\nimport { useCoolAndLovely } from'../../context/CoolAndLovelyContext';\nimport { cn } from'../../utils/cn';\nimport { formatCurrency, formatDate } from'../../utils/formatters';\n\n// ---------------------------------------------------------------------------\n// Types & mock data\n// ---------------------------------------------------------------------------\n\ninterface Investment {\n  id: string;\n  cartId: string;\n  cartName: string;\n  cartOwner: string;\n  investmentDate: string;\n  amount: number;\n  currentValue: number;\n  returns: number;\n  returnsPercentage: number;\n  ownership: number;\n  status: 'active' | 'matured' | 'exited';\n  monthlyRevenue: number;\n  monthlyDividend: number;\n  nextPayoutDate: string;\n  riskLevel: 'low' | 'medium' | 'high';\n  category: string;\n  location: string;\n  performanceMetrics: {\n    monthlyOrders: number;\n    averageRating: number;\n    growthRate: number;\n  };\n}\n\ninterface Transaction {\n  id: string;\n  type: 'investment' | 'dividend' | 'withdrawal';\n  cartName: string;\n  amount: number;\n  date: string;\n  status: 'completed' | 'pending' | 'failed';\n}\n\nconst mockInvestments: Investment[] = [\n  {\n    id: 'inv-001',\n    cartId: 'SERV-001',\n    cartName: 'Quick Cuts Salon',\n    cartOwner: 'Ravi Kumar',\n    investmentDate: '2023-06-15',\n    amount: 50000,\n    currentValue: 62500,\n    returns: 12500,\n    returnsPercentage: 25,\n    ownership: 15,\n    status: 'active',\n    monthlyRevenue: 185000,\n    monthlyDividend: 2775,\n    nextPayoutDate: '2024-07-01',\n    riskLevel: 'low',\n    category: 'Personal Care & Beauty',\n    location: 'Indiranagar, Bangalore',\n    performanceMetrics: { monthlyOrders: 1250, averageRating: 4.8, growthRate: 12 },\n  },\n  {\n    id: 'inv-002',\n    cartId: 'SERV-003',\n    cartName: 'Fix-It Mobile Repair',\n    cartOwner: 'Amit Sharma',\n    investmentDate: '2023-08-20',\n    amount: 30000,\n    currentValue: 35400,\n    returns: 5400,\n    returnsPercentage: 18,\n    ownership: 10,\n    status: 'active',\n    monthlyRevenue: 120000,\n    monthlyDividend: 1200,\n    nextPayoutDate: '2024-07-01',\n    riskLevel: 'medium',\n    category: 'Repair & Maintenance',\n    location: 'Jayanagar, Bangalore',\n    performanceMetrics: { monthlyOrders: 890, averageRating: 4.6, growthRate: 8 },\n  },\n  {\n    id: 'inv-003',\n    cartId: 'SERV-005',\n    cartName: 'Spotless Cleaning Services',\n    cartOwner: 'Priya Cleaning',\n    investmentDate: '2023-04-10',\n    amount: 40000,\n    currentValue: 52000,\n    returns: 12000,\n    returnsPercentage: 30,\n    ownership: 20,\n    status: 'active',\n    monthlyRevenue: 95000,\n    monthlyDividend: 1900,\n    nextPayoutDate: '2024-07-01',\n    riskLevel: 'low',\n    category: 'Home Services',\n    location: 'HSR Layout, Bangalore',\n    performanceMetrics: { monthlyOrders: 1450, averageRating: 4.7, growthRate: 15 },\n  },\n  {\n    id: 'inv-004',\n    cartId: 'FOOD-001',\n    cartName: 'Dosa Express',\n    cartOwner: 'Rajesh Kumar',\n    investmentDate: '2023-10-05',\n    amount: 25000,\n    currentValue: 27500,\n    returns: 2500,\n    returnsPercentage: 10,\n    ownership: 5,\n    status: 'active',\n    monthlyRevenue: 150000,\n    monthlyDividend: 750,\n    nextPayoutDate: '2024-07-01',\n    riskLevel: 'high',\n    category: 'Food & Beverage',\n    location: 'Koramangala, Bangalore',\n    performanceMetrics: { monthlyOrders: 780, averageRating: 4.5, growthRate: 5 },\n  },\n];\n\nconst mockTransactions: Transaction[] = [\n  {\n    id: 'txn-001',\n    type: 'investment',\n    cartName: 'Quick Cuts Salon',\n    amount: 50000,\n    date: '2023-06-15',\n    status: 'completed',\n  },\n  {\n    id: 'txn-002',\n    type: 'dividend',\n    cartName: 'Quick Cuts Salon',\n    amount: 2775,\n    date: '2024-06-01',\n    status: 'completed',\n  },\n  {\n    id: 'txn-003',\n    type: 'dividend',\n    cartName: 'Fix-It Mobile Repair',\n    amount: 1200,\n    date: '2024-06-01',\n    status: 'completed',\n  },\n  {\n    id: 'txn-004',\n    type: 'investment',\n    cartName: 'Spotless Cleaning Services',\n    amount: 40000,\n    date: '2023-04-10',\n    status: 'completed',\n  },\n  {\n    id: 'txn-005',\n    type: 'dividend',\n    cartName: 'Spotless Cleaning Services',\n    amount: 1900,\n    date: '2024-06-01',\n    status: 'pending',\n  },\n];\n\nconst categories = [\n  '',\n  'Personal Care & Beauty',\n  'Repair & Maintenance',\n  'Home Services',\n  'Food & Beverage',\n];\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getRiskBadge(risk: Investment['riskLevel']) {\n  const map = {\n    low: { color: 'bg-status-success-bg-subtle/20 text-status-success-text', label: 'Low Risk' },\n    medium: {\n      color: 'bg-status-warning-bg-subtle/20 text-status-warning-text',\n      label: 'Medium Risk',\n    },\n    high: { color: 'bg-status-error-bg-subtle/20 text-status-error-text', label: 'High Risk' },\n  };\n  const { color, label } = map[risk];\n  return <span className={cn('rounded-full px-2 py-0.5 text-xs font-medium', color)}>{label}</span>;\n}\n\nfunction fmtPct(value: number) {\n  return`${value > 0 ? '+' : ''}${value.toFixed(1)}%`;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport function InvestorPortfolioPage() {\n  const { navigateTo } = useCoolAndLovely();\n  const [activeTab, setActiveTab] = useState<'overview' | 'investments' | 'transactions'>(\n    'overview'\n  );\n  const [filterCategory, setFilterCategory] = useState('');\n\n  const filteredInvestments = useMemo(() => {\n    if (!filterCategory) return mockInvestments;\n    return mockInvestments.filter((inv) => inv.category === filterCategory);\n  }, [filterCategory]);\n\n  const totalInvested = filteredInvestments.reduce((s, i) => s + i.amount, 0);\n  const currentValue = filteredInvestments.reduce((s, i) => s + i.currentValue, 0);\n  const totalReturns = currentValue - totalInvested;\n  const returnsPercentage = totalInvested > 0 ? (totalReturns / totalInvested) * 100 : 0;\n  const monthlyDividend = filteredInvestments.reduce((s, i) => s + i.monthlyDividend, 0);\n  const activeCount = filteredInvestments.filter((i) => i.status === 'active').length;\n\n  const riskScores: Record<string, number> = { low: 1, medium: 2, high: 3 };\n  const avgRiskScore =\n    filteredInvestments.length > 0\n      ? filteredInvestments.reduce((s, i) => s + riskScores[i.riskLevel], 0) /\n        filteredInvestments.length\n      : 0;\n\n  const bestPerformer = filteredInvestments.reduce(\n    (best, inv) => (inv.returnsPercentage > best.returnsPercentage ? inv : best),\n    filteredInvestments[0] || { cartName: '', returnsPercentage: 0 }\n  );\n\n  const handleWithdraw = useCallback((investmentId: string) => {\n    alert(`Withdrawal request submitted for ${investmentId}`);\n  }, []);\n\n  // Asset allocation\n  const allocationMap = filteredInvestments.reduce<Record<string, number>>((acc, inv) => {\n    acc[inv.category] = (acc[inv.category] || 0) + inv.currentValue;\n    return acc;\n  }, {});\n\n  return (\n    <PageLayout title=\"My Portfolio\" description=\"Track your investment performance and holdings\">\n      <PagePurpose className=\"mb-6\" icon={<BarChart3 className=\"h-4 w-4\" />}>\n        The complete picture of your investments: how much you've put in, what it's\n        worth today, the returns and dividends you're earning, and a full\n        transaction history. Use the tabs to drill into individual holdings or\n        review every movement of money.\n      </PagePurpose>\n\n      <NextSteps\n        className=\"mb-6\"\n        storageKey=\"coolandlovely-investor-portfolio\"\n        steps={[\n          {\n            id: 'holdings',\n            label: 'Review your holdings',\n            description: 'Open the Investments tab to inspect each business you back.',\n            icon: <Briefcase className=\"h-4 w-4\" />,\n            onClick: () => setActiveTab('investments'),\n          },\n          {\n            id: 'transactions',\n            label: 'Check recent transactions',\n            description: 'See dividends, deposits and exits in your transaction log.',\n            icon: <LayoutList className=\"h-4 w-4\" />,\n            onClick: () => setActiveTab('transactions'),\n          },\n          {\n            id: 'grow',\n            label: 'Find new opportunities',\n            description: 'Put idle returns to work by backing another business.',\n            icon: <TrendingUp className=\"h-4 w-4\" />,\n            onClick: () => navigateTo('/investor/opportunities'),\n          },\n        ]}\n      />\n\n      {/* Summary Cards — primary emphasis zone */}\n      <EmphasisPanel className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 p-4\">\n        <MetricsCard\n          icon={<Wallet className=\"h-5 w-5\" />}\n          value={formatCurrency(totalInvested, { minimumFractionDigits: 0 })}\n          label=\"Total Invested\"\n          trend=\"up\"\n          trendValue={`${activeCount} active`}\n        />\n        <MetricsCard\n          icon={<IndianRupee className=\"h-5 w-5\" />}\n          value={formatCurrency(currentValue, { minimumFractionDigits: 0 })}\n          label=\"Current Value\"\n          trend={returnsPercentage > 0 ? 'up' : 'down'}\n          trendValue={fmtPct(returnsPercentage)}\n        />\n        <MetricsCard\n          icon={<TrendingUp className=\"h-5 w-5\" />}\n          value={formatCurrency(Math.abs(totalReturns), { minimumFractionDigits: 0 })}\n          label=\"Total Returns\"\n          trend={totalReturns >= 0 ? 'up' : 'down'}\n          trendValue={fmtPct(returnsPercentage)}\n        />\n        <MetricsCard\n          icon={<Briefcase className=\"h-5 w-5\" />}\n          value={formatCurrency(monthlyDividend, { minimumFractionDigits: 0 })}\n          label=\"Monthly Dividend\"\n          trend=\"up\"\n          trendValue=\"Next: July 1\"\n        />\n      </EmphasisPanel>\n\n      {/* Additional Stats */}\n      <div className=\"mt-4 grid grid-cols-2 gap-3 lg:grid-cols-4\">\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\">\n          <p className=\"text-xs text-text-secondary\">Active Investments</p>\n          <p className=\"text-xl font-bold text-text-primary\">{activeCount}</p>\n        </div>\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\">\n          <p className=\"text-xs text-text-secondary\">Avg Risk Score</p>\n          <div className=\"mt-1 flex items-center gap-2\">\n            <div className=\"h-2 flex-1 rounded-full bg-bg-sunken overflow-hidden\">\n              <div\n                className={cn(\n                  'h-full rounded-full',\n                  avgRiskScore <= 1.5\n                    ? 'bg-status-success-bg-subtle'\n                    : avgRiskScore <= 2.5\n                      ? 'bg-status-warning-bg-subtle'\n                      : 'bg-status-error-bg-subtle'\n                )}\n                style={{ width: `${(avgRiskScore / 3) * 100}%` }}\n              />\n            </div>\n            <span className=\"text-sm font-medium text-text-primary\">{avgRiskScore.toFixed(1)}/3</span>\n          </div>\n        </div>\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\">\n          <p className=\"text-xs text-text-secondary\">Best Performer</p>\n          <p className=\"truncate text-sm font-bold text-text-primary\">{bestPerformer.cartName}</p>\n          <p className=\"text-xs text-status-success-text\">\n            {fmtPct(bestPerformer.returnsPercentage)}\n          </p>\n        </div>\n        <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-3\">\n          <p className=\"text-xs text-text-secondary\">Next Payout</p>\n          <p className=\"text-lg font-bold text-text-primary\">July 1</p>\n          <p className=\"text-xs text-text-secondary\">In 7 days</p>\n        </div>\n      </div>\n\n      {/* Tabs */}\n      <div className=\"mt-6 rounded-lg border border-border-subtle bg-bg-surface shadow-sm\">\n        <div className=\"flex border-b border-border-subtle overflow-x-auto\">\n          {(\n            [\n              { key: 'overview', label: 'Overview', Icon: BarChart3 },\n              {\n                key: 'investments',\n                label: `Investments (${filteredInvestments.length})`,\n                Icon: Briefcase,\n              },\n              { key: 'transactions', label: 'Transactions', Icon: CreditCard },\n            ] as const\n          ).map(({ key, label, Icon }) => (\n            <button\n              key={key}\n              type=\"button\"\n              onClick={() => setActiveTab(key)}\n              className={cn(\n                'flex items-center gap-2 whitespace-nowrap px-4 py-3 text-sm font-medium transition-colors',\n                activeTab === key\n                  ? 'border-b-2 border-primary text-text-primary'\n                  : 'text-text-secondary hover:text-text-primary'\n              )}\n            >\n              <Icon className=\"h-4 w-4\" />\n              {label}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"p-4\">\n          {/* Overview Tab */}\n          {activeTab === 'overview' && (\n            <div className=\"space-y-6\">\n              {/* Performance placeholder */}\n              <div>\n                <h3 className=\"mb-4 text-base font-semibold text-text-primary\">\n                  Portfolio Performance\n                </h3>\n                <div className=\"rounded-lg border border-border-subtle bg-bg-sunken/50 p-8 text-center\">\n                  <BarChart3 className=\"mx-auto mb-2 h-8 w-8 text-text-secondary/50\" />\n                  <p className=\"text-sm text-text-secondary\">Performance chart visualization</p>\n                  <p className=\"mt-1 text-xs text-text-secondary\">\n                    Shows portfolio value over time\n                  </p>\n                </div>\n              </div>\n\n              {/* Asset Allocation */}\n              <div>\n                <h3 className=\"mb-4 text-base font-semibold text-text-primary\">Asset Allocation</h3>\n                <div className=\"space-y-3\">\n                  {Object.entries(allocationMap).map(([category, value]) => (\n                    <div key={category} className=\"flex items-center\">\n                      <span className=\"w-40 truncate text-sm text-text-primary\">{category}</span>\n                      <div className=\"mx-3 h-6 flex-1 rounded-full bg-bg-sunken overflow-hidden\">\n                        <div\n                          className=\"flex h-6 items-center justify-end rounded-full bg-action-primary-bg pr-2\"\n                          style={{\n                            width: `${currentValue > 0 ? (value / currentValue) * 100 : 0}%`,\n                          }}\n                        >\n                          <span className=\"text-xs font-medium text-action-primary-text\">\n                            {currentValue > 0 ? ((value / currentValue) * 100).toFixed(1) : 0}%\n                          </span>\n                        </div>\n                      </div>\n                      <span className=\"ml-2 text-sm font-medium text-text-primary\">\n                        {formatCurrency(value, { minimumFractionDigits: 0 })}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Investments Tab */}\n          {activeTab === 'investments' && (\n            <div>\n              {/* Category filter */}\n              <div className=\"mb-4\">\n                <select\n                  value={filterCategory}\n                  onChange={(e) => setFilterCategory(e.target.value)}\n                  className=\"rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                >\n                  <option value=\"\">All Categories</option>\n                  {categories.filter(Boolean).map((cat) => (\n                    <option key={cat} value={cat}>\n                      {cat}\n                    </option>\n                  ))}\n                </select>\n              </div>\n\n              {/* Investment list */}\n              <div className=\"space-y-4\">\n                {filteredInvestments.map((inv) => (\n                  <div\n                    key={inv.id}\n                    className=\"rounded-lg border border-border-subtle p-4 hover:bg-accent/50 transition-colors\"\n                  >\n                    <div className=\"mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n                      <div className=\"flex-1\">\n                        <h4 className=\"text-base font-semibold text-text-primary\">{inv.cartName}</h4>\n                        <p className=\"text-sm text-text-secondary\">\n                          Owned by {inv.cartOwner} &bull; {inv.location}\n                        </p>\n                        <div className=\"mt-2 flex flex-wrap items-center gap-2\">\n                          <span className=\"text-sm text-text-secondary\">{inv.category}</span>\n                          {getRiskBadge(inv.riskLevel)}\n                        </div>\n                      </div>\n                      <div className=\"text-left sm:text-right\">\n                        <p className=\"text-xl font-bold text-text-primary\">\n                          {formatCurrency(inv.currentValue, { minimumFractionDigits: 0 })}\n                        </p>\n                        <p\n                          className={cn(\n                            'text-sm',\n                            inv.returns > 0\n                              ? 'text-status-success-text'\n                              : 'text-status-error-text'\n                          )}\n                        >\n                          {formatCurrency(Math.abs(inv.returns), { minimumFractionDigits: 0 })} (\n                          {fmtPct(inv.returnsPercentage)})\n                        </p>\n                      </div>\n                    </div>\n\n                    <div className=\"mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4\">\n                      <div>\n                        <p className=\"text-xs text-text-secondary\">Invested</p>\n                        <p className=\"text-sm font-medium text-text-primary\">\n                          {formatCurrency(inv.amount, { minimumFractionDigits: 0 })}\n                        </p>\n                      </div>\n                      <div>\n                        <p className=\"text-xs text-text-secondary\">Ownership</p>\n                        <p className=\"text-sm font-medium text-text-primary\">{inv.ownership}%</p>\n                      </div>\n                      <div>\n                        <p className=\"text-xs text-text-secondary\">Monthly Dividend</p>\n                        <p className=\"text-sm font-medium text-text-primary\">\n                          {formatCurrency(inv.monthlyDividend, { minimumFractionDigits: 0 })}\n                        </p>\n                      </div>\n                      <div>\n                        <p className=\"text-xs text-text-secondary\">Investment Date</p>\n                        <p className=\"text-sm font-medium text-text-primary\">\n                          {formatDate(inv.investmentDate, { hour: undefined, minute: undefined })}\n                        </p>\n                      </div>\n                    </div>\n\n                    {/* Performance metrics */}\n                    <div className=\"border-t border-border-subtle pt-4\">\n                      <p className=\"mb-2 text-sm font-medium text-text-secondary\">\n                        Performance Metrics\n                      </p>\n                      <div className=\"grid grid-cols-3 gap-3 text-center\">\n                        <div>\n                          <p className=\"text-lg font-bold text-text-primary\">\n                            {inv.performanceMetrics.monthlyOrders}\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">Monthly Orders</p>\n                        </div>\n                        <div>\n                          <div className=\"flex items-center justify-center gap-1\">\n                            <Star className=\"h-4 w-4 fill-status-warning-text text-status-warning-text\" />\n                            <p className=\"text-lg font-bold text-text-primary\">\n                              {inv.performanceMetrics.averageRating}\n                            </p>\n                          </div>\n                          <p className=\"text-xs text-text-secondary\">Rating</p>\n                        </div>\n                        <div>\n                          <p className=\"text-lg font-bold text-status-success-text\">\n                            +{inv.performanceMetrics.growthRate}%\n                          </p>\n                          <p className=\"text-xs text-text-secondary\">Growth Rate</p>\n                        </div>\n                      </div>\n                    </div>\n\n                    {/* Actions */}\n                    <div className=\"mt-4 flex flex-wrap gap-2\">\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/investor/investments/${inv.id}`)}\n                        className=\"flex items-center gap-2 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n                      >\n                        <Eye className=\"h-4 w-4\" />\n                        View Details\n                      </button>\n                      {inv.status === 'active' && (\n                        <button\n                          type=\"button\"\n                          onClick={() => handleWithdraw(inv.id)}\n                          className=\"flex items-center gap-2 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors\"\n                        >\n                          <ArrowDownCircle className=\"h-4 w-4\" />\n                          Withdraw\n                        </button>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {/* Transactions Tab */}\n          {activeTab === 'transactions' && (\n            <div className=\"space-y-3\">\n              {mockTransactions.map((txn) => (\n                <div\n                  key={txn.id}\n                  className=\"flex flex-col gap-3 rounded-lg border border-border-subtle p-4 hover:bg-accent/50 transition-colors sm:flex-row sm:items-center sm:justify-between\"\n                >\n                  <div className=\"flex items-center gap-3\">\n                    <div\n                      className={cn(\n                        'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',\n                        txn.type === 'investment'\n                          ? 'bg-accent-blue-subtle/10'\n                          : txn.type === 'dividend'\n                            ? 'bg-status-success-bg-subtle/10'\n                            : 'bg-status-error-bg-subtle/10'\n                      )}\n                    >\n                      {txn.type === 'investment' ? (\n                        <Wallet className=\"h-5 w-5 text-accent-blue\" />\n                      ) : txn.type === 'dividend' ? (\n                        <TrendingUp className=\"h-5 w-5 text-status-success-text\" />\n                      ) : (\n                        <TrendingDown className=\"h-5 w-5 text-status-error-text\" />\n                      )}\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium text-text-primary\">\n                        {txn.type === 'investment'\n                          ? 'Investment in'\n                          : txn.type === 'dividend'\n                            ? 'Dividend from'\n                            : 'Withdrawal from'}{' '}\n                        {txn.cartName}\n                      </p>\n                      <p className=\"text-xs text-text-secondary\">\n                        {formatDate(txn.date, { hour: undefined, minute: undefined })}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center justify-between sm:gap-4\">\n                    <p\n                      className={cn(\n                        'text-sm font-bold',\n                        txn.type === 'dividend'\n                          ? 'text-status-success-text'\n                          : 'text-text-primary'\n                      )}\n                    >\n                      {txn.type === 'dividend' ? '+' : '-'}\n                      {formatCurrency(txn.amount, { minimumFractionDigits: 0 })}\n                    </p>\n                    <span\n                      className={cn(\n                        'rounded-full px-2.5 py-0.5 text-xs font-medium',\n                        txn.status === 'completed'\n                          ? 'bg-status-success-bg-subtle/20 text-status-success-text'\n                          : txn.status === 'pending'\n                            ? 'bg-status-warning-bg-subtle/20 text-status-warning-text'\n                            : 'bg-status-error-bg-subtle/20 text-status-error-text'\n                      )}\n                    >\n                      {txn.status}\n                    </span>\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}