base con autenticacion, registro, modulo encuestas

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

@@ -0,0 +1,78 @@
+'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 SurveyResponsesProps {
+  data: SurveyStatisticsData | undefined;
+}
+
+export function SurveyResponses({ data }: SurveyResponsesProps) {
+  if (!data) return null;
+
+  const { responsesByAudience, responseDistribution } = data;
+  
+  const COLORS = ['#0088FE', '#8884d8', '#00C49F', '#FFBB28', '#FF8042'];
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2">
+      <Card className="col-span-1">
+        <CardHeader>
+          <CardTitle>Respuestas por Audiencia</CardTitle>
+          <CardDescription>Distribución de respuestas según el tipo de audiencia</CardDescription>
+        </CardHeader>
+        <CardContent className="h-80">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={responsesByAudience}
+                cx="50%"
+                cy="50%"
+                labelLine={true}
+                label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+                outerRadius={80}
+                fill="#8884d8"
+                dataKey="value"
+              >
+                {responsesByAudience.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                ))}
+              </Pie>
+              <Tooltip formatter={(value, name) => [`${value} respuestas`, name]} />
+              <Legend />
+            </PieChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <Card className="col-span-1">
+        <CardHeader>
+          <CardTitle>Distribución de Respuestas</CardTitle>
+          <CardDescription>Cantidad de respuestas por encuesta</CardDescription>
+        </CardHeader>
+        <CardContent className="h-80">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={responseDistribution}
+              layout="vertical"
+              margin={{
+                top: 5,
+                right: 30,
+                left: 20,
+                bottom: 5,
+              }}
+            >
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis type="number" />
+              <YAxis dataKey="title" type="category" width={150} tick={{ fontSize: 12 }} />
+              <Tooltip wrapperStyle={{color: '#000', fontWeight: 'bold' }}/>
+              <Legend />
+              <Bar dataKey="responses" fill="#8884d8" name="Respuestas" />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}