Merge pull request #27 from acm-uic/18-insurances-page

Insurances Page

frontend/src/components/DisplayInsurances.tsx

@@ -1,27 +1,95 @@
-'use client'
-import { useEffect } from "react";
-
+'use client';
+import { useState, useEffect } from 'react';
+import styles from "../styles/Insurances.module.css"; // Ensure this path is correct
+import Link from "next/link";
 
 const DisplayInsurances = () => {
+  // Define Insurance interface
+  interface Insurance {
+    _id: string;
+    name: string;
+    description: string;
+    monthlyPremium: number;
+    coverageDetails: string;
+    eligibility: string;
+    createdAt: string;
+    updatedAt: string;
+    __v: number;
+  }
+
+  // Define InsuranceData interface
+  interface InsuranceData {
+    insuranceData: Insurance[];
+  }
+
+  const [insuranceData, setInsuranceData] = useState<InsuranceData>({ insuranceData: [] });
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Function to fetch insurance plans
+  const fetchInsurancePlans = async () => {
+    try {
+      const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/insurance-plan`); // Adjust the API endpoint as necessary
+
+      if (!res.ok) {
+        throw new Error("Network response was not okay");
+      }
+
+      const data = await res.json();
+      setInsuranceData({ insuranceData: data });
+    } catch (err) {
+      console.error("Error fetching insurance plans:", err);
+
+      if (err instanceof Error) {
+        setError(err);
+      } else {
+        setError(new Error("An unknown error has occurred"));
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // useEffect to fetch insurance plans on component mount
+  useEffect(() => {
+    fetchInsurancePlans();
+  }, []);
+
+  // Map insurance plans to JSX elements
+  const renderedInsurances = insuranceData.insuranceData.map((insurance) => (
+    <div className={styles.item} key={insurance._id}>
+      <h2 className={styles.name}>{insurance.name}</h2>
+      {/* <p>{insurance.description}</p>
+      <p>Monthly Premium: ${insurance.monthlyPremium}</p>
+      <p>Coverage Details: {insurance.coverageDetails}</p> */}
+      <p>Eligibility: {insurance.eligibility}</p>
+      <button className={styles.details}>
+        <Link href={`/insurances/${insurance._id}`}>View Details</Link>
+      </button>
+    </div>
+  ));
 
-    useEffect(() => {
-        const fetchInsurances = async () => {
-            try {
-                const response = await fetch('http://localhost:4000/insurance-plan');
-                const data = await response.json();
-                console.log(data);
-            } catch (error) {
-                console.error('Error:', error);
-            }
-        }
-        fetchInsurances();
-    }, []);
-
-    return (
-        <div>
-            <h1>Insurances</h1>
+  return (
+    <div className={styles.container}>
+      <div className={styles.title_container}>
+        <h1>Medical Insurances</h1>
+        <hr />
+        <h2>
+          We provide to you the best choices for you. Adjust to your health needs and make sure you undergo treatment with our highly qualified doctors. You can consult with us to find out which type of service is suitable for your health.
+        </h2>
+      </div>
+
+      {/* Error and loading states */}
+      {error && <p>Error: {error.message}</p>}
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <div className={styles.container_grid}>
+          {renderedInsurances.length > 0 ? renderedInsurances : <p>No insurance plans available.</p>}
         </div>
-    );
-}
+      )}
+    </div>
+  );
+};
 
 export default DisplayInsurances;

frontend/src/pages/insurances/[id].tsx

@@ -0,0 +1,10 @@
+import { useRouter } from "next/router";
+
+export default function Insurance() {
+    const router = useRouter()
+    const { id } = router.query
+
+    return (
+        <p>Page ID: {id}</p>
+    )
+}

frontend/src/styles/Insurances.module.css

@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+
+.container {
+  padding: 0 4em;
+  font-family: "Poppins", sans-serif;
+  color: #243248;
+  margin-bottom: 4em;
+}
+
+.container h1 {
+  font-size: 2.2rem;
+  line-height: 1.2;
+}
+
+.container_grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: auto;
+  gap: 35px 25px;
+  background: #fafcfe;
+  margin: 4em;
+  padding: 1.5em;
+  border-radius: 1.5em;
+}
+
+/* Adjust the grid for smaller screens */
+@media (max-width: 1024px) {
+  .container {
+    padding: 0 3em;
+  }
+
+  .container_grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 0 2em;
+  }
+
+  .container h1 {
+    font-size: 1.8rem;
+  }
+
+  .container_grid {
+    grid-template-columns: 1fr;
+    row-gap: 25px;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 0 1.5em;
+  }
+
+  .container h1 {
+    font-size: 1.6rem;
+  }
+
+  .title_container h2 {
+    font-size: 1rem;
+  }
+
+  .details {
+    font-size: 0.75rem;
+    padding: 0.6em 0.9em;
+    margin-top: 1em;
+  }
+}
+
+/* Card Styles */
+.item {
+  background-color: white;
+  padding: 1.5em;
+  border-radius: 1.2em;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+.item:hover {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.cost {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.name {
+  font-size: 1.4rem;
+  font-weight: 500;
+  margin: 0.8em 0;
+}
+
+.details {
+  background-color: #3b82f6;
+  color: white;
+  font-size: 0.9rem;
+  padding: 0.8em 1.2em;
+  border-radius: 1.5em;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+  margin: 1em 0;
+}
+
+.details:hover {
+  background-color: #2563eb;
+}
+
+.title_container h1 {
+  text-align: center;
+  font-weight: 500;
+  letter-spacing: 1px;
+  margin-bottom: 0.5em;
+}
+
+.title_container h2 {
+  text-align: center;
+  margin-top: 1em;
+  color: #a9a9a9;
+  font-weight: 300;
+  font-size: 1.1rem;
+}
+
+.title_container hr {
+  margin: 2em auto;
+  border: none;
+  height: 2px;
+  background-color: #333;
+  width: 50%;
+}