change design dashboards all page and search clinics

components/clinic/components/doctors/index.js

@@ -1,6 +1,6 @@
 "use client";
 
-import SmSearch from "@/components/searchHead/SmSearch";
+import SmSearch from "@/components/searchHead/smSearch";
 import List from "./List";
 import { useState } from "react";
 import { searchOnList } from "@/helper";

components/clinics/head/SearchBar.js

@@ -3,8 +3,15 @@ import SearchD from "@/components/icons/SearchD";
 import ModalSearchCity from "@/app/component/modalSearchCity";
 import { useState } from "react";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
+import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
 
-function SearchBar({ selected, setSelected, state, handleSearch }) {
+function SearchBar({
+  selected,
+  setSelected,
+  specialties,
+  state,
+  handleSearch,
+}) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -25,7 +32,12 @@ function SearchBar({ selected, setSelected, state, handleSearch }) {
       >
         <ButtonFilter setOpen={setOpen} selected={selected} />
       </ModalSearchCity>
-      <TextField
+      <AutoCompleteSearch
+        data={specialties}
+        placeholder="جستجوی تخصص"
+        handleSearch={handleSearch}
+      />
+      {/* <TextField
         variant="standard"
         onChange={(e) => handleSearch(e.target.value)}
         InputProps={{
@@ -40,7 +52,7 @@ function SearchBar({ selected, setSelected, state, handleSearch }) {
         placeholder="جستجوی تخصص"
         dir="rtl"
         className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
-      />
+      /> */}
       <Button
         onClick={handleSearch}
         className="

components/clinics/index.js

@@ -3,11 +3,13 @@
 import { useState } from "react";
 
 import List from "./list";
-import { searchOnList } from "@/helper";
 import SearchBar from "./head/SearchBar";
 import HeadPageList from "@/app/component/head";
+import { useRouter } from "next/navigation";
+import specialtiesData from "@/data/specialties.json";
 
 function ClinicsPage({ clinics, matchedCity, matchedState }) {
+  const router = useRouter();
   const [filteredClinics, setFilteredClinics] = useState(clinics);
 
   const [selected, setSelected] = useState({
@@ -16,9 +18,13 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
   });
 
   const handleSearch = (value) => {
-    const searchOnName = searchOnList(clinics, value, "title");
+    const current = new URLSearchParams(window.location.search);
-    const searchOnLocation = searchOnList(searchOnName, selected.city, "city");
+    current.set("search", value);
-    setFilteredClinics(searchOnLocation);
+    const queryString = current.toString();
+    router.push(`/clinics?${queryString}`);
+    // const searchOnName = searchOnList(clinics, value, "title");
+    // const searchOnLocation = searchOnList(searchOnName, selected.city, "city");
+    // setFilteredClinics(searchOnLocation);
   };
 
   return (
@@ -32,6 +38,7 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
           setSelected={setSelected}
           state={matchedState?.name}
           handleSearch={handleSearch}
+          specialties={specialtiesData}
         />
       </HeadPageList>
       <List selected={selected} clinics={filteredClinics} />

components/dashboard/userAccount/components/Head.js

@@ -1,12 +1,10 @@
-import React from "react";
-
 function Head({ text, children }) {
   return (
     <div className="w-full flex mb-[40px] items-center justify-between">
       <p className="text-[#525252] dark:text-[#A1A1A1] text-[20px] font-bold">
         {text}
       </p>
-      {children}
+      <div className="flex items-center justify-end gap-4">{children}</div>
     </div>
   );
 }

components/dashboard/userAccount/components/UpdateBtn.js

@@ -0,0 +1,16 @@
+import UpdateList from "@/components/icons/UpdateList";
+import { Button } from "@mui/material";
+
+function UpdateBtn() {
+  return (
+    <Button
+      variant="outlined"
+      className="!border-[#5559CE] !border-[2px] !flex !items-center !justify-center !gap-2 !text-[14px] md:!text-[14px] !font-medium"
+    >
+      <UpdateList />
+      آپدیت کردن
+    </Button>
+  );
+}
+
+export default UpdateBtn;

components/dashboard/userAccount/tabs/allergies/index.js

@@ -5,6 +5,7 @@ import TrashB from "@/components/icons/TrashB";
 import { Button, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import AddBtn from "../../components/AddBtn";
+import UpdateBtn from "../../components/UpdateBtn";
 
 function Allergies({ data }) {
   const tableHead = ["ردیف", "ماده آلرژی‌زا", "واکنش", "شدت", ""];
@@ -13,6 +14,7 @@ function Allergies({ data }) {
   return (
     <div>
       <Head text="لیست آلرژی ها">
+        <UpdateBtn />
         <AddBtn />
       </Head>
       <CustomTable

components/dashboard/userAccount/tabs/disease/index.js

@@ -1,9 +1,8 @@
 import CustomTable from "@/app/component/CustomTable";
 import TextLoading from "@/app/component/loading/Text";
-import { Button, Switch, TableCell, TableRow } from "@mui/material";
+import { Switch, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
-import UpdateList from "@/components/icons/UpdateList";
+import UpdateBtn from "../../components/UpdateBtn";
-import AddBtn from "../../components/AddBtn";
 
 function Disease({ data }) {
   const tableHead = ["ردیف", "اسم", "وضعیت", ""];
@@ -12,16 +11,7 @@ function Disease({ data }) {
   return (
     <div>
       <Head text="لیست بیماری ها" add={false}>
-        <div className="flex items-center justify-end gap-4">
+        <UpdateBtn />
-          <Button
-            variant="outlined"
-            className="!border-[#5559CE] !border-[2px] !flex !items-center !justify-center !gap-2 !text-[14px] md:!text-[14px] !font-medium"
-          >
-            <UpdateList />
-            آپدیت کردن
-          </Button>
-          <AddBtn />
-        </div>
       </Head>
       <CustomTable
         zeroRadius={true}

components/dashboard/userAccount/tabs/familyHistory/index.js

@@ -5,6 +5,7 @@ import TrashB from "@/components/icons/TrashB";
 import { Button, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import AddBtn from "../../components/AddBtn";
+import UpdateBtn from "../../components/UpdateBtn";
 
 function FamilyHistory({ data }) {
   const tableHead = ["ردیف", "بیماری", "نسبت خانوادگی", ""];
@@ -13,6 +14,7 @@ function FamilyHistory({ data }) {
   return (
     <div>
       <Head text="لیست سابقه خانوادگی بیماری">
+        <UpdateBtn />
         <AddBtn />
       </Head>
       <CustomTable

components/dashboard/userAccount/tabs/medications/index.js

@@ -5,6 +5,7 @@ import TrashB from "@/components/icons/TrashB";
 import { Button, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import AddBtn from "../../components/AddBtn";
+import UpdateBtn from "../../components/UpdateBtn";
 
 function Medications({ data }) {
   const tableHead = ["ردیف", "نام دارو", "دوز مصرفی", "تعداد و زمان مصرف", ""];
@@ -13,6 +14,7 @@ function Medications({ data }) {
   return (
     <div>
       <Head text="لیست دارو های مصرفی">
+        <UpdateBtn />
         <AddBtn />
       </Head>
       <CustomTable

components/dashboard/userAccount/tabs/relatives/index.js

@@ -5,6 +5,7 @@ import TrashB from "@/components/icons/TrashB";
 import { Button, TableCell, TableRow, Tooltip } from "@mui/material";
 import Head from "../../components/Head";
 import AddBtn from "../../components/AddBtn";
+import UpdateBtn from "../../components/UpdateBtn";
 
 function Relatives({ data }) {
   const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
@@ -13,6 +14,7 @@ function Relatives({ data }) {
   return (
     <div>
       <Head text="لیست بستگان">
+        <UpdateBtn />
         <AddBtn />
       </Head>
       <CustomTable

components/dashboard/userAccount/tabs/surgeries/index.js

@@ -5,6 +5,7 @@ import TrashB from "@/components/icons/TrashB";
 import { Button, TableCell, TableRow } from "@mui/material";
 import Head from "../../components/Head";
 import AddBtn from "../../components/AddBtn";
+import UpdateBtn from "../../components/UpdateBtn";
 
 function Surgeries({ data }) {
   const tableHead = [
@@ -19,6 +20,7 @@ function Surgeries({ data }) {
   return (
     <div>
       <Head text="لیست جراحی ها">
+        <UpdateBtn />
         <AddBtn />
       </Head>
       <CustomTable

components/register/LogInPage.js

@@ -50,7 +50,7 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity }) {
         <Field
           dir="ltr"
           value={num}
-          type="string"
+          type="tel"
           error={!error.valid}
           spaceNull={true}
           inputProps={{

components/searchHead/SmSearch.js

@@ -1,71 +0,0 @@
-import SearchD from "@/components/icons/SearchD";
-import { Autocomplete, TextField, Button, ButtonGroup } from "@mui/material";
-import { useState } from "react";
-
-function SmSearch({ placeholder, handleSearch, data }) {
-  const [inputValue, setInputValue] = useState("");
-  const [selectedOption, setSelectedOption] = useState(null);
-
-  return (
-    <ButtonGroup
-      variant="contained"
-      className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !rounded-lg !overflow-hidden 
-        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-        !h-fit !p-1"
-    >
-      <Autocomplete
-        freeSolo
-        options={data}
-        getOptionLabel={(option) => option.name}
-        inputValue={inputValue}
-        className="!w-full"
-        onInputChange={(event, newInputValue) => {
-          setInputValue(newInputValue);
-          handleSearch(newInputValue);
-        }}
-        onChange={(event, newValue) => {
-          setSelectedOption(newValue);
-          handleSearch(newValue ? newValue.name : "");
-        }}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            variant="standard"
-            placeholder={placeholder}
-            dir="rtl"
-            InputProps={{
-              ...params.InputProps,
-              disableUnderline: true,
-              style: { height: "100%" },
-            }}
-            sx={{
-              background: "transparent !important",
-              "& .MuiInputBase-input": {
-                background: "#FAFAFA",
-                color: "#6C757D",
-                padding: "0 16px",
-                fontSize: "14px",
-                fontFamily: "inherit",
-              },
-            }}
-            className="!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal"
-          />
-        )}
-      />
-      <Button
-        onClick={() => handleSearch(inputValue)}
-        className="
-          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
-          !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
-          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
-          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
-          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
-        "
-      >
-        <SearchD />
-      </Button>
-    </ButtonGroup>
-  );
-}
-
-export default SmSearch;

components/searchHead/smSearch/AutoCompleteSearch.js

@@ -0,0 +1,54 @@
+import { Autocomplete, TextField } from "@mui/material";
+
+function AutoCompleteSearch({
+  data,
+  inputValue,
+  placeholder,
+  handleSearch,
+  setInputValue,
+  setSelectedOption,
+}) {
+  return (
+    <Autocomplete
+      freeSolo
+      options={data}
+      getOptionLabel={(option) => option.name}
+      inputValue={inputValue}
+      className="!w-full"
+      onInputChange={(event, newInputValue) => {
+        setInputValue && setInputValue(newInputValue);
+        handleSearch(newInputValue);
+      }}
+      onChange={(event, newValue) => {
+        setSelectedOption(newValue);
+        handleSearch(newValue ? newValue.name : "");
+      }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="standard"
+          placeholder={placeholder}
+          dir="rtl"
+          InputProps={{
+            ...params.InputProps,
+            disableUnderline: true,
+            style: { height: "100%" },
+          }}
+          sx={{
+            background: "transparent !important",
+            "& .MuiInputBase-input": {
+              background: "#FAFAFA",
+              color: "#6C757D",
+              padding: "0 16px",
+              fontSize: "14px",
+              fontFamily: "inherit",
+            },
+          }}
+          className="!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal"
+        />
+      )}
+    />
+  );
+}
+
+export default AutoCompleteSearch;

components/searchHead/smSearch/index.js

@@ -0,0 +1,41 @@
+import SearchD from "@/components/icons/SearchD";
+import { Button, ButtonGroup } from "@mui/material";
+import { useState } from "react";
+import AutoCompleteSearch from "./AutoCompleteSearch";
+
+function SmSearch({ placeholder, handleSearch, data }) {
+  const [inputValue, setInputValue] = useState("");
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  return (
+    <ButtonGroup
+      variant="contained"
+      className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !rounded-lg !overflow-hidden 
+        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+        !h-fit !p-1"
+    >
+      <AutoCompleteSearch
+        data={data}
+        inputValue={inputValue}
+        placeholder={placeholder}
+        handleSearch={handleSearch}
+        setInputValue={setInputValue}
+        setSelectedOption={setSelectedOption}
+      />
+      <Button
+        onClick={() => handleSearch(inputValue)}
+        className="
+          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
+          !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
+          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
+          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
+          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
+        "
+      >
+        <SearchD />
+      </Button>
+    </ButtonGroup>
+  );
+}
+
+export default SmSearch;

components/specialties/index.js

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import List from "./list";
-import SmSearch from "../searchHead/SmSearch";
+import SmSearch from "../searchHead/smSearch";
 import HeadPageList from "@/app/component/head";
 import specialtiesData from "@/data/specialties.json";
 import { searchOnList } from "@/helper";

helper/index.js

@@ -142,7 +142,7 @@ export function validatePhoneNumber(input) {
 
 export const searchOnList = (list, value, name) => {
   let newList = list;
-  newList = list.filter((item) => item[name].toLowerCase().includes(value));
+  newList = list.filter((item) => item[name]?.toLowerCase()?.includes(value));
   return newList;
 };