doctor list
This commit is contained in:
@@ -44,7 +44,6 @@ const AuthLogin = () => {
|
||||
navigate("dashboard");
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
console.log(err);
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
|
||||
|
||||
@@ -40,7 +40,6 @@ const DeleteDiscrit = ({
|
||||
setDiscritDelete(null);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
console.log(err);
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
toast.error(messageText || "Xatolik yuz berdi", {
|
||||
|
||||
20
src/features/doctors/lib/api.ts
Normal file
20
src/features/doctors/lib/api.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { DoctorListRes } from "@/features/doctors/lib/data";
|
||||
import httpClient from "@/shared/config/api/httpClient";
|
||||
import { DOCTOR } from "@/shared/config/api/URLs";
|
||||
import type { AxiosResponse } from "axios";
|
||||
|
||||
export const doctor_api = {
|
||||
async list(params: {
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
full_name?: string;
|
||||
district_name?: string;
|
||||
place_name?: string;
|
||||
work_place?: string;
|
||||
sphere?: string;
|
||||
user?: string;
|
||||
}): Promise<AxiosResponse<DoctorListRes>> {
|
||||
const res = await httpClient.get(`${DOCTOR}list/`, { params });
|
||||
return res;
|
||||
},
|
||||
};
|
||||
@@ -50,3 +50,45 @@ export const doctorListData: DoctorListType[] = [
|
||||
long: ObjectListData[1].long,
|
||||
},
|
||||
];
|
||||
|
||||
export interface DoctorListRes {
|
||||
status_code: number;
|
||||
status: string;
|
||||
message: string;
|
||||
data: {
|
||||
count: number;
|
||||
next: string;
|
||||
previous: string;
|
||||
results: DoctorListResData[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface DoctorListResData {
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone_number: string;
|
||||
work_place: string;
|
||||
sphere: string;
|
||||
description: string;
|
||||
district: {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
place: {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
user: {
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
};
|
||||
longitude: number;
|
||||
latitude: number;
|
||||
extra_location: {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
};
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
@@ -32,10 +32,9 @@ 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 AddedDoctor = ({ initialValues, setDialogOpen }: Props) => {
|
||||
const [load, setLoad] = useState<boolean>(false);
|
||||
const form = useForm<z.infer<typeof DoctorForm>>({
|
||||
resolver: zodResolver(DoctorForm),
|
||||
@@ -65,34 +64,8 @@ const AddedDoctor = ({ initialValues, setData, setDialogOpen }: Props) => {
|
||||
|
||||
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);
|
||||
console.log(values);
|
||||
setDialogOpen(false);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { DoctorListType } from "@/features/doctors/lib/data";
|
||||
import type { DoctorListResData } from "@/features/doctors/lib/data";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
@@ -8,15 +8,88 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { Circle, Map, Placemark, YMaps } from "@pbe/react-yandex-maps";
|
||||
import {
|
||||
Circle,
|
||||
Map,
|
||||
Placemark,
|
||||
Polygon,
|
||||
YMaps,
|
||||
ZoomControl,
|
||||
} from "@pbe/react-yandex-maps";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface CoordsData {
|
||||
lat: number;
|
||||
lon: number;
|
||||
polygon: [number, number][][];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
detail: boolean;
|
||||
setDetail: (open: boolean) => void;
|
||||
object: DoctorListType | null;
|
||||
object: DoctorListResData | null;
|
||||
}
|
||||
|
||||
const DoctorDetailDialog = ({ detail, setDetail, object }: Props) => {
|
||||
const [coords, setCoords] = useState<[number, number]>([
|
||||
41.311081, 69.240562,
|
||||
]);
|
||||
|
||||
const [polygonCoords, setPolygonCoords] = useState<[number, number][][]>([]);
|
||||
|
||||
const [circleCoords] = useState<[number, number] | null>(null);
|
||||
|
||||
const getCoords = async (name: string): Promise<CoordsData | null> => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(
|
||||
name,
|
||||
)}&format=json&polygon_geojson=1&limit=1`,
|
||||
);
|
||||
const data = await res.json();
|
||||
|
||||
if (!data.length || !data[0].geojson) return null;
|
||||
|
||||
const lat = parseFloat(data[0].lat);
|
||||
const lon = parseFloat(data[0].lon);
|
||||
|
||||
let polygon: [number, number][][] = [];
|
||||
|
||||
if (data[0].geojson.type === "Polygon") {
|
||||
polygon = data[0].geojson.coordinates.map((ring: []) =>
|
||||
ring.map((c) => [c[1], c[0]]),
|
||||
);
|
||||
}
|
||||
|
||||
if (data[0].geojson.type === "MultiPolygon") {
|
||||
polygon = data[0].geojson.coordinates[0].map((ring: []) =>
|
||||
ring.map((c) => [c[1], c[0]]),
|
||||
);
|
||||
}
|
||||
|
||||
return { lat, lon, polygon };
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!object) return;
|
||||
|
||||
const load = async () => {
|
||||
const district = await getCoords(object.district.name);
|
||||
|
||||
if (district) {
|
||||
setPolygonCoords(district.polygon);
|
||||
}
|
||||
|
||||
setCoords([object.latitude, object.longitude]);
|
||||
// setCircleCoords([object.latitude, object.longitude]);
|
||||
};
|
||||
|
||||
load();
|
||||
}, [object]);
|
||||
|
||||
if (!object) return null;
|
||||
|
||||
return (
|
||||
@@ -28,61 +101,77 @@ const DoctorDetailDialog = ({ detail, setDetail, object }: Props) => {
|
||||
|
||||
<div className="space-y-3 mt-2">
|
||||
<p>
|
||||
<span className="font-semibold">Ism Familiya:</span>{" "}
|
||||
{object.first_name} {object.last_name}
|
||||
<span className="font-semibold">Ism:</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}
|
||||
<span className="font-semibold">Ish joyi:</span> {object.work_place}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Mutaxassislik:</span> {object.spec}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-semibold">Tavsif:</span> {object.desc}
|
||||
<span className="font-semibold">Mutaxassislik:</span>{" "}
|
||||
{object.sphere}
|
||||
</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>
|
||||
</p>
|
||||
|
||||
{/* 🗺 MAP */}
|
||||
<div className="h-[300px] w-full border rounded-lg overflow-hidden">
|
||||
<YMaps>
|
||||
<YMaps query={{ lang: "en_RU" }}>
|
||||
<Map
|
||||
defaultState={{
|
||||
center: [Number(object.lat), Number(object.long)],
|
||||
zoom: 16,
|
||||
state={{
|
||||
center: coords,
|
||||
zoom: 12,
|
||||
}}
|
||||
width="100%"
|
||||
height="300px"
|
||||
height="100%"
|
||||
>
|
||||
<Placemark
|
||||
geometry={[Number(object.lat), Number(object.long)]}
|
||||
<ZoomControl
|
||||
options={{
|
||||
position: { right: "10px", bottom: "70px" },
|
||||
}}
|
||||
/>
|
||||
<Circle
|
||||
geometry={[[Number(object.lat), Number(object.long)], 100]}
|
||||
|
||||
{/* Ish joyining markazi */}
|
||||
<Placemark geometry={coords} />
|
||||
|
||||
{/* Tuman polygon */}
|
||||
{polygonCoords.length > 0 && (
|
||||
<Polygon
|
||||
geometry={polygonCoords}
|
||||
options={{
|
||||
fillColor: "rgba(0, 150, 255, 0.2)",
|
||||
strokeColor: "rgba(0, 150, 255, 0.8)",
|
||||
strokeWidth: 2,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Radius circle (ish joyi atrofida) */}
|
||||
{circleCoords && (
|
||||
<Circle
|
||||
geometry={[circleCoords, 500]}
|
||||
options={{
|
||||
fillColor: "rgba(255, 100, 0, 0.3)",
|
||||
strokeColor: "rgba(255, 100, 0, 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">
|
||||
<Button className="mt-4 w-full bg-blue-600 hover:bg-blue-600">
|
||||
Yopish
|
||||
</Button>
|
||||
</DialogClose>
|
||||
|
||||
@@ -1,49 +1,22 @@
|
||||
import { doctor_api } from "@/features/doctors/lib/api";
|
||||
import {
|
||||
doctorListData,
|
||||
type DoctorListResData,
|
||||
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";
|
||||
import FilterDoctor from "@/features/doctors/ui/FilterDoctor";
|
||||
import PaginationDoctor from "@/features/doctors/ui/PaginationDoctor";
|
||||
import TableDoctor from "@/features/doctors/ui/TableDoctor";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
|
||||
const DoctorsList = () => {
|
||||
const [data, setData] = useState<DoctorListType[]>(doctorListData);
|
||||
const [detail, setDetail] = useState<DoctorListType | null>(null);
|
||||
const [detail, setDetail] = useState<DoctorListResData | 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("");
|
||||
@@ -51,50 +24,44 @@ const DoctorsList = () => {
|
||||
const [searchSpec, setSearchSpec] = useState("");
|
||||
const [searchUser, setSearchUser] = useState("");
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
setData((prev) => prev.filter((e) => e.id !== id));
|
||||
};
|
||||
const limit = 20;
|
||||
|
||||
// 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,
|
||||
const {
|
||||
data: doctor,
|
||||
isError,
|
||||
isLoading,
|
||||
isFetching,
|
||||
} = useQuery({
|
||||
queryKey: [
|
||||
"doctor_list",
|
||||
currentPage,
|
||||
searchDistrict,
|
||||
searchName,
|
||||
searchObject,
|
||||
searchWork,
|
||||
searchSpec,
|
||||
searchUser,
|
||||
]);
|
||||
],
|
||||
queryFn: () =>
|
||||
doctor_api.list({
|
||||
limit,
|
||||
offset: (currentPage - 1) * limit,
|
||||
district_name: searchDistrict,
|
||||
full_name: searchName,
|
||||
place_name: searchObject,
|
||||
work_place: searchWork,
|
||||
sphere: searchSpec,
|
||||
user: searchUser,
|
||||
}),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
// const handleDelete = (id: number) => {
|
||||
// };
|
||||
|
||||
const totalPages = doctor ? Math.ceil(doctor.count / limit) : 1;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full p-10 w-full">
|
||||
@@ -103,69 +70,25 @@ const DoctorsList = () => {
|
||||
<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}
|
||||
<FilterDoctor
|
||||
dialogOpen={dialogOpen}
|
||||
editingPlan={editingPlan}
|
||||
searchDistrict={searchDistrict}
|
||||
searchName={searchName}
|
||||
searchObject={searchObject}
|
||||
searchSpec={searchSpec}
|
||||
searchUser={searchUser}
|
||||
searchWork={searchWork}
|
||||
// setData={setData}
|
||||
setDialogOpen={setDialogOpen}
|
||||
setData={setData}
|
||||
setEditingPlan={setEditingPlan}
|
||||
setSearchDistrict={setSearchDistrict}
|
||||
setSearchName={setSearchName}
|
||||
setSearchObject={setSearchObject}
|
||||
setSearchSpec={setSearchSpec}
|
||||
setSearchUser={setSearchUser}
|
||||
setSearchWork={setSearchWork}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DoctorDetailDialog
|
||||
@@ -175,116 +98,20 @@ const DoctorsList = () => {
|
||||
/>
|
||||
</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>
|
||||
<TableDoctor
|
||||
isError={isError}
|
||||
isLoading={isLoading}
|
||||
doctor={doctor ? doctor.results : []}
|
||||
setDetail={setDetail}
|
||||
isFetching={isFetching}
|
||||
setDetailDialog={setDetailDialog}
|
||||
/>
|
||||
|
||||
<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>
|
||||
<PaginationDoctor
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
totalPages={totalPages}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
116
src/features/doctors/ui/FilterDoctor.tsx
Normal file
116
src/features/doctors/ui/FilterDoctor.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import type { DoctorListType } from "@/features/doctors/lib/data";
|
||||
import AddedDoctor from "@/features/doctors/ui/AddedDoctor";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Plus } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
|
||||
interface Props {
|
||||
searchName: string;
|
||||
setSearchName: Dispatch<SetStateAction<string>>;
|
||||
searchDistrict: string;
|
||||
setSearchDistrict: Dispatch<SetStateAction<string>>;
|
||||
searchWork: string;
|
||||
setSearchWork: Dispatch<SetStateAction<string>>;
|
||||
searchSpec: string;
|
||||
setSearchSpec: Dispatch<SetStateAction<string>>;
|
||||
searchUser: string;
|
||||
setSearchUser: Dispatch<SetStateAction<string>>;
|
||||
dialogOpen: boolean;
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
searchObject: string;
|
||||
setSearchObject: Dispatch<SetStateAction<string>>;
|
||||
setEditingPlan: Dispatch<SetStateAction<DoctorListType | null>>;
|
||||
editingPlan: DoctorListType | null;
|
||||
}
|
||||
|
||||
const FilterDoctor = ({
|
||||
searchName,
|
||||
setSearchName,
|
||||
searchDistrict,
|
||||
setSearchDistrict,
|
||||
searchObject,
|
||||
setSearchObject,
|
||||
searchWork,
|
||||
setSearchWork,
|
||||
searchSpec,
|
||||
setSearchSpec,
|
||||
searchUser,
|
||||
setSearchUser,
|
||||
dialogOpen,
|
||||
setDialogOpen,
|
||||
setEditingPlan,
|
||||
editingPlan,
|
||||
}: Props) => {
|
||||
return (
|
||||
<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}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FilterDoctor;
|
||||
57
src/features/doctors/ui/PaginationDoctor.tsx
Normal file
57
src/features/doctors/ui/PaginationDoctor.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import clsx from "clsx";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
|
||||
interface Props {
|
||||
currentPage: number;
|
||||
setCurrentPage: Dispatch<SetStateAction<number>>;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
const PaginationDoctor = ({
|
||||
currentPage,
|
||||
setCurrentPage,
|
||||
totalPages,
|
||||
}: Props) => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaginationDoctor;
|
||||
134
src/features/doctors/ui/TableDoctor.tsx
Normal file
134
src/features/doctors/ui/TableDoctor.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import type { DoctorListResData } from "@/features/doctors/lib/data";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import { Eye, Loader2, Pencil, Trash2 } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
|
||||
interface Props {
|
||||
setDetail: Dispatch<SetStateAction<DoctorListResData | null>>;
|
||||
setDetailDialog: Dispatch<SetStateAction<boolean>>;
|
||||
doctor: DoctorListResData[] | [];
|
||||
isLoading: boolean;
|
||||
isError: boolean;
|
||||
isFetching: boolean;
|
||||
}
|
||||
|
||||
const TableDoctor = ({
|
||||
doctor,
|
||||
setDetail,
|
||||
setDetailDialog,
|
||||
isError,
|
||||
isLoading,
|
||||
isFetching,
|
||||
}: Props) => {
|
||||
return (
|
||||
<div className="flex-1 overflow-auto">
|
||||
{(isLoading || isFetching) && (
|
||||
<div className="h-full flex items-center justify-center bg-white/70 z-10">
|
||||
<span className="text-lg font-medium">
|
||||
<Loader2 className="animate-spin" />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isError && (
|
||||
<div className="h-full flex items-center justify-center z-10">
|
||||
<span className="text-lg font-medium text-red-600">
|
||||
Ma'lumotlarni olishda xatolik yuz berdi.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && (
|
||||
<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>
|
||||
{doctor.length > 0 ? (
|
||||
doctor.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.place.name}</TableCell>
|
||||
<TableCell>{item.work_place}</TableCell>
|
||||
<TableCell>{item.sphere}</TableCell>
|
||||
<TableCell>
|
||||
{item.user.first_name} {item.user.last_name}
|
||||
</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>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={9} className="text-center py-4 text-lg">
|
||||
Shifokor topilmadi.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableDoctor;
|
||||
@@ -11,4 +11,19 @@ export const region_api = {
|
||||
}): Promise<AxiosResponse<RegionListRes>> {
|
||||
return await httpClient.get(`${REGIONS}list/`, { params });
|
||||
},
|
||||
|
||||
async create(body: { name: string }) {
|
||||
const res = await httpClient.post(`${REGIONS}create/`, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async update({ body, id }: { id: number; body: { name: string } }) {
|
||||
const res = await httpClient.patch(`${REGIONS}${id}/update/`, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async delete(id: number) {
|
||||
const res = await httpClient.delete(`${REGIONS}${id}/delete/`);
|
||||
return res;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { region_api } from "@/features/region/lib/api";
|
||||
import type { RegionType } from "@/features/region/lib/data";
|
||||
import { regionForm } from "@/features/region/lib/form";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
@@ -11,42 +12,69 @@ import {
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Label } from "@/shared/ui/label";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useState, type Dispatch, type SetStateAction } from "react";
|
||||
import { type Dispatch, type SetStateAction } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import type z from "zod";
|
||||
|
||||
interface Props {
|
||||
initialValues: RegionType | null;
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setPlans: Dispatch<SetStateAction<RegionType[]>>;
|
||||
}
|
||||
|
||||
const AddedRegion = ({ initialValues, setDialogOpen, setPlans }: Props) => {
|
||||
const [load, setLoad] = useState<boolean>(false);
|
||||
const AddedRegion = ({ initialValues, setDialogOpen }: Props) => {
|
||||
const form = useForm<z.infer<typeof regionForm>>({
|
||||
resolver: zodResolver(regionForm),
|
||||
defaultValues: { name: initialValues?.name || "" },
|
||||
});
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: { name: string }) => region_api.create(body),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["region_list"] });
|
||||
toast.success(`Yangi hudud qo'shildi`);
|
||||
setDialogOpen(false);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
toast.error(messageText || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: edit, isPending: editPending } = useMutation({
|
||||
mutationFn: ({ body, id }: { id: number; body: { name: string } }) =>
|
||||
region_api.update({ body, id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["region_list"] });
|
||||
toast.success(`Yangi hudud qo'shildi`);
|
||||
setDialogOpen(false);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
toast.error(messageText || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(value: z.infer<typeof regionForm>) {
|
||||
setLoad(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setPlans((prev) => {
|
||||
if (initialValues) {
|
||||
return prev.map((item) =>
|
||||
item.id === initialValues.id ? { ...item, ...value } : item,
|
||||
);
|
||||
}
|
||||
return [
|
||||
...prev,
|
||||
{ id: prev.length ? prev[prev.length - 1].id + 1 : 1, ...value },
|
||||
];
|
||||
edit({ id: initialValues.id, body: { name: value.name } });
|
||||
} else {
|
||||
mutate({
|
||||
name: value.name,
|
||||
});
|
||||
setLoad(false);
|
||||
setDialogOpen(false);
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -66,8 +94,11 @@ const AddedRegion = ({ initialValues, setDialogOpen, setPlans }: Props) => {
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button className="w-full bg-blue-500 cursor-pointer hover:bg-blue-500">
|
||||
{load ? (
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-blue-500 cursor-pointer hover:bg-blue-500"
|
||||
>
|
||||
{isPending || editPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : initialValues ? (
|
||||
"Tahrirlash"
|
||||
|
||||
88
src/features/region/ui/DeleteRegion.tsx
Normal file
88
src/features/region/ui/DeleteRegion.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
import { region_api } from "@/features/region/lib/api";
|
||||
import type { RegionListResData } from "@/features/region/lib/data";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import { Loader2, Trash, X } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Props {
|
||||
opneDelete: boolean;
|
||||
setOpenDelete: Dispatch<SetStateAction<boolean>>;
|
||||
setRegionDelete: Dispatch<SetStateAction<RegionListResData | null>>;
|
||||
regionDelete: RegionListResData | null;
|
||||
}
|
||||
|
||||
const DeleteRegion = ({
|
||||
opneDelete,
|
||||
setOpenDelete,
|
||||
setRegionDelete,
|
||||
regionDelete,
|
||||
}: Props) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate: deleteRegion, isPending } = useMutation({
|
||||
mutationFn: (id: number) => region_api.delete(id),
|
||||
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["region_list"] });
|
||||
toast.success(`Foydalanuvchi o'chirildi`);
|
||||
setOpenDelete(false);
|
||||
setRegionDelete(null);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
toast.error(messageText || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Dialog open={opneDelete} onOpenChange={setOpenDelete}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Foydalanuvchini o'chrish</DialogTitle>
|
||||
<DialogDescription className="text-md font-semibold">
|
||||
Siz rostan ham {regionDelete?.name} hududini o'chimoqchimiszi
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
className="bg-blue-600 cursor-pointer hover:bg-blue-600"
|
||||
onClick={() => setOpenDelete(false)}
|
||||
>
|
||||
<X />
|
||||
Bekor qilish
|
||||
</Button>
|
||||
<Button
|
||||
variant={"destructive"}
|
||||
onClick={() => regionDelete && deleteRegion(regionDelete.id)}
|
||||
>
|
||||
{isPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
<Trash />
|
||||
O'chirish
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteRegion;
|
||||
@@ -1,5 +1,8 @@
|
||||
import { fakeRegionList, type RegionType } from "@/features/region/lib/data";
|
||||
import { region_api } from "@/features/region/lib/api";
|
||||
import { type RegionListResData } from "@/features/region/lib/data";
|
||||
import AddedRegion from "@/features/region/ui/AddedRegion";
|
||||
import DeleteRegion from "@/features/region/ui/DeleteRegion";
|
||||
import RegionTable from "@/features/region/ui/RegionTable";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -8,28 +11,33 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import clsx from "clsx";
|
||||
import { ChevronLeft, ChevronRight, Edit, Plus, Trash } from "lucide-react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
import { Plus } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
const RegionList = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const totalPages = 5;
|
||||
const [plans, setPlans] = useState<RegionType[]>(fakeRegionList);
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["region_list"],
|
||||
queryFn: () => region_api.list({}),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
|
||||
const [editingPlan, setEditingPlan] = useState<RegionType | null>(null);
|
||||
const [regionDelete, setRegionDelete] = useState<RegionListResData | null>(
|
||||
null,
|
||||
);
|
||||
const [opneDelete, setOpenDelete] = useState<boolean>(false);
|
||||
|
||||
const [editingPlan, setEditingPlan] = useState<RegionListResData | null>(
|
||||
null,
|
||||
);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
setPlans(plans.filter((p) => p.id !== id));
|
||||
const handleDelete = (user: RegionListResData) => {
|
||||
setRegionDelete(user);
|
||||
setOpenDelete(true);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -58,91 +66,27 @@ const RegionList = () => {
|
||||
<AddedRegion
|
||||
initialValues={editingPlan}
|
||||
setDialogOpen={setDialogOpen}
|
||||
setPlans={setPlans}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="text-center">
|
||||
<TableHead className="text-start">ID</TableHead>
|
||||
<TableHead className="text-start">Nomi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{plans.map((plan) => (
|
||||
<TableRow key={plan.id} className="text-start">
|
||||
<TableCell>{plan.id}</TableCell>
|
||||
<TableCell>{plan.name}</TableCell>
|
||||
<TableCell className="flex gap-2 justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
|
||||
onClick={() => {
|
||||
setEditingPlan(plan);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleDelete(plan.id)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</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",
|
||||
{data && (
|
||||
<RegionTable
|
||||
region={data!}
|
||||
handleDelete={handleDelete}
|
||||
isError={isError}
|
||||
setDialogOpen={setDialogOpen}
|
||||
isLoading={isLoading}
|
||||
setEditingRegion={setEditingPlan}
|
||||
/>
|
||||
)}
|
||||
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>
|
||||
<DeleteRegion
|
||||
opneDelete={opneDelete}
|
||||
regionDelete={regionDelete}
|
||||
setOpenDelete={setOpenDelete}
|
||||
setRegionDelete={setRegionDelete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
89
src/features/region/ui/RegionTable.tsx
Normal file
89
src/features/region/ui/RegionTable.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import type { RegionListResData } from "@/features/region/lib/data";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import { Edit, Loader2, Trash } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
|
||||
const RegionTable = ({
|
||||
region,
|
||||
handleDelete,
|
||||
isLoading,
|
||||
isError,
|
||||
setEditingRegion,
|
||||
setDialogOpen,
|
||||
}: {
|
||||
region: RegionListResData[];
|
||||
isLoading: boolean;
|
||||
isError: boolean;
|
||||
setEditingRegion: Dispatch<SetStateAction<RegionListResData | null>>;
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
handleDelete: (user: RegionListResData) => void;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex-1 overflow-auto">
|
||||
{isLoading && (
|
||||
<div className="h-full flex items-center justify-center bg-white/70 z-10">
|
||||
<span className="text-lg font-medium">
|
||||
<Loader2 className="animate-spin" />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isError && (
|
||||
<div className="h-full flex items-center justify-center z-10">
|
||||
<span className="text-lg font-medium text-red-600">
|
||||
Ma'lumotlarni olishda xatolik yuz berdi.
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && !isError && (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="text-center">
|
||||
<TableHead className="text-start">ID</TableHead>
|
||||
<TableHead className="text-start">Nomi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{region.map((plan, index) => (
|
||||
<TableRow key={plan.id} className="text-start">
|
||||
<TableCell>{index + 1}</TableCell>
|
||||
<TableCell>{plan.name}</TableCell>
|
||||
<TableCell className="flex gap-2 justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
|
||||
onClick={() => {
|
||||
setEditingRegion(plan);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleDelete(plan)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegionTable;
|
||||
@@ -1,3 +1,4 @@
|
||||
import { region_api } from "@/features/region/lib/api";
|
||||
import { user_api } from "@/features/users/lib/api";
|
||||
import type {
|
||||
UserCreateReq,
|
||||
@@ -23,7 +24,7 @@ import {
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useForm } from "react-hook-form";
|
||||
@@ -103,6 +104,12 @@ const AddUsers = ({ initialData, setDialogOpen }: UserFormProps) => {
|
||||
}
|
||||
}
|
||||
|
||||
const { data: regions } = useQuery({
|
||||
queryKey: ["region_list"],
|
||||
queryFn: () => region_api.list({}),
|
||||
select: (res) => res.data.data,
|
||||
});
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
@@ -154,9 +161,12 @@ const AddUsers = ({ initialData, setDialogOpen }: UserFormProps) => {
|
||||
<SelectValue placeholder="Hududni tanlang" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">Toshkent</SelectItem>
|
||||
<SelectItem value="2">Samarqand</SelectItem>
|
||||
<SelectItem value="3">Bekobod</SelectItem>
|
||||
{regions &&
|
||||
regions.map((item) => (
|
||||
<SelectItem value={`${item.id}`}>
|
||||
{item.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
@@ -101,7 +101,7 @@ const Filter = ({
|
||||
role="combobox"
|
||||
aria-expanded={openRegion}
|
||||
className={cn(
|
||||
"w-64 h-12 justify-between",
|
||||
"w-64 justify-between",
|
||||
!regionValue && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -67,7 +67,7 @@ const AppRouter = () => {
|
||||
element: <Pill />,
|
||||
},
|
||||
{
|
||||
path: "/dashboard/pharm",
|
||||
path: "/dashboard/pharmaceuticals",
|
||||
element: <Pharm />,
|
||||
},
|
||||
{
|
||||
|
||||
@@ -6,5 +6,6 @@ const USER = "/api/v1/admin/user/";
|
||||
const REGION = "/api/v1/admin/district/";
|
||||
const REGIONS = "/api/v1/admin/region/";
|
||||
const DISTRICT = "/api/v1/admin/district/";
|
||||
const DOCTOR = "/api/v1/admin/doctor/";
|
||||
|
||||
export { BASE_URL, DISTRICT, LOGIN, REGION, REGIONS, USER };
|
||||
export { BASE_URL, DISTRICT, DOCTOR, LOGIN, REGION, REGIONS, USER };
|
||||
|
||||
@@ -93,7 +93,7 @@ const items = [
|
||||
},
|
||||
{
|
||||
title: "Farmasevtikalar",
|
||||
url: "/dashboard/pharm",
|
||||
url: "/dashboard/pharmaceuticals",
|
||||
icon: Microscope,
|
||||
},
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user