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>
+  );
+}