Adding the initial poll detail pages

client/src/pages/PollDetail.js

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import {
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+} from 'recharts';
+
+const COLORS = ['#0088FE', '#FEB43C'];
+
+export default function PollDetail({ question }) {
+  const [poll, setPoll] = useState(null);
+
+  useEffect(() => {
+    fetchPoll();
+  }, [question]);
+
+  const fetchPoll = async () => {
+    try {
+      const response = await axios.post('/api/admin/view-votes', { question });
+      setPoll(response.data[0]);
+    } catch (error) {
+      console.error('Error fetching poll:', error);
+    }
+  };
+
+  if (!poll) return <div>Loading...</div>;
+
+  const memberData = [
+    { name: 'Yes', value: poll.member_yes },
+    { name: 'No', value: poll.member_no },
+  ];
+
+  const nonMemberData = [
+    { name: 'Yes', value: poll.non_member_yes },
+    { name: 'No', value: poll.non_member_no },
+  ];
+
+  return (
+    <div>
+      <h1>{poll.question}</h1>
+      <p>Created At: {new Date(poll.created_at).toLocaleString()}</p>
+
+      <div style={{ width: '40%', margin: '20px' }}>
+        <PieChart width={400} height={300}>
+          <Pie
+            data={memberData}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+          >
+            {memberData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+
+      <div style={{ width: '40%', margin: '20px' }}>
+        <PieChart width={400} height={300}>
+          <Pie
+            data={nonMemberData}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+          >
+            {nonMemberData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+
+      <p>Member Yes Votes: {poll.member_yes}</p>
+      <p>Member No Votes: {poll.member_no}</p>
+      <p>Non-Member Yes Votes: {poll.non_member_yes}</p>
+      <p>Non-Member No Votes: {poll.non_member_no}</p>
+    </div>
+  );
+}

client/src/pages/PollDetails.js

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react";
+import axios from 'axios';
+import {
+  PieChart,
+  Pie,
+  Tooltip,
+  Legend,
+  Cell,
+} from 'recharts';
+
+const COLORS = ['#0088FE', '#FEB43C'];
+
+export default function PollDetails() {
+  const [poll, setPoll] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  // Get poll ID from URL parameters
+  const match = window.location.pathname.match(/\/poll-details\/(\d+)/);
+  const pollId = match ? parseInt(match[1], 10) : null;
+
+  useEffect(() => {
+    if (pollId) {
+      fetchPollDetails(pollId);
+    }
+  }, [pollId]);
+
+  const fetchPollDetails = async (id) => {
+    try {
+      setLoading(true);
+      const response = await axios.post(`/api/poll/${id}`);
+      setPoll(response.data);
+    } catch (error) {
+      console.error('Error fetching poll details:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading || !poll) return <div>Loading...</div>;
+
+  // Define data for pie charts
+  const memberData = [
+    { name: 'Yes', value: poll.member_yes },
+    { name: 'No', value: poll.member_no }
+  ];
+
+  const nonMemberData = [
+    { name: 'Yes', value: poll.non_member_yes },
+    { name: 'No', value: poll.non_member_no }
+  ];
+
+  return (
+    <div className="poll-details">
+      <h1>{poll.question}</h1>
+      <p>Created At: {new Date(poll.created_at).toLocaleString()}</p>
+
+      <div style={{ width: '40%', margin: '20px' }}>
+        <PieChart width={400} height={300}>
+          <Pie
+            data={memberData}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+          >
+            {memberData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+
+      <div style={{ width: '40%', margin: '20px' }}>
+        <PieChart width={400} height={300}>
+          <Pie
+            data={nonMemberData}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+          >
+            {nonMemberData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip />
+          <Legend />
+        </PieChart>
+      </div>
+
+      <p>Member Yes Votes: {poll.member_yes}</p>
+      <p>Member No Votes: {poll.member_no}</p>
+      <p>Non-Member Yes Votes: {poll.non_member_yes}</p>
+      <p>Non-Member No Votes: {poll.non_member_no}</p>
+    </div>
+  );
+}