Marge V2 to master

components/AppointmentTable/AppointmentPage.jsx

@@ -0,0 +1,98 @@
+import Image from "next/image";
+import dayjs from "dayjs";
+import { TableRow, TableCell } from "@mui/material";
+import { capitalize, formateDate } from "@/utils/heplerFunction";
+
+export default function AppointmentPage({
+  appointments,
+  page,
+  rowsPerPage,
+  order,
+  searchTerm,
+  userType,
+}) {
+  // Function to sort appointments based on booking date and time
+  const sortedAppointments = () => {
+    const comparator = (a, b) => {
+      const dateA = dayjs(a.bookingDate + " " + a.time);
+      const dateB = dayjs(b.bookingDate + " " + b.time);
+
+      if (order === "asc") {
+        return dateA - dateB;
+      } else {
+        return dateB - dateA;
+      }
+    };
+
+    return appointments.sort(comparator);
+  };
+
+  // Function to filter appointments based on search term
+  const filteredAppointments = () => {
+    return sortedAppointments().filter((appointment) =>
+      appointment.doctor.name.toLowerCase().includes(searchTerm?.toLowerCase())
+    );
+  };
+
+  const startIndex = page * rowsPerPage;
+  const endIndex = startIndex + rowsPerPage;
+
+  let filteredAppointment;
+  if (userType === "doctor") {
+    filteredAppointment = sortedAppointments();
+  } else {
+    filteredAppointment = filteredAppointments();
+  }
+
+  // If search term is not empty and no appointments are found, display a message
+  if (searchTerm !== "" && filteredAppointment.length === 0) {
+    return (
+      <p className="p-4 text-headingColor text-[16px] font-semibold">
+        Docter not found
+      </p>
+    );
+  }
+
+  // Render the filtered appointments within the specified range
+  return filteredAppointment.slice(startIndex, endIndex).map((item) => (
+    <TableRow key={item._id}>
+      <TableCell>
+        <div className="flex items-center">
+          <Image
+            src={userType === "doctor" ? item.user?.photo : item.doctor?.photo}
+            alt=""
+            className="rounded-full"
+            width={40}
+            height={40}
+          />
+          <div className="pl-3">
+            <div className="text-base font-semibold">
+              {capitalize(
+                userType === "doctor" ? item.user?.name : item.doctor?.name
+              )}
+            </div>
+            <div className="text-gray-500">
+              {userType === "doctor" ? item.user?.email : item.doctor?.email}
+            </div>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        {item.isPaid ? (
+          <div className="flex items-center">
+            <div className="h-2.5 w-2.5 bg-green-500 mr-2"></div>
+            Paid
+          </div>
+        ) : (
+          <div className="flex items-center">
+            <div className="h-2.5 w-2.5 bg-red-500 mr-2"></div>
+            Unpaid
+          </div>
+        )}
+      </TableCell>
+      <TableCell>{item.fees}</TableCell>
+      <TableCell>{item.time}</TableCell>
+      <TableCell>{formateDate(item.bookingDate)}</TableCell>
+    </TableRow>
+  ));
+}

components/AppointmentTable/TablePagination.jsx

@@ -0,0 +1,121 @@
+import {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  TablePagination,
+  TableSortLabel,
+  TextField,
+} from "@mui/material";
+import Head from "next/head";
+import AppointmentPage from "./AppointmentPage";
+import { useState } from "react";
+import { formateDate } from "@/utils/heplerFunction";
+
+export default function AppointmentTablePagination({ type, appointments }) {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const [order, setOrder] = useState("asc");
+  const [orderBy, setOrderBy] = useState("bookingDate");
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // Function to handle page change
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  // Function to handle rows per page change
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  // Function to handle sorting request
+  const handleRequestSort = (property) => {
+    const isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  };
+
+  // Function to handle search term change
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+    setPage(0);
+  };
+
+  return (
+    <div>
+      {/* <Head>
+        <title>Appointment page</title>
+        <meta
+          name="description"
+          content="User profile setting and appointment data"
+        />
+      </Head> */}
+
+      {appointments.length === 0 && (
+        <h2 className="mt-5 text-center  leading-7 text-[20px] font-semibold text-primaryColor">
+          {`You did not ${
+            type === "user" ? " book " : " have"
+          } any appointment yet!`}
+        </h2>
+      )}
+
+      {appointments.length > 0 && (
+        <>
+          {type === "user" && (
+            <TextField
+              label="Search Doctor"
+              variant="outlined"
+              fullWidth
+              margin="normal"
+              value={searchTerm}
+              onChange={handleSearchChange}
+              className="mt-5"
+            />
+          )}
+          <Table className="w-full text-left text-sm text-gray-500 mt-3">
+            <TableHead>
+              <TableRow>
+                <TableCell>Doctor Name</TableCell>
+                <TableCell>Status</TableCell>
+                <TableCell>Fees</TableCell>
+                <TableCell>Time</TableCell>
+                <TableCell>
+                  <TableSortLabel
+                    active={orderBy === "bookingDate"}
+                    direction={orderBy === "bookingDate" ? order : "asc"}
+                    onClick={() => handleRequestSort("bookingDate")}
+                  >
+                    Booked For
+                  </TableSortLabel>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <AppointmentPage
+                appointments={appointments}
+                page={page}
+                rowsPerPage={rowsPerPage}
+                order={order}
+                searchTerm={searchTerm}
+                userType={type}
+              />
+            </TableBody>
+          </Table>
+          <TablePagination
+            rowsPerPageOptions={[5, 8, 10]}
+            component="div"
+            count={appointments.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
+        </>
+      )}
+    </div>
+  );
+}

components/DFL/Card.jsx

@@ -0,0 +1,17 @@
+import Image from "next/image";
+import style from "../../styles/DFL/HomeDfl.module.scss";
+
+export default function Card({ title, text, img, alt = "" }) {
+  return (
+    <div className={style.card}>
+      <div>
+        <Image className={style.card_img_top} src={img} alt={alt} />
+      </div>
+
+      <div className={style.card_body}>
+        <h4 className={style.card_title}>{title}</h4>
+        <p className={style.card_text}>{text}</p>
+      </div>
+    </div>
+  );
+}

components/DFL/Donate/MedicalInfoForm.js

@@ -0,0 +1,131 @@
+import { HashLoader } from "react-spinners";
+import style from "../../../styles/DFL/donate.module.scss";
+
+export default function MedicalInfoForm({
+  formData,
+  loading,
+  onSubmit,
+  onChange,
+  errors,
+  onBlur,
+}) {
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    onChange(name, value);
+  };
+  return (
+    <div>
+      <div className={style.peronsal_info}>
+        <h2 className={style.title}>Medical Info</h2>
+        <form>
+          <div className={style.form_items}>
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="last-donation-date">Last Donation Date</label>
+                <input
+                  type="date"
+                  name="lastDonationDate"
+                  value={formData.lastDonationDate}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.lastDonationDate && <p>{errors.lastDonationDate}</p>}
+              </div>
+              <div>
+                <label htmlFor="bloodType">Blood Type</label>
+                <input
+                  type="text"
+                  name="bloodType"
+                  required
+                  placeholder="Enter your blood type"
+                  value={formData.bloodType}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.bloodType && <p>{errors.bloodType}</p>}
+              </div>
+            </div>
+
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="styling">
+                  In the last six months have you had any of the following?
+                </label>
+              </div>
+              <div>
+                <label htmlFor="surgery">
+                  Is there any history of surgery in the past six months?
+                </label>
+              </div>
+            </div>
+            <div className={style.form_row}>
+              <div>
+                <select
+                  name="styling"
+                  id="disease"
+                  value={formData.styling}
+                  onChange={handleChange}
+                >
+                  <option value="">select</option>
+                  <option value="tattooing">Tattooing </option>
+                  <option value="ear_piercing">Ear piercing</option>
+                  <option value="dental_extraction">Dental extraction</option>
+                </select>
+              </div>
+              <div>
+                <select
+                  name="surgery"
+                  value={formData.surgery}
+                  onChange={handleChange}
+                >
+                  <option value="">select</option>
+                  <option value="major">Major</option>
+                  <option value="minor">Minor</option>
+                  <option value="blood_transfusion">Blood Transfusion </option>
+                </select>
+              </div>
+            </div>
+
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="weight">Weight</label>
+              </div>
+              <div>
+                <label htmlFor="disease">
+                  Do you suffer from or have suffered from any diseases?
+                </label>
+              </div>
+            </div>
+            <div className={style.form_row}>
+              <div>
+                <input
+                  type="text"
+                  name="weight"
+                  placeholder="Enter weight in Kg"
+                  required
+                  value={formData.weight}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.weight && <p>{errors.weight}</p>}
+              </div>
+              <div>
+                <input
+                  type="text"
+                  name="disease"
+                  placeholder="Enter disease name"
+                  value={formData.disease}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+          </div>
+          <button type="submit" onClick={onSubmit}>
+            {loading ? <HashLoader size={25} color="#ffffff" /> : "Submit"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}