ui edit

src/features/district/lib/data-table.tsx

@@ -69,7 +69,7 @@ export function DataTableDistruct<TData, TValue>({
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                Tuman mavjud emas
               </TableCell>
             </TableRow>
           )}

src/features/district/ui/district.tsx

@@ -191,12 +191,8 @@ export default function District() {
 
   return (
     <DashboardLayout>
-      <div className="space-y-6">
+      <>
         <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold text-foreground">Tumanlar</h1>
-            <p className="text-muted-foreground mt-1">Tumanlarni boshqarish</p>
-          </div>
           <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
             <DialogTrigger asChild>
               <AddedButton onClick={() => form.reset({ name: "" })} />
@@ -260,7 +256,7 @@ export default function District() {
           </Dialog>
         </div>
 
-        <div className="space-y-6 mt-5">
+        <div className="space-y-6">
           <h1 className="text-3xl font-bold">Tumanlar ro‘yxati</h1>
 
           {/* Loading state */}
@@ -282,7 +278,7 @@ export default function District() {
             <p className="text-gray-500">Tumanlar mavjud emas</p>
           )}
         </div>
-      </div>
+      </>
 
       <Dialog open={deleteDialog} onOpenChange={setDeleteDialog}>
         <DialogContent>

src/features/doctor/lib/data-table.tsx

@@ -69,7 +69,7 @@ export function DataTable<TData, TValue>({
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                Shifokor mavjud emas
               </TableCell>
             </TableRow>
           )}

src/features/home/ui/Home.tsx

@@ -4,16 +4,18 @@ import { useMutation } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
 import clsx from "clsx";
 import {
+  Banknote,
   Calendar,
-  Clipboard,
   FileText,
-  HomeIcon,
-  Layers,
   List,
-  MapPin,
+  Loader2,
-  Syringe,
+  MapPinCheck,
+  MapPinHouse,
+  MapPinned,
+  Pill,
   User,
 } from "lucide-react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -31,7 +33,7 @@ const navItems: NavItem[] = [
     id: "lokatsiya",
     title: "Lokatsiya jo'natish",
     link: "/location",
-    icon: <MapPin className="w-8 h-8" />,
+    icon: <MapPinCheck className="w-8 h-8" />,
     description: "Manzilni jo'natish",
     featured: true,
   },
@@ -56,12 +58,14 @@ const navItems: NavItem[] = [
 export default function Home() {
   const featuredItems = navItems.filter((item) => item.featured);
   const router = useNavigate();
+  const [locationLoad, setLocationLoad] = useState<boolean>(false);
 
   const { mutate } = useMutation({
     mutationFn: (body: SendLocation) => location_api.send_loaction(body),
     onSuccess: () => {
       toast.success("Lokatsiya jo'natildi");
       router("/location");
+      setLocationLoad(false);
     },
     onError: (error: AxiosError) => {
       const data = error.response?.data as { message?: string };
@@ -77,6 +81,7 @@ export default function Home() {
           name: string[];
         };
       };
+      setLocationLoad(false);
 
       const message =
         Array.isArray(errorName.data?.name) && errorName.data.name.length
@@ -92,6 +97,7 @@ export default function Home() {
   });
 
   const handleLocationClick = () => {
+    setLocationLoad(true);
     navigator.geolocation.getCurrentPosition(
       (pos) => {
         mutate({
@@ -125,41 +131,48 @@ export default function Home() {
       <div className="px-4 sm:px-6 mt-5 lg:px-4 bg-background">
         <div className="max-w-6xl mx-auto">
           <p className="text-md font-bold text-black mb-5 uppercase">Asosiy</p>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
             {featuredItems.map((item) => {
               const isLocation = item.id === "lokatsiya";
+              const specification = item.id === "spetsifikatsiya";
+              const tourPlan = item.id === "tour_plan";
 
               return (
                 <div
                   key={item.id}
                   onClick={isLocation ? handleLocationClick : undefined}
-                  className="group relative px-4 cursor-pointer"
+                  className="group relative cursor-pointer flex justify-start"
                 >
                   {!isLocation ? (
-                    <Link to={item.link} className="absolute inset-0"></Link>
+                    <Link
+                      to={item.link}
+                      className="absolute inset-0 z-50"
+                    ></Link>
                   ) : null}
 
                   <div
                     className={clsx(
-                      "flex items-start gap-6 pb-2 border-b border-border hover:border-primary/30 transition-colors",
+                      "flex rounded-xl shadow-sm items-start gap-2 border-b p-2 pb-2 border-border hover:border-primary/30 transition-colors",
-                      isLocation && "shadow-sm p-2 rounded-xl scale-[115%]",
+                      isLocation
+                        ? "w-full"
+                        : specification
+                          ? "w-[95%]"
+                          : tourPlan && "w-[85%]",
                     )}
                   >
                     <div
                       className={clsx(
-                        "shrink-0 w-12 h-12 rounded-lg text-primary flex items-center justify-center",
+                        "shrink-0 w-12 h-12 rounded-lg flex items-center justify-center bg-primary text-white",
-                        isLocation && "bg-primary text-white",
                       )}
                     >
-                      {item.icon}
+                      {isLocation && locationLoad ? (
+                        <Loader2 className="animate-spin" />
+                      ) : (
+                        item.icon
+                      )}
                     </div>
                     <div className="flex-1">
-                      <h3
+                      <h3 className={clsx("text-lg font-bold text-primary")}>
-                        className={clsx(
-                          "text-lg font-bold text-foreground",
-                          isLocation && "text-primary",
-                        )}
-                      >
                         {item.title}
                       </h3>
                       <p className="text-xs text-muted-foreground">
@@ -210,7 +223,7 @@ export default function Home() {
             <Link to={"/district"} className="border border-border rounded-lg">
               <div className="flex flex-col items-center text-center p-4">
                 <div className="text-primary/60 group-hover:text-primary transition-colors mb-3">
-                  <Layers className="w-6 h-6" />
+                  <MapPinned className="w-6 h-6" />
                 </div>
                 <h4 className="font-semibold text-foreground text-sm">Tuman</h4>
               </div>
@@ -218,7 +231,7 @@ export default function Home() {
             <Link to={"/object"} className="border border-border rounded-lg">
               <div className="flex flex-col items-center text-center p-4">
                 <div className="text-primary/60 group-hover:text-primary transition-colors mb-3">
-                  <HomeIcon className="w-6 h-6" />
+                  <MapPinHouse className="w-6 h-6" />
                 </div>
                 <h4 className="font-semibold text-foreground text-sm">
                   Obyekt
@@ -242,7 +255,7 @@ export default function Home() {
             <Link to={"/pharmacy"} className="border border-border rounded-lg">
               <div className="flex flex-col items-center text-center p-4">
                 <div className="text-primary/60 group-hover:text-primary transition-colors mb-3">
-                  <Syringe className="w-6 h-6" />
+                  <Pill className="w-6 h-6" />
                 </div>
                 <h4 className="font-semibold text-foreground text-sm">
                   Dorixona
@@ -257,10 +270,10 @@ export default function Home() {
             >
               <div className="flex flex-col items-center text-center p-4">
                 <div className="text-primary/60 group-hover:text-primary transition-colors mb-3">
-                  <Clipboard className="w-14 h-14" />
+                  <Banknote className="w-14 h-14" />
                 </div>
                 <h4 className="font-semibold text-foreground text-lg">
-                  Hisobotlar
+                  To'lovlar
                 </h4>
               </div>
             </Link>

src/features/location/ui/MyLocation.tsx

@@ -346,7 +346,7 @@ const MyLocation: React.FC = () => {
                       colSpan={columns.length}
                       className="h-24 text-center"
                     >
-                      No results.
+                      Hech qanday lokatsiya jo'natilmagan
                     </TableCell>
                   </TableRow>
                 )}

src/features/object/lib/data-table.tsx

@@ -69,7 +69,7 @@ export function DataTableObject<ObjectAllData, TValue>({
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                Obyekt mavjud emas
               </TableCell>
             </TableRow>
           )}

src/features/object/ui/ObjectList.tsx

@@ -9,6 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shared/ui/dialog";
+import { Skeleton } from "@/shared/ui/skeleton";
 import { DashboardLayout } from "@/widgets/dashboard-layout/ui/DashboardLayout";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
@@ -80,16 +81,22 @@ const ObjectList = () => {
           </div>
         )}
 
-        {!isLoading && !isError && objects && objects.length > 0 && (
+        {isLoading ? (
+          <div className="space-y-3">
+            {[1, 2, 3].map((i) => (
+              <Skeleton key={i} className="h-12 w-full rounded-md" />
+            ))}
+          </div>
+        ) : isError ? (
+          <p className="text-red-500">
+            Tumanlar yuklanmadi. Qayta urinib ko‘ring.
+          </p>
+        ) : objects ? (
           <div className="overflow-x-auto">
             <DataTableObject columns={columns} data={objects} />
           </div>
-        )}
+        ) : (
-
+          <p className="text-gray-500">Tumanlar mavjud emas</p>
-        {!isLoading && !isError && objects && objects.length === 0 && (
-          <div className="flex justify-center items-center h-64">
-            <span className="text-gray-500">Hech qanday obyekt topilmadi.</span>
-          </div>
         )}
       </div>
 

src/features/phamarcy/ui/PharmacyList.tsx

@@ -46,8 +46,8 @@ const PharmacyList = () => {
         )}
 
         {!isLoading && !isError && data?.length === 0 && (
-          <div className="flex justify-center items-center py-20">
+          <div className="h-[80vh] flex justify-center items-center w-[90%] fixed">
-            <p className="text-gray-500">Hech qanday dorixona topilmadi</p>
+            <p>Dorixona mavjud emas</p>
           </div>
         )}
 

src/features/plan-tour/ui/PlanTour.tsx

@@ -92,10 +92,10 @@ const PlanTour = () => {
     <DashboardLayout>
       <div className="max-w-7xl mx-auto">
         <h1 className="text-4xl font-bold text-gray-900 mb-2">
-          Oylik hisobotlar
+          Oylik to'lovlar
         </h1>
         <p className="text-gray-600">
-          Dorixonalar uchun oylik summalarni boshqaring
+          Dorixonalar uchun oylik to'lovlarni boshqaring
         </p>
 
         {isLoading && (
@@ -110,6 +110,12 @@ const PlanTour = () => {
           </div>
         )}
 
+        {!isLoading && !isError && data && data.length === 0 ? (
+          <div className="h-[80vh] flex justify-center items-center w-[90%] fixed">
+            <p>Hech qanday to'lovlar yo'q</p>
+          </div>
+        ) : (
+          <>
             <Card className="mb-4 border-0 p-0 mt-5">
               <CardHeader className="bg-blue-500 p-3 text-white">
                 <CardTitle className="flex items-center gap-2 justify-center">
@@ -144,6 +150,8 @@ const PlanTour = () => {
             </Card>
 
             <PlanPrice selectedMonth={selectedMonth} pharmacies={pharmacies} />
+          </>
+        )}
       </div>
     </DashboardLayout>
   );

src/features/specification/ui/HistoryListPage.tsx

@@ -125,9 +125,9 @@ export function HistoryListPage() {
                 </div>
               ))
             ) : (
-              <p className="text-center text-gray-500 py-10">
+              <div className="fixed h-[70vh] flex justify-center items-center w-full">
-                {"Hozircha ma'lumot yo‘q."}
+                <p className="text-gray-500">{"Hozircha ma'lumot yo‘q."}</p>
-              </p>
+              </div>
             )}
           </div>
         </div>

src/features/tour-plan/lib/data-table.tsx

@@ -65,7 +65,7 @@ export function DataTable({ columns, data }: DataTableProps<TourItemData>) {
           ) : (
             <TableRow>
               <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
+                Bu oy uchun tur plan mavjud emas
               </TableCell>
             </TableRow>
           )}

src/shared/ui/added-button.tsx

@@ -18,7 +18,7 @@ const rippleVariants = {
 
 const AddedButton: React.FC<AddedButtonProps> = ({ onClick }) => {
   return (
-    <div className="fixed bottom-8 right-8 flex items-center justify-center w-16 h-16">
+    <div className="fixed bottom-8 right-8 flex items-center justify-center w-16 h-16 z-50">
       {[0.5, 1, 1.5].map((delay, i) => (
         <motion.span
           key={i}

src/shared/ui/sheet.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@/shared/lib/utils";
 
@@ -47,6 +47,7 @@ function SheetOverlay({
 function SheetContent({
   className,
   children,
+  closedButton,
   side = "right",
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
@@ -72,10 +73,12 @@ function SheetContent({
         {...props}
       >
         {children}
+        {closedButton && (
           <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
             <XIcon className="size-4" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
+        )}
       </SheetPrimitive.Content>
     </SheetPortal>
   );
@@ -129,11 +132,11 @@ function SheetDescription({
 
 export {
   Sheet,
-  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
   SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
 };

src/widgets/dashboard-layout/ui/DashboardLayout.tsx

@@ -1,22 +1,30 @@
 import Logo from "@/assets/logo.png";
+import { location_api, type SendLocation } from "@/features/home/lib/api";
 
 import { cn } from "@/shared/lib/utils";
 import { Button } from "@/shared/ui/button";
-import { Sheet, SheetContent } from "@/shared/ui/sheet";
+import { Sheet, SheetClose, SheetContent } from "@/shared/ui/sheet";
+import { useMutation } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 import {
-  Building,
+  Banknote,
-  Building2,
   Calendar,
   ChevronLeft,
   FileText,
-  MapPin,
+  Home,
+  List,
+  Loader2,
+  MapPinCheck,
+  MapPinHouse,
+  MapPinned,
   Menu,
-  Navigation,
+  Pill,
-  Truck,
   User,
+  X,
 } from "lucide-react";
 import { useState, type ReactNode } from "react";
-import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
 
 interface NavItem {
   title: string;
@@ -25,24 +33,63 @@ interface NavItem {
 }
 
 const navItems: NavItem[] = [
-  { title: "Reja", href: "/plan", icon: Calendar },
+  { title: "Asosiy sahifa", href: "/", icon: Home },
-  { title: "Tuman", href: "/district", icon: MapPin },
+  { title: "Lokatsiya jo'natish", href: "/location", icon: MapPinCheck },
-  { title: "Obyekt", href: "/object", icon: Building2 },
-  { title: "Shifokor", href: "/physician", icon: User },
-  { title: "Dorixona", href: "/pharmacy", icon: Building },
-  { title: "Tur Plan", href: "/type-plan", icon: Truck },
-  { title: "Lokatsiya", href: "/location", icon: Navigation },
   { title: "Spetsifikatsiya", href: "/specification", icon: FileText },
+  { title: "Tur Plan", href: "/tour-plan", icon: List },
+  { title: "Reja", href: "/plan", icon: Calendar },
+  { title: "Tuman", href: "/district", icon: MapPinned },
+  { title: "Obyekt", href: "/object", icon: MapPinHouse },
+  { title: "Shifokor", href: "/physician", icon: User },
+  { title: "Dorixona", href: "/pharmacy", icon: Pill },
+  { title: "To'lovlar", href: "/type-plan", icon: Banknote },
 ];
 
 export function DashboardLayout({ children }: { children: ReactNode }) {
   const location = useLocation();
   const pathname = location.pathname;
   const router = useNavigate();
-  const params = useParams();
-  const locale = params.locale as string;
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  const [locationLoad, setLocationLoad] = useState(false);
+
+  const { mutate: sendLocation } = useMutation({
+    mutationFn: (body: SendLocation) => location_api.send_loaction(body),
+    onSuccess: () => {
+      toast.success("Lokatsiya jo'natildi");
+      setLocationLoad(false);
+      router("/location");
+    },
+    onError: (error: AxiosError) => {
+      const data = error.response?.data as { message?: string };
+      toast.error(data?.message || "Xatolik yuz berdi");
+      setLocationLoad(false);
+    },
+  });
+
+  const handleSidebarLocationClick = () => {
+    setLocationLoad(true);
+
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        sendLocation({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+        });
+      },
+      (err) => {
+        toast.error("Lokatsiya olishda xatolik");
+        console.error(err);
+        setLocationLoad(false);
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 15000,
+        maximumAge: 0,
+      },
+    );
+  };
+
   return (
     <div className="min-h-screen bg-background">
       {/* Sidebar - Desktop */}
@@ -55,11 +102,35 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
             <ul role="list" className="flex flex-1 flex-col gap-y-1">
               {navItems.map((item) => {
                 const Icon = item.icon;
-                const isActive = pathname?.includes(item.href);
+                const isActive =
+                  item.href === "/"
+                    ? pathname === "/"
+                    : pathname.startsWith(item.href);
+
+                const isLocationItem = item.href === "/location";
+
                 return (
                   <li key={item.href}>
+                    {isLocationItem ? (
+                      <button
+                        onClick={handleSidebarLocationClick}
+                        className={cn(
+                          "group flex gap-x-3 p-3 text-left w-full text-sm font-semibold leading-6 transition-colors",
+                          isActive
+                            ? "bg-accent-gradient-soft text-primary rounded-xl-soft shadow-sm"
+                            : "text-sidebar-foreground hover:bg-accent-gradient-soft hover:text-primary rounded-lg",
+                        )}
+                      >
+                        {locationLoad ? (
+                          <Loader2 className="h-5 w-5 animate-spin" />
+                        ) : (
+                          <Icon className="h-5 w-5 shrink-0" />
+                        )}
+                        {item.title}
+                      </button>
+                    ) : (
                       <Link
-                      to={`/${locale}${item.href}`}
+                        to={item.href}
                         className={cn(
                           "group flex gap-x-3 p-3 text-sm font-semibold leading-6 transition-colors",
                           isActive
@@ -70,6 +141,7 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
                         <Icon className="h-5 w-5 shrink-0" />
                         {item.title}
                       </Link>
+                    )}
                   </li>
                 );
               })}
@@ -105,20 +177,48 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
 
       {/* Mobile Sidebar */}
       <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
-        <SheetContent side="left" className="w-64 p-0">
+        <SheetContent side="left" className="w-64 p-0" closedButton={false}>
-          <div className="flex h-16 shrink-0 items-center border-b border-sidebar-border">
+          <div className="flex justify-between h-16 px-2 shrink-0 items-center border-b border-sidebar-border">
-            <img src={Logo} alt="logo" className="w-32 h-12 ml-2" />
+            <img src={Logo} alt="logo" className="w-32 h-10 ml-2" />
+            <SheetClose asChild>
+              <Button size={"icon"} variant={"ghost"}>
+                <X className="size-5 text-gray-600" />
+              </Button>
+            </SheetClose>
           </div>
-          <nav className="flex flex-1 flex-col p-6">
+          <nav className="flex flex-1 flex-col px-2">
-            <ul role="list" className="flex flex-1 flex-col gap-y-1">
+            <ul role="list" className="flex flex-1 flex-col">
               {navItems.map((item) => {
                 const Icon = item.icon;
-                const isActive = pathname?.includes(item.href);
+                const isActive =
+                  item.href === "/"
+                    ? pathname === "/"
+                    : pathname.startsWith(item.href);
+
+                const isLocationItem = item.href === "/location";
+
                 return (
                   <li key={item.href}>
+                    {isLocationItem ? (
+                      <button
+                        onClick={handleSidebarLocationClick}
+                        className={cn(
+                          "group flex gap-x-3 p-3 text-left w-full text-sm font-semibold leading-6 transition-colors",
+                          isActive
+                            ? "bg-accent-gradient-soft text-primary rounded-xl-soft shadow-sm"
+                            : "text-sidebar-foreground hover:bg-accent-gradient-soft hover:text-primary rounded-lg",
+                        )}
+                      >
+                        {locationLoad ? (
+                          <Loader2 className="h-5 w-5 animate-spin" />
+                        ) : (
+                          <Icon className="h-5 w-5 shrink-0" />
+                        )}
+                        {item.title}
+                      </button>
+                    ) : (
                       <Link
-                      to={`/$${item.href}`}
+                        to={item.href}
-                      onClick={() => setSidebarOpen(false)}
                         className={cn(
                           "group flex gap-x-3 p-3 text-sm font-semibold leading-6 transition-colors",
                           isActive
@@ -129,6 +229,7 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
                         <Icon className="h-5 w-5 shrink-0" />
                         {item.title}
                       </Link>
+                    )}
                   </li>
                 );
               })}

vite.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
     port: 5174,
     host: true, // barcha hostlarga ruxsat
     allowedHosts: [
-      "factory-epa-announced-adapter.trycloudflare.com", // ngrok host qo'shildi
+      "worth-fathers-turned-diamonds.trycloudflare.com", // ngrok host qo'shildi
     ],
   },
 });