Feat: Added Doctor booking slot

package.json

@@ -24,15 +24,16 @@
     "next-navigation": "^1.0.6",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "react-query": "^3.39.3",
     "react-select": "^5.8.3",
     "react-toastify": "^10.0.6",
-     "yup": "^1.4.0",
+    "yup": "^1.4.0",
     "zustand": "^5.0.1"
-    },
+  },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",

src/app/(user)/appointments/page.tsx

@@ -0,0 +1,18 @@
+import AppointmentTable from "@/components/baseComponents/ui/AppointmentTable/AppointmentTable";
+
+export default function Appointments() {
+  return (
+    <div className="p-6 bg-gradient-to-b from-gray-900 to-black min-h-screen flex flex-col items-center text-white">
+      <h1 className="text-3xl font-bold mb-6 text-gray-100 mt-14">
+        Manage Your Appointments
+      </h1>
+      <p className="text-gray-400 mb-8 max-w-2xl text-center">
+        Keep track of your upcoming appointments with ease. Filter by status,
+        search for specific patients, and view details at a glance.
+      </p>
+      <div className="w-full max-w-6xl bg-gray-800 p-6 rounded-lg shadow-lg">
+        <AppointmentTable />
+      </div>
+    </div>
+  );
+}

src/app/(user)/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "../../styles/globals.css";
-import UserNavbar from "@/components/userComponents/containers/UserNavbar/UserNavbar";
+import UserNavbar from "@/components/userComponents/ui/UserNavbar/UserNavbar";
 import { Footer } from "@/components/baseComponents/ui/Footer/Footer";
 
 export const metadata: Metadata = {

src/app/(user)/medicalHistory/page.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const Page = () => {
   return (
-    <div className="flex h-full w-full bg-pink-400 text-white">
+    <div className="h-full w-full text-white">
       <MedicalHistory />
     </div>
   );

src/components/baseComponents/forms/Login/Login.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React  from "react";
 import { FaEnvelope, FaLock } from "react-icons/fa";
 import { Formik, Form, FormikHelpers } from "formik";
 import * as Yup from "yup";

src/components/baseComponents/ui/DateFilter/DateFilter.tsx

@@ -0,0 +1,116 @@
+"use client";
+import React, { useState } from "react";
+import DatePicker from "react-datepicker"; // Ensure you have react-datepicker installed
+import "react-datepicker/dist/react-datepicker.css";
+
+interface DateFilterProps {
+  value: { type: string; value?: [string, string] };
+  onChange: (filter: { type: string; value?: [string, string] }) => void;
+}
+
+const DateFilter: React.FC<DateFilterProps> = ({ value, onChange }) => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+  const [selectedType, setSelectedType] = useState<string>(value.type || "All");
+
+  const predefinedFilters = [
+    "All",
+    "Single Date",
+    "Range",
+    "Last 7 Days",
+    "Last 30 Days",
+    "This Month",
+    "Last Month",
+  ];
+
+  const handleTypeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = event.target.value;
+    setSelectedType(selected);
+    onChange({ type: selected, value: undefined });
+
+    // Reset dates if switching filter type
+    if (selected !== "Range") {
+      setStartDate(null);
+      setEndDate(null);
+    }
+  };
+
+  const handleSingleDateChange = (date: Date | null) => {
+    if (date) {
+      const formattedDate = date.toISOString().split("T")[0];
+      onChange({ type: "Single Date", value: [formattedDate, formattedDate] });
+    }
+  };
+
+  const handleRangeChange = () => {
+    if (startDate && endDate) {
+      const formattedStart = startDate.toISOString().split("T")[0];
+      const formattedEnd = endDate.toISOString().split("T")[0];
+      onChange({ type: "Range", value: [formattedStart, formattedEnd] });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2 text-black bg-black">
+      {/* Dropdown for selecting filter type */}
+      <select
+        value={selectedType}
+        onChange={handleTypeChange}
+        className="border border-gray-300 rounded p-2"
+      >
+        {predefinedFilters.map((filter) => (
+          <option key={filter} value={filter}>
+            {filter}
+          </option>
+        ))}
+      </select>
+
+      {/* Date inputs based on selected type */}
+      {selectedType === "Single Date" && (
+        <DatePicker
+          selected={startDate}
+          onChange={(date) => {
+            setStartDate(date);
+            handleSingleDateChange(date);
+          }}
+          dateFormat="dd-MM-yyyy"
+          placeholderText="Select a date"
+          className="border border-gray-300 rounded p-2"
+        />
+      )}
+
+      {selectedType === "Range" && (
+        <div className="flex gap-2">
+          <DatePicker
+            selected={startDate}
+            onChange={(date) => setStartDate(date)}
+            selectsStart
+            startDate={startDate}
+            endDate={endDate}
+            dateFormat="dd-MM-yyyy"
+            placeholderText="Start date"
+            className="border border-gray-300 rounded p-2"
+          />
+          <DatePicker
+            selected={endDate}
+            onChange={(date) => setEndDate(date)}
+            selectsEnd
+            startDate={startDate}
+            endDate={endDate}
+            dateFormat="dd-MM-yyyy"
+            placeholderText="End date"
+            className="border border-gray-300 rounded p-2"
+          />
+          <button
+            onClick={handleRangeChange}
+            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+          >
+            Apply
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DateFilter;

src/components/baseComponents/ui/Drop-Down/DropDown.tsx

@@ -1,81 +1,82 @@
-  import { FC } from "react";
-  import Select from "react-select";
+import { FC } from "react";
+import Select from "react-select";
 
-  interface DropdownProps {
-    value: string; // The selected value passed as a string
-    options: string[]; // Array of string options
-    onChange: (selectedOption: { value: string; label: string }) => void;
-  }
+interface DropdownProps {
+  value: string; // The selected value passed as a string
+  options: string[]; // Array of string options
+  // placeholder?: string;
+  onChange: (selectedOption: { value: string; label: string }) => void;
+}
 
-  const Dropdown: FC<DropdownProps> = ({ value, options, onChange }) => {
-    // Format the options to match the structure that `react-select` expects
-    const formattedOptions = options.map((option) => ({
-      value: option,
-      label: option,
-    }));
+const Dropdown: FC<DropdownProps> = ({ value, options, onChange }) => {
+  // Format the options to match the structure that `react-select` expects
+  const formattedOptions = options.map((option) => ({
+    value: option,
+    label: option,
+  }));
 
-    // Find the currently selected option based on the `value`
-    const selectedOption =
-      formattedOptions.find((option) => option.value === value) || null; // Default to null if no matching option is found
+  // Find the currently selected option based on the `value`
+  const selectedOption =
+    formattedOptions.find((option) => option.value === value) || null; // Default to null if no matching option is found
 
-    return (
-      <div className="w-full sm:w-auto">
-        <Select
-          value={selectedOption} // Pass the selected option as an object
-          onChange={(option) =>
-            onChange(option as { value: string; label: string })
-          } // Make sure the correct format is passed onChange
-          options={formattedOptions}
-          className="react-select-container"
-          classNamePrefix="react-select"
-          styles={{
-            control: (base, state) => ({
-              ...base,
-              backgroundColor: "#171717", // Dark background color
-              borderColor: state.isFocused ? "#4FD1C5" : "#4A5568", // Highlight color on focus
-              color: "#E2E8F0", // Text color for the input
-              borderRadius: "12px", // Rounded corners
-              boxShadow: state.isFocused
-                ? "0 0 0 3px rgba(79, 209, 197, 0.5)"
-                : "none", // Focus shadow
-              padding: "8px 12px", // Padding for the input box
-              fontSize: "14px", // Slightly larger text for readability
-              fontWeight: "500", // Bold text
-              transition: "all 0.3s ease", // Smooth transition for interactions
-            }),
-            placeholder: (base) => ({
-              ...base,
-              color: "#CBD5E0", // Light gray for placeholder
-            }),
-            menu: (base) => ({
-              ...base,
-              backgroundColor: "#2D3748", // Dark menu background
-              borderRadius: "12px",
-              padding: "4px 0",
-            }),
-            option: (styles, { data, isDisabled, isFocused, isSelected }) => ({
-              ...styles,
-              backgroundColor: isSelected
-                ? "#38B2AC" // Highlight color for selected option
-                : isFocused
-                ? "#4FD1C5" // Highlight color for focused option
-                : undefined,
-              color: isDisabled ? "#A0AEC0" : "#E2E8F0", // Text color for the options
-              padding: "10px 12px", // Padding for each option
-              cursor: isDisabled ? "not-allowed" : "pointer", // Pointer cursor for clickable options
-              fontSize: "14px", // Slightly larger text for readability
-              fontWeight: "400", // Regular weight for options
-              transition: "background-color 0.2s ease",
-            }),
-            singleValue: (base) => ({
-              ...base,
-              color: "#E2E8F0", // Color of the selected value text
-              fontWeight: "500", // Bold text for the selected value
-            }),
-          }}
-        />
-      </div>
-    );
-  };
+  return (
+    <div className="w-full sm:w-auto">
+      <Select
+        value={selectedOption} // Pass the selected option as an object
+        onChange={(option) =>
+          onChange(option as { value: string; label: string })
+        } // Make sure the correct format is passed onChange
+        options={formattedOptions}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        styles={{
+          control: (base, state) => ({
+            ...base,
+            backgroundColor: "#171717", // Dark background color
+            borderColor: state.isFocused ? "#4FD1C5" : "#4A5568", // Highlight color on focus
+            color: "#E2E8F0", // Text color for the input
+            borderRadius: "12px", // Rounded corners
+            boxShadow: state.isFocused
+              ? "0 0 0 3px rgba(79, 209, 197, 0.5)"
+              : "none", // Focus shadow
+            padding: "8px 12px", // Padding for the input box
+            fontSize: "14px", // Slightly larger text for readability
+            fontWeight: "500", // Bold text
+            transition: "all 0.3s ease", // Smooth transition for interactions
+          }),
+          placeholder: (base) => ({
+            ...base,
+            color: "#CBD5E0", // Light gray for placeholder
+          }),
+          menu: (base) => ({
+            ...base,
+            backgroundColor: "#2D3748", // Dark menu background
+            borderRadius: "12px",
+            padding: "4px 0",
+          }),
+          option: (styles, { data, isDisabled, isFocused, isSelected }) => ({
+            ...styles,
+            backgroundColor: isSelected
+              ? "#38B2AC" // Highlight color for selected option
+              : isFocused
+              ? "#4FD1C5" // Highlight color for focused option
+              : undefined,
+            color: isDisabled ? "#A0AEC0" : "#E2E8F0", // Text color for the options
+            padding: "10px 12px", // Padding for each option
+            cursor: isDisabled ? "not-allowed" : "pointer", // Pointer cursor for clickable options
+            fontSize: "14px", // Slightly larger text for readability
+            fontWeight: "400", // Regular weight for options
+            transition: "background-color 0.2s ease",
+          }),
+          singleValue: (base) => ({
+            ...base,
+            color: "#E2E8F0", // Color of the selected value text
+            fontWeight: "500", // Bold text for the selected value
+          }),
+        }}
+      />
+    </div>
+  );
+};
 
-  export default Dropdown;
+export default Dropdown;