import AppLayout from '@/layouts/app-layout'; import { Head, router } from '@inertiajs/react'; import Table from '@/components/Table'; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { format } from 'date-fns'; import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from 'recharts'; import { useState } from 'react'; import { EyeIcon } from 'lucide-react'; import { Button } from '@/components/ui/button'; interface SurveyQuestionOptionStats { id: number; option: string; answers_count: number; } interface SurveyQuestionStats { id: number; question: string; type: string; options: SurveyQuestionOptionStats[]; } interface UserSurveyAnswer { id: number; question_id: number; option_id: number | null; text_answer: string | null; created_at: string; question?: { question: string; }; option?: { option: string; }; } interface Respondent { id: number; name: string; email: string; survey_answers: UserSurveyAnswer[]; } interface PaginatedRespondents { data: Respondent[]; current_page: number; per_page: number; total: number; } interface Props { survey: any; stats: SurveyQuestionStats[]; users: PaginatedRespondents; } const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#ffc658']; const columns = [ { label: 'User Name', key: 'name', sortable: true }, { label: 'Email', key: 'email', sortable: true }, { label: 'Last Submitted Answer At', key: 'last_submitted' }, { label: 'Actions', key: 'actions' }, ]; export default function Show({ survey, stats, users }: Props) { const queryParams = new URLSearchParams(window.location.search); const search = queryParams.get('search') || ''; const surveyAnswerId = survey?.id; const [selectedUser, setSelectedUser] = useState(null); // Build the question paper view: group user answers by question, show all options const buildQuestionPaper = () => { if (!selectedUser) return []; const selectedByQuestion: Record> = {}; const textAnswerByQuestion: Record = {}; selectedUser.survey_answers?.forEach((ans) => { if (!selectedByQuestion[ans.question_id]) { selectedByQuestion[ans.question_id] = new Set(); } if (ans.option_id !== null) { selectedByQuestion[ans.question_id].add(ans.option_id); } if (ans.text_answer !== undefined) { textAnswerByQuestion[ans.question_id] = ans.text_answer; } }); // Map stats (all questions + all options) and mark which are selected return stats.map((question) => ({ id: question.id, question: question.question, type: question.type, options: question.options.map((opt) => ({ id: opt.id, option: opt.option, isSelected: selectedByQuestion[question.id]?.has(opt.id) ?? false, })), textAnswer: textAnswerByQuestion[question.id] ?? null, hasAnswer: !!selectedByQuestion[question.id] || textAnswerByQuestion[question.id] !== undefined, })); }; return (

{/* Statistics / Pie Charts Section */}

{stats.filter(stat => stat.type !== 'text').map((stat, idx) => { const pieData = stat.options.map((opt) => ({ name: opt.option, value: opt.answers_count, })); const hasData = pieData.some((d) => d.value > 0); return ( {stat.question} Responses overview {hasData ? ( {pieData.map((entry, index) => ( ))} ) : (

No answers submitted yet.

)} ); })}

{/* Respondents Table Section */}

Respondents Data for {survey.title}

data={users.data} total={users.total} currentPage={users.current_page} rowsPerPage={users.per_page} columns={columns} searchableKeys={['name', 'email']} renderCell={(key, value, row) => { if (key === 'last_submitted') { // get newest answer if (row.survey_answers && row.survey_answers.length > 0) { const newest = [...row.survey_answers].sort((a,b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())[0]; return format(new Date(newest.created_at), 'PPP p'); } return 'N/A'; } if (key === 'actions') { return ( ); } return value; }} onPageChange={(page) => { const params = Object.fromEntries(new URLSearchParams(window.location.search).entries()); router.get(window.location.pathname, { ...params, page, }, { preserveState: true, replace: true }); }} onPerPageChange={(perPage) => { const params = Object.fromEntries(new URLSearchParams(window.location.search).entries()); router.get(window.location.pathname, { ...params, page: 1, per_page: perPage, }, { preserveState: true, replace: true }); }} onSearchChange={(searchVal) => { const params = Object.fromEntries(new URLSearchParams(window.location.search).entries()); if (searchVal) { params.search = searchVal; } else { delete params.search; } router.get(window.location.pathname, { ...params, page: 1, }, { preserveState: true, replace: true }); }} searchValue={search} />

{/* Modal for Question Paper View */} ); }