hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change design dashboards all page and search clinics

Browse Source
This commit is contained in:
Ehsan
2025-05-27 22:27:02 +03:30
parent d95815d4aa
commit 38e243b4c7
17 changed files with 155 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/clinic/components/doctors/index.js
+1 -1
View File
@@ -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
+15 -3
View File
@@ -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
+11 -4
View File
@@ -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 searchOnLocation = searchOnList(searchOnName, selected.city, "city");
setFilteredClinics(searchOnLocation);
const current = new URLSearchParams(window.location.search);
current.set("search", value);
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 -3
View File
@@ -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
+16
View File
@@ -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
+2
View File
@@ -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
+3 -13
View File
@@ -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 AddBtn from "../../components/AddBtn";
import UpdateBtn from "../../components/UpdateBtn";
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">
<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>
<UpdateBtn />
</Head>
<CustomTable
zeroRadius={true}
components/dashboard/userAccount/tabs/familyHistory/index.js
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+1 -1
View File
@@ -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
-71
View File
@@ -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
+54
View File
@@ -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
+41
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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;
};