base con autenticacion, registro, modulo encuestas

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

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/shadcn/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@repo/shadcn/select';
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { SurveyStatisticsData } from '../schemas/statistics';
+
+interface SurveyDetailsProps {
+  data: SurveyStatisticsData | undefined;
+}
+
+export function SurveyDetails({ data }: SurveyDetailsProps) {
+  const [selectedSurvey, setSelectedSurvey] = useState<string>('');
+
+  if (!data || !data.surveyDetails || data.surveyDetails.length === 0) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-center text-muted-foreground">No hay datos detallados disponibles</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Set default selected survey if none is selected
+  if (!selectedSurvey && data.surveyDetails.length > 0) {
+    setSelectedSurvey(data.surveyDetails?.[0]?.id.toString() ?? '');
+  }
+
+  const currentSurvey = data.surveyDetails.find(
+    (survey) => survey.id.toString() === selectedSurvey
+  );
+
+  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d', '#ffc658'];
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Detalles por Encuesta</CardTitle>
+          <CardDescription>Análisis detallado de respuestas por encuesta</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Select value={selectedSurvey} onValueChange={setSelectedSurvey}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Selecciona una encuesta" />
+            </SelectTrigger>
+            <SelectContent>
+              {data.surveyDetails.map((survey) => (
+                <SelectItem key={survey.id} value={survey.id.toString()}>
+                  {survey.title}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </CardContent>
+      </Card>
+
+      {currentSurvey && (
+        <>
+          <div className="grid gap-4 md:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle>{currentSurvey.title}</CardTitle>
+                <CardDescription>{currentSurvey.description}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <div className="flex justify-between">
+                    <span className="font-medium">Total de respuestas:</span>
+                    <span>{currentSurvey.totalResponses}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-medium">Audiencia objetivo:</span>
+                    <span>{currentSurvey.targetAudience}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-medium">Fecha de creación:</span>
+                    <span>{new Date(currentSurvey.createdAt).toLocaleDateString()}</span>
+                  </div>
+                  {currentSurvey.closingDate && (
+                    <div className="flex justify-between">
+                      <span className="font-medium">Fecha de cierre:</span>
+                      <span>{new Date(currentSurvey.closingDate).toLocaleDateString()}</span>
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {currentSurvey.questionStats && currentSurvey.questionStats.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Distribución de Respuestas</CardTitle>
+                </CardHeader>
+                <CardContent className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={currentSurvey.questionStats}
+                        cx="50%"
+                        cy="50%"
+                        labelLine={true}
+                        label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+                        outerRadius={80}
+                        fill="#8884d8"
+                        dataKey="count"
+                        nameKey="label"
+                      >
+                        {currentSurvey.questionStats.map((entry, index) => (
+                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                        ))}
+                      </Pie>
+                      <Tooltip formatter={(value, name) => [`${value}`, name]} />
+                      {/* <Legend /> */}
+                    </PieChart>
+                  </ResponsiveContainer>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}