base con autenticacion, registro, modulo encuestas

apps/web/feactures/statistics/components/survey-overview.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/shadcn/card';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
+import { SurveyStatisticsData } from '../schemas/statistics';
+
+interface SurveyOverviewProps {
+  data: SurveyStatisticsData | undefined;
+}
+
+export function SurveyOverview({ data }: SurveyOverviewProps) {
+  if (!data) return null;
+
+  const { totalSurveys, totalResponses, completionRate, surveysByMonth } = data;
+
+  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Total de Encuestas</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{totalSurveys}</div>
+          <p className="text-xs text-muted-foreground">
+            Encuestas creadas en la plataforma
+          </p>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Total de Respuestas</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{totalResponses}</div>
+          <p className="text-xs text-muted-foreground">
+            Respuestas recibidas en todas las encuestas
+          </p>
+        </CardContent>
+      </Card>
+      <Card>
+        {/* <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Tasa de Completado</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{totalSurveys/totalResponses}</div>
+          <p className="text-xs text-muted-foreground">
+            Porcentaje de encuestas completadas
+          </p>
+        </CardContent> */}
+      </Card>
+      
+      <Card className="col-span-full">
+        <CardHeader>
+          <CardTitle>Encuestas por Mes</CardTitle>
+          <CardDescription>Distribución de encuestas creadas por mes</CardDescription>
+        </CardHeader>
+        <CardContent className="h-80">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={surveysByMonth}
+              margin={{
+                top: 5,
+                right: 30,
+                left: 20,
+                bottom: 5,
+              }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis dataKey="month" />
+              <YAxis />
+              <Tooltip wrapperStyle={{color: '#000', fontWeight: 'bold' }}/>
+              <Legend />
+              <Bar dataKey="count" fill="#8884d8" name="Encuestas" />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}