Fix: Improve table layout functionality
This commit is contained in:
gpt-engineer-app[bot]
146
src/pages/dashboard/Personalization.tsx
Normal file
146
src/pages/dashboard/Personalization.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { useState } from 'react';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Target, Brain, TrendingUp, Users } from 'lucide-react';
|
||||
import UserPreferences from '@/components/personalization/UserPreferences';
|
||||
import AIRecommendations from '@/components/personalization/AIRecommendations';
|
||||
import BehaviorAnalytics from '@/components/personalization/BehaviorAnalytics';
|
||||
import SegmentManagement from '@/components/personalization/SegmentManagement';
|
||||
|
||||
const Personalization = () => {
|
||||
const [totalUsers] = useState(1250);
|
||||
const [activeSegments] = useState(8);
|
||||
const [recommendationAccuracy] = useState(87);
|
||||
const [engagement] = useState(72);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold flex items-center gap-2">
|
||||
<Target className="h-8 w-8 text-primary" />
|
||||
Personalización con IA
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Recomendaciones inteligentes y segmentación de usuarios
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Overview */}
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Usuarios Activos</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{totalUsers.toLocaleString()}</div>
|
||||
<p className="text-xs text-muted-foreground">perfiles analizados</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Segmentos</CardTitle>
|
||||
<Target className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{activeSegments}</div>
|
||||
<p className="text-xs text-muted-foreground">grupos activos</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Precisión IA</CardTitle>
|
||||
<Brain className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{recommendationAccuracy}%</div>
|
||||
<p className="text-xs text-muted-foreground">accuracy de recomendaciones</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Engagement</CardTitle>
|
||||
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{engagement}%</div>
|
||||
<p className="text-xs text-muted-foreground">tasa de interacción</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<Tabs defaultValue="recommendations" className="space-y-4">
|
||||
<TabsList className="grid w-full grid-cols-4">
|
||||
<TabsTrigger value="recommendations">Recomendaciones</TabsTrigger>
|
||||
<TabsTrigger value="preferences">Preferencias</TabsTrigger>
|
||||
<TabsTrigger value="analytics">Analytics</TabsTrigger>
|
||||
<TabsTrigger value="segments">Segmentos</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="recommendations" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recomendaciones con IA</CardTitle>
|
||||
<CardDescription>
|
||||
Sistema de recomendaciones personalizadas basado en comportamiento
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<AIRecommendations />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="preferences" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Preferencias de Usuario</CardTitle>
|
||||
<CardDescription>
|
||||
Gestiona las preferencias y configuraciones de personalización
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<UserPreferences />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="analytics" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Análisis de Comportamiento</CardTitle>
|
||||
<CardDescription>
|
||||
Insights sobre patrones de uso y preferencias de usuarios
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<BehaviorAnalytics />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="segments" className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Gestión de Segmentos</CardTitle>
|
||||
<CardDescription>
|
||||
Crea y gestiona segmentos de usuarios para campañas dirigidas
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<SegmentManagement />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Personalization;
|
||||
Reference in New Issue
Block a user