@imansi/templates 0.1.0

package/src/dashboard/BillingPage.jsx

@@ -0,0 +1,345 @@
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Separator,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  cn,
+} from '@imansi/ui';
+import { DashboardLayout } from '../layouts/DashboardLayout.jsx';
+
+export function BillingPage({
+  brandName,
+  brandLogo,
+  navSections,
+  user,
+  userMenuItems,
+  notificationsCount,
+  onLogout,
+
+  title = 'Facturación',
+  subtitle = 'Administrá tu plan, método de pago y facturas.',
+
+  currentPlan,
+  // { name, price, period, features, renewsOn }
+
+  availablePlans = [],
+  // [{ name, price, period, description, features, popular }]
+
+  paymentMethod,
+  // { brand, last4, expires, holder }
+
+  invoices = [],
+  // [{ id, date, amount, status: 'paid'|'pending'|'failed' }]
+
+  statusMap = {
+    paid: { label: 'Pagada', variant: 'success' },
+    pending: { label: 'Pendiente', variant: 'warning' },
+    failed: { label: 'Fallida', variant: 'destructive' },
+  },
+
+  onUpgrade,
+  onCancelPlan,
+  onUpdatePayment,
+  onDownloadInvoice,
+}) {
+  return (
+    <DashboardLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navSections={navSections}
+      user={user}
+      userMenuItems={userMenuItems}
+      notificationsCount={notificationsCount}
+      onLogout={onLogout}
+      title={title}
+    >
+      <div className="space-y-6 max-w-6xl mx-auto">
+        {/* Header */}
+        <div className="space-y-1">
+          <h1 className="text-h2 font-bold tracking-tight">{title}</h1>
+          <p className="text-small text-muted-foreground">{subtitle}</p>
+        </div>
+
+        {/* Plan actual + método de pago */}
+        <div className="grid gap-6 lg:grid-cols-3">
+          {/* Plan actual */}
+          {currentPlan && (
+            <Card className="lg:col-span-2">
+              <CardHeader>
+                <div className="flex items-start justify-between gap-4">
+                  <div className="space-y-1">
+                    <CardTitle className="text-h4">
+                      Plan {currentPlan.name}
+                    </CardTitle>
+                    <CardDescription>
+                      Se renueva el {currentPlan.renewsOn}
+                    </CardDescription>
+                  </div>
+                  <Badge variant="success">Activo</Badge>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-5">
+                <div className="flex items-baseline gap-1">
+                  <span className="text-display font-bold tracking-tight">
+                    {currentPlan.price}
+                  </span>
+                  {currentPlan.period && (
+                    <span className="text-small text-muted-foreground">
+                      /{currentPlan.period}
+                    </span>
+                  )}
+                </div>
+
+                {currentPlan.features?.length > 0 && (
+                  <ul className="grid gap-2 sm:grid-cols-2">
+                    {currentPlan.features.map((f, i) => (
+                      <li
+                        key={i}
+                        className="flex items-start gap-2 text-small text-muted-foreground"
+                      >
+                        <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-success/10 text-success">
+                          <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="2,6 5,9 10,3" />
+                          </svg>
+                        </span>
+                        {f}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+
+                <Separator />
+
+                <div className="flex flex-wrap gap-2">
+                  {onUpgrade && <Button onClick={onUpgrade}>Cambiar plan</Button>}
+                  {onCancelPlan && (
+                    <Button variant="ghost" onClick={onCancelPlan}>
+                      Cancelar suscripción
+                    </Button>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Método de pago */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-h4">Método de pago</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-5">
+              {paymentMethod ? (
+                <>
+                  <div className="rounded-lg border border-border bg-muted/30 p-4 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-small font-semibold uppercase tracking-wider text-muted-foreground">
+                        {paymentMethod.brand}
+                      </span>
+                      <svg
+                        width="32"
+                        height="20"
+                        viewBox="0 0 32 20"
+                        fill="none"
+                        className="text-muted-foreground"
+                      >
+                        <rect
+                          x="0.5"
+                          y="0.5"
+                          width="31"
+                          height="19"
+                          rx="2.5"
+                          stroke="currentColor"
+                        />
+                        <line
+                          x1="0"
+                          y1="7"
+                          x2="32"
+                          y2="7"
+                          stroke="currentColor"
+                        />
+                      </svg>
+                    </div>
+                    <div className="space-y-0.5">
+                      <p className="text-small font-mono tracking-wider">
+                        •••• •••• •••• {paymentMethod.last4}
+                      </p>
+                      <p className="text-caption text-muted-foreground">
+                        Expira {paymentMethod.expires}
+                      </p>
+                    </div>
+                    {paymentMethod.holder && (
+                      <p className="text-caption text-muted-foreground pt-1 border-t border-border">
+                        {paymentMethod.holder}
+                      </p>
+                    )}
+                  </div>
+                  <Button
+                    variant="outline"
+                    fullWidth
+                    onClick={onUpdatePayment}
+                  >
+                    Actualizar tarjeta
+                  </Button>
+                </>
+              ) : (
+                <div className="text-center py-4 space-y-3">
+                  <p className="text-small text-muted-foreground">
+                    No hay método de pago configurado.
+                  </p>
+                  <Button fullWidth onClick={onUpdatePayment}>
+                    Agregar tarjeta
+                  </Button>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Planes disponibles */}
+        {availablePlans.length > 0 && (
+          <div className="space-y-4">
+            <h3 className="text-h4 font-semibold">Planes disponibles</h3>
+            <div
+              className={cn(
+                'grid gap-5',
+                availablePlans.length === 2 && 'md:grid-cols-2',
+                availablePlans.length === 3 && 'md:grid-cols-3',
+                availablePlans.length >= 4 && 'md:grid-cols-2 lg:grid-cols-4'
+              )}
+            >
+              {availablePlans.map((plan, i) => (
+                <div
+                  key={i}
+                  className={cn(
+                    'rounded-xl border bg-card p-6 space-y-5 flex flex-col',
+                    plan.popular && 'border-primary ring-1 ring-primary'
+                  )}
+                >
+                  {plan.popular && (
+                    <Badge variant="primary" className="self-start">
+                      Recomendado
+                    </Badge>
+                  )}
+                  <div className="space-y-1">
+                    <h4 className="text-h4 font-semibold">{plan.name}</h4>
+                    {plan.description && (
+                      <p className="text-caption text-muted-foreground">
+                        {plan.description}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex items-baseline gap-1">
+                    <span className="text-h1 font-bold tracking-tight">
+                      {plan.price}
+                    </span>
+                    {plan.period && (
+                      <span className="text-small text-muted-foreground">
+                        /{plan.period}
+                      </span>
+                    )}
+                  </div>
+                  {plan.features?.length > 0 && (
+                    <ul className="space-y-2 flex-1">
+                      {plan.features.map((f, j) => (
+                        <li
+                          key={j}
+                          className="flex items-start gap-2 text-small text-muted-foreground"
+                        >
+                          <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-success/10 text-success">
+                            <svg width="9" height="9" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                              <polyline points="2,6 5,9 10,3" />
+                            </svg>
+                          </span>
+                          {f}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  <Button
+                    variant={plan.popular ? 'primary' : 'outline'}
+                    fullWidth
+                    onClick={() => onUpgrade?.(plan)}
+                  >
+                    Elegir plan
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Historial de facturas */}
+        {invoices.length > 0 && (
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-h4">Historial de facturas</CardTitle>
+              <CardDescription>
+                Descargá tus facturas anteriores.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-0">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Factura</TableHead>
+                    <TableHead>Fecha</TableHead>
+                    <TableHead>Monto</TableHead>
+                    <TableHead>Estado</TableHead>
+                    <TableHead className="text-right">Acciones</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {invoices.map((invoice) => {
+                    const status = statusMap[invoice.status] || statusMap.pending;
+                    return (
+                      <TableRow key={invoice.id}>
+                        <TableCell className="font-mono text-small">
+                          {invoice.id}
+                        </TableCell>
+                        <TableCell className="text-muted-foreground">
+                          {invoice.date}
+                        </TableCell>
+                        <TableCell className="font-medium">
+                          {invoice.amount}
+                        </TableCell>
+                        <TableCell>
+                          <Badge variant={status.variant}>
+                            {status.label}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => onDownloadInvoice?.(invoice)}
+                          >
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                              <polyline points="7 10 12 15 17 10" />
+                              <line x1="12" y1="15" x2="12" y2="3" />
+                            </svg>
+                              Descargar
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </DashboardLayout>
+  );
+}

package/src/dashboard/DashboardHome.jsx

@@ -0,0 +1,246 @@
+import { Link } from 'react-router-dom';
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Progress,
+  cn,
+} from '@imansi/ui';
+import { DashboardLayout } from '../layouts/DashboardLayout.jsx';
+
+export function DashboardHome({
+  brandName,
+  brandLogo,
+  navSections,
+  user,
+  userMenuItems,
+  notificationsCount,
+  onLogout,
+
+  title = 'Panel',
+  subtitle = 'Resumen general de tu actividad.',
+
+  // Stats
+  stats = [],
+  // [{ label, value, change, trend: 'up'|'down'|'flat', icon }]
+
+  // Gráficos
+  chartTitle = 'Ingresos de los últimos 7 días',
+  chartData = [],
+  // [{ label, value }] con value entre 0-100
+
+  // Actividad
+  activityTitle = 'Actividad reciente',
+  activityItems = [],
+  // [{ id, user: { name, avatar }, action, target, time }]
+
+  // Top items
+  topTitle = 'Top productos',
+  topItems = [],
+  // [{ id, name, value, progress }]
+
+  onViewAllActivity,
+  onViewAllTop,
+}) {
+  return (
+    <DashboardLayout
+      brandName={brandName}
+      brandLogo={brandLogo}
+      navSections={navSections}
+      user={user}
+      userMenuItems={userMenuItems}
+      notificationsCount={notificationsCount}
+      onLogout={onLogout}
+      title={title}
+    >
+      <div className="space-y-8 max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="space-y-1">
+            <h1 className="text-h2 font-bold tracking-tight">{title}</h1>
+            <p className="text-small text-muted-foreground">{subtitle}</p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="3" y="4" width="18" height="18" rx="2" />
+                <line x1="16" y1="2" x2="16" y2="6" />
+                <line x1="8" y1="2" x2="8" y2="6" />
+                <line x1="3" y1="10" x2="21" y2="10" />
+              </svg>
+              Últimos 7 días
+            </Button>
+            <Button size="sm">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+              Nuevo
+            </Button>
+          </div>
+        </div>
+
+        {/* Stats */}
+        {stats.length > 0 && (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {stats.map((stat, i) => (
+              <Card key={i}>
+                <CardContent className="p-5 space-y-3">
+                  <div className="flex items-start justify-between">
+                    <div className="space-y-1">
+                      <p className="text-caption uppercase tracking-wider font-semibold text-muted-foreground">
+                        {stat.label}
+                      </p>
+                      <p className="text-h2 font-bold tracking-tight">
+                        {stat.value}
+                      </p>
+                    </div>
+                    {stat.icon && (
+                      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary shrink-0">
+                        {stat.icon}
+                      </div>
+                    )}
+                  </div>
+                  {stat.change && (
+                    <div className="flex items-center gap-1.5 text-caption">
+                      <span
+                        className={cn(
+                          'inline-flex items-center gap-0.5 font-medium',
+                          stat.trend === 'up' && 'text-success',
+                          stat.trend === 'down' && 'text-destructive',
+                          (!stat.trend || stat.trend === 'flat') &&
+                            'text-muted-foreground'
+                        )}
+                      >
+                        {stat.trend === 'up' && '↑'}
+                        {stat.trend === 'down' && '↓'}
+                        {stat.trend === 'flat' && '→'}
+                        {stat.change}
+                      </span>
+                      <span className="text-muted-foreground">
+                        vs. período anterior
+                      </span>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {/* Chart + Activity */}
+        <div className="grid gap-6 lg:grid-cols-3">
+          {/* Chart */}
+          {chartData.length > 0 && (
+            <Card className="lg:col-span-2">
+              <CardHeader>
+                <CardTitle className="text-h4">{chartTitle}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {/* Barras simples */}
+                <div className="flex items-end justify-between gap-2 h-56">
+                  {chartData.map((item, i) => (
+                    <div
+                      key={i}
+                      className="flex-1 flex flex-col items-center gap-2 group"
+                    >
+                      <div className="w-full flex items-end justify-center h-full">
+                        <div
+                          className="w-full max-w-[40px] rounded-t-md bg-primary/80 transition-all group-hover:bg-primary"
+                          style={{ height: `${item.value}%` }}
+                          title={`${item.value}%`}
+                        />
+                      </div>
+                      <span className="text-caption text-muted-foreground">
+                        {item.label}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Activity */}
+          {activityItems.length > 0 && (
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0">
+                <CardTitle className="text-h4">{activityTitle}</CardTitle>
+                {onViewAllActivity && (
+                  <button
+                    onClick={onViewAllActivity}
+                    className="text-caption text-primary hover:underline"
+                  >
+                    Ver todo
+                  </button>
+                )}
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {activityItems.slice(0, 5).map((item) => (
+                  <div key={item.id} className="flex items-start gap-3">
+                    <Avatar size="sm">
+                      {item.user?.avatar ? (
+                        <img src={item.user.avatar} alt="" />
+                      ) : (
+                        <AvatarFallback>
+                          {item.user?.name?.charAt(0) || 'U'}
+                        </AvatarFallback>
+                      )}
+                    </Avatar>
+                    <div className="flex-1 min-w-0 space-y-0.5">
+                      <p className="text-small leading-snug">
+                        <span className="font-medium">
+                          {item.user?.name}
+                        </span>{' '}
+                        <span className="text-muted-foreground">
+                          {item.action}
+                        </span>{' '}
+                        <span className="font-medium">{item.target}</span>
+                      </p>
+                      <p className="text-caption text-muted-foreground">
+                        {item.time}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        {/* Top items */}
+        {topItems.length > 0 && (
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0">
+              <CardTitle className="text-h4">{topTitle}</CardTitle>
+              {onViewAllTop && (
+                <button
+                  onClick={onViewAllTop}
+                  className="text-caption text-primary hover:underline"
+                >
+                  Ver todo
+                </button>
+              )}
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {topItems.map((item) => (
+                <div key={item.id} className="space-y-2">
+                  <div className="flex items-center justify-between text-small">
+                    <span className="font-medium">{item.name}</span>
+                    <span className="text-muted-foreground">{item.value}</span>
+                  </div>
+                  <Progress value={item.progress} size="sm" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </DashboardLayout>
+  );
+}