tuan.vu/metms_fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:update all

Browse Source
This commit is contained in:
TuanVT 2026-06-03 16:42:07 +07:00
parent 62ca6dd0f9
commit 77dd05932e
36 changed files with 3098 additions and 693 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -9,6 +9,8 @@
"lint": "eslint" "lint": "eslint"
}, },
"dependencies": { "dependencies": {
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-tooltip": "^1.2.8",
"@reduxjs/toolkit": "^2.12.0", "@reduxjs/toolkit": "^2.12.0",
"@tanstack/react-query": "^5.100.11", "@tanstack/react-query": "^5.100.11",
"axios": "^1.16.1", "axios": "^1.16.1",
@ -21,6 +23,7 @@
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"react": "19.2.4", "react": "19.2.4",
"react-dom": "19.2.4", "react-dom": "19.2.4",
"react-moment": "^2.0.2",
"react-redux": "^9.3.0", "react-redux": "^9.3.0",
"react-toastify": "^11.1.0" "react-toastify": "^11.1.0"
}, },

2
src/app/layout.tsx
View File

@ -15,7 +15,7 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Khám Bệnh Mơ Phố",
description: "Generated by create next app", description: "Generated by create next app",
}; };

17
src/app/page.tsx
View File

@ -1,10 +1,15 @@
import BaseLayout from "@/components/layouts/BaseLayout/BaseLayout"; "use client";
import MainPagePatient from "@/components/page/patient/MainPagePatient";
export default function Home() { import BaseLayout from "@/components/layouts/BaseLayout/BaseLayout";
import MainPageHome from "@/components/page/Home/MainPageHome";
import React from "react";
const page = () => {
return ( return (
<BaseLayout title="Bệnh nhân"> <BaseLayout title="Dashboard">
<MainPagePatient /> <MainPageHome />
</BaseLayout> </BaseLayout>
); );
} };
export default page;

164
src/components/customs/DateRangeField.tsx Normal file
View File

@ -0,0 +1,164 @@
"use client";
import React, { useState } from "react";
import clsx from "clsx";
import * as Popover from "@radix-ui/react-popover";
import Moment from "react-moment";
import { CalendarDays, CircleX } from "lucide-react";
import RangeDatePicker from "../utils/FilterDateRage/components/RangeDatePicker";
interface DateRangeValue {
from: Date | null;
to: Date | null;
}
interface PropsDateRangeField {
name: string;
label?: string | React.ReactNode;
placeholder?: string;
value: DateRangeValue;
required?: boolean;
readOnly?: boolean;
note?: string;
onChange: (value: DateRangeValue) => void;
onClean?: () => void;
}
function DateRangeField({
name,
label,
placeholder = "Chọn khoảng thời gian",
value,
required,
readOnly,
note,
onChange,
onClean,
}: PropsDateRangeField) {
const [open, setOpen] = useState(false);
const [isFocus, setIsFocus] = useState(false);
return (
<div className="w-full">
{/* LABEL */}
{label && (
<label className="block mb-2 text-[16px] font-medium">{label}</label>
)}
<Popover.Root
open={open}
onOpenChange={(value) => {
if (readOnly) return;
setOpen(value);
setIsFocus(value);
}}
>
<Popover.Trigger asChild>
<button
type="button"
disabled={readOnly}
className={clsx(
"flex items-center justify-between",
"h-12 w-full px-4",
"border rounded-full transition",
"bg-white border-[#cdd5df]",
"hover:border-blue-600",
isFocus && "border-blue-600",
readOnly &&
"bg-gray-100 border-gray-200 cursor-not-allowed opacity-70",
)}
>
{/* VALUE */}
<div className="flex-1 text-left">
{value?.from && value?.to ? (
<p className="text-[16px] font-medium text-[#23262f]">
<Moment format="DD/MM/YYYY">{value.from}</Moment>
{" - "}
<Moment format="DD/MM/YYYY">{value.to}</Moment>
</p>
) : (
<p className="text-[16px] font-medium text-gray-400">
{placeholder}
</p>
)}
</div>
{/* ICON */}
<div className="flex items-center gap-2">
{(value?.from || value?.to) && onClean && (
<div
role="button"
tabIndex={0}
onClick={(e) => {
e.stopPropagation();
onClean();
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onClean();
}
}}
className="
flex
h-7
w-7
cursor-pointer
items-center
justify-center
rounded-full
text-gray-400
transition
hover:bg-gray-100
"
>
<CircleX size={16} />
</div>
)}
<div
className={clsx(
"transition",
isFocus ? "text-blue-600" : "text-gray-400",
)}
>
<CalendarDays size={20} />
</div>
</div>
</button>
</Popover.Trigger>
{/* POPUP */}
<Popover.Content align="start" sideOffset={8} className="z-50">
<RangeDatePicker
value={value}
open={open}
onSetValue={(data) => {
onChange(data);
}}
onClose={() => {
setOpen(false);
setIsFocus(false);
}}
/>
</Popover.Content>
</Popover.Root>
{/* NOTE */}
{note && <p className="mt-1 text-xs font-medium text-gray-500">{note}</p>}
</div>
);
}
export default DateRangeField;

2
src/components/customs/FilterCustom.tsx
View File

@ -81,7 +81,7 @@ function FilterCustom<T extends string | number | null>({
"border border-[#e1e5ed] bg-white", "border border-[#e1e5ed] bg-white",
"transition-all", "transition-all",
"hover:border-[#0019f6]", "hover:border-[#0019f6]",
styleRounded ? "rounded-full" : "rounded-md", styleRounded ? "rounded-full" : "rounded-full",
open && "border-[#0019f6]", open && "border-[#0019f6]",
)} )}
> >

2
src/components/customs/StateActive.tsx
View File

@ -11,7 +11,7 @@ interface StateItem {
interface PropsStateActive { interface PropsStateActive {
isBox?: boolean; isBox?: boolean;
stateActive: number | string; stateActive: number | string | undefined;
listState: StateItem[]; listState: StateItem[];
} }

63
src/components/customs/custom-tabs.tsx Normal file
View File

@ -0,0 +1,63 @@
"use client";
import React from "react";
import clsx from "clsx";
import { useRouter, useSearchParams } from "next/navigation";
interface PropsTabNavLink {
query: string;
listHref: {
title: string;
pathname: string;
query: string | null;
}[];
}
export default function TabNavLink({ query, listHref }: PropsTabNavLink) {
const router = useRouter();
const searchParams = useSearchParams();
const currentValue = searchParams.get(query);
const handleActive = (value: string | null) => {
const params = new URLSearchParams(searchParams.toString());
if (value === null) {
params.delete(query);
} else {
params.set(query, value);
}
router.replace(`?${params.toString()}`, { scroll: false });
};
return (
<div className="overflow-x-auto whitespace-nowrap pb-1 scrollbar-thin">
{listHref.map((item, i) => {
const isActive =
currentValue === item.query ||
(!currentValue && item.query === null && i === 0);
return (
<button
key={i}
type="button"
onClick={() => handleActive(item.query)}
className={clsx(
"inline-flex items-center justify-center",
"min-w-[60px] px-6 py-2.5 rounded-full border",
"select-none cursor-pointer transition",
"text-[13px] sm:text-[14px] md:text-[16px]",
i !== 0 && "ml-2",
isActive
? "bg-[#0019F6] text-white border-[#0019F6]"
: "bg-white text-[#202939] border-[#EAEDF2] hover:border-[#0019F6]",
)}
>
{item.title}
</button>
);
})}
</div>
);
}

7
src/components/layouts/BaseLayout/componets/Navbar/Navbar.tsx
View File

@ -4,8 +4,6 @@ import React, { useCallback } from "react";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { Menus, PATH } from "@/constant/config"; import { Menus, PATH } from "@/constant/config";
import Image from "next/image";
import icons from "@/constant/images/icons";
import clsx from "clsx"; import clsx from "clsx";
import { Hospital } from "lucide-react"; import { Hospital } from "lucide-react";
@ -14,6 +12,11 @@ const Navbar = () => {
const checkActive = useCallback( const checkActive = useCallback(
(pathActive: string) => { (pathActive: string) => {
// Handle root path "/" as dashboard
if (pathname === "/" && pathActive === "/dashboard") {
return true;
}
const currentRoute = pathname.split("/")[1]; const currentRoute = pathname.split("/")[1];
return pathActive === `/${currentRoute}`; return pathActive === `/${currentRoute}`;
}, },

336
src/components/page/Home/MainPageHome/MainPageHome.tsx
View File

@ -1,8 +1,340 @@
"use client"; "use client";
import React from "react"; import React, { useMemo } from "react";
import { useQuery } from "@tanstack/react-query";
import moment from "moment";
import {
Activity,
CalendarDays,
ClipboardList,
Hospital,
Stethoscope,
Users,
} from "lucide-react";
import { QUERY_KEY } from "@/constant/config/enum";
import { httpRequest } from "@/services";
import consultationServices, {
ConsultationItem,
ConsultationResponse,
ReportResponse,
} from "@/services/consultationServices";
import specialtyServices, { SpecialtyItem } from "@/services/specialtyServices";
import DataWrapper from "@/components/customs/DataWrapper";
const MainPageHome = () => { const MainPageHome = () => {
return <div>MainPageHome</div>; const today = moment().format("YYYY-MM-DD");
const consultationQuery = useQuery<ConsultationResponse>({
queryKey: [QUERY_KEY.table_list_consultation, "dashboard"],
queryFn: async () => {
const res = await httpRequest<ConsultationResponse>({
showMessageFailed: true,
http: consultationServices.getConsultations({
Page: 1,
PageSize: 100,
SortBy: "visitDate",
Desc: true,
}),
});
return (
res || {
items: [],
page: 1,
pageSize: 100,
total: 0,
totalPages: 0,
}
);
},
});
const reportQuery = useQuery<ReportResponse>({
queryKey: [QUERY_KEY.table_list_report, today],
queryFn: async () => {
const res = await httpRequest<ReportResponse>({
showMessageFailed: true,
http: consultationServices.getConsultationsReport({
FormDate: today,
ToDate: today,
}),
});
return res as ReportResponse;
},
});
const specialtyQuery = useQuery<SpecialtyItem[]>({
queryKey: [QUERY_KEY.list_specialty_lookup],
queryFn: async () => {
const res = await httpRequest<SpecialtyItem[]>({
showMessageFailed: true,
http: specialtyServices.getSpecialty(),
});
return res || [];
},
});
const consultationItems = consultationQuery.data?.items || [];
const consultationReport = reportQuery.data;
const specialtyItems = specialtyQuery.data || [];
const todayConsultations = useMemo(() => {
return consultationItems.filter((item) => {
if (!item.visitDate) return false;
return moment(item.visitDate).format("YYYY-MM-DD") === today;
});
}, [consultationItems, today]);
const statusCounts = useMemo(() => {
return {
total: todayConsultations.length,
waiting: todayConsultations.filter((item) => item.status === 1).length,
inProgress: todayConsultations.filter((item) => item.status === 2).length,
completed: todayConsultations.filter((item) => item.status === 5).length,
cancelled: todayConsultations.filter((item) => item.status === 6).length,
};
}, [todayConsultations]);
const specialtyActiveCounts = useMemo(() => {
const map = new Map<string, number>();
todayConsultations.forEach((item) => {
item.specialtyClinics?.forEach((specialty) => {
const count = map.get(specialty.specialtyId) || 0;
map.set(specialty.specialtyId, count + 1);
});
});
return specialtyItems.map((specialty) => ({
...specialty,
active: map.get(specialty.id) || 0,
}));
}, [todayConsultations, specialtyItems]);
const summaryCards = useMemo(
() => [
{
title: "Tất cả đợt khám",
value: statusCounts.total.toString(),
subtitle: "Số đợt khám trong ngày",
icon: CalendarDays,
color: "bg-blue-50 text-blue-600",
},
{
title: "Đang khám",
value: statusCounts.inProgress.toString(),
subtitle: "Đang khám tổng quát",
icon: Stethoscope,
color: "bg-emerald-50 text-emerald-600",
},
{
title: "Hoàn tất",
value: statusCounts.completed.toString(),
subtitle: "Đã hoàn thành",
icon: ClipboardList,
color: "bg-sky-50 text-sky-600",
},
{
title: "Chờ khám",
value: statusCounts.waiting.toString(),
subtitle: "Đang chờ bác sĩ",
icon: Activity,
color: "bg-orange-50 text-orange-600",
},
],
[statusCounts],
);
const generalInfo = useMemo(
() => [
{
label: "Tổng đợt khám",
value: statusCounts.total.toString(),
icon: Users,
color: "bg-violet-50 text-violet-600",
},
{
label: "Đợt khám chuyên khoa",
value: specialtyActiveCounts
.reduce((sum, item) => sum + item.active, 0)
.toString(),
icon: Hospital,
color: "bg-cyan-50 text-cyan-600",
},
{
label: "Đơn thuốc",
value: consultationReport?.totalPrescriptionsIssued?.toString() || "0",
icon: ClipboardList,
color: "bg-amber-50 text-amber-600",
},
{
label: "Chuyên khoa",
value: specialtyItems.length.toString(),
icon: Activity,
color: "bg-teal-50 text-teal-600",
},
],
[
consultationReport,
statusCounts.total,
specialtyActiveCounts,
specialtyItems.length,
],
);
return (
<section className="space-y-6">
<div className="rounded-[20px] bg-white p-6 shadow-sm border border-gray-100">
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
<div>
<h1 className="text-2xl font-semibold text-slate-900">
Dashboard khám bệnh
</h1>
<p className="mt-2 text-sm text-slate-500">
Theo dõi nhanh các đợt khám, chuyên khoa và thông tin tổng quát
trong ngày.
</p>
</div>
<div className="rounded-full bg-slate-100 px-4 py-2 text-sm text-slate-700">
Cập nhật: {moment().format("DD/MM/YYYY")}
</div>
</div>
<DataWrapper
loading={
consultationQuery.isLoading ||
reportQuery.isLoading ||
specialtyQuery.isLoading
}
data={summaryCards}
title="Không có dữ liệu"
note="Vui lòng thử lại sau"
>
<div className="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
{summaryCards.map((item) => {
const Icon = item.icon;
return (
<div
key={item.title}
className="rounded-[20px] border border-slate-200 bg-slate-50 p-4"
>
<div className="flex items-center justify-between gap-3">
<div className="text-sm font-medium text-slate-500">
{item.title}
</div>
<div
className={`inline-flex h-10 w-10 items-center justify-center rounded-2xl ${item.color}`}
>
<Icon size={20} />
</div>
</div>
<div className="mt-4 flex items-end justify-between gap-3">
<div>
<p className="text-3xl font-semibold text-slate-900">
{item.value}
</p>
<p className="mt-1 text-sm text-slate-500">
{item.subtitle}
</p>
</div>
</div>
</div>
);
})}
</div>
</DataWrapper>
</div>
<div className="grid gap-6 xl:grid-cols-[1.4fr_1fr]">
<div className="rounded-[20px] bg-white p-6 shadow-sm border border-gray-100">
<div className="flex items-center justify-between">
<div>
<h2 className="text-xl font-semibold text-slate-900">
Chuyên khoa hiện có
</h2>
<p className="mt-2 text-sm text-slate-500">
Danh sách chuyên khoa.
</p>
</div>
<div className="rounded-full bg-slate-100 px-3 py-1 text-sm text-slate-700">
{specialtyItems.length} chuyên khoa
</div>
</div>
<div className="mt-6 divide-y divide-slate-200">
{specialtyActiveCounts.map((specialty, idx) => (
<div
key={specialty.id}
className={`flex items-center justify-between py-4 ${idx !== 0 ? "border-t border-slate-200" : ""}`}
>
<div>
<p className="text-base font-medium text-slate-900">
{specialty.name}
</p>
<p className="mt-1 text-sm text-slate-500">
Số chuyên khoa: {specialty.active} ca khám hôm nay
</p>
</div>
<span className="rounded-full bg-slate-100 px-3 py-1 text-sm font-semibold text-slate-700">
{specialty.active}
</span>
</div>
))}
</div>
</div>
<div>
<div className="rounded-[20px] bg-white p-6 shadow-sm border border-gray-100">
<div>
<h2 className="text-xl font-semibold text-slate-900">
Thông tin khám tổng quát
</h2>
<p className="mt-2 text-sm text-slate-500">
Tổng số đợt khám, ca khám chuyên khoa và đơn thuốc trong ngày.
</p>
</div>
<div className="mt-6 grid gap-4 sm:grid-cols-2">
{generalInfo.map((item) => {
const Icon = item.icon;
return (
<div
key={item.label}
className="rounded-[18px] border border-slate-200 bg-slate-50 p-4"
>
<div className="flex items-center gap-3">
<div
className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl ${item.color}`}
>
<Icon size={20} />
</div>
<div>
<p className="text-sm font-medium text-slate-500">
{item.label}
</p>
<p className="mt-1 text-2xl font-semibold text-slate-900">
{item.value}
</p>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</div>
</section>
);
}; };
export default MainPageHome; export default MainPageHome;

220
src/components/page/consultation/DetailConsultation/DetailConsultation.tsx
View File

@ -1,23 +1,31 @@
"use client"; "use client";
import React from "react"; import React, { useEffect, useMemo } from "react";
import { useParams, useRouter } from "next/navigation"; import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { httpRequest } from "@/services"; import { httpRequest } from "@/services";
import { QUERY_KEY, TYPE_STATUS } from "@/constant/config/enum"; import { QUERY_KEY, TYPE_STATUS } from "@/constant/config/enum";
import { ArrowLeft } from "lucide-react"; import { ArrowLeft, Pencil } from "lucide-react";
import consultationServices, { import consultationServices, {
ConsultationDetail, ConsultationDetail,
} from "@/services/consultationServices"; } from "@/services/consultationServices";
import StateActive from "@/components/customs/StateActive"; import StateActive from "@/components/customs/StateActive";
import TabNavLink from "@/components/customs/custom-tabs";
import moment from "moment";
import GridColumn from "@/components/layouts/GridColumn";
import DataWrapper from "@/components/customs/DataWrapper";
import Table from "@/components/customs/custom-table";
import CustomButton from "@/components/customs/custom-button";
const DetailConsultation = () => { const DetailConsultation = () => {
const params = useParams(); const params = useParams();
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams();
const specialtyId = searchParams.get("_type");
const consultationId = params?.id as string; const consultationId = params?.id as string;
@ -48,6 +56,7 @@ const DetailConsultation = () => {
doctorNotes: null, doctorNotes: null,
createdBy: "", createdBy: "",
isDeleted: false, isDeleted: false,
specialtyClinics: [],
} }
); );
}, },
@ -55,6 +64,36 @@ const DetailConsultation = () => {
const consultation = consulDetailQuery.data; const consultation = consulDetailQuery.data;
const canUpdateConsultation =
consultation?.status !== TYPE_STATUS.Completed &&
consultation?.status !== TYPE_STATUS.Cancelled;
const specialtyTabs = useMemo(() => {
return (
consultation?.specialtyClinics?.map((item) => ({
pathname: `/consultation/${consultationId}`,
query: item.id,
title: item.specialtyName,
})) || []
);
}, [consultation?.specialtyClinics, consultationId]);
const specialtyClinics = consultation?.specialtyClinics;
const selectedSpecialty = useMemo(() => {
if (!specialtyClinics?.length) return null;
return (
specialtyClinics.find((item) => item.id === specialtyId) ||
specialtyClinics[0]
);
}, [specialtyClinics, specialtyId]);
useEffect(() => {
if (consultation?.specialtyClinics?.length && !specialtyId) {
router.replace(`?&_type=${consultation.specialtyClinics[0].id}`);
}
}, [consultation?.specialtyClinics, specialtyId, router]);
if (consulDetailQuery.isLoading) { if (consulDetailQuery.isLoading) {
return <div>Đang tải dữ liệu...</div>; return <div>Đang tải dữ liệu...</div>;
} }
@ -62,25 +101,40 @@ const DetailConsultation = () => {
if (!consultation) { if (!consultation) {
return <div>Không tìm thấy dữ liệu phiên khám</div>; return <div>Không tìm thấy dữ liệu phiên khám</div>;
} }
type PrescriptionItem =
ConsultationDetail["aggregatedPrescriptionItems"][number];
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-row gap-4">
<div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"> <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{/* HEADER */} {/* HEADER */}
<div className="flex items-center gap-3"> <div className="flex items-center justify-between">
<ArrowLeft <div
className="flex cursor-pointer items-center gap-3"
onClick={() => router.back()} onClick={() => router.back()}
className="cursor-pointer" >
/> <ArrowLeft className="h-6 w-6" />
<h2 className="text-[28px] font-semibold text-[#111827]"> <h2 className="text-[28px] font-semibold text-[#111827]">
Chi tiết phiên khám Chi tiết phiên khám
</h2> </h2>
</div> </div>
{/* CONTENT */} {consultation.status === TYPE_STATUS.PendingPrescription && canUpdateConsultation && (
<div className="grid grid-cols-1 gap-5 md:grid-cols-2"> <CustomButton
variant="midnightBlue"
fullWidth={false}
icon={<Pencil />}
href={`/consultation/update?_id=${consultation.id}`}
>
Cập nhật tổng quát
</CustomButton>
)}
</div>
<GridColumn col={3}>
{/* ID PHIÊN KHÁM */} {/* ID PHIÊN KHÁM */}
<div className="space-y-1"> <div className="space-y-1">
<p className="text-[14px] font-medium text-[#697586]"> <p className="text-[14px] font-medium text-[#697586]">
@ -103,6 +157,17 @@ const DetailConsultation = () => {
</p> </p>
</div> </div>
{/* TÊN BỆNH NHÂN */}
<div className="space-y-1">
<p className="text-[14px] font-medium text-[#697586]">
TÊN BỆNH NHÂN
</p>
<p className="text-[15px] font-medium text-[#202939]">
{consultation.patientName}
</p>
</div>
{/* NGÀY GIỜ KHÁM */} {/* NGÀY GIỜ KHÁM */}
<div className="space-y-1"> <div className="space-y-1">
<p className="text-[14px] font-medium text-[#697586]"> <p className="text-[14px] font-medium text-[#697586]">
@ -110,13 +175,17 @@ const DetailConsultation = () => {
</p> </p>
<p className="text-[15px] font-medium text-[#202939]"> <p className="text-[15px] font-medium text-[#202939]">
{consultation.visitDate} {consultation.visitDate
? moment(consultation.visitDate).format("DD/MM/YYYY")
: "---"}
</p> </p>
</div> </div>
{/* TRIỆU CHỨNG */} {/* TRIỆU CHỨNG */}
<div className="space-y-1"> <div className="space-y-1">
<p className="text-[14px] font-medium text-[#697586]">DẤU HIỆU</p> <p className="text-[14px] font-medium text-[#697586]">
DẤU HIỆU
</p>
<p className="text-[15px] font-medium text-[#202939]"> <p className="text-[15px] font-medium text-[#202939]">
{consultation.symptomsText || "---"} {consultation.symptomsText || "---"}
@ -214,8 +283,6 @@ const DetailConsultation = () => {
.join(", ") || "---"} .join(", ") || "---"}
</p> </p>
</div> </div>
{/* TRẠNG THÁI */}
<div className="space-y-1"> <div className="space-y-1">
<p className="text-[14px] font-medium text-[#697586]"> <p className="text-[14px] font-medium text-[#697586]">
TRẠNG THÁI TRẠNG THÁI
@ -230,35 +297,30 @@ const DetailConsultation = () => {
textColor: "#92400E", textColor: "#92400E",
backgroundColor: "#FEF3C7", backgroundColor: "#FEF3C7",
}, },
{ {
state: TYPE_STATUS.InProgress, state: TYPE_STATUS.InProgress,
text: "Đang khám tổng quát", text: "Đang khám tổng quát",
textColor: "#1E3A8A", textColor: "#1E3A8A",
backgroundColor: "#DBEAFE", backgroundColor: "#DBEAFE",
}, },
{ {
state: TYPE_STATUS.ToSpecialty, state: TYPE_STATUS.ToSpecialty,
text: "Chờ khám chuyên khoa", text: "Chờ khám chuyên khoa",
textColor: "#6B21A8", textColor: "#6B21A8",
backgroundColor: "#E9D5FF", backgroundColor: "#E9D5FF",
}, },
{ {
state: TYPE_STATUS.PendingPrescription, state: TYPE_STATUS.PendingPrescription,
text: "Chờ nhận thuốc/kính", text: "Chờ nhận thuốc/kính",
textColor: "#9A3412", textColor: "#9A3412",
backgroundColor: "#FED7AA", backgroundColor: "#FED7AA",
}, },
{ {
state: TYPE_STATUS.Completed, state: TYPE_STATUS.Completed,
text: "Hoàn thành", text: "Hoàn thành",
textColor: "#166534", textColor: "#166534",
backgroundColor: "#DCFCE7", backgroundColor: "#DCFCE7",
}, },
{ {
state: TYPE_STATUS.Cancelled, state: TYPE_STATUS.Cancelled,
text: "Đã hủy", text: "Đã hủy",
@ -268,9 +330,131 @@ const DetailConsultation = () => {
]} ]}
/> />
</div> </div>
</GridColumn>
</div>
</div>
<div>
<div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
{/* HEADER */}
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold text-black">
Danh sách đơn thuốc
</h2>
</div>
<DataWrapper
data={consultation.aggregatedPrescriptionItems}
loading={consulDetailQuery.isLoading}
title="Không có dữ liệu"
note="Vui lòng thử lại sau"
>
<Table
rowKey={(item) => item.id}
data={consultation.aggregatedPrescriptionItems}
column={[
{
title: "Tên thuốc",
render: (item: PrescriptionItem) => (
<span>{item.medicineName}</span>
),
},
{
title: "Liều dùng",
render: (item: PrescriptionItem) => (
<span>{item.dosage}</span>
),
},
{
title: "Tần suất",
render: (item: PrescriptionItem) => (
<span>{item.frequency}</span>
),
},
{
title: "Thời gian",
render: (item: PrescriptionItem) => (
<span>{item.duration}</span>
),
},
{
title: "Hướng dẫn",
render: (item: PrescriptionItem) => (
<span>{item.instructions || "---"}</span>
),
},
]}
/>
</DataWrapper>
</div> </div>
</div> </div>
</div> </div>
{/* TAB CHUYÊN KHOA */}
{specialtyTabs.length > 0 && (
<div className="mt-4">
<TabNavLink query="_type" listHref={specialtyTabs} />
</div>
)}
{/* CHI TIẾT CHUYÊN KHOA */}
{selectedSpecialty && (
<div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
<div className="flex items-center justify-between">
<h3 className="mb-6 text-xl font-semibold">
Thông tin chuyên khoa: {selectedSpecialty.specialtyName}
</h3>
{canUpdateConsultation && (
<CustomButton
variant="midnightBlue"
fullWidth={false}
icon={<Pencil />}
href={`/consultation/update-specialty?_id=${consultation.id}&specialtyClinicId=${selectedSpecialty.id}`}
>
Cập nhật chuyên khoa
</CustomButton>
)}
</div>
<GridColumn col={3}>
<div>
<p className="text-sm text-[#697586]">CHUYÊN KHOA</p>
<p>{selectedSpecialty.specialtyName || "---"}</p>
</div>
<div>
<p className="text-sm text-[#697586]">CHẨN ĐOÁN</p>
<p>{selectedSpecialty.diagnosis || "---"}</p>
</div>
<div>
<p className="text-sm text-[#697586]">GHI CHÚ KHÁM</p>
<p>{selectedSpecialty.specialtyNotes || "---"}</p>
</div>
<div>
<p className="text-sm text-[#697586]">THỦ THUẬT</p>
<p>{selectedSpecialty.procedureNotes || "---"}</p>
</div>
{selectedSpecialty.glassRequired && (
<>
<div>
<p className="text-sm text-[#697586]">CẦN ĐEO KÍNH</p>
<p>Có</p>
</div>
<div>
<p className="text-sm text-[#697586]">LOẠI KÍNH</p>
<p>{selectedSpecialty.glassType || "---"}</p>
</div>
</>
)}
</GridColumn>
</div>
)}
</div> </div>
); );
}; };

357
src/components/page/consultation/MainPageConsultation/MainPageConsultation.tsx
View File

@ -20,44 +20,44 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import Link from "next/link"; import Link from "next/link";
import { Pencil, ClipboardPlus } from "lucide-react"; import { Pencil, ClipboardPlus, Ellipsis } from "lucide-react";
import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import Pagination from "@/components/customs/custom-pagination"; import Pagination from "@/components/customs/custom-pagination";
import moment from "moment"; import moment from "moment";
import specialtyServices, { SpecialtyItem } from "@/services/specialtyServices"; import specialtyServices, { SpecialtyItem } from "@/services/specialtyServices";
import FilterCustom from "@/components/customs/FilterCustom"; import FilterCustom from "@/components/customs/FilterCustom";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@radix-ui/react-tooltip";
import * as Popover from "@radix-ui/react-popover";
import clsx from "clsx";
import TabNavLink from "@/components/customs/custom-tabs";
import { removeVietnameseTones } from "@/common/funcs/optionConvert";
const MainPageConsultation = () => { const MainPageConsultation = () => {
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
/* ========================= /* =========================
QUERY PARAMS QUERY PARAMS
========================= */ ========================= */
const _page = searchParams.get("_page"); const _page = searchParams.get("_page");
const _pageSize = searchParams.get("_pageSize"); const _pageSize = searchParams.get("_pageSize");
const _keyword = searchParams.get("_keyword"); const _keyword = searchParams.get("_keyword");
const _status = searchParams.get("_status"); const _status = searchParams.get("_status");
const _specialtyId = searchParams.get("_specialtyId"); const _specialtyId = searchParams.get("_specialtyId");
const _type = searchParams.get("_type");
/* ========================= const isAllTab = !_type || _type === "all";
STATE
========================= */
const [selectedConsultationId, setSelectedConsultationId] = const [selectedConsultationId, setSelectedConsultationId] =
useState<string>(""); useState<string>("");
@ -66,10 +66,6 @@ const MainPageConsultation = () => {
const [openCompleteDialog, setOpenCompleteDialog] = useState(false); const [openCompleteDialog, setOpenCompleteDialog] = useState(false);
/* =========================
GET LIST
========================= */
const consultationQuery = useQuery<ConsultationResponse>({ const consultationQuery = useQuery<ConsultationResponse>({
queryKey: [QUERY_KEY.table_list_consultation, _page, _pageSize, _keyword], queryKey: [QUERY_KEY.table_list_consultation, _page, _pageSize, _keyword],
@ -102,10 +98,6 @@ const MainPageConsultation = () => {
}, },
}); });
/* =========================
DATA
========================= */
const specialtyQuery = useQuery({ const specialtyQuery = useQuery({
queryKey: [QUERY_KEY.list_specialty_lookup], queryKey: [QUERY_KEY.list_specialty_lookup],
queryFn: async () => { queryFn: async () => {
@ -121,10 +113,20 @@ const MainPageConsultation = () => {
const consultationData = useMemo(() => { const consultationData = useMemo(() => {
let data = consultationQuery.data?.items || []; let data = consultationQuery.data?.items || [];
if (_status) { // =========================
data = data.filter((item) => item.status === Number(_status)); // TAB CHUYÊN KHOA
// =========================
if (_type && _type !== "all") {
data = data.filter((item) =>
item.specialtyClinics?.some(
(specialty) => specialty.specialtyId === _type,
),
);
} }
// =========================
// FILTER CHUYÊN KHOA
// =========================
if (_specialtyId) { if (_specialtyId) {
data = data.filter((item) => data = data.filter((item) =>
item.specialtyClinics?.some( item.specialtyClinics?.some(
@ -133,16 +135,29 @@ const MainPageConsultation = () => {
); );
} }
return data; // =========================
}, [consultationQuery.data, _status, _specialtyId]); // FILTER TRẠNG THÁI
// =========================
if (_status) {
data = data.filter((item) => item.status === Number(_status));
}
/* ========================= return data;
UPDATE QUERY }, [consultationQuery.data, _type, _specialtyId, _status]); // Bỏ _keyword khỏi dependencies vì không dùng lọc client nữa
========================= */
const page = _page ? Number(_page) : 1; const page = _page ? Number(_page) : 1;
const pageSize = _pageSize ? Number(_pageSize) : 10; const pageSize = _pageSize ? Number(_pageSize) : 10;
useEffect(() => {
if (!_type) {
const params = new URLSearchParams(searchParams.toString());
params.set("_type", "all");
router.replace(`${pathname}?${params.toString()}`);
}
}, [_type, pathname, router, searchParams]);
const updateQuery = (key: string, value: string | number) => { const updateQuery = (key: string, value: string | number) => {
const params = new URLSearchParams(searchParams.toString()); const params = new URLSearchParams(searchParams.toString());
@ -166,25 +181,32 @@ const MainPageConsultation = () => {
router.push(queryString ? `?${queryString}` : pathname); router.push(queryString ? `?${queryString}` : pathname);
}; };
/* ========================= const consultation = consultationQuery.data;
CLOSE POPUP
========================= */
// const handleClosePopup = () => { const specialtyTabs = useMemo(() => {
// const params = new URLSearchParams(searchParams.toString()); const specialtyMap = new Map();
// params.delete("_create"); consultation?.items?.forEach((consultationItem) => {
consultationItem.specialtyClinics?.forEach((specialty) => {
if (!specialtyMap.has(specialty.specialtyId)) {
specialtyMap.set(specialty.specialtyId, {
pathname: "/consultation",
query: specialty.specialtyId,
title: specialty.specialtyName,
});
}
});
});
// params.delete("_update"); return [
{
// const queryString = params.toString(); pathname: "/consultation",
query: "all",
// router.push(queryString ? `?${queryString}` : pathname); title: "Tất cả",
// }; },
...Array.from(specialtyMap.values()),
/* ========================= ];
DIALOG }, [consultation?.items]);
========================= */
const handleOpenCancel = (item: ConsultationItem) => { const handleOpenCancel = (item: ConsultationItem) => {
setSelectedConsultationId(item.id); setSelectedConsultationId(item.id);
@ -204,10 +226,6 @@ const MainPageConsultation = () => {
setOpenCompleteDialog(false); setOpenCompleteDialog(false);
}; };
/* =========================
CANCEL
========================= */
const cancelConsultationMutation = useMutation({ const cancelConsultationMutation = useMutation({
mutationFn: async () => { mutationFn: async () => {
return await httpRequest({ return await httpRequest({
@ -230,10 +248,6 @@ const MainPageConsultation = () => {
}, },
}); });
/* =========================
COMPLETE
========================= */
const completeConsultationMutation = useMutation({ const completeConsultationMutation = useMutation({
mutationFn: async () => { mutationFn: async () => {
return await httpRequest({ return await httpRequest({
@ -258,10 +272,6 @@ const MainPageConsultation = () => {
}, },
}); });
/* =========================
CONFIRM
========================= */
const handleConfirmCancel = () => { const handleConfirmCancel = () => {
cancelConsultationMutation.mutate(); cancelConsultationMutation.mutate();
}; };
@ -271,11 +281,15 @@ const MainPageConsultation = () => {
}; };
return ( return (
<div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow"> <div>
<div className="rounded-lg bg-white shadow mb-6 p-6">
<TabNavLink query="_type" listHref={specialtyTabs} />
</div>
<div className="flex flex-col gap-4 rounded-lg bg-white shadow p-6">
{/* HEADER */} {/* HEADER */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-xl font-semibold text-black">Phiên khám</h2> <h2 className="text-xl font-semibold text-black">Phiên khám</h2>
{isAllTab && (
<CustomButton <CustomButton
variant="midnightBlue" variant="midnightBlue"
fullWidth={false} fullWidth={false}
@ -285,11 +299,19 @@ const MainPageConsultation = () => {
> >
Tạo phiên khám Tạo phiên khám
</CustomButton> </CustomButton>
)}
</div> </div>
{/* SEARCH */} {/* SEARCH */}
<div className="flex items-center justify-between gap-4"> <div
<div className="w-full md:min-w-[400px]"> className={clsx(
"flex gap-4",
isAllTab
? "flex-col lg:flex-row lg:items-center lg:justify-between"
: "flex-col",
)}
>
<div className="w-full lg:min-w-[400px]">
<Search <Search
keyword={_keyword ?? ""} keyword={_keyword ?? ""}
setKeyword={(value) => updateQuery("_keyword", value)} setKeyword={(value) => updateQuery("_keyword", value)}
@ -297,19 +319,20 @@ const MainPageConsultation = () => {
/> />
</div> </div>
{isAllTab && (
<div className="flex flex-col gap-4 sm:flex-row">
<FilterCustom<string | null> <FilterCustom<string | null>
name="Chuyên khoa" name="Chuyên khoa"
value={_specialtyId} value={_specialtyId}
onChange={(value) => updateQuery("_specialtyId", value ?? "")} onChange={(value) => updateQuery("_specialtyId", value ?? "")}
listOption={useMemo(() => { listOption={
return (
specialtyQuery.data?.map((item) => ({ specialtyQuery.data?.map((item) => ({
uuid: item.id, uuid: item.id,
name: item.name, name: item.name,
})) || [] })) || []
); }
}, [specialtyQuery.data])}
/> />
<FilterCustom<number | null> <FilterCustom<number | null>
name="Trạng thái" name="Trạng thái"
value={_status ? Number(_status) : null} value={_status ? Number(_status) : null}
@ -342,6 +365,8 @@ const MainPageConsultation = () => {
]} ]}
/> />
</div> </div>
)}
</div>
{/* TABLE */} {/* TABLE */}
<DataWrapper <DataWrapper
@ -358,21 +383,60 @@ const MainPageConsultation = () => {
title: "TÊN BỆNH NHÂN", title: "TÊN BỆNH NHÂN",
render: (item: ConsultationItem) => ( render: (item: ConsultationItem) => (
<span>{item.patientName}</span> <TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Link
href={`/patient/${item.patientId}`}
className="text-blue-500 hover:underline"
>
{item.patientName}
</Link>
</TooltipTrigger>
<TooltipContent>
<p className="p-2 bg-gray-400 border rounded-full">
Chi tiết bệnh nhân
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
), ),
}, },
{ {
title: "MÃ PHIÊN KHÁM", title: "MÃ PHIÊN KHÁM",
fixedLeft: true, fixedLeft: true,
render: (item: ConsultationItem) => ( render: (item: ConsultationItem) => {
const specialty = item.specialtyClinics.find(
(x) => x.specialtyId === _type,
);
const detailHref = isAllTab
? `/consultation/${item.id}`
: `/consultation/${item.id}?_type=${specialty?.id ?? ""}`;
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Link <Link
href={`/consultation/${item.id}`} href={detailHref}
className="text-blue-500 hover:underline" className="text-blue-500 hover:underline"
> >
{item.sessionCode} {item.sessionCode}
</Link> </Link>
), </TooltipTrigger>
<TooltipContent>
<p className="rounded-full border bg-gray-400 p-2">
Chi tiết phiên khám
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
},
}, },
{ {
@ -417,34 +481,44 @@ const MainPageConsultation = () => {
<span>{item.doctorNotes || "---"}</span> <span>{item.doctorNotes || "---"}</span>
), ),
}, },
{
title: "CÁC CHUYÊN KHOA ĐANG CHỜ KHÁM",
render: (item: ConsultationItem) => {
const waitingSpecialties = item.specialtyClinics
?.filter((specialty) => specialty.specialtyStatus === 1)
.map((specialty) => specialty.specialtyName)
.join(", ");
return <span>{waitingSpecialties || "---"}</span>;
},
},
{
title: "CÁC CHUYÊN KHOA ĐÃ KHÁM",
render: (item: ConsultationItem) => {
const completedSpecialties = item.specialtyClinics
?.filter((specialty) => specialty.specialtyStatus === 3)
.map((specialty) => specialty.specialtyName)
.join(", ");
return <span>{completedSpecialties || "---"}</span>;
},
},
{ {
title: "TRẠNG THÁI", title: "TRẠNG THÁI",
render: (item: ConsultationItem) => {
// ===== TAB CHUYÊN KHOA =====
if (!isAllTab) {
const specialty = item.specialtyClinics.find(
(x) => x.specialtyId === _type,
);
render: (item: ConsultationItem) => ( return (
<StateActive
stateActive={specialty?.specialtyStatus}
listState={[
{
state: 1,
text: "Mới được chỉ định",
textColor: "#92400E",
backgroundColor: "#FEF3C7",
},
{
state: 2,
text: "Đang khám",
textColor: "#1E3A8A",
backgroundColor: "#DBEAFE",
},
{
state: 3,
text: "Đã Hoàn thành",
textColor: "#166534",
backgroundColor: "#DCFCE7",
},
]}
/>
);
}
// ===== TAB TẤT CẢ =====
return (
<StateActive <StateActive
stateActive={item.status} stateActive={item.status}
listState={[ listState={[
@ -454,35 +528,30 @@ const MainPageConsultation = () => {
textColor: "#92400E", textColor: "#92400E",
backgroundColor: "#FEF3C7", backgroundColor: "#FEF3C7",
}, },
{ {
state: TYPE_STATUS.InProgress, state: TYPE_STATUS.InProgress,
text: "Đang khám tổng quát", text: "Đang khám tổng quát",
textColor: "#1E3A8A", textColor: "#1E3A8A",
backgroundColor: "#DBEAFE", backgroundColor: "#DBEAFE",
}, },
{ {
state: TYPE_STATUS.ToSpecialty, state: TYPE_STATUS.ToSpecialty,
text: "Chờ khám chuyên khoa", text: "Chờ khám chuyên khoa",
textColor: "#6B21A8", textColor: "#6B21A8",
backgroundColor: "#E9D5FF", backgroundColor: "#E9D5FF",
}, },
{ {
state: TYPE_STATUS.PendingPrescription, state: TYPE_STATUS.PendingPrescription,
text: "Chờ nhận thuốc/kính", text: "Chờ nhận thuốc/kính",
textColor: "#9A3412", textColor: "#9A3412",
backgroundColor: "#FED7AA", backgroundColor: "#FED7AA",
}, },
{ {
state: TYPE_STATUS.Completed, state: TYPE_STATUS.Completed,
text: "Hoàn thành", text: "Hoàn thành",
textColor: "#166534", textColor: "#166534",
backgroundColor: "#DCFCE7", backgroundColor: "#DCFCE7",
}, },
{ {
state: TYPE_STATUS.Cancelled, state: TYPE_STATUS.Cancelled,
text: "Đã hủy", text: "Đã hủy",
@ -491,9 +560,9 @@ const MainPageConsultation = () => {
}, },
]} ]}
/> />
), );
},
}, },
{ {
fixedRight: true, fixedRight: true,
@ -506,34 +575,84 @@ const MainPageConsultation = () => {
const isDisabled = isCancelled || isCompleted; const isDisabled = isCancelled || isCompleted;
// Tìm chuyên khoa có specialtyStatus = 1 // ===== TAB CHUYÊN KHOA =====
const specialtyClinicActive = item.specialtyClinics?.find( if (!isAllTab) {
(specialty) => specialty.specialtyStatus === 1, const specialty = item.specialtyClinics.find(
(x) => x.specialtyId === _type,
); );
if (!specialty) return null;
return ( return (
<div className="flex items-center gap-2">
{/* UPDATE */}
<CustomButton <CustomButton
size="sm" size="sm"
variant="midnightBlue"
disabled={isDisabled} disabled={isDisabled}
icon={
specialtyClinicActive ? undefined : (
<Pencil className="text-blue-400" />
)
}
href={ href={
specialtyClinicActive !isDisabled
? `/consultation/update-specialty?_id=${item.id}&specialtyClinicId=${specialtyClinicActive.id}` ? `/consultation/update-specialty?_id=${item.id}&specialtyClinicId=${specialty.id}`
: `/consultation/update?_id=${item.id}` : undefined
} }
> >
{specialtyClinicActive Cập nhật
? `Cập nhật ${specialtyClinicActive.specialtyName}`
: undefined}
</CustomButton> </CustomButton>
);
}
// ===== TAB TẤT CẢ =====
return (
<div className="flex items-center gap-2">
<Popover.Root>
<Popover.Trigger asChild>
<button
disabled={isDisabled}
className={clsx(
"flex h-8 w-8 items-center justify-center rounded-full border border-gray-200",
isDisabled
? "cursor-not-allowed opacity-50"
: "hover:bg-gray-100",
)}
>
<Ellipsis size={20} />
</button>
</Popover.Trigger>
{!isDisabled && (
<Popover.Content
side="bottom"
align="end"
sideOffset={8}
className="
z-50
min-w-[300px]
rounded-xl
border
bg-white
p-2
shadow-xl
"
>
<div className="space-y-1">
{item.specialtyClinics.map((specialty) => (
<Link
key={specialty.id}
href={`/consultation/update-specialty?_id=${item.id}&specialtyClinicId=${specialty.id}`}
className="
flex items-center gap-2
rounded-lg px-3 py-2
text-sm
hover:bg-blue-50
"
>
<Pencil size={15} />
<span>{specialty.specialtyName}</span>
</Link>
))}
</div>
</Popover.Content>
)}
</Popover.Root>
{/* CANCEL */}
<CustomButton <CustomButton
size="sm" size="sm"
variant="red" variant="red"
@ -543,7 +662,6 @@ const MainPageConsultation = () => {
Hủy Hủy
</CustomButton> </CustomButton>
{/* COMPLETE */}
<CustomButton <CustomButton
size="sm" size="sm"
variant="green" variant="green"
@ -567,6 +685,7 @@ const MainPageConsultation = () => {
onSetPageSize={(value) => updateQuery("_pageSize", value)} onSetPageSize={(value) => updateQuery("_pageSize", value)}
dependencies={[_pageSize, _keyword, _specialtyId, _status]} dependencies={[_pageSize, _keyword, _specialtyId, _status]}
/> />
</div>
{/* CANCEL DIALOG */} {/* CANCEL DIALOG */}
<CustomDialog <CustomDialog

2
src/components/page/consultation/UpdateConsultation/UpdateConsultation.tsx
View File

@ -145,6 +145,8 @@ const UpdateConsultation = () => {
queryKey: [QUERY_KEY.chi_tiet_phien_kham, id], queryKey: [QUERY_KEY.chi_tiet_phien_kham, id],
}); });
router.back();
// Quay lại trang quản lý danh sách phiên khám // Quay lại trang quản lý danh sách phiên khám
router.push(PATH.CONSULTATION || "/consultation"); router.push(PATH.CONSULTATION || "/consultation");
}, },

2
src/components/page/consultation/UpdateSpecialtyClinicId/UpdateSpecialtyClinicId.tsx
View File

@ -159,6 +159,8 @@ const UpdateSpecialtyClinicId = () => {
queryKey: [QUERY_KEY.chi_tiet_phien_kham, consultationId], queryKey: [QUERY_KEY.chi_tiet_phien_kham, consultationId],
}); });
router.back();
router.push(PATH.CONSULTATION || "/consultation"); router.push(PATH.CONSULTATION || "/consultation");
}, },
}); });

27
src/components/page/patient/DetailPatient/DetailPatient.tsx
View File

@ -21,6 +21,12 @@ import StateActive from "@/components/customs/StateActive";
import DataWrapper from "@/components/customs/DataWrapper"; import DataWrapper from "@/components/customs/DataWrapper";
import Table from "@/components/customs/custom-table"; import Table from "@/components/customs/custom-table";
import moment from "moment"; import moment from "moment";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@radix-ui/react-tooltip";
// import CustomDialog from "@/components/customs/custom-dialog"; // import CustomDialog from "@/components/customs/custom-dialog";
const DetailPatient = () => { const DetailPatient = () => {
@ -110,12 +116,11 @@ const DetailPatient = () => {
<div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"> <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-[28px] flex items-center gap-2 font-semibold text-[#111827]"> <h2
<ArrowLeft className="text-[28px] flex items-center gap-2 font-semibold text-[#111827] cursor-pointer"
onClick={() => router.back()} onClick={() => router.back()}
className="cursor-pointer" >
/>{" "} <ArrowLeft /> {patient?.fullName}
{patient?.fullName}
</h2> </h2>
<div> <div>
<CustomButton <CustomButton
@ -278,12 +283,24 @@ const DetailPatient = () => {
title: "MÃ PHIÊN KHÁM", title: "MÃ PHIÊN KHÁM",
fixedLeft: true, fixedLeft: true,
render: (item: ConsultationItem) => ( render: (item: ConsultationItem) => (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Link <Link
href={`/consultation/${item.id}`} href={`/consultation/${item.id}`}
className="text-blue-500 hover:underline" className="text-blue-500 hover:underline"
> >
{item.sessionCode} {item.sessionCode}
</Link> </Link>
</TooltipTrigger>
<TooltipContent>
<p className="p-2 bg-gray-400 border rounded-full">
Chi tiết phiên khám
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
), ),
}, },

57
src/components/page/patient/MainPagePatient/MainPagePatient.tsx
View File

@ -20,6 +20,13 @@ import React, { useMemo, useState } from "react";
import PopupCreatePatient from "../PopupCreatePatient"; import PopupCreatePatient from "../PopupCreatePatient";
import PopupUpdatePatient from "../PopupUpdatePatient"; import PopupUpdatePatient from "../PopupUpdatePatient";
import Pagination from "@/components/customs/custom-pagination"; import Pagination from "@/components/customs/custom-pagination";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@radix-ui/react-tooltip";
import moment from "moment";
const MainPagePatient = () => { const MainPagePatient = () => {
const router = useRouter(); const router = useRouter();
@ -61,6 +68,7 @@ const MainPagePatient = () => {
Page: Number(_page || 1), Page: Number(_page || 1),
PageSize: Number(_pageSize || 10), PageSize: Number(_pageSize || 10),
Search: _keyword || "", Search: _keyword || "",
// IdentificationNumber: _keyword || "",
SortBy: "id", SortBy: "id",
Desc: true, Desc: true,
}), }),
@ -171,8 +179,29 @@ const MainPagePatient = () => {
* DATA * DATA
*/ */
const patientData = useMemo(() => { const patientData = useMemo(() => {
return patientQuery.data?.items || []; const items = patientQuery.data?.items || [];
}, [patientQuery.data]);
if (!_keyword) return items;
const keyword = _keyword.toLowerCase().trim();
return items.filter((item) => {
return (
item.fullName?.toLowerCase().includes(keyword) ||
item.identificationNumber?.toLowerCase().includes(keyword) ||
item.phone?.toLowerCase().includes(keyword) ||
item.email?.toLowerCase().includes(keyword)
);
});
}, [patientQuery.data, _keyword]);
// const isReturnWithin14Days = (lastVisitDate?: string | null) => {
// if (!lastVisitDate) return false;
// const diffDays = moment().diff(moment(lastVisitDate), "days");
// return diffDays <= 14;
// };
return ( return (
<div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow"> <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
@ -217,12 +246,34 @@ const MainPagePatient = () => {
title: "TÊN BỆNH NHÂN", title: "TÊN BỆNH NHÂN",
render: (item: PatientItem) => ( render: (item: PatientItem) => (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Link <Link
href={`/patient/${item.id}`} href={`/patient/${item.id}`}
className="text-blue-500 hover:underline" className="text-blue-500 hover:underline"
> >
{item.fullName || "---"} {item.fullName}
</Link> </Link>
{/* <Link
href={`/patient/${item.id}`}
className={
isReturnWithin14Days(item.lastVisitDate)
? "text-red-500 font-semibold hover:underline"
: "text-blue-500 hover:underline"
}
>
{item.fullName}
</Link> */}
</TooltipTrigger>
<TooltipContent>
<p className="p-2 bg-gray-400 border rounded-full">
Chi tiết bệnh nhân
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
), ),
}, },

8
src/components/page/prescription/CreatePrescription/CreatePrescription.tsx
View File

@ -56,6 +56,7 @@ const CreatePrescription = () => {
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
const queryKeys = [QUERY_KEY.table_list_consultation]; const queryKeys = [QUERY_KEY.table_list_consultation];
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const [folderName, setFolderName] = useState("prescriptions");
const [form, setForm] = useState<PrescriptionForm>({ const [form, setForm] = useState<PrescriptionForm>({
examinationSessionSpecialtyId: "", examinationSessionSpecialtyId: "",
@ -181,7 +182,7 @@ const CreatePrescription = () => {
const handleAddMedicine = () => { const handleAddMedicine = () => {
setForm((prev) => ({ setForm((prev) => ({
...prev, ...prev,
items: [...prev.items, { ...defaultMedicine }], items: [{ ...defaultMedicine }, ...prev.items],
})); }));
}; };
@ -228,7 +229,7 @@ const CreatePrescription = () => {
setLoading(true); setLoading(true);
const uploadResponse: any = await prescriptionServices.uploadImage( const uploadResponse: any = await prescriptionServices.uploadImage(
file, file,
"prescriptions", folderName,
); );
console.log("KẾT QUẢ PHẢN HỒI GỐC TỪ API UPLOAD:", uploadResponse); console.log("KẾT QUẢ PHẢN HỒI GỐC TỪ API UPLOAD:", uploadResponse);
@ -412,8 +413,9 @@ const CreatePrescription = () => {
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{form.items.map((medicine, index) => ( {form.items.map((medicine, index) => (
// Lưu ý: Nếu có trường id duy nhất thì nên dùng thay cho index ở đây
<div <div
key={index} key={`${index}-${form.items.length}`}
className="rounded-2xl border border-gray-200 p-5" className="rounded-2xl border border-gray-200 p-5"
> >
{/* TITLE */} {/* TITLE */}

53
src/components/page/prescription/DetailPrescription/DetailPrescription.tsx
View File

@ -5,13 +5,18 @@ import { httpRequest } from "@/services";
import prescriptionServices, { import prescriptionServices, {
PrescriptionDetail, PrescriptionDetail,
} from "@/services/prescriptionServices"; } from "@/services/prescriptionServices";
import consultationServices, {
ConsultationItem,
} from "@/services/consultationServices";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import Image from "next/image"; import Image from "next/image";
import { useParams } from "next/navigation"; import { useParams, useRouter } from "next/navigation";
import React, { useState } from "react"; import React, { useState } from "react";
import CustomPopup from "@/components/customs/custom-popup"; import CustomPopup from "@/components/customs/custom-popup";
import { ArrowLeft } from "lucide-react";
const DetailPrescription = () => { const DetailPrescription = () => {
const router = useRouter();
const params = useParams(); const params = useParams();
const PrescriptionId = params?.id as string; const PrescriptionId = params?.id as string;
const [openImagePreview, setOpenImagePreview] = useState(false); const [openImagePreview, setOpenImagePreview] = useState(false);
@ -31,7 +36,7 @@ const DetailPrescription = () => {
return ( return (
res || { res || {
id: "", id: "",
examinationSessionId: "", examinationSessionSpecialtyId: "",
prescriptionCode: "", prescriptionCode: "",
prescriptionImg: null, prescriptionImg: null,
notes: "", notes: "",
@ -44,9 +49,46 @@ const DetailPrescription = () => {
const data = prescriptionDetailQuery.data; const data = prescriptionDetailQuery.data;
const specialtyListQuery = useQuery<ConsultationItem[]>({
queryKey: [QUERY_KEY.examination_specialty_list],
enabled: !!data?.examinationSessionSpecialtyId,
queryFn: async () => {
const res = await httpRequest<{
items: ConsultationItem[];
}>({
showMessageFailed: false,
http: consultationServices.getConsultations({ PageSize: 1000 }),
});
return res?.items || [];
},
});
const specialtyName = React.useMemo(() => {
const specialtyId = data?.examinationSessionSpecialtyId;
if (!specialtyId) return "";
const items = specialtyListQuery.data || [];
for (const session of items) {
const found = session.specialtyClinics?.find((s) => s.id === specialtyId);
if (found) return found.specialtyName || "";
}
return "";
}, [data?.examinationSessionSpecialtyId, specialtyListQuery.data]);
return ( return (
<div className="p-6 bg-white rounded-lg shadow"> <div className="p-6 bg-white rounded-lg shadow">
<h1 className="text-xl font-semibold mb-4">Chi tiết đơn thuốc</h1> <div
className="flex items-center gap-1 cursor-pointer"
onClick={() => router.back()}
>
<ArrowLeft />
<h2 className="text-xl font-semibold text-[#111827]">
Chi tiết đơn thuốc
</h2>
</div>
{/* LOADING */} {/* LOADING */}
{prescriptionDetailQuery.isLoading && <p>Đang tải...</p>} {prescriptionDetailQuery.isLoading && <p>Đang tải...</p>}
@ -64,11 +106,12 @@ const DetailPrescription = () => {
</div> </div>
<div> <div>
<strong>Id phiên khám:</strong> {data.examinationSessionId} <strong>Chuyên khoa:</strong>{" "}
{specialtyName || data.examinationSessionSpecialtyId || "---"}
</div> </div>
<div> <div>
<strong>Ghi chú:</strong> {data.notes || "-"} <strong>Ghi chú:</strong> {data.notes || "---"}
</div> </div>
{/* IMAGE */} {/* IMAGE */}

46
src/components/page/prescription/MainPrescription/MainPrescription.tsx
View File

@ -10,8 +10,14 @@ import prescriptionServices, {
PrescriptionItem, PrescriptionItem,
PrescriptionResponse, PrescriptionResponse,
} from "@/services/prescriptionServices"; } from "@/services/prescriptionServices";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@radix-ui/react-tooltip";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Pencil, Pill, Trash2 } from "lucide-react"; import { Eye, Pencil, Pill, Trash2 } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { usePathname, useRouter, useSearchParams } from "next/navigation";
@ -121,12 +127,24 @@ const MainPrescription = () => {
{ {
title: "MÃ ĐƠN THUỐC", title: "MÃ ĐƠN THUỐC",
render: (item: any) => ( render: (item: any) => (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Link <Link
href={`/prescription/${item.id}`} href={`/prescription/${item.id}`}
className="text-blue-500 hover:underline" className="text-blue-500 hover:underline"
> >
{item.prescriptionCode} {item.prescriptionCode}
</Link> </Link>
</TooltipTrigger>
<TooltipContent>
<p className="p-2 bg-gray-400 border rounded-full">
Chi tiết đơn thuốc
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
), ),
}, },
@ -162,20 +180,20 @@ const MainPrescription = () => {
}, },
// ================= ACTION ================= // ================= ACTION =================
// { {
// fixedRight: true, fixedRight: true,
// title: "ACTION", title: "ACTION",
// render: (item: any) => ( render: (item: any) => (
// <div className="flex items-center gap-2"> <div className="flex items-center gap-2">
// <CustomButton <CustomButton
// size="sm" size="sm"
// icon={<Pencil className="text-blue-400" />} icon={<Eye className="text-blue-400" />}
// href={`${PATH.PRESCRIPTION}/update?_id=${item?.id}`} href={`${PATH.PRESCRIPTION}/${item.id}`}
// /> />
// </div> </div>
// ), ),
// }, },
]} ]}
/> />
</DataWrapper> </DataWrapper>

173
src/components/page/statistical/MainPageStatistical/MainPageStatistical.tsx
View File

@ -1,30 +1,49 @@
"use client"; "use client";
import React, { useMemo, useState } from "react";
import moment from "moment";
import { useQuery } from "@tanstack/react-query";
import { Users, Stethoscope, Pill } from "lucide-react";
import Table from "@/components/customs/custom-table"; import Table from "@/components/customs/custom-table";
import DataWrapper from "@/components/customs/DataWrapper"; import DataWrapper from "@/components/customs/DataWrapper";
import { QUERY_KEY } from "@/constant/config/enum";
import { QUERY_KEY, TYPE_DATE } from "@/constant/config/enum";
import { httpRequest } from "@/services"; import { httpRequest } from "@/services";
import consultationServices, { import consultationServices, {
ReportResponse, ReportResponse,
} from "@/services/consultationServices"; } from "@/services/consultationServices";
import { useQuery } from "@tanstack/react-query"; import FilterDateRange from "@/components/utils/FilterDateRage";
import moment from "moment";
// import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useMemo } from "react";
const MainPageStatistical = () => { const MainPageStatistical = () => {
// const router = useRouter(); const [date, setDate] = useState<{
// const pathname = usePathname(); from: Date | null;
// const searchParams = useSearchParams(); to: Date | null;
} | null>(null);
const [typeDate, setTypeDate] = useState<TYPE_DATE>(TYPE_DATE.TODAY);
// const _page = searchParams.get("_page"); const isInvalidDate =
!!date?.from && moment(date.from).isAfter(moment().endOf("day"));
// const _pageSize = searchParams.get("_pageSize");
const reportQuery = useQuery<ReportResponse>({ const reportQuery = useQuery<ReportResponse>({
queryKey: [QUERY_KEY.table_list_report], queryKey: [
QUERY_KEY.table_list_report,
date?.from?.toISOString(),
date?.to?.toISOString(),
],
enabled: !!date?.from && !!date?.to && !isInvalidDate,
queryFn: async () => { queryFn: async () => {
const toDate = moment().format("YYYY-MM-DD"); const fromDate = moment(date?.from).format("YYYY-MM-DD");
const fromDate = moment().subtract(14, "days").format("YYYY-MM-DD"); const toDate = moment(date?.to).format("YYYY-MM-DD");
console.log({
FormDate: fromDate,
ToDate: toDate,
});
const res = await httpRequest<ReportResponse>({ const res = await httpRequest<ReportResponse>({
showMessageFailed: true, showMessageFailed: true,
@ -38,35 +57,73 @@ const MainPageStatistical = () => {
}, },
}); });
const report = reportQuery.data;
const reportData = useMemo(() => { const reportData = useMemo(() => {
return reportQuery.data?.specialtyDetails || []; return report?.specialtyDetails || [];
}, [reportQuery.data]); }, [report]);
// const page = _page ? Number(_page) : 1;
// const pageSize = _pageSize ? Number(_pageSize) : 10;
// const updateQuery = (key: string, value?: string | number) => {
// const params = new URLSearchParams(searchParams.toString());
// if (!value) {
// params.delete(key);
// } else {
// params.set(key, String(value));
// }
// const queryString = params.toString();
// router.push(queryString ? `${pathname}?${queryString}` : pathname);
// };
return ( return (
<div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow"> <div className="flex flex-col gap-6">
{/* HEADER */} {/* HEADER */}
<div className="rounded-xl bg-white p-6 shadow">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-xl font-semibold text-black"> <h2 className="text-2xl font-semibold">Thống kê phiên khám</h2>
Thống kê các phiên khám
</h2> <FilterDateRange
date={date}
setDate={setDate}
typeDate={typeDate}
setTypeDate={setTypeDate}
/>
</div> </div>
</div>
{/* CARDS */}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
<div className="rounded-xl bg-white p-5 shadow">
<div className="mb-3 flex items-center justify-between">
<Users size={22} />
</div>
<p className="text-sm text-gray-500">Tổng lượt khám</p>
<h3 className="mt-2 text-3xl font-bold">
{report?.totalSessions || 0}
</h3>
</div>
<div className="rounded-xl bg-white p-5 shadow">
<div className="mb-3 flex items-center justify-between">
<Stethoscope size={22} />
</div>
<p className="text-sm text-gray-500">Lượt khám chuyên khoa</p>
<h3 className="mt-2 text-3xl font-bold">
{report?.totalSpecialtySubSessions || 0}
</h3>
</div>
<div className="rounded-xl bg-white p-5 shadow">
<div className="mb-3 flex items-center justify-between">
<Pill size={22} />
</div>
<p className="text-sm text-gray-500">Đơn thuốc đã cấp</p>
<h3 className="mt-2 text-3xl font-bold">
{report?.totalPrescriptionsIssued || 0}
</h3>
</div>
</div>
{/* BẢNG THỐNG KÊ */}
<div className="rounded-xl bg-white p-6 shadow">
<h3 className="mb-4 text-lg font-semibold">
Thống kê theo chuyên khoa
</h3>
<DataWrapper <DataWrapper
data={reportData} data={reportData}
loading={reportQuery.isLoading} loading={reportQuery.isLoading}
@ -87,19 +144,45 @@ const MainPageStatistical = () => {
}, },
{ {
title: "SỐ CA KHÁM", title: "SỐ CA KHÁM",
render: (item) => <span>{item.totalCases}</span>, render: (item) => (
<span className="font-semibold">{item.totalCases}</span>
),
}, },
]} ]}
/> />
</DataWrapper> </DataWrapper>
{/* <Pagination </div>
total={reportData.length}
page={page} {/* BÁO CÁO TỔNG HỢP */}
pageSize={pageSize} <div className="rounded-xl bg-white p-6 shadow">
onSetPage={(value) => updateQuery("_page", value)} <h3 className="mb-4 text-lg font-semibold">Báo cáo tổng hợp</h3>
onSetPageSize={(value) => updateQuery("_pageSize", value)}
dependencies={[_pageSize]} <div className="space-y-3 text-[15px]">
/> */} <p>
Số lượt khám bệnh nhân đạo:
<strong> {report?.totalSpecialtySubSessions || 0}</strong> lượt
người dân được khám chuyên khoa, cụ thể như sau:
</p>
<ul className="list-disc space-y-2 pl-6">
{reportData.map((item) => (
<li key={item.specialtyId}>
<strong>{item.specialtyName}</strong>: {item.totalCases} ca
</li>
))}
</ul>
<p>
Tổng số đơn thuốc đã cấp:
<strong> {report?.totalPrescriptionsIssued || 0}</strong> đơn.
</p>
{/* <p>
Số suất quà được phát:
<strong> {report?.totalGiftPackagesIssued || 0}</strong> suất.
</p> */}
</div>
</div>
</div> </div>
); );
}; };

85
src/components/utils/FilterDateRage/FilterDateRange.tsx Normal file
View File

@ -0,0 +1,85 @@
"use client";
import React, { useEffect, useState } from "react";
import clsx from "clsx";
import * as Popover from "@radix-ui/react-popover";
import { PropsFilterDateRange } from "./interface";
import Moment from "react-moment";
import { TYPE_DATE } from "@/constant/config/enum";
import { getDateRange } from "@/common/funcs/selectData";
import { ListOptionFilterDate } from "@/constant/config";
import { ChevronDown } from "lucide-react";
import DateOption from "./components/DateOption";
function FilterDateRange({
styleRounded = false,
showOptionAll = false,
date,
setDate,
typeDate,
setTypeDate,
title = "Thời gian",
}: PropsFilterDateRange) {
const [openDate, setOpenDate] = useState(false);
useEffect(() => {
if (typeDate !== null && typeDate !== TYPE_DATE.LUA_CHON) {
setDate(getDateRange(typeDate));
}
}, [typeDate, setDate]);
return (
<Popover.Root open={openDate} onOpenChange={setOpenDate}>
<Popover.Trigger asChild>
<button
type="button"
className={clsx(
"flex h-12 min-w-[240px] items-center justify-between gap-1 rounded-full border border-[#E1E5ED] bg-white px-4 transition",
"hover:border-[#0011ab]",
openDate && "border-[#0011ab]",
styleRounded && "h-10 min-w-[200px] bg-[#f0f2fa]",
)}
>
<div className="flex items-center">
<p className="text-sm font-medium text-[#777E90]">{title}:</p>
<p className="ml-2 text-sm font-medium">
{typeDate === TYPE_DATE.LUA_CHON && date?.from && date?.to ? (
<>
<Moment date={date.from} format="DD/MM/YYYY" />
{" - "}
<Moment date={date.to} format="DD/MM/YYYY" />
</>
) : (
ListOptionFilterDate.find((v) => v.value === typeDate)?.name
)}
</p>
</div>
<ChevronDown
size={16}
className={clsx(
"transition duration-300",
openDate && "rotate-180",
)}
/>
</button>
</Popover.Trigger>
<Popover.Content align="start" sideOffset={8} className="z-50">
<DateOption
showOptionAll={showOptionAll}
date={date}
setDate={setDate}
typeDate={typeDate}
setTypeDate={setTypeDate}
show={openDate}
setShow={setOpenDate}
/>
</Popover.Content>
</Popover.Root>
);
}
export default FilterDateRange;

230
src/components/utils/FilterDateRage/components/CalendarMain/CalendarMain.tsx Normal file
View File

@ -0,0 +1,230 @@
"use client";
import { memo, useCallback, useContext, useMemo } from "react";
import clsx from "clsx";
import { ContextCalendar } from "../RangeDatePicker/RangeDatePicker";
import { PropsCalendarMain } from "./interface";
const months = Array.from({ length: 12 }, (_, i) => i + 1);
function CalendarMain({
date,
setDate,
setType,
type,
year,
}: PropsCalendarMain) {
// ✅ destructure context (fix React Compiler)
const { datePicker, dateHover, setDatePicker, setDateHover } =
useContext<any>(ContextCalendar);
// ===================== HOVER RANGE =====================
const hoverRange = useMemo(() => {
if (datePicker?.from && dateHover) {
return dateHover > datePicker.from
? { start: datePicker.from, end: dateHover }
: { start: dateHover, end: datePicker.from };
}
return null;
}, [datePicker?.from, dateHover]);
// ===================== HANDLE PICK =====================
const handleDatePick = useCallback(
(datePick: Date) => {
if (!datePicker?.from || datePicker?.to) {
return setDatePicker({
from: datePick,
to: null,
});
}
setDateHover(null);
if (datePick < datePicker.from) {
return setDatePicker({
from: datePick,
to: datePicker.from,
});
}
return setDatePicker({
...datePicker,
to: datePick,
});
},
[datePicker, setDatePicker, setDateHover],
);
// ===================== HANDLE HOVER =====================
const handleHover = useCallback(
(d: Date) => {
if (datePicker?.from && !datePicker?.to) {
setDateHover(d);
}
},
[datePicker?.from, datePicker?.to, setDateHover],
);
// ===================== BUILD CALENDAR =====================
const rows = useMemo(() => {
const currentDate = new Date();
const monthStart = new Date(date.getFullYear(), date.getMonth(), 1);
const monthEnd = new Date(date.getFullYear(), date.getMonth() + 1, 0);
const startDate = new Date(monthStart);
const result: React.ReactNode[] = [];
// lùi về CN
while (startDate.getDay() !== 0) {
startDate.setDate(startDate.getDate() - 1);
}
while (startDate <= monthEnd) {
const cells: React.ReactNode[] = [];
for (let i = 0; i < 7; i++) {
const currDate = new Date(startDate);
const isStart = currDate.getTime() === datePicker?.from?.getTime();
const isEnd = currDate.getTime() === datePicker?.to?.getTime();
const isBetween =
datePicker?.from &&
datePicker?.to &&
currDate > datePicker.from &&
currDate < datePicker.to;
const isHover =
hoverRange &&
currDate > hoverRange.start &&
currDate < hoverRange.end;
const isStartHover =
hoverRange && currDate.getTime() === hoverRange.start.getTime();
const isEndHover =
hoverRange && currDate.getTime() === hoverRange.end.getTime();
const isDisabled = startDate.getMonth() !== date.getMonth();
const isToday =
startDate.toDateString() === currentDate.toDateString() &&
startDate.getMonth() === date.getMonth();
cells.push(
<div
key={startDate.getTime()}
onClick={() => handleDatePick(currDate)}
onMouseOver={() => handleHover(currDate)}
className={clsx(
"flex items-center justify-center px-2 py-1 text-sm font-medium rounded border border-transparent transition",
"cursor-pointer select-none hover:opacity-60",
isDisabled && "pointer-events-none opacity-30",
isToday && "border-blue-700",
isStart && "bg-blue-700 text-white rounded-l-md",
isEnd && "bg-blue-700 text-white rounded-r-md",
isBetween && "bg-gray-100",
isHover && "border-y border-blue-700",
isStartHover && "border border-blue-700 rounded-l-md",
isEndHover && "border border-blue-700 rounded-r-md",
)}
>
{startDate.getDate()}
</div>,
);
startDate.setDate(startDate.getDate() + 1);
}
result.push(
<div key={startDate.getTime()} className="grid grid-cols-7 gap-[2px]">
{cells}
</div>,
);
}
return result;
}, [
date,
datePicker?.from,
datePicker?.to,
handleDatePick,
handleHover,
hoverRange,
]);
// ===================== YEAR LIST =====================
const listYear = useMemo(() => {
if (!year) return [];
return Array.from(
{ length: year.last - year.first + 1 },
(_, i) => year.first + i,
);
}, [year]);
// ===================== UI =====================
return (
<div onMouseLeave={() => setDateHover(null)}>
{/* DATE */}
{type === 0 && rows}
{/* MONTH */}
{type === 1 && (
<div className="grid grid-cols-3 gap-1.5 min-w-[280px]">
{months.map((m) => (
<div
key={m}
onClick={() => {
const newDate = new Date(date);
newDate.setMonth(m - 1);
setDate(newDate);
setType(0);
}}
className={clsx(
"cursor-pointer select-none rounded px-2 py-1 text-center text-sm font-semibold transition",
"hover:bg-gray-100 hover:opacity-70",
m === date.getMonth() + 1 &&
"bg-blue-500 text-white hover:bg-blue-500 hover:opacity-100",
)}
>
Tháng {m}
</div>
))}
</div>
)}
{/* YEAR */}
{type === 2 && (
<div className="grid grid-cols-3 gap-1.5 min-w-[280px]">
{listYear.map((y) => (
<div
key={y}
onClick={() => {
const newDate = new Date(date);
newDate.setFullYear(y);
setDate(newDate);
setType(1);
}}
className={clsx(
"cursor-pointer select-none rounded px-2 py-1 text-center text-sm font-semibold transition",
"hover:bg-gray-100 hover:opacity-70",
y === date.getFullYear() &&
"bg-blue-500 text-white hover:bg-blue-500 hover:opacity-100",
)}
>
{y}
</div>
))}
</div>
)}
</div>
);
}
export default memo(CalendarMain);

1
src/components/utils/FilterDateRage/components/CalendarMain/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from "./CalendarMain";

7
src/components/utils/FilterDateRage/components/CalendarMain/interface/index.ts Normal file
View File

@ -0,0 +1,7 @@
export interface PropsCalendarMain {
date: Date;
setDate: (date: Date) => void;
setType: (num: number) => void;
type: number;
year: any;
}

80
src/components/utils/FilterDateRage/components/DateOption/DateOption.tsx Normal file
View File

@ -0,0 +1,80 @@
"use client";
import clsx from "clsx";
import { Check } from "lucide-react";
import { PropsDateOption } from "./interface";
import { TYPE_DATE } from "@/constant/config/enum";
import { getDateRange } from "@/common/funcs/selectData";
import { ListOptionFilterDate } from "@/constant/config";
import RangeDatePicker from "../RangeDatePicker";
export default function DateOption({
showOptionAll,
date,
setDate,
typeDate,
setTypeDate,
show,
setShow,
}: PropsDateOption) {
const isCustom = Number(typeDate) === TYPE_DATE.LUA_CHON;
return (
<div className="flex gap-2">
{/* MENU */}
<div
className="
w-[180px]
rounded-2xl
bg-white
p-2
shadow-xl
"
>
{(showOptionAll
? ListOptionFilterDate
: ListOptionFilterDate.filter((item) => item.value !== TYPE_DATE.ALL)
).map((item) => {
const active = item.value === typeDate;
return (
<div
key={item.value}
onClick={() => {
setTypeDate(item.value);
if (item.value !== TYPE_DATE.LUA_CHON) {
setDate(getDateRange(item.value));
setShow(false);
}
}}
className={clsx(
"flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm",
active ? "bg-blue-50 text-blue-600" : "hover:bg-gray-50",
)}
>
<span>{item.name}</span>
{active && item.value !== TYPE_DATE.LUA_CHON && (
<Check size={16} />
)}
</div>
);
})}
</div>
{/* DATE PICKER */}
{isCustom && (
<RangeDatePicker
value={date}
onSetValue={setDate}
open={show}
onClose={() => setShow(false)}
/>
)}
</div>
);
}

1
src/components/utils/FilterDateRage/components/DateOption/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from "./DateOption";

12
src/components/utils/FilterDateRage/components/DateOption/interface/index.ts Normal file
View File

@ -0,0 +1,12 @@
export interface PropsDateOption {
showOptionAll?: boolean;
date: {
from: Date | null;
to: Date | null;
} | null;
setDate: (any: any) => void;
typeDate: number | null;
setTypeDate: (any: any) => void;
show: boolean;
setShow: (any: any) => void;
}

219
src/components/utils/FilterDateRage/components/RangeDatePicker/RangeDatePicker.tsx Normal file
View File

@ -0,0 +1,219 @@
"use client";
import { createContext, memo, useCallback, useEffect, useState } from "react";
import { PropsRangeDatePicker } from "./interface";
import clsx from "clsx";
import { ChevronLeft, MoveRight, ChevronRight } from "lucide-react";
import CalendarMain from "../CalendarMain";
import Button from "@/components/customs/custom-button";
import Moment from "react-moment";
const daysOfWeek = ["CN", "T2", "T3", "T4", "T5", "T6", "T7"];
export const ContextCalendar = createContext<any>(null);
function RangeDatePicker({
onClose,
onSetValue,
value,
open,
onSubmit,
}: PropsRangeDatePicker) {
const [typeCalendarLeft, setTypeCalendarLeft] = useState(0);
const [typeCalendarRight, setTypeCalendarRight] = useState(0);
const [dateLeft, setDateLeft] = useState(new Date());
const [dateRight, setDateRight] = useState(
new Date(new Date().getFullYear(), new Date().getMonth() + 1),
);
const [dateHover, setDateHover] = useState<Date | null>(null);
const [yearTableLeft, setYearTableLeft] = useState<any>();
const [yearTableRight, setYearTableRight] = useState<any>();
const [datePicker, setDatePicker] = useState({
from: null as Date | null,
to: null as Date | null,
});
// ===== HANDLE =====
const handleNext = useCallback(
(isRight?: boolean) => {
if (isRight) {
if (typeCalendarRight === 0) {
setDateRight((prev) => {
const newDate = new Date(prev.getFullYear(), prev.getMonth() + 1);
return newDate;
});
}
} else {
if (typeCalendarLeft === 0) {
setDateLeft((prev) => {
const newDate = new Date(prev.getFullYear(), prev.getMonth() + 1);
return newDate < dateRight ? newDate : prev;
});
}
}
},
[dateRight, typeCalendarLeft, typeCalendarRight],
);
const handlePrev = useCallback(
(isRight?: boolean) => {
if (isRight) {
if (typeCalendarRight === 0) {
setDateRight((prev) => {
const newDate = new Date(prev.getFullYear(), prev.getMonth() - 1);
return dateLeft < newDate ? newDate : prev;
});
}
} else {
if (typeCalendarLeft === 0) {
setDateLeft((prev) => {
return new Date(prev.getFullYear(), prev.getMonth() - 1);
});
}
}
},
[dateLeft, typeCalendarLeft, typeCalendarRight],
);
const handleSubmit = useCallback(() => {
if (datePicker.from && datePicker.to) {
onSetValue(datePicker);
onClose();
onSubmit && onSubmit();
}
}, [datePicker]);
// ===== EFFECT =====
useEffect(() => {
if (!open) {
setDatePicker({ from: value?.from, to: value?.to });
}
}, [open, value]);
useEffect(() => {
setYearTableLeft({
first: dateLeft.getFullYear() - 5,
last: dateLeft.getFullYear() + 6,
});
setYearTableRight({
first: dateRight.getFullYear() - 5,
last: dateRight.getFullYear() + 6,
});
}, [dateLeft, dateRight]);
return (
<ContextCalendar.Provider
value={{ datePicker, setDateHover, dateHover, setDatePicker }}
>
<div className="rounded bg-white shadow-[0px_137px_123px_rgba(175,175,175,0.11),0px_59px_64px_rgba(175,175,175,0.08),0px_29px_43px_rgba(175,175,175,0.07)]">
{/* HEADER DATE */}
<div className="flex items-center gap-3 border-b p-3">
<span
className={clsx(
"text-sm font-medium text-gray-400",
datePicker.from && "font-semibold text-[#23262f]",
)}
>
{datePicker.from ? (
<Moment format="DD/MM/YYYY">{datePicker.from}</Moment>
) : (
"Ngày bắt đầu"
)}
</span>
<MoveRight size={20} />
<span
className={clsx(
"text-sm font-medium text-gray-400",
datePicker.to && "font-semibold text-[#23262f]",
)}
>
{datePicker.to ? (
<Moment format="DD/MM/YYYY">{datePicker.to}</Moment>
) : (
"Ngày kết thúc"
)}
</span>
</div>
{/* CALENDAR */}
<div className="flex max-md:flex-col">
{[false, true].map((isRight, idx) => {
const date = isRight ? dateRight : dateLeft;
const type = isRight ? typeCalendarRight : typeCalendarLeft;
const setType = isRight
? setTypeCalendarRight
: setTypeCalendarLeft;
const year = isRight ? yearTableRight : yearTableLeft;
return (
<div key={idx} className="p-3">
{/* TITLE */}
<div className="mb-3 flex items-center justify-between border-b pb-3">
<button
onClick={() => handlePrev(isRight)}
className="cursor-pointer disabled:opacity-10"
>
<ChevronLeft size={20} />
</button>
<p
className="cursor-pointer text-base font-semibold"
onClick={() => setType(type === 0 ? 1 : type === 1 ? 2 : 0)}
>
Tháng {date.getMonth() + 1}, {date.getFullYear()}
</p>
<button
onClick={() => handleNext(isRight)}
className="cursor-pointer"
>
<ChevronRight size={20} />
</button>
</div>
{/* DAYS */}
{type === 0 && (
<div className="grid grid-cols-7">
{daysOfWeek.map((d) => (
<div
key={d}
className="flex items-center justify-center px-2 py-1 text-sm font-semibold"
>
{d}
</div>
))}
</div>
)}
{/* CALENDAR MAIN */}
<CalendarMain
date={date}
setDate={isRight ? setDateRight : setDateLeft}
setType={setType}
type={type}
year={year}
/>
</div>
);
})}
</div>
{/* BUTTON */}
<div className="grid grid-cols-2 gap-3 p-3 pt-0">
<Button onClick={onClose}>Hủy bỏ</Button>
<Button
onClick={handleSubmit}
disable={!datePicker.from || !datePicker.to}
>
Áp dụng
</Button>
</div>
</div>
</ContextCalendar.Provider>
);
}
export default memo(RangeDatePicker);

1
src/components/utils/FilterDateRage/components/RangeDatePicker/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from "./RangeDatePicker";

7
src/components/utils/FilterDateRage/components/RangeDatePicker/interface/index.ts Normal file
View File

@ -0,0 +1,7 @@
export interface PropsRangeDatePicker {
onClose: () => void;
onSetValue: (any: any) => void;
onSubmit?: () => void;
value: any;
open?: boolean;
}

1
src/components/utils/FilterDateRage/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from "./FilterDateRange";

17
src/components/utils/FilterDateRage/interface/index.ts Normal file
View File

@ -0,0 +1,17 @@
import { Dispatch, SetStateAction } from "react";
import { TYPE_DATE } from "@/constant/config/enum";
export interface PropsFilterDateRange {
styleRounded?: boolean;
showOptionAll?: boolean;
date: {
from: Date | null;
to: Date | null;
} | null;
setDate: Dispatch<
SetStateAction<{ from: Date | null; to: Date | null } | null>
>;
typeDate: TYPE_DATE;
setTypeDate: Dispatch<SetStateAction<TYPE_DATE>>;
title?: string;
}

3
src/constant/config/enum.ts
View File

@ -6,6 +6,7 @@ export enum QUERY_KEY {
table_list_report, table_list_report,
list_specialty_lookup, list_specialty_lookup,
examination_specialty_list,
chi_tiet_benh_nhan, chi_tiet_benh_nhan,
chi_tiet_don_thuoc, chi_tiet_don_thuoc,
@ -34,7 +35,7 @@ export enum TYPE_GENDER {
} }
export enum TYPE_DATE { export enum TYPE_DATE {
ALL = -1, // ALL = -1,
TODAY = 1, TODAY = 1,
YESTERDAY = 2, YESTERDAY = 2,
THIS_WEEK = 3, THIS_WEEK = 3,

63
src/constant/config/index.ts
View File

@ -5,6 +5,7 @@ import {
Pill, Pill,
Users, Users,
} from "lucide-react"; } from "lucide-react";
import { TYPE_DATE } from "./enum";
export enum PATH { export enum PATH {
HOME = "/", HOME = "/",
@ -35,17 +36,17 @@ export const Menus: {
}[] = [ }[] = [
{ {
group: [ group: [
// { {
// title: "Dashboard", title: "Dashboard",
// icon: CircleGauge, icon: CircleGauge,
// path: PATH.DASHBOARD || PATH.HOME, path: PATH.DASHBOARD || PATH.HOME,
// pathActive: PATH.DASHBOARD, pathActive: PATH.DASHBOARD,
// }, },
{ {
title: "Bệnh nhân", title: "Bệnh nhân",
icon: Users, icon: Users,
path: PATH.PATIENT || PATH.HOME, path: PATH.PATIENT,
pathActive: PATH.PATIENT || PATH.HOME, pathActive: PATH.PATIENT,
}, },
{ {
title: "Phiên khám", title: "Phiên khám",
@ -69,4 +70,50 @@ export const Menus: {
}, },
]; ];
export const ListOptionFilterDate: {
name: string;
value: number;
}[] = [
{
name: "Tất cả",
value: TYPE_DATE.ALL,
},
{
name: "Hôm nay",
value: TYPE_DATE.TODAY,
},
{
name: "Hôm qua",
value: TYPE_DATE.YESTERDAY,
},
{
name: "Tuần này",
value: TYPE_DATE.THIS_WEEK,
},
{
name: "Tuần trước",
value: TYPE_DATE.LAST_WEEK,
},
{
name: "7 ngày trước",
value: TYPE_DATE.LAST_7_DAYS,
},
{
name: "Tháng này",
value: TYPE_DATE.THIS_MONTH,
},
{
name: "Tháng trước",
value: TYPE_DATE.LAST_MONTH,
},
{
name: "Năm này",
value: TYPE_DATE.THIS_YEAR,
},
{
name: "Lựa chọn",
value: TYPE_DATE.LUA_CHON,
},
];
export const KEY_STORE = "management-kham-benh"; export const KEY_STORE = "management-kham-benh";

46
src/services/consultationServices.ts
View File

@ -34,10 +34,26 @@ export interface ConsultationItem {
glassRequired: string | null; glassRequired: string | null;
glassType: string | null; glassType: string | null;
examinerName: string; examinerName: string;
specialtyStatus: number; specialtyStatus: string | number;
sharedItems: any[]; sharedItems: {
id: string;
prescriptionId: string;
medicineName: string;
dosage: string;
frequency: string;
duration: string;
instructions: string;
}[];
}[];
aggregatedPrescriptionItems: {
id: string;
prescriptionId: string;
medicineName: string;
dosage: string;
frequency: string;
duration: string;
instructions: string;
}[]; }[];
aggregatedPrescriptionItems: any[];
} }
export interface ConsultationDetail { export interface ConsultationDetail {
@ -46,7 +62,7 @@ export interface ConsultationDetail {
patientName: string; patientName: string;
sessionCode: string; sessionCode: string;
visitDate: string; visitDate: string;
status: number; status: string | number;
chiefComplaint: string | null; chiefComplaint: string | null;
symptomsText: string | null; symptomsText: string | null;
vitalSigns: string | null; vitalSigns: string | null;
@ -66,10 +82,26 @@ export interface ConsultationDetail {
glassRequired: boolean | null; glassRequired: boolean | null;
glassType: string | null; glassType: string | null;
examinerName: string; examinerName: string;
specialtyStatus: number; specialtyStatus: string | number | undefined;
sharedItems: any[]; sharedItems: {
id: string;
prescriptionId: string;
medicineName: string;
dosage: string;
frequency: string;
duration: string;
instructions: string;
}[];
}[];
aggregatedPrescriptionItems: {
id: string;
prescriptionId: string;
medicineName: string;
dosage: string;
frequency: string;
duration: string;
instructions: string;
}[]; }[];
aggregatedPrescriptionItems: any[];
} }
export interface ConsultationResponse { export interface ConsultationResponse {

10
src/services/prescriptionServices.ts
View File

@ -28,9 +28,9 @@ export interface PrescriptionItem {
export interface PrescriptionDetail { export interface PrescriptionDetail {
id: string; id: string;
examinationSessionId: string; examinationSessionSpecialtyId: string;
prescriptionCode: string; prescriptionCode: string;
prescriptionImg: string | null; prescriptionImg: string;
notes: string; notes: string;
createdBy: string; createdBy: string;
items: { items: {
@ -112,11 +112,7 @@ const prescriptionServices = {
/** /**
* UPLOAD IMAGE * UPLOAD IMAGE
*/ */
/**
* UPLOAD IMAGE
* @param file Đối tượng File lấy từ thẻ input hoặc upload component
* @param folderName Tên thư mục lưu trữ (Không bắt buộc)
*/
uploadImage: (file: File, folderName?: string) => { uploadImage: (file: File, folderName?: string) => {
const formData = new FormData(); const formData = new FormData();

579
yarn.lock
View File

@ -303,6 +303,44 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@floating-ui/core@npm:^1.7.5":
version: 1.7.5
resolution: "@floating-ui/core@npm:1.7.5"
dependencies:
"@floating-ui/utils": "npm:^0.2.11"
checksum: 10c0/f9c52205e198b231d63a387b09c659aab08c46a1899e0b0bbe147b8b4f048b546f15ba17cb5d2a471da9534f1883d979425e13e5c4ceee67be63e4b0abd4db5d
languageName: node
linkType: hard
"@floating-ui/dom@npm:^1.7.6":
version: 1.7.6
resolution: "@floating-ui/dom@npm:1.7.6"
dependencies:
"@floating-ui/core": "npm:^1.7.5"
"@floating-ui/utils": "npm:^0.2.11"
checksum: 10c0/5c098e0d7b58c9bc769f276cca1766994c2c9c70c92d091a61bba8b3e9be53c011e0a79a8457fc2fb2f3d91697a26eb52e0a4962ef936dc963b45f58613c212f
languageName: node
linkType: hard
"@floating-ui/react-dom@npm:^2.0.0":
version: 2.1.8
resolution: "@floating-ui/react-dom@npm:2.1.8"
dependencies:
"@floating-ui/dom": "npm:^1.7.6"
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: 10c0/26260ca4bb23b57c73b824062505abf977a008ce6e0463bdacca74f7e49853c4cd1d2bbf1a77c6caa17fa37dfffda2c6c4cd07a8737ebd7474aaff7818401d75
languageName: node
linkType: hard
"@floating-ui/utils@npm:^0.2.11":
version: 0.2.11
resolution: "@floating-ui/utils@npm:0.2.11"
checksum: 10c0/f4bcea1559bdbb721ecc8e8ead423ac58d6a5b6e70b602cf0810ba6ad4ed1c77211b207faa88b278a9042f0c743133de08a203ed6741c1b6443423332884d5b3
languageName: node
linkType: hard
"@humanfs/core@npm:^0.19.2": "@humanfs/core@npm:^0.19.2":
version: 0.19.2 version: 0.19.2
resolution: "@humanfs/core@npm:0.19.2" resolution: "@humanfs/core@npm:0.19.2"
@ -733,6 +771,423 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@radix-ui/primitive@npm:1.1.3":
version: 1.1.3
resolution: "@radix-ui/primitive@npm:1.1.3"
checksum: 10c0/88860165ee7066fa2c179f32ffcd3ee6d527d9dcdc0e8be85e9cb0e2c84834be8e3c1a976c74ba44b193f709544e12f54455d892b28e32f0708d89deda6b9f1d
languageName: node
linkType: hard
"@radix-ui/react-arrow@npm:1.1.7":
version: 1.1.7
resolution: "@radix-ui/react-arrow@npm:1.1.7"
dependencies:
"@radix-ui/react-primitive": "npm:2.1.3"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/c3b46766238b3ee2a394d8806a5141432361bf1425110c9f0dcf480bda4ebd304453a53f294b5399c6ee3ccfcae6fd544921fd01ddc379cf5942acdd7168664b
languageName: node
linkType: hard
"@radix-ui/react-compose-refs@npm:1.1.2":
version: 1.1.2
resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/d36a9c589eb75d634b9b139c80f916aadaf8a68a7c1c4b8c6c6b88755af1a92f2e343457042089f04cc3f23073619d08bb65419ced1402e9d4e299576d970771
languageName: node
linkType: hard
"@radix-ui/react-context@npm:1.1.2":
version: 1.1.2
resolution: "@radix-ui/react-context@npm:1.1.2"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/cece731f8cc25d494c6589cc681e5c01a93867d895c75889973afa1a255f163c286e390baa7bc028858eaabe9f6b57270d0ca6377356f652c5557c1c7a41ccce
languageName: node
linkType: hard
"@radix-ui/react-dismissable-layer@npm:1.1.11":
version: 1.1.11
resolution: "@radix-ui/react-dismissable-layer@npm:1.1.11"
dependencies:
"@radix-ui/primitive": "npm:1.1.3"
"@radix-ui/react-compose-refs": "npm:1.1.2"
"@radix-ui/react-primitive": "npm:2.1.3"
"@radix-ui/react-use-callback-ref": "npm:1.1.1"
"@radix-ui/react-use-escape-keydown": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/c825572a64073c4d3853702029979f6658770ffd6a98eabc4984e1dee1b226b4078a2a4dc7003f96475b438985e9b21a58e75f51db74dd06848dcae1f2d395dc
languageName: node
linkType: hard
"@radix-ui/react-focus-guards@npm:1.1.3":
version: 1.1.3
resolution: "@radix-ui/react-focus-guards@npm:1.1.3"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/0bab65eb8d7e4f72f685d63de7fbba2450e3cb15ad6a20a16b42195e9d335c576356f5a47cb58d1ffc115393e46d7b14b12c5d4b10029b0ec090861255866985
languageName: node
linkType: hard
"@radix-ui/react-focus-scope@npm:1.1.7":
version: 1.1.7
resolution: "@radix-ui/react-focus-scope@npm:1.1.7"
dependencies:
"@radix-ui/react-compose-refs": "npm:1.1.2"
"@radix-ui/react-primitive": "npm:2.1.3"
"@radix-ui/react-use-callback-ref": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/8a6071331bdeeb79b223463de75caf759b8ad19339cab838e537b8dbb2db236891a1f4df252445c854d375d43d9d315dfcce0a6b01553a2984ec372bb8f1300e
languageName: node
linkType: hard
"@radix-ui/react-id@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-id@npm:1.1.1"
dependencies:
"@radix-ui/react-use-layout-effect": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/7d12e76818763d592c331277ef62b197e2e64945307e650bd058f0090e5ae48bbd07691b23b7e9e977901ef4eadcb3e2d5eaeb17a13859083384be83fc1292c7
languageName: node
linkType: hard
"@radix-ui/react-popover@npm:^1.1.15":
version: 1.1.15
resolution: "@radix-ui/react-popover@npm:1.1.15"
dependencies:
"@radix-ui/primitive": "npm:1.1.3"
"@radix-ui/react-compose-refs": "npm:1.1.2"
"@radix-ui/react-context": "npm:1.1.2"
"@radix-ui/react-dismissable-layer": "npm:1.1.11"
"@radix-ui/react-focus-guards": "npm:1.1.3"
"@radix-ui/react-focus-scope": "npm:1.1.7"
"@radix-ui/react-id": "npm:1.1.1"
"@radix-ui/react-popper": "npm:1.2.8"
"@radix-ui/react-portal": "npm:1.1.9"
"@radix-ui/react-presence": "npm:1.1.5"
"@radix-ui/react-primitive": "npm:2.1.3"
"@radix-ui/react-slot": "npm:1.2.3"
"@radix-ui/react-use-controllable-state": "npm:1.2.2"
aria-hidden: "npm:^1.2.4"
react-remove-scroll: "npm:^2.6.3"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/c1c76b5e5985b128d03b621424fb453f769931d497759a1977734d303007da9f970570cf3ea1f6968ab609ab4a97f384168bff056197bd2d3d422abea0e3614b
languageName: node
linkType: hard
"@radix-ui/react-popper@npm:1.2.8":
version: 1.2.8
resolution: "@radix-ui/react-popper@npm:1.2.8"
dependencies:
"@floating-ui/react-dom": "npm:^2.0.0"
"@radix-ui/react-arrow": "npm:1.1.7"
"@radix-ui/react-compose-refs": "npm:1.1.2"
"@radix-ui/react-context": "npm:1.1.2"
"@radix-ui/react-primitive": "npm:2.1.3"
"@radix-ui/react-use-callback-ref": "npm:1.1.1"
"@radix-ui/react-use-layout-effect": "npm:1.1.1"
"@radix-ui/react-use-rect": "npm:1.1.1"
"@radix-ui/react-use-size": "npm:1.1.1"
"@radix-ui/rect": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/48e3f13eac3b8c13aca8ded37d74db17e1bb294da8d69f142ab6b8719a06c3f90051668bed64520bf9f3abdd77b382ce7ce209d056bb56137cecc949b69b421c
languageName: node
linkType: hard
"@radix-ui/react-portal@npm:1.1.9":
version: 1.1.9
resolution: "@radix-ui/react-portal@npm:1.1.9"
dependencies:
"@radix-ui/react-primitive": "npm:2.1.3"
"@radix-ui/react-use-layout-effect": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/45b432497c722720c72c493a29ef6085bc84b50eafe79d48b45c553121b63e94f9cdb77a3a74b9c49126f8feb3feee009fe400d48b7759d3552396356b192cd7
languageName: node
linkType: hard
"@radix-ui/react-presence@npm:1.1.5":
version: 1.1.5
resolution: "@radix-ui/react-presence@npm:1.1.5"
dependencies:
"@radix-ui/react-compose-refs": "npm:1.1.2"
"@radix-ui/react-use-layout-effect": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/d0e61d314250eeaef5369983cb790701d667f51734bafd98cf759072755562018052c594e6cdc5389789f4543cb0a4d98f03ff4e8f37338d6b5bf51a1700c1d1
languageName: node
linkType: hard
"@radix-ui/react-primitive@npm:2.1.3":
version: 2.1.3
resolution: "@radix-ui/react-primitive@npm:2.1.3"
dependencies:
"@radix-ui/react-slot": "npm:1.2.3"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/fdff9b84913bb4172ef6d3af7442fca5f9bba5f2709cba08950071f819d7057aec3a4a2d9ef44cf9cbfb8014d02573c6884a04cff175895823aaef809ebdb034
languageName: node
linkType: hard
"@radix-ui/react-slot@npm:1.2.3":
version: 1.2.3
resolution: "@radix-ui/react-slot@npm:1.2.3"
dependencies:
"@radix-ui/react-compose-refs": "npm:1.1.2"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/5913aa0d760f505905779515e4b1f0f71a422350f077cc8d26d1aafe53c97f177fec0e6d7fbbb50d8b5e498aa9df9f707ca75ae3801540c283b26b0136138eef
languageName: node
linkType: hard
"@radix-ui/react-tooltip@npm:^1.2.8":
version: 1.2.8
resolution: "@radix-ui/react-tooltip@npm:1.2.8"
dependencies:
"@radix-ui/primitive": "npm:1.1.3"
"@radix-ui/react-compose-refs": "npm:1.1.2"
"@radix-ui/react-context": "npm:1.1.2"
"@radix-ui/react-dismissable-layer": "npm:1.1.11"
"@radix-ui/react-id": "npm:1.1.1"
"@radix-ui/react-popper": "npm:1.2.8"
"@radix-ui/react-portal": "npm:1.1.9"
"@radix-ui/react-presence": "npm:1.1.5"
"@radix-ui/react-primitive": "npm:2.1.3"
"@radix-ui/react-slot": "npm:1.2.3"
"@radix-ui/react-use-controllable-state": "npm:1.2.2"
"@radix-ui/react-visually-hidden": "npm:1.2.3"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/de0cbae9c571a00671f160928d819e59502f59be8749f536ab4b180181d9d70aee3925a5b2555f8f32d0bea622bc35f65b70ca7ff0449e4844f891302310cc48
languageName: node
linkType: hard
"@radix-ui/react-use-callback-ref@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-use-callback-ref@npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/5f6aff8592dea6a7e46589808912aba3fb3b626cf6edd2b14f01638b61dbbe49eeb9f67cd5601f4c15b2fb547b9a7e825f7c4961acd4dd70176c969ae405f8d8
languageName: node
linkType: hard
"@radix-ui/react-use-controllable-state@npm:1.2.2":
version: 1.2.2
resolution: "@radix-ui/react-use-controllable-state@npm:1.2.2"
dependencies:
"@radix-ui/react-use-effect-event": "npm:0.0.2"
"@radix-ui/react-use-layout-effect": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/f55c4b06e895293aed4b44c9ef26fb24432539f5346fcd6519c7745800535b571058685314e83486a45bf61dc83887e24826490d3068acc317fb0a9010516e63
languageName: node
linkType: hard
"@radix-ui/react-use-effect-event@npm:0.0.2":
version: 0.0.2
resolution: "@radix-ui/react-use-effect-event@npm:0.0.2"
dependencies:
"@radix-ui/react-use-layout-effect": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/e84ff72a3e76c5ae9c94941028bb4b6472f17d4104481b9eab773deab3da640ecea035e54da9d6f4df8d84c18ef6913baf92b7511bee06930dc58bd0c0add417
languageName: node
linkType: hard
"@radix-ui/react-use-escape-keydown@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-use-escape-keydown@npm:1.1.1"
dependencies:
"@radix-ui/react-use-callback-ref": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/bff53be99e940fef1d3c4df7d560e1d9133182e5a98336255d3063327d1d3dd4ec54a95dc5afe15cca4fb6c184f0a956c70de2815578c318cf995a7f9beabaa1
languageName: node
linkType: hard
"@radix-ui/react-use-layout-effect@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-use-layout-effect@npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/9f98fdaba008dfc58050de60a77670b885792df473cf82c1cef8daee919a5dd5a77d270209f5f0b0abfaac78cb1627396e3ff56c81b735be550409426fe8b040
languageName: node
linkType: hard
"@radix-ui/react-use-rect@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-use-rect@npm:1.1.1"
dependencies:
"@radix-ui/rect": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/271711404c05c589c8dbdaa748749e7daf44bcc6bffc9ecd910821c3ebca0ee245616cf5b39653ce690f53f875c3836fd3f36f51ab1c628273b6db599eee4864
languageName: node
linkType: hard
"@radix-ui/react-use-size@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/react-use-size@npm:1.1.1"
dependencies:
"@radix-ui/react-use-layout-effect": "npm:1.1.1"
peerDependencies:
"@types/react": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/851d09a816f44282e0e9e2147b1b571410174cc048703a50c4fa54d672de994fd1dfff1da9d480ecfd12c77ae8f48d74f01adaf668f074156b8cd0043c6c21d8
languageName: node
linkType: hard
"@radix-ui/react-visually-hidden@npm:1.2.3":
version: 1.2.3
resolution: "@radix-ui/react-visually-hidden@npm:1.2.3"
dependencies:
"@radix-ui/react-primitive": "npm:2.1.3"
peerDependencies:
"@types/react": "*"
"@types/react-dom": "*"
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
"@types/react-dom":
optional: true
checksum: 10c0/cf86a37f1cbee50a964056f3dc4f6bb1ee79c76daa321f913aa20ff3e1ccdfafbf2b114d7bb616aeefc7c4b895e6ca898523fdb67710d89bd5d8edb739a0d9b6
languageName: node
linkType: hard
"@radix-ui/rect@npm:1.1.1":
version: 1.1.1
resolution: "@radix-ui/rect@npm:1.1.1"
checksum: 10c0/0dac4f0f15691199abe6a0e067821ddd9d0349c0c05f39834e4eafc8403caf724106884035ae91bbc826e10367e6a5672e7bec4d4243860fa7649de246b1f60b
languageName: node
linkType: hard
"@reduxjs/toolkit@npm:^2.12.0": "@reduxjs/toolkit@npm:^2.12.0":
version: 2.12.0 version: 2.12.0
resolution: "@reduxjs/toolkit@npm:2.12.0" resolution: "@reduxjs/toolkit@npm:2.12.0"
@ -1393,6 +1848,15 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"aria-hidden@npm:^1.2.4":
version: 1.2.6
resolution: "aria-hidden@npm:1.2.6"
dependencies:
tslib: "npm:^2.0.0"
checksum: 10c0/7720cb539497a9f760f68f98a4b30f22c6767aa0e72fa7d58279f7c164e258fc38b2699828f8de881aab0fc8e9c56d1313a3f1a965046fc0381a554dbc72b54a
languageName: node
linkType: hard
"aria-query@npm:^5.3.2": "aria-query@npm:^5.3.2":
version: 5.3.2 version: 5.3.2
resolution: "aria-query@npm:5.3.2" resolution: "aria-query@npm:5.3.2"
@ -1890,6 +2354,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"detect-node-es@npm:^1.1.0":
version: 1.1.0
resolution: "detect-node-es@npm:1.1.0"
checksum: 10c0/e562f00de23f10c27d7119e1af0e7388407eb4b06596a25f6d79a360094a109ff285de317f02b090faae093d314cf6e73ac3214f8a5bb3a0def5bece94557fbe
languageName: node
linkType: hard
"doctrine@npm:^2.1.0": "doctrine@npm:^2.1.0":
version: 2.1.0 version: 2.1.0
resolution: "doctrine@npm:2.1.0" resolution: "doctrine@npm:2.1.0"
@ -2574,6 +3045,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"get-nonce@npm:^1.0.0":
version: 1.0.1
resolution: "get-nonce@npm:1.0.1"
checksum: 10c0/2d7df55279060bf0568549e1ffc9b84bc32a32b7541675ca092dce56317cdd1a59a98dcc4072c9f6a980779440139a3221d7486f52c488e69dc0fd27b1efb162
languageName: node
linkType: hard
"get-proto@npm:^1.0.0, get-proto@npm:^1.0.1": "get-proto@npm:^1.0.0, get-proto@npm:^1.0.1":
version: 1.0.1 version: 1.0.1
resolution: "get-proto@npm:1.0.1" resolution: "get-proto@npm:1.0.1"
@ -3171,6 +3649,8 @@ __metadata:
version: 0.0.0-use.local version: 0.0.0-use.local
resolution: "kham-benh-mo-pho@workspace:." resolution: "kham-benh-mo-pho@workspace:."
dependencies: dependencies:
"@radix-ui/react-popover": "npm:^1.1.15"
"@radix-ui/react-tooltip": "npm:^1.2.8"
"@reduxjs/toolkit": "npm:^2.12.0" "@reduxjs/toolkit": "npm:^2.12.0"
"@tailwindcss/postcss": "npm:^4" "@tailwindcss/postcss": "npm:^4"
"@tanstack/react-query": "npm:^5.100.11" "@tanstack/react-query": "npm:^5.100.11"
@ -3192,6 +3672,7 @@ __metadata:
nprogress: "npm:^0.2.0" nprogress: "npm:^0.2.0"
react: "npm:19.2.4" react: "npm:19.2.4"
react-dom: "npm:19.2.4" react-dom: "npm:19.2.4"
react-moment: "npm:^2.0.2"
react-redux: "npm:^9.3.0" react-redux: "npm:^9.3.0"
react-toastify: "npm:^11.1.0" react-toastify: "npm:^11.1.0"
tailwindcss: "npm:^4" tailwindcss: "npm:^4"
@ -3881,6 +4362,20 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"react-moment@npm:^2.0.2":
version: 2.0.2
resolution: "react-moment@npm:2.0.2"
peerDependencies:
moment: ^2.29.0
moment-duration-format: ^2.2.2
react: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
moment-duration-format:
optional: true
checksum: 10c0/6e3c3261284376a03ccd9de807aa81737468a2384a75f25d33a1a5cbe90d352b995f72efe77370b1525be756ab7b7f65ef81706bce7b3fd9058b19fb57f93fb9
languageName: node
linkType: hard
"react-redux@npm:^9.3.0": "react-redux@npm:^9.3.0":
version: 9.3.0 version: 9.3.0
resolution: "react-redux@npm:9.3.0" resolution: "react-redux@npm:9.3.0"
@ -3900,6 +4395,57 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"react-remove-scroll-bar@npm:^2.3.7":
version: 2.3.8
resolution: "react-remove-scroll-bar@npm:2.3.8"
dependencies:
react-style-singleton: "npm:^2.2.2"
tslib: "npm:^2.0.0"
peerDependencies:
"@types/react": "*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/9a0675c66cbb52c325bdbfaed80987a829c4504cefd8ff2dd3b6b3afc9a1500b8ec57b212e92c1fb654396d07bbe18830a8146fe77677d2a29ce40b5e1f78654
languageName: node
linkType: hard
"react-remove-scroll@npm:^2.6.3":
version: 2.7.2
resolution: "react-remove-scroll@npm:2.7.2"
dependencies:
react-remove-scroll-bar: "npm:^2.3.7"
react-style-singleton: "npm:^2.2.3"
tslib: "npm:^2.1.0"
use-callback-ref: "npm:^1.3.3"
use-sidecar: "npm:^1.1.3"
peerDependencies:
"@types/react": "*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/b5f3315bead75e72853f492c0b51ba8fb4fa09a4534d7fc42d6fcd59ca3e047cf213279ffc1e35b337e314ef5a04cb2b12544c85e0078802271731c27c09e5aa
languageName: node
linkType: hard
"react-style-singleton@npm:^2.2.2, react-style-singleton@npm:^2.2.3":
version: 2.2.3
resolution: "react-style-singleton@npm:2.2.3"
dependencies:
get-nonce: "npm:^1.0.0"
tslib: "npm:^2.0.0"
peerDependencies:
"@types/react": "*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/841938ff16d16a6b76895f4cb2e1fea957e5fe3b30febbf03a54892dae1c9153f2383e231dea0b3ba41192ad2f2849448fa859caccd288943bce32639e971bee
languageName: node
linkType: hard
"react-toastify@npm:^11.1.0": "react-toastify@npm:^11.1.0":
version: 11.1.0 version: 11.1.0
resolution: "react-toastify@npm:11.1.0" resolution: "react-toastify@npm:11.1.0"
@ -4482,7 +5028,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"tslib@npm:^2.4.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1": "tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
version: 2.8.1 version: 2.8.1
resolution: "tslib@npm:2.8.1" resolution: "tslib@npm:2.8.1"
checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62 checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
@ -4704,6 +5250,37 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"use-callback-ref@npm:^1.3.3":
version: 1.3.3
resolution: "use-callback-ref@npm:1.3.3"
dependencies:
tslib: "npm:^2.0.0"
peerDependencies:
"@types/react": "*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/f887488c6e6075cdad4962979da1714b217bcb1ee009a9e57ce9a844bcfc4c3a99e93983dfc2e5af9e0913824d24e730090ff255e902c516dcb58d2d3837e01c
languageName: node
linkType: hard
"use-sidecar@npm:^1.1.3":
version: 1.1.3
resolution: "use-sidecar@npm:1.1.3"
dependencies:
detect-node-es: "npm:^1.1.0"
tslib: "npm:^2.0.0"
peerDependencies:
"@types/react": "*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10c0/161599bf921cfaa41c85d2b01c871975ee99260f3e874c2d41c05890d41170297bdcf314bc5185e7a700de2034ac5b888e3efc8e9f35724f4918f53538d717c9
languageName: node
linkType: hard
"use-sync-external-store@npm:^1.4.0": "use-sync-external-store@npm:^1.4.0":
version: 1.6.0 version: 1.6.0
resolution: "use-sync-external-store@npm:1.6.0" resolution: "use-sync-external-store@npm:1.6.0"