diff --git a/dashboard/src/components/dashboard/TypeformDashboard.jsx b/dashboard/src/components/dashboard/TypeformDashboard.jsx
new file mode 100644
index 0000000..c2a07a4
--- /dev/null
+++ b/dashboard/src/components/dashboard/TypeformDashboard.jsx
@@ -0,0 +1,839 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Skeleton } from "@/components/ui/skeleton";
+import { AlertCircle, Activity, Eye, MessageSquare, ThumbsUp, Clock, Users, Star, ArrowUp, ArrowDown, BarChart3 } from "lucide-react";
+import { format } from "date-fns";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ Cell,
+ PieChart,
+ Pie,
+ Legend,
+ ReferenceLine
+} from "recharts";
+
+// Get form IDs from environment variables
+const FORM_IDS = {
+ FORM_1: import.meta.env.VITE_TYPEFORM_FORM_ID_1,
+ FORM_2: import.meta.env.VITE_TYPEFORM_FORM_ID_2,
+};
+
+const FORM_NAMES = {
+ [FORM_IDS.FORM_1]: 'Product Relevance',
+ [FORM_IDS.FORM_2]: 'Winback Survey',
+};
+
+const METRIC_COLORS = {
+ total: "#8b5cf6",
+ completed: "#10b981",
+ today: "#f59e0b",
+};
+
+// Loading skeleton components
+const SkeletonChart = () => (
+
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+ {[...Array(5)].map((_, i) => (
+
+ ))}
+
+
+ {[...Array(3)].map((_, i) => (
+
+ ))}
+
+
+
+);
+
+const SkeletonTable = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {[...Array(5)].map((_, i) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+);
+
+const SkeletonMetricCard = () => (
+
+
+
+
+
+);
+
+const CustomTooltip = ({ active, payload }) => {
+ if (active && payload && payload.length) {
+ return (
+
+
+ {payload.map((entry, index) => (
+
+ {entry.name}:
+ {entry.value.toLocaleString()}
+
+ ))}
+
+
+ );
+ }
+ return null;
+};
+
+const ResponseDialog = ({ response }) => (
+
+);
+
+const getResponseSummary = (response) => {
+ if (!response.answers?.length) return 'No answers';
+
+ const firstAnswer = response.answers[0];
+ switch (firstAnswer.type) {
+ case 'boolean':
+ return firstAnswer.boolean ? 'Yes' : 'No';
+ case 'number':
+ return `Rating: ${firstAnswer.number}/5`;
+ case 'choices':
+ return firstAnswer.choices?.labels?.[0] || 'Multiple choice answer';
+ case 'text':
+ return firstAnswer.text ? (firstAnswer.text.slice(0, 50) + (firstAnswer.text.length > 50 ? '...' : '')) : 'Text answer';
+ default:
+ return `${firstAnswer.type} answer`;
+ }
+};
+
+const renderResponsesTable = (responses) => {
+ if (!responses?.items?.length) {
+ return (
+
+
+
+
No responses yet
+
+ Responses will appear here when they come in
+
+
+
+ );
+ }
+
+ return (
+
+
+ Form Responses
+
+ Latest form submissions and their status
+
+
+
+
+
+
+
+ Submitted At
+ Respondent
+ Response Summary
+ Platform
+ Actions
+
+
+
+ {responses.items.map((response) => (
+
+
+ {format(new Date(response.submitted_at), "MMM d, yyyy HH:mm")}
+
+
+
+ {response.hidden?.name || 'Anonymous'}
+ {response.hidden?.email || 'No email'}
+
+
+
+
+ {getResponseSummary(response)}
+
+
+
+
+ {response.metadata.platform}
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+const calculateProductRelevanceInsights = (responses) => {
+ if (!responses?.items?.length) return null;
+
+ const yesResponses = responses.items.filter(r =>
+ r.answers?.some(a => a.type === 'boolean' && a.boolean === true)
+ ).length;
+
+ const noResponses = responses.items.filter(r =>
+ r.answers?.some(a => a.type === 'boolean' && a.boolean === false)
+ ).length;
+
+ const total = yesResponses + noResponses;
+ const yesPercentage = Math.round((yesResponses / total) * 100) || 0;
+
+ return {
+ metrics: [
+ { name: 'Yes', value: yesResponses, color: "#10b981" },
+ { name: 'No', value: noResponses, color: "#ef4444" },
+ ],
+ summary: {
+ yes_percentage: yesPercentage,
+ total_responses: total
+ }
+ };
+};
+
+const calculateWinbackInsights = (responses) => {
+ if (!responses?.items?.length) return null;
+
+ // Get likelihood ratings
+ const likelihoodAnswers = responses.items
+ .map(r => r.answers?.find(a => a.type === 'number'))
+ .filter(Boolean)
+ .map(a => a.number);
+
+ const averageLikelihood = likelihoodAnswers.length
+ ? Math.round((likelihoodAnswers.reduce((a, b) => a + b, 0) / likelihoodAnswers.length) * 10) / 10
+ : 0;
+
+ // Get reasons for not ordering
+ const reasonsMap = new Map();
+ responses.items.forEach(response => {
+ const reasonsAnswer = response.answers?.find(a => a.type === 'choices');
+ if (reasonsAnswer?.choices?.labels) {
+ reasonsAnswer.choices.labels.forEach(label => {
+ reasonsMap.set(label, (reasonsMap.get(label) || 0) + 1);
+ });
+ }
+ });
+
+ const sortedReasons = Array.from(reasonsMap.entries())
+ .sort(([, a], [, b]) => b - a)
+ .map(([label, count]) => ({
+ name: label,
+ value: count,
+ color: "#8b5cf6"
+ }));
+
+ return {
+ likelihood: {
+ ratings: [...Array(5)].map((_, i) => ({
+ name: (i + 1).toString(),
+ value: likelihoodAnswers.filter(r => r === i + 1).length,
+ color: "#8b5cf6"
+ })),
+ average: averageLikelihood
+ },
+ reasons: sortedReasons
+ };
+};
+
+const ResponseFeed = ({ responses, title, renderSummary }) => (
+
+
+ {title}
+
+
+
+
+ {responses.items.map((response) => (
+
+
+
+
+ {response.hidden?.name || 'Anonymous'}
+
+
+ {format(new Date(response.submitted_at), "MMM d, yyyy HH:mm")}
+
+
+ {renderSummary(response)}
+
+
+
+ ))}
+
+);
+
+const ProductRelevanceFeed = ({ responses }) => (
+
{
+ const answer = response.answers?.find(a => a.type === 'boolean');
+ return (
+
+
+ {answer?.boolean ? "Yes" : "No"}
+
+ {response.answers?.find(a => a.type === 'text')?.text && (
+
+ "{response.answers.find(a => a.type === 'text').text}"
+
+ )}
+
+ );
+ }}
+ />
+);
+
+const WinbackFeed = ({ responses }) => (
+ {
+ const likelihoodAnswer = response.answers?.find(a => a.type === 'number');
+ const reasonsAnswer = response.answers?.find(a => a.type === 'choices');
+ const feedbackAnswer = response.answers?.find(a => a.type === 'text');
+
+ return (
+
+
+ = 4 ? "success" : "warning"}>
+ Rating: {likelihoodAnswer?.number}/5
+
+
+ {reasonsAnswer?.choices?.labels && (
+
+ Reasons:{" "}
+ {reasonsAnswer.choices.labels.join(", ")}
+
+ )}
+ {feedbackAnswer?.text && (
+
+ Feedback:{" "}
+ "{feedbackAnswer.text}"
+
+ )}
+
+
+
+
+
+ {
+ if (payload && payload.length) {
+ const yesCount = payload[0].payload.yes;
+ const noCount = payload[0].payload.no;
+ const total = yesCount + noCount;
+ const yesPercent = Math.round((yesCount / total) * 100);
+ const noPercent = Math.round((noCount / total) * 100);
+ return (
+
+
+
Yes: {yesCount} ({yesPercent}%)
+
No: {noCount} ({noPercent}%)
+
+
+
+
+
+
+
+
+ {
+ if (payload && payload.length) {
+ const { rating, count } = payload[0].payload;
+ return (
+
+
+ Rating {rating}: {count} responses
+
+
= 3 ? "#10b981" : index === 2 ? "#f59e0b" : "#ef4444"}
+ />
+ ))}
+ |
+
+
+
+
+
+ {loading ? (
+ <>
+
+
+
+
+
+
+ ) : (
+ <>
+
{title}
+
+
+ {typeof value === "number"
+ ? value.toLocaleString() + suffix
+ : value}
+
+ {delta !== undefined && delta !== 0 && (
+
+ {delta > 0 ? (
+
+ ) : (
+
+ )}
+
+ {formatDelta(delta)}
+
+
+ )}
+
+
+ )}
+
+ {!loading && Icon && (
+
+ )}
+ {loading && (
+
+ )}
+
+ {loading ? (
+
+
+
+
+ ) : (
+ <>
+
+ {renderProductRelevanceBar(metrics)}
+ {renderLikelihoodChart(metrics, formData.form2.responses)}
+
+
+
+
+ Reasons for Not Ordering
+
+
+
+
+
+ Reason
+ Count
+ %
+
+
+
+ {metrics.winback.reasons.map((reason, index) => (
+
+ {reason.reason}
+ {reason.count}
+ {reason.percentage}%
+
+ ))}
+
+
+
+
+
+
+
+ )}
+