Merge branch 'feature/patient'

ad956 · Aug 15, 2024 · 30691f5 · 30691f5
2 parents f3d6f27 + 819e2ed
commit 30691f5
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 108 deletions.
diff --git a/app/(pages)/patient/components/AppointmentDetailsModal/index.tsx b/app/(pages)/patient/components/AppointmentDetailsModal/index.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+  Avatar,
+} from "@nextui-org/react";
+import { LuCalendarClock } from "react-icons/lu";
+import { getFormattedDate } from "@utils/getDate";
+
+const AppointmentDetailsModal = ({
+  isOpen,
+  onOpenChange,
+  appointmentDetail,
+}: any) => {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent>
+        <>
+          <ModalHeader className="flex flex-col gap-1 font-bold">
+            <p className="text-danger mx-2"> Appointment Details</p>
+          </ModalHeader>
+          <ModalBody className="flex flex-col items-start">
+            <div className="flex flex-row w-full p-2 justify-around items-center ">
+              <Avatar
+                src={appointmentDetail?.doctor.profile}
+                className="w-28 h-28 text-large"
+              />
+              <div className="flex flex-col justify-center items-start">
+                <div className="mb-2">
+                  <p className="font-bold text-xl">
+                    {appointmentDetail?.doctor.name}
+                  </p>
+                  <p className="font-bold text-black/80 text-sm">
+                    {appointmentDetail?.doctor.specialty}
+                  </p>
+                </div>
+
+                <div className="flex flex-row justify-center items-center gap-2">
+                  <LuCalendarClock size={25} className="text-warning" />
+                  <p className="font-bold text-black/80 text-md">
+                    {appointmentDetail &&
+                      getFormattedDate(new Date(appointmentDetail.createdAt))}
+                  </p>
+                </div>
+                <p className="font-bold text-black/70 text-sm">
+                  {appointmentDetail?.timing.startTime}
+                  <span className="px-5">-</span>
+                  {appointmentDetail?.timing.endTime}
+                </p>
+              </div>
+            </div>
+            <table className="border-collapse w-full ">
+              <tbody>
+                <tr className="border-b border-gray-200">
+                  <td className="font-bold pr-4 py-2">Disease</td>
+                  <td className="py-2">{appointmentDetail?.disease}</td>
+                </tr>
+                <tr className="border-b border-gray-200">
+                  <td className="font-bold pr-4 py-2">Hospital</td>
+                  <td className="py-2">{appointmentDetail?.hospital.name}</td>
+                </tr>
+                <tr className="border-b border-gray-200">
+                  <td className="font-bold pr-4 py-2">Note</td>
+                  <td className="py-2">{appointmentDetail?.note}</td>
+                </tr>
+                <tr>
+                  <td className="font-bold pr-4 py-2">City</td>
+                  <td className="py-2">{appointmentDetail?.city}</td>
+                </tr>
+              </tbody>
+            </table>
+          </ModalBody>
+        </>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default AppointmentDetailsModal;
diff --git a/app/(pages)/patient/components/Calendar/index.tsx b/app/(pages)/patient/components/Calendar/index.tsx
@@ -2,18 +2,10 @@
 import { format } from "date-fns";
 import React from "react";
 import { type DateFormatter, DayPicker } from "react-day-picker";
-import {
-  Avatar,
-  Card,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalHeader,
-  useDisclosure,
-} from "@nextui-org/react";
+import { Card, useDisclosure } from "@nextui-org/react";
 import { getFormattedDate } from "@utils/getDate";
-import { LuCalendarClock } from "react-icons/lu";
 import { bookedAppointments } from "@types";
+import AppointmentDetailsModal from "../AppointmentDetailsModal";
 
 type upcomingAppointmentsType = {
   upcomingAppointments: bookedAppointments;
@@ -25,7 +17,10 @@ export default function Calendar({
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
   const [appointmentDetail, setappointmentDetail] = React.useState<{
-    timing: string;
+    timing: {
+      startTime: string;
+      endTime: string;
+    };
     state: string;
     city: string;
     hospital: {
@@ -125,68 +120,11 @@ export default function Calendar({
         <span className="text-danger ml-1">day</span>
       </p>
 
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-        <ModalContent>
-          <>
-            <ModalHeader className="flex flex-col gap-1 font-bold">
-              <p className="text-danger mx-2"> Appointment Details</p>
-            </ModalHeader>
-            <ModalBody className="flex flex-col items-start">
-              <div className="flex flex-row w-full p-2 justify-around items-center ">
-                <Avatar
-                  src={appointmentDetail?.doctor.profile}
-                  className="w-28 h-28 text-large"
-                />
-                <div className="flex flex-col justify-center items-start">
-                  <div className="mb-2">
-                    <p className="font-bold text-xl">
-                      {appointmentDetail?.doctor.name}
-                    </p>
-                    <p className="font-bold text-black/80 text-sm">
-                      {appointmentDetail?.doctor.specialty}
-                    </p>
-                  </div>
-
-                  <div className="flex flex-row justify-center items-center gap-2">
-                    <LuCalendarClock size={25} className="text-warning" />
-                    <div className="flex flex-col">
-                      <p className="font-bold text-black/80 text-md">
-                        {appointmentDetail &&
-                          getFormattedDate(
-                            new Date(appointmentDetail.createdAt)
-                          )}
-                      </p>
-                      <p className="font-bold text-black/70 text-sm">
-                        {appointmentDetail?.timing}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <table className="border-collapse w-full mt-4">
-                <tbody>
-                  <tr className="border-b border-gray-200">
-                    <td className="font-bold pr-4 py-2">Disease</td>
-                    <td className="py-2">{appointmentDetail?.disease}</td>
-                  </tr>
-                  <tr className="border-b border-gray-200">
-                    <td className="font-bold pr-4 py-2">Hospital</td>
-                    <td className="py-2">{appointmentDetail?.hospital.name}</td>
-                  </tr>
-                  <tr className="border-b border-gray-200">
-                    <td className="font-bold pr-4 py-2">Note</td>
-                    <td className="py-2">{appointmentDetail?.note}</td>
-                  </tr>
-                  <tr>
-                    <td className="font-bold pr-4 py-2">City</td>
-                    <td className="py-2">{appointmentDetail?.city}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </ModalBody>
-          </>
-        </ModalContent>
-      </Modal>
+      <AppointmentDetailsModal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        appointmentDetail={appointmentDetail}
+      />
     </Card>
   );
 }
diff --git a/app/(pages)/patient/components/index.tsx b/app/(pages)/patient/components/index.tsx
@@ -1,3 +1,4 @@
+import AppointmentDetailsModal from "./AppointmentDetailsModal";
 import BookAppointment from "./BookAppointment";
 import Calendar from "./Calendar";
 import { HealthConditions, WeeklyProgress } from "./Graphs";
@@ -8,6 +9,7 @@ import QRCode from "./QR";
 import CarouselService from "./ServiceCarousel";
 
 export {
+  AppointmentDetailsModal,
   BookAppointment,
   Calendar,
   HealthConditions,

diff --git a/app/(pages)/patient/qrcode/page.tsx b/app/(pages)/patient/qrcode/page.tsx
@@ -26,11 +26,11 @@ export default async function QRCodePage() {
 
         <div className="flex flex-col justify-center items-center gap-2 px-5">
           <p className="text-sm font-semibold">
-            Instant Access to Medical Records via QR Codes
+            Quick Patient Verification via QR Code
           </p>
-          <p className="text-xs">
-            Empower patients with personalized QR codes, granting swift access
-            to medical records for seamless interactions at hospitals.
+          <p className="text-xs text-center">
+            Receptionists can scan this code to verify your identity instantly
+            and access your medical records for a smoother check-in process.
           </p>
         </div>
 

diff --git a/app/api/patient/appointment/route.ts b/app/api/patient/appointment/route.ts
@@ -1,4 +1,4 @@
-import { dbConfig, getFormattedDate } from "@utils/index";
+import { dbConfig } from "@utils/index";
 import { bookingAppointment } from "@types";
 import { decrypt } from "@sessions/sessionUtils";
 import { Types } from "mongoose";

diff --git a/app/components/Notifications/index.tsx b/app/components/Notifications/index.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { CiBellOn } from "react-icons/ci";
+import { useEffect, useState } from "react";
+import { IoNotificationsOutline } from "react-icons/io5";
 import {
   NovuProvider,
   PopoverNotificationCenter,
@@ -12,7 +13,7 @@ export default function Notifications({ userId }: { userId: string }) {
       subscriberId={userId}
       applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_IDENTIFIER || ""}
     >
-      <PopoverNotificationCenter colorScheme={"light"}>
+      <PopoverNotificationCenter colorScheme="light">
         {({ unseenCount }) => <CustomBellIcon unseenCount={unseenCount} />}
       </PopoverNotificationCenter>
     </NovuProvider>
@@ -24,33 +25,41 @@ const CustomBellIcon = ({
 }: {
   unseenCount: number | undefined;
 }) => {
+  const [prevCount, setPrevCount] = useState(unseenCount);
+
+  useEffect(() => {
+    if (unseenCount > prevCount) {
+      const audio = new Audio("/sounds/bell.mp3");
+      audio.play();
+    }
+    setPrevCount(unseenCount);
+  }, [unseenCount, prevCount]);
+
   return (
-    <CiBellOn
-      size={25}
-      className={`cursor-pointer relative ${
-        unseenCount > 0 ? "animate-bounce text-danger-800" : ""
-      }`}
-      style={{
-        cursor: "pointer",
-      }}
-    >
+    <div className="relative inline-block">
+      {/* Bell Icon with animation */}
+      <div
+        className={`transition-transform duration-300 ${
+          unseenCount > 0 ? "animate-wiggle" : ""
+        }`}
+      >
+        <IoNotificationsOutline
+          size={25}
+          className="text-gray-700 cursor-pointer hover:text-gray-900 transition-colors duration-200"
+        />
+      </div>
+
+      {/* Notification Count */}
       {unseenCount > 0 && (
-        <span
-          style={{
-            position: "absolute",
-            top: "50%",
-            right: "5px",
-            transform: "translateY(-50%)",
-            fontSize: "12px",
-            color: "white",
-            backgroundColor: "red",
-            borderRadius: "50%",
-            padding: "2px",
-          }}
-        >
-          {unseenCount}
-        </span>
+        <div className="absolute -top-2 -right-2 flex items-center justify-center">
+          <span className="relative flex h-5 w-5">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-5 w-5 bg-red-500 text-white text-xs font-bold items-center justify-center">
+              {unseenCount > 99 ? "99+" : unseenCount}
+            </span>
+          </span>
+        </div>
       )}
-    </CiBellOn>
+    </div>
   );
 };
diff --git a/app/models/bookedAppointment.ts b/app/models/bookedAppointment.ts
@@ -1,7 +1,10 @@
 import mongoose from "mongoose";
 
 export interface BookedAppointment extends mongoose.Document {
-  timing: string;
+  timing: {
+    startTime: string;
+    endTime: string;
+  };
   state: string;
   city: string;
   hospital: {
@@ -18,7 +21,10 @@ export interface BookedAppointment extends mongoose.Document {
 
 const bookedAppointmentsSchema = new mongoose.Schema(
   {
-    timing: { type: String, required: false },
+    timing: {
+      startTime: { type: String, required: false },
+      endTime: { type: String, required: false },
+    },
     state: { type: String, required: true },
     city: { type: String, required: true },
     hospital: {

diff --git a/public/sounds/bell.mp3 b/public/sounds/bell.mp3
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,6 +13,7 @@ const config: Config = {
       animation: {
         "infinite-scroll": "infinite-scroll 25s linear infinite",
         wave: "wave 2.5s infinite",
+        wiggle: "wiggle 0.3s ease-in-out",
       },
       keyframes: {
         "infinite-scroll": {
@@ -29,6 +30,12 @@ const config: Config = {
           "60%": { transform: "rotate(0deg)" },
           "100%": { transform: "rotate(0deg)" },
         },
+        wiggle: {
+          "0%, 100%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(-10deg)" },
+          "50%": { transform: "rotate(10deg)" },
+          "75%": { transform: "rotate(-5deg)" },
+        },
       },
     },
   },

diff --git a/types.d.ts b/types.d.ts
@@ -57,7 +57,10 @@ export type Hospital = User & {};
 export type bookedAppointments = [
   {
     _id: string;
-    timing: string;
+    timing: {
+      startTime: string;
+      endTime: string;
+    };
     state: string;
     city: string;
     hospital: {