first commit
This commit is contained in:
Samandar Turgunboyev
52
src/features/doctors/lib/data.ts
Normal file
52
src/features/doctors/lib/data.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import { fakeDistrict, type District } from "@/features/districts/lib/data";
|
||||
import {
|
||||
ObjectListData,
|
||||
type ObjectListType,
|
||||
} from "@/features/objects/lib/data";
|
||||
import { FakeUserList, type User } from "@/features/users/lib/data";
|
||||
|
||||
export interface DoctorListType {
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone_number: string;
|
||||
work: string;
|
||||
spec: string;
|
||||
desc: string;
|
||||
district: District;
|
||||
user: User;
|
||||
object: ObjectListType;
|
||||
long: string;
|
||||
lat: string;
|
||||
}
|
||||
|
||||
export const doctorListData: DoctorListType[] = [
|
||||
{
|
||||
id: 1,
|
||||
first_name: "Ali",
|
||||
last_name: "Valiyev",
|
||||
phone_number: "+998901234567",
|
||||
work: "Toshkent Shifoxonasi",
|
||||
spec: "Kardiolog",
|
||||
desc: "Malakali kardiolog, 10 yillik tajribaga ega",
|
||||
district: fakeDistrict[0],
|
||||
user: FakeUserList[0],
|
||||
object: ObjectListData[0],
|
||||
lat: ObjectListData[0].lat,
|
||||
long: ObjectListData[0].long,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
first_name: "Madina",
|
||||
last_name: "Karimova",
|
||||
phone_number: "+998901112233",
|
||||
work: "Yunusobod Poliklinikasi",
|
||||
spec: "Pediatr",
|
||||
desc: "Bolalar shifokori, 7 yillik ish tajribasi mavjud",
|
||||
district: fakeDistrict[1],
|
||||
user: FakeUserList[1],
|
||||
object: ObjectListData[1],
|
||||
lat: ObjectListData[1].lat,
|
||||
long: ObjectListData[1].long,
|
||||
},
|
||||
];
|
||||
15
src/features/doctors/lib/form.ts
Normal file
15
src/features/doctors/lib/form.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import z from "zod";
|
||||
|
||||
export const DoctorForm = z.object({
|
||||
first_name: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
last_name: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
phone_number: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
work: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
spec: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
desc: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
district: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
user: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
object: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
long: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
lat: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
});
|
||||
306
src/features/doctors/ui/AddedDoctor.tsx
Normal file
306
src/features/doctors/ui/AddedDoctor.tsx
Normal file
@@ -0,0 +1,306 @@
|
||||
import { fakeDistrict } from "@/features/districts/lib/data";
|
||||
import type { DoctorListType } from "@/features/doctors/lib/data";
|
||||
import { DoctorForm } from "@/features/doctors/lib/form";
|
||||
import { ObjectListData } from "@/features/objects/lib/data";
|
||||
import { FakeUserList } from "@/features/users/lib/data";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from "@/shared/ui/form";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Label } from "@/shared/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { Textarea } from "@/shared/ui/textarea";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Circle, Map, Placemark, YMaps } from "@pbe/react-yandex-maps";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useState, type Dispatch, type SetStateAction } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import type z from "zod";
|
||||
|
||||
interface Props {
|
||||
initialValues: DoctorListType | null;
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setData: Dispatch<SetStateAction<DoctorListType[]>>;
|
||||
}
|
||||
|
||||
const AddedDoctor = ({ initialValues, setData, setDialogOpen }: Props) => {
|
||||
const [load, setLoad] = useState<boolean>(false);
|
||||
const form = useForm<z.infer<typeof DoctorForm>>({
|
||||
resolver: zodResolver(DoctorForm),
|
||||
defaultValues: {
|
||||
desc: initialValues?.desc || "",
|
||||
district: initialValues?.district.id.toString() || "",
|
||||
first_name: initialValues?.first_name || "",
|
||||
last_name: initialValues?.last_name || "",
|
||||
lat: initialValues?.lat || "41.2949",
|
||||
long: initialValues?.long || "69.2361",
|
||||
object: initialValues?.object.id.toString() || "",
|
||||
phone_number: initialValues?.phone_number || "+998",
|
||||
spec: initialValues?.spec || "",
|
||||
work: initialValues?.work || "",
|
||||
user: initialValues?.user.id.toString() || "",
|
||||
},
|
||||
});
|
||||
|
||||
const lat = form.watch("lat");
|
||||
const long = form.watch("long");
|
||||
|
||||
const handleMapClick = (e: { get: (key: string) => number[] }) => {
|
||||
const coords = e.get("coords");
|
||||
form.setValue("lat", coords[0].toString());
|
||||
form.setValue("long", coords[1].toString());
|
||||
};
|
||||
|
||||
function onSubmit(values: z.infer<typeof DoctorForm>) {
|
||||
setLoad(true);
|
||||
const newObject: DoctorListType = {
|
||||
id: initialValues ? initialValues.id : Date.now(),
|
||||
user: FakeUserList.find((u) => u.id === Number(values.user))!,
|
||||
district: fakeDistrict.find((d) => d.id === Number(values.district))!,
|
||||
desc: values.desc,
|
||||
first_name: values.first_name,
|
||||
last_name: values.last_name,
|
||||
lat: values.lat,
|
||||
long: values.long,
|
||||
object: ObjectListData.find((d) => d.id === Number(values.object))!,
|
||||
phone_number: values.phone_number,
|
||||
spec: values.spec,
|
||||
work: values.work,
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
setData((prev) => {
|
||||
if (initialValues) {
|
||||
return prev.map((item) =>
|
||||
item.id === initialValues.id ? newObject : item,
|
||||
);
|
||||
} else {
|
||||
return [...prev, newObject];
|
||||
}
|
||||
});
|
||||
setLoad(false);
|
||||
setDialogOpen(false);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="first_name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Ism</Label>
|
||||
<FormControl>
|
||||
<Input placeholder="Ismi" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="last_name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Familiya</Label>
|
||||
<FormControl>
|
||||
<Input placeholder="Familiyasi" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone_number"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Telefon raqami</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="+998 90 123-45-67"
|
||||
{...field}
|
||||
value={formatPhone(field.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="work"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Ish joyi</Label>
|
||||
<FormControl>
|
||||
<Input placeholder="114-poliklinika" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="spec"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Sohasi</Label>
|
||||
<FormControl>
|
||||
<Input placeholder="Kardiolog" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="desc"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Tavsif</Label>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Tavsif"
|
||||
{...field}
|
||||
className="min-h-32 max-h-52"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="district"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Tuman</Label>
|
||||
<FormControl>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger className="w-full !h-12">
|
||||
<SelectValue placeholder="Tumanlar" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{fakeDistrict.map((e) => (
|
||||
<SelectItem key={e.id} value={String(e.id)}>
|
||||
{e.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="object"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Obyekt</Label>
|
||||
<FormControl>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger className="w-full !h-12">
|
||||
<SelectValue placeholder="Obyekt" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ObjectListData.map((e) => (
|
||||
<SelectItem key={e.id} value={String(e.id)}>
|
||||
{e.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="user"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Foydalanuvchi</Label>
|
||||
<FormControl>
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger className="w-full !h-12">
|
||||
<SelectValue placeholder="Foydalanuvchilar" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{FakeUserList.map((e) => (
|
||||
<SelectItem value={String(e.id)}>
|
||||
{e.firstName} {e.lastName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="h-[300px] w-full border rounded-lg overflow-hidden">
|
||||
<YMaps>
|
||||
<Map
|
||||
defaultState={{ center: [Number(lat), Number(long)], zoom: 16 }}
|
||||
width="100%"
|
||||
height="300px"
|
||||
onClick={handleMapClick}
|
||||
>
|
||||
<Placemark geometry={[Number(lat), Number(long)]} />
|
||||
<Circle
|
||||
geometry={[[Number(lat), Number(long)], 100]}
|
||||
options={{
|
||||
fillColor: "rgba(0,150,255,0.2)",
|
||||
strokeColor: "rgba(0,150,255,0.8)",
|
||||
strokeWidth: 2,
|
||||
interactivityModel: "default#transparent",
|
||||
}}
|
||||
/>
|
||||
</Map>
|
||||
</YMaps>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full h-12 bg-blue-500 hover:bg-blue-500 cursor-pointer"
|
||||
type="submit"
|
||||
>
|
||||
{load ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : initialValues ? (
|
||||
"Tahrirlash"
|
||||
) : (
|
||||
"Qo'shish"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddedDoctor;
|
||||
94
src/features/doctors/ui/DoctorDetailDialog.tsx
Normal file
94
src/features/doctors/ui/DoctorDetailDialog.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import type { DoctorListType } from "@/features/doctors/lib/data";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { Circle, Map, Placemark, YMaps } from "@pbe/react-yandex-maps";
|
||||
|
||||
interface Props {
|
||||
detail: boolean;
|
||||
setDetail: (open: boolean) => void;
|
||||
object: DoctorListType | null;
|
||||
}
|
||||
|
||||
const DoctorDetailDialog = ({ detail, setDetail, object }: Props) => {
|
||||
if (!object) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={detail} onOpenChange={setDetail}>
|
||||
<DialogContent className="max-w-lg w-full">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Shifokor tafsilotlari</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3 mt-2">
|
||||
<p>
|
||||
<span className="font-semibold">Ism Familiya:</span>{" "}
|
||||
{object.first_name} {object.last_name}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Telefon:</span>{" "}
|
||||
{formatPhone(object.phone_number)}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Ish joyi:</span> {object.work}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Mutaxassislik:</span> {object.spec}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Tavsif:</span> {object.desc}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Tuman:</span> {object.district.name}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Foydalanuvchi:</span>{" "}
|
||||
{object.user.firstName} {object.user.lastName}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Obyekt:</span> {object.object.name}
|
||||
</p>
|
||||
<span className="font-semibold">Manzili:</span>
|
||||
<div className="h-[300px] w-full border rounded-lg overflow-hidden">
|
||||
<YMaps>
|
||||
<Map
|
||||
defaultState={{
|
||||
center: [Number(object.lat), Number(object.long)],
|
||||
zoom: 16,
|
||||
}}
|
||||
width="100%"
|
||||
height="300px"
|
||||
>
|
||||
<Placemark
|
||||
geometry={[Number(object.lat), Number(object.long)]}
|
||||
/>
|
||||
<Circle
|
||||
geometry={[[Number(object.lat), Number(object.long)], 100]}
|
||||
options={{
|
||||
fillColor: "rgba(0, 150, 255, 0.2)",
|
||||
strokeColor: "rgba(0, 150, 255, 0.8)",
|
||||
strokeWidth: 2,
|
||||
}}
|
||||
/>
|
||||
</Map>
|
||||
</YMaps>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogClose asChild>
|
||||
<Button className="mt-4 w-full bg-blue-600 cursor-pointer hover:bg-blue-600">
|
||||
Yopish
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default DoctorDetailDialog;
|
||||
292
src/features/doctors/ui/DoctorsList.tsx
Normal file
292
src/features/doctors/ui/DoctorsList.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
import {
|
||||
doctorListData,
|
||||
type DoctorListType,
|
||||
} from "@/features/doctors/lib/data";
|
||||
import AddedDoctor from "@/features/doctors/ui/AddedDoctor";
|
||||
import DoctorDetailDialog from "@/features/doctors/ui/DoctorDetailDialog";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
Pencil,
|
||||
Plus,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
const DoctorsList = () => {
|
||||
const [data, setData] = useState<DoctorListType[]>(doctorListData);
|
||||
const [detail, setDetail] = useState<DoctorListType | null>(null);
|
||||
const [detailDialog, setDetailDialog] = useState<boolean>(false);
|
||||
const [editingPlan, setEditingPlan] = useState<DoctorListType | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const totalPages = 5;
|
||||
|
||||
// Filter states
|
||||
const [searchName, setSearchName] = useState("");
|
||||
const [searchDistrict, setSearchDistrict] = useState("");
|
||||
const [searchObject, setSearchObject] = useState("");
|
||||
const [searchWork, setSearchWork] = useState("");
|
||||
const [searchSpec, setSearchSpec] = useState("");
|
||||
const [searchUser, setSearchUser] = useState("");
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
setData((prev) => prev.filter((e) => e.id !== id));
|
||||
};
|
||||
|
||||
// Filtered data
|
||||
const filteredData = useMemo(() => {
|
||||
return data.filter((item) => {
|
||||
const nameMatch = `${item.first_name} ${item.last_name}`
|
||||
.toLowerCase()
|
||||
.includes(searchName.toLowerCase());
|
||||
const districtMatch = item.district.name
|
||||
.toLowerCase()
|
||||
.includes(searchDistrict.toLowerCase());
|
||||
const objectMatch = item.object.name
|
||||
.toLowerCase()
|
||||
.includes(searchObject.toLowerCase());
|
||||
const workMatch = item.work
|
||||
.toLowerCase()
|
||||
.includes(searchWork.toLowerCase());
|
||||
const specMatch = item.spec
|
||||
.toLowerCase()
|
||||
.includes(searchSpec.toLowerCase());
|
||||
const userMatch = `${item.user.firstName} ${item.user.lastName}`
|
||||
.toLowerCase()
|
||||
.includes(searchUser.toLowerCase());
|
||||
|
||||
return (
|
||||
nameMatch &&
|
||||
districtMatch &&
|
||||
objectMatch &&
|
||||
workMatch &&
|
||||
specMatch &&
|
||||
userMatch
|
||||
);
|
||||
});
|
||||
}, [
|
||||
data,
|
||||
searchName,
|
||||
searchDistrict,
|
||||
searchObject,
|
||||
searchWork,
|
||||
searchSpec,
|
||||
searchUser,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full p-10 w-full">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
<h1 className="text-2xl font-bold">Shifokorlarni boshqarish</h1>
|
||||
|
||||
<div className="flex justify-end gap-2 w-full">
|
||||
<Input
|
||||
placeholder="Shifokor Ism Familiyasi"
|
||||
value={searchName}
|
||||
onChange={(e) => setSearchName(e.target.value)}
|
||||
className="w-full md:w-48"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Tuman"
|
||||
value={searchDistrict}
|
||||
onChange={(e) => setSearchDistrict(e.target.value)}
|
||||
className="w-full md:w-48"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Obyekt"
|
||||
value={searchObject}
|
||||
onChange={(e) => setSearchObject(e.target.value)}
|
||||
className="w-full md:w-48"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Ish joyi"
|
||||
value={searchWork}
|
||||
onChange={(e) => setSearchWork(e.target.value)}
|
||||
className="w-full md:w-48"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Sohasi"
|
||||
value={searchSpec}
|
||||
onChange={(e) => setSearchSpec(e.target.value)}
|
||||
className="w-full md:w-48"
|
||||
/>
|
||||
<Input
|
||||
placeholder="Kim qo'shgan"
|
||||
value={searchUser}
|
||||
onChange={(e) => setSearchUser(e.target.value)}
|
||||
className="w-full md:w-48"
|
||||
/>
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="default"
|
||||
className="bg-blue-500 cursor-pointer hover:bg-blue-500"
|
||||
onClick={() => setEditingPlan(null)}
|
||||
>
|
||||
<Plus className="!h-5 !w-5" /> Qo'shish
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-lg max-h-[80vh] overflow-x-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl">
|
||||
{editingPlan
|
||||
? "Shifokor tahrirlash"
|
||||
: "Yangi shifokor qo'shish"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<AddedDoctor
|
||||
initialValues={editingPlan}
|
||||
setDialogOpen={setDialogOpen}
|
||||
setData={setData}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DoctorDetailDialog
|
||||
detail={detailDialog}
|
||||
setDetail={setDetailDialog}
|
||||
object={detail}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>#</TableHead>
|
||||
<TableHead>Shifokor Ism Familiyasi</TableHead>
|
||||
<TableHead>Telefon raqami</TableHead>
|
||||
<TableHead>Tuman</TableHead>
|
||||
<TableHead>Obyekt</TableHead>
|
||||
<TableHead>Ish joyi</TableHead>
|
||||
<TableHead>Sohasi</TableHead>
|
||||
<TableHead>Kim qo'shgan</TableHead>
|
||||
<TableHead className="text-right">Amallar</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredData.map((item, index) => (
|
||||
<TableRow key={item.id}>
|
||||
<TableCell>{index + 1}</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{item.first_name} {item.last_name}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{formatPhone(item.phone_number)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">{item.district.name}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>{item.object.name}</TableCell>
|
||||
<TableCell>{item.work}</TableCell>
|
||||
<TableCell>{item.spec}</TableCell>
|
||||
<TableCell>
|
||||
{item.user.firstName} {item.user.lastName}
|
||||
</TableCell>
|
||||
<TableCell className="text-right flex gap-2 justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => {
|
||||
setDetail(item);
|
||||
setDetailDialog(true);
|
||||
}}
|
||||
className="bg-green-600 text-white cursor-pointer hover:bg-green-600 hover:text-white"
|
||||
>
|
||||
<Eye size={18} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="bg-blue-600 text-white cursor-pointer hover:bg-blue-600 hover:text-white"
|
||||
onClick={() => {
|
||||
setEditingPlan(item);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Pencil size={18} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleDelete(item.id)}
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={currentPage === 1}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
>
|
||||
<ChevronLeft />
|
||||
</Button>
|
||||
{Array.from({ length: totalPages }, (_, i) => (
|
||||
<Button
|
||||
key={i}
|
||||
variant={currentPage === i + 1 ? "default" : "outline"}
|
||||
size="icon"
|
||||
className={clsx(
|
||||
currentPage === i + 1
|
||||
? "bg-blue-500 hover:bg-blue-500"
|
||||
: " bg-none hover:bg-blue-200",
|
||||
"cursor-pointer",
|
||||
)}
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<ChevronRight />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DoctorsList;
|
||||
Reference in New Issue
Block a user