Samandar/meridyn-bot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui edit

Browse Source
This commit is contained in:
Samandar Turgunboyev
2025-12-01 13:23:40 +05:00
parent 5c4e1327be
commit d4788c7cb2
15 changed files with 270 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/district/lib/data-table.tsx
View File

@@ -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>
)}

10
src/features/district/ui/district.tsx
View File

@@ -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>

2
src/features/doctor/lib/data-table.tsx
View File

@@ -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>
)}

63
src/features/home/ui/Home.tsx
View File

@@ -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,
Syringe,
Loader2,
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",
isLocation && "shadow-sm p-2 rounded-xl scale-[115%]",
"flex rounded-xl shadow-sm items-start gap-2 border-b p-2 pb-2 border-border hover:border-primary/30 transition-colors",
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",
isLocation && "bg-primary text-white",
"shrink-0 w-12 h-12 rounded-lg flex items-center justify-center bg-primary text-white",
)}
>
{item.icon}
{isLocation && locationLoad ? (
<Loader2 className="animate-spin" />
) : (
item.icon
)}
</div>
<div className="flex-1">
<h3
className={clsx(
"text-lg font-bold text-foreground",
isLocation && "text-primary",
)}
>
<h3 className={clsx("text-lg font-bold 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>

2
src/features/location/ui/MyLocation.tsx
View File

@@ -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>
)}

2
src/features/object/lib/data-table.tsx
View File

@@ -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>
)}

21
src/features/object/ui/ObjectList.tsx
View File

@@ -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>
)}
{!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>
) : (
<p className="text-gray-500">Tumanlar mavjud emas</p>
)}
</div>

4
src/features/phamarcy/ui/PharmacyList.tsx
View File

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

76
src/features/plan-tour/ui/PlanTour.tsx
View File

@@ -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,40 +110,48 @@ const PlanTour = () => {
</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">
<Calendar className="h-5 w-5" />
Oy tanlash
</CardTitle>
</CardHeader>
{!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">
<Calendar className="h-5 w-5" />
Oy tanlash
</CardTitle>
</CardHeader>
<CardContent className="pb-6">
<div className="flex flex-wrap gap-3">
{availableMonths().map((month) => (
<Button
key={month}
onClick={() => setSelectedMonth(month)}
variant={selectedMonth === month ? "default" : "outline"}
className={
selectedMonth === month
? "bg-blue-600 hover:bg-blue-700 text-white"
: "hover:bg-blue-50"
}
>
{getMonthName(month)}
{month === currentMonthKey && (
<span className="ml-2 text-xs bg-green-500 text-white px-2 py-0.5 rounded-full">
Joriy
</span>
)}
</Button>
))}
</div>
</CardContent>
</Card>
<CardContent className="pb-6">
<div className="flex flex-wrap gap-3">
{availableMonths().map((month) => (
<Button
key={month}
onClick={() => setSelectedMonth(month)}
variant={selectedMonth === month ? "default" : "outline"}
className={
selectedMonth === month
? "bg-blue-600 hover:bg-blue-700 text-white"
: "hover:bg-blue-50"
}
>
{getMonthName(month)}
{month === currentMonthKey && (
<span className="ml-2 text-xs bg-green-500 text-white px-2 py-0.5 rounded-full">
Joriy
</span>
)}
</Button>
))}
</div>
</CardContent>
</Card>
<PlanPrice selectedMonth={selectedMonth} pharmacies={pharmacies} />
<PlanPrice selectedMonth={selectedMonth} pharmacies={pharmacies} />
</>
)}
</div>
</DashboardLayout>
);

6
src/features/specification/ui/HistoryListPage.tsx
View File

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

2
src/features/tour-plan/lib/data-table.tsx
View File

@@ -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>
)}

2
src/shared/ui/added-button.tsx
View File

@@ -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}

21
src/shared/ui/sheet.tsx
View File

@@ -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}
<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>
{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,
};

197
src/widgets/dashboard-layout/ui/DashboardLayout.tsx
View File

@@ -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,
Building2,
Banknote,
Calendar,
ChevronLeft,
FileText,
MapPin,
Home,
List,
Loader2,
MapPinCheck,
MapPinHouse,
MapPinned,
Menu,
Navigation,
Truck,
Pill,
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: "Tuman", href: "/district", icon: MapPin },
{ 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: "Asosiy sahifa", href: "/", icon: Home },
{ title: "Lokatsiya jo'natish", href: "/location", icon: MapPinCheck },
{ 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,21 +102,46 @@ 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}>
<Link
to={`/${locale}${item.href}`}
className={cn(
"group flex gap-x-3 p-3 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",
)}
>
<Icon className="h-5 w-5 shrink-0" />
{item.title}
</Link>
{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}
className={cn(
"group flex gap-x-3 p-3 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",
)}
>
<Icon className="h-5 w-5 shrink-0" />
{item.title}
</Link>
)}
</li>
);
})}
@@ -105,30 +177,59 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
{/* Mobile Sidebar */}
<Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
<SheetContent side="left" className="w-64 p-0">
<div className="flex h-16 shrink-0 items-center border-b border-sidebar-border">
<img src={Logo} alt="logo" className="w-32 h-12 ml-2" />
<SheetContent side="left" className="w-64 p-0" closedButton={false}>
<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-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">
<ul role="list" className="flex flex-1 flex-col gap-y-1">
<nav className="flex flex-1 flex-col px-2">
<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}>
<Link
to={`/$${item.href}`}
onClick={() => setSidebarOpen(false)}
className={cn(
"group flex gap-x-3 p-3 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",
)}
>
<Icon className="h-5 w-5 shrink-0" />
{item.title}
</Link>
{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}
className={cn(
"group flex gap-x-3 p-3 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",
)}
>
<Icon className="h-5 w-5 shrink-0" />
{item.title}
</Link>
)}
</li>
);
})}

2
vite.config.ts
View File

@@ -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
],
},
});