import { Head, Link } from '@inertiajs/react'; import { Plus, Wallet } from 'lucide-react'; import { useMemo } from 'react'; import { AppPage, AppPageActions, AppPageHeader, AppPageTitleBlock, appCardAccentClass, } from '@/components/app-page'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { MyInvestmentsTable } from '@/pages/investments/components/my-investments-table'; import type { UserPortfolioInvestment } from '@/pages/investments/types-user-portfolio'; import { formatCurrency } from '@/pages/investments/utils'; import { dashboard } from '@/routes'; type Props = { investments: UserPortfolioInvestment[]; balance_total: string; invested_active_total: string; withdrawable_total: string; invested_pending_total: string; invested_any: boolean; }; export default function MyInvestmentsPage({ investments, balance_total, invested_active_total, withdrawable_total, invested_pending_total, invested_any, }: Props) { const formattedBalanceTotal = useMemo( () => formatCurrency(Number(balance_total)), [balance_total], ); const formattedActive = useMemo( () => formatCurrency(Number(invested_active_total)), [invested_active_total], ); const formattedWithdrawable = useMemo( () => formatCurrency(Number(withdrawable_total)), [withdrawable_total], ); const formattedPending = useMemo( () => formatCurrency(Number(invested_pending_total)), [invested_pending_total], ); return ( <>

Resumen rápido

Balance total

${formattedBalanceTotal}

Inversiones: ${formattedActive} | disponible para retiro: $ {formattedWithdrawable}

Listado detallado

{!invested_any || investments.length === 0 ? (

Aún no tienes inversiones registradas.

) : ( )} ); } function PortfolioMetric({ label, value, highlight, }: { label: string; value: string; highlight?: 'warning'; }) { const valueClass = highlight === 'warning' ? 'text-primary' : 'text-foreground'; return (

{label}

{value}

); } MyInvestmentsPage.layout = { breadcrumbs: [ { title: 'Inicio', href: dashboard() }, { title: 'Mis inversiones', href: '/mis-inversiones' }, ], };