first commit

src/features/pharmacies/lib/data.ts

@@ -0,0 +1,82 @@
+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 PharmciesType {
+  id: number;
+  name: string;
+  inn: string;
+  phone_number: string;
+  additional_phone: string;
+  district: District;
+  user: User;
+  object: ObjectListType;
+  long: string;
+  lat: string;
+}
+
+export const PharmciesData: PharmciesType[] = [
+  {
+    id: 1,
+    name: "City Pharmacy",
+    inn: "123456789",
+    phone_number: "+998901234567",
+    additional_phone: "+998901112233",
+    district: fakeDistrict[0],
+    user: FakeUserList[0],
+    object: ObjectListData[0],
+    long: "69.2401",
+    lat: "41.2995",
+  },
+  {
+    id: 2,
+    name: "Central Pharmacy",
+    inn: "987654321",
+    phone_number: "+998902345678",
+    additional_phone: "+998903334455",
+    district: fakeDistrict[1],
+    user: FakeUserList[1],
+    object: ObjectListData[1],
+    long: "69.2305",
+    lat: "41.3102",
+  },
+  {
+    id: 3,
+    name: "Green Pharmacy",
+    inn: "112233445",
+    phone_number: "+998903456789",
+    additional_phone: "+998904445566",
+    district: fakeDistrict[2],
+    user: FakeUserList[2],
+    object: ObjectListData[1],
+    long: "69.2208",
+    lat: "41.305",
+  },
+  {
+    id: 4,
+    name: "HealthPlus Pharmacy",
+    inn: "556677889",
+    phone_number: "+998905678901",
+    additional_phone: "+998906667788",
+    district: fakeDistrict[0],
+    user: FakeUserList[1],
+    object: ObjectListData[1],
+    long: "69.235",
+    lat: "41.312",
+  },
+  {
+    id: 5,
+    name: "Optima Pharmacy",
+    inn: "998877665",
+    phone_number: "+998907890123",
+    additional_phone: "+998908889900",
+    district: fakeDistrict[1],
+    user: FakeUserList[0],
+    object: ObjectListData[0],
+    long: "69.245",
+    lat: "41.3",
+  },
+];

src/features/pharmacies/lib/form.ts

@@ -0,0 +1,13 @@
+import z from "zod";
+
+export const PharmForm = z.object({
+  name: z.string().min(1, { message: "Majburiy maydon" }),
+  inn: z.string().min(1, { message: "Majburiy maydon" }),
+  phone_number: z.string().min(1, { message: "Majburiy maydon" }),
+  additional_phone: 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" }),
+});

src/features/pharmacies/ui/AddedPharmacies.tsx

@@ -0,0 +1,277 @@
+import { fakeDistrict } from "@/features/districts/lib/data";
+import { ObjectListData } from "@/features/objects/lib/data";
+import type { PharmciesType } from "@/features/pharmacies/lib/data";
+import { PharmForm } from "@/features/pharmacies/lib/form";
+import { FakeUserList } from "@/features/users/lib/data";
+import formatPhone from "@/shared/lib/formatPhone";
+import onlyNumber from "@/shared/lib/onlyNumber";
+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 { 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: PharmciesType | null;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  setData: Dispatch<SetStateAction<PharmciesType[]>>;
+}
+
+const AddedPharmacies = ({ initialValues, setData, setDialogOpen }: Props) => {
+  const [load, setLoad] = useState<boolean>(false);
+  const form = useForm<z.infer<typeof PharmForm>>({
+    resolver: zodResolver(PharmForm),
+    defaultValues: {
+      additional_phone: initialValues?.additional_phone || "+998",
+      district: initialValues?.district.id.toString() || "",
+      inn: initialValues?.inn || "",
+      lat: initialValues?.lat || "41.2949",
+      long: initialValues?.long || "69.2361",
+      name: initialValues?.name || "",
+      object: initialValues?.object.id.toString() || "",
+      phone_number: initialValues?.phone_number || "+998",
+      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 PharmForm>) {
+    setLoad(true);
+    const newObject: PharmciesType = {
+      id: initialValues ? initialValues.id : Date.now(),
+      name: values.name,
+      lat: values.lat,
+      long: values.long,
+      user: FakeUserList.find((u) => u.id === Number(values.user))!,
+      district: fakeDistrict.find((d) => d.id === Number(values.district))!,
+      additional_phone: onlyNumber(values.additional_phone),
+      inn: values.inn,
+      object: ObjectListData.find((o) => o.id === Number(values.object))!,
+      phone_number: onlyNumber(values.phone_number),
+    };
+
+    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="name"
+          render={({ field }) => (
+            <FormItem>
+              <Label>Dorixona nomi</Label>
+              <FormControl>
+                <Input placeholder="Nomi" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="inn"
+          render={({ field }) => (
+            <FormItem>
+              <Label>Inn</Label>
+              <FormControl>
+                <Input placeholder="Inn" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="phone_number"
+          render={({ field }) => (
+            <FormItem>
+              <Label>Dorixonaning boshlig'ini raqami</Label>
+              <FormControl>
+                <Input
+                  placeholder="+998 90 123-45-67"
+                  {...field}
+                  value={formatPhone(field.value)}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="additional_phone"
+          render={({ field }) => (
+            <FormItem>
+              <Label>Ma'sul shaxsning raqami</Label>
+              <FormControl>
+                <Input
+                  placeholder="+998 90 123-45-67"
+                  {...field}
+                  value={formatPhone(field.value)}
+                />
+              </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="Obyektlar" />
+                  </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 AddedPharmacies;

src/features/pharmacies/ui/PharmDetailDialog.tsx

@@ -0,0 +1,109 @@
+import type { PharmciesType } from "@/features/pharmacies/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";
+import { useEffect, useState } from "react";
+
+interface Props {
+  detail: boolean;
+  setDetail: (value: boolean) => void;
+  object: PharmciesType | null;
+}
+
+const PharmDetailDialog = ({ detail, setDetail, object }: Props) => {
+  const [open, setOpen] = useState(detail);
+
+  useEffect(() => {
+    setOpen(detail);
+  }, [detail]);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(val) => {
+        setOpen(val);
+        setDetail(val);
+      }}
+    >
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Farmatsiya tafsilotlari</DialogTitle>
+        </DialogHeader>
+
+        {object ? (
+          <div className="space-y-2">
+            <div>
+              <strong>Nomi:</strong> {object.name}
+            </div>
+            <div>
+              <strong>INN:</strong> {object.inn}
+            </div>
+            <div>
+              <strong>Telefon:</strong> {formatPhone(object.phone_number)}
+            </div>
+            <div>
+              <strong>Qo‘shimcha telefon:</strong>{" "}
+              {formatPhone(object.additional_phone)}
+            </div>
+            <div>
+              <strong>Tuman:</strong> {object.district.name}
+            </div>
+            <div>
+              <strong>Obyekt:</strong> {object.object.name}
+            </div>
+            <div>
+              <strong>Kimga tegishli:</strong> {object.user.firstName}{" "}
+              {object.user.lastName}
+            </div>
+
+            <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>
+        ) : (
+          <div>Ma'lumot topilmadi</div>
+        )}
+        <div className="text-right">
+          <DialogClose asChild>
+            <Button
+              variant="outline"
+              className="w-full h-12 bg-blue-500 text-white cursor-pointer hover:bg-blue-500 hover:text-white"
+            >
+              Yopish
+            </Button>
+          </DialogClose>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PharmDetailDialog;

src/features/pharmacies/ui/PharmaciesList.tsx

@@ -0,0 +1,248 @@
+import {
+  PharmciesData,
+  type PharmciesType,
+} from "@/features/pharmacies/lib/data";
+import AddedPharmacies from "@/features/pharmacies/ui/AddedPharmacies";
+import PharmDetailDialog from "@/features/pharmacies/ui/PharmDetailDialog";
+import formatPhone from "@/shared/lib/formatPhone";
+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 PharmaciesList = () => {
+  const [data, setData] = useState<PharmciesType[]>(PharmciesData);
+  const [detail, setDetail] = useState<PharmciesType | null>(null);
+  const [detailDialog, setDetailDialog] = useState<boolean>(false);
+  const [editingPlan, setEditingPlan] = useState<PharmciesType | null>(null);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = 5;
+
+  const [searchName, setSearchName] = useState("");
+  const [searchDistrict, setSearchDistrict] = useState("");
+  const [searchObject, setSearchObject] = useState("");
+  const [searchUser, setSearchUser] = useState("");
+
+  const handleDelete = (id: number) => {
+    setData((prev) => prev.filter((e) => e.id !== id));
+  };
+
+  const filteredData = useMemo(() => {
+    return data.filter((item) => {
+      const nameMatch = `${item.name}`
+        .toLowerCase()
+        .includes(searchName.toLowerCase());
+      const districtMatch = item.district.name
+        .toLowerCase()
+        .includes(searchDistrict.toLowerCase());
+      const objectMatch = item.object.name
+        .toLowerCase()
+        .includes(searchObject.toLowerCase());
+      const userMatch = `${item.user.firstName} ${item.user.lastName}`
+        .toLowerCase()
+        .includes(searchUser.toLowerCase());
+
+      return nameMatch && districtMatch && objectMatch && userMatch;
+    });
+  }, [data, searchName, searchDistrict, searchObject, searchUser]);
+
+  return (
+    <div className="flex flex-col h-full p-10 w-full">
+      <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">Dorixonalrni boshqarish</h1>
+
+          <div className="flex justify-end gap-2 w-full">
+            <Input
+              placeholder="Dorixona nomi"
+              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="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
+                      ? "Dorixonani tahrirlash"
+                      : "Yangi dorixona qo'shish"}
+                  </DialogTitle>
+                </DialogHeader>
+                <AddedPharmacies
+                  initialValues={editingPlan}
+                  setDialogOpen={setDialogOpen}
+                  setData={setData}
+                />
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
+
+        <PharmDetailDialog
+          detail={detailDialog}
+          setDetail={setDetailDialog}
+          object={detail}
+        />
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>#</TableHead>
+              <TableHead>Dorixona nomi</TableHead>
+              <TableHead>Inn</TableHead>
+              <TableHead>Egasining nomeri</TableHead>
+              <TableHead>Ma'sul shaxsning nomeri</TableHead>
+              <TableHead>Tuman</TableHead>
+              <TableHead>Obyekt</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>{item.name}</TableCell>
+                <TableCell>{item.inn}</TableCell>
+                <TableCell>{formatPhone(item.phone_number)}</TableCell>
+                <TableCell>{formatPhone(item.additional_phone)}</TableCell>
+                <TableCell>{item.district.name}</TableCell>
+                <TableCell>{item.object.name}</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 PharmaciesList;