refactor: update appointment handling to improve data flow and display, including status management and detail views

components/dashboard/userAccount/sidebars/turns/Head.js

@@ -1,12 +1,37 @@
 import Tabs from "@/app/component/Tabs";
-import { Button } from "@mui/material";
 
-const listTab = ["نوبت های جاری", "نوبت های انجام شده"];
+const listTab = [
+  "همه",
+  "در انتظار پرداخت",
+  "رزرو شده",
+  "ویزیت شده",
+  "لغو خودکار",
+  "تکمیل شده",
+];
+
+function Head({ status, setStatus }) {
+  const statusMap = {
+    0: undefined, // all
+    1: "waiting_for_payment",
+    2: "reserved",
+    3: "visited",
+    4: "auto_cancel_unpaid",
+    5: "completed",
+  };
+
+  const handleChange = (e, value) => {
+    setStatus(statusMap[value]);
+  };
+
+  const getCurrentIndex = () => {
+    const entries = Object.entries(statusMap);
+    const found = entries.find(([_, val]) => val === status);
+    return found ? parseInt(found[0]) : 0;
+  };
 
-function Head({ isDone, setIsDone }) {
   return (
-    <div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
-      <div className="block w-full lg:hidden">
+    <div className="flex items-center justify-start mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
+      <div className="block w-full">
         <Tabs
           style={{
             ".MuiTabs-indicator": {
@@ -33,36 +58,13 @@ function Head({ isDone, setIsDone }) {
           }}
           color="#5559CE"
           listTab={listTab}
-          value={isDone ? 0 : 1}
-          handleChange={(e, value) => setIsDone(!!!value)}
+          value={getCurrentIndex()}
+          handleChange={handleChange}
         />
       </div>
-      <Button
-        className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
-          ${
-            isDone
-              ? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
-              : "!text-[#EFEFEF] !border-transparent"
-          }`}
-        onClick={() => setIsDone(!isDone)}
-        variant="contained"
-      >
-        نوبت های جاری
-      </Button>
-      <Button
-        className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
-          ${
-            !isDone
-              ? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
-              : "!text-[#EFEFEF] !border-transparent"
-          }`}
-        onClick={() => setIsDone(!isDone)}
-        variant="contained"
-      >
-        نوبت های انجام شده
-      </Button>
     </div>
   );
 }
 
 export default Head;
+