feat:update all

package.json

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

src/app/layout.tsx

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

src/app/page.tsx

@@ -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 (
-    <BaseLayout title="Bệnh nhân">
+    <BaseLayout title="Dashboard">
-      <MainPagePatient />
+      <MainPageHome />
     </BaseLayout>
   );
-}
+};
+
+export default page;

src/components/customs/DateRangeField.tsx

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

src/components/customs/FilterCustom.tsx

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

src/components/customs/StateActive.tsx

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

src/components/customs/custom-tabs.tsx

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

src/components/layouts/BaseLayout/componets/Navbar/Navbar.tsx

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

src/components/page/Home/MainPageHome/MainPageHome.tsx

@@ -1,8 +1,340 @@
 "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 = () => {
-  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;

src/components/page/consultation/DetailConsultation/DetailConsultation.tsx

@@ -1,23 +1,31 @@
 "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 { httpRequest } from "@/services";
 import { QUERY_KEY, TYPE_STATUS } from "@/constant/config/enum";
 
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, Pencil } from "lucide-react";
 
 import consultationServices, {
   ConsultationDetail,
 } from "@/services/consultationServices";
 
 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 params = useParams();
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const specialtyId = searchParams.get("_type");
 
   const consultationId = params?.id as string;
 
@@ -48,6 +56,7 @@ const DetailConsultation = () => {
           doctorNotes: null,
           createdBy: "",
           isDeleted: false,
+          specialtyClinics: [],
         }
       );
     },
@@ -55,6 +64,36 @@ const DetailConsultation = () => {
 
   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) {
     return <div>Đang tải dữ liệu...</div>;
   }
@@ -62,215 +101,360 @@ const DetailConsultation = () => {
   if (!consultation) {
     return <div>Không tìm thấy dữ liệu phiên khám</div>;
   }
+  type PrescriptionItem =
+    ConsultationDetail["aggregatedPrescriptionItems"][number];
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
+      <div className="flex flex-row gap-4">
-        <div className="flex flex-col gap-6">
+        <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
-          {/* HEADER */}
+          <div className="flex flex-col gap-6">
-          <div className="flex items-center gap-3">
+            {/* HEADER */}
-            <ArrowLeft
+            <div className="flex items-center justify-between">
-              onClick={() => router.back()}
+              <div
-              className="cursor-pointer"
+                className="flex cursor-pointer items-center gap-3"
-            />
+                onClick={() => router.back()}
+              >
+                <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>
+
+              {consultation.status === TYPE_STATUS.PendingPrescription && canUpdateConsultation && (
+                <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 */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  ID PHIÊN KHÁM
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.id}
+                </p>
+              </div>
+
+              {/* MÃ PHIÊN KHÁM */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  MÃ PHIÊN KHÁM
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.sessionCode}
+                </p>
+              </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 */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  NGÀY, GIỜ KHÁM
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.visitDate
+                    ? moment(consultation.visitDate).format("DD/MM/YYYY")
+                    : "---"}
+                </p>
+              </div>
+
+              {/* TRIỆU CHỨNG */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  DẤU HIỆU
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.symptomsText || "---"}
+                </p>
+              </div>
+
+              {/* KHIẾU NẠI CHÍNH */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  KHIẾU NẠI CHÍNH
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.chiefComplaint || "---"}
+                </p>
+              </div>
+
+              {/* CHỈ SỐ HUYẾT ÁP, CHỈ SỐ MẠCH */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  CHỈ SỐ HUYẾT ÁP, CHỈ SỐ MẠCH
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.vitalSigns || "---"}
+                </p>
+              </div>
+
+              {/* CHẨN ĐOÁN */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  CHUẨN ĐOÁN
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.diagnosis || "---"}
+                </p>
+              </div>
+
+              {/* KẾ HOẠCH ĐIỀU TRỊ */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  KẾ HOẠCH ĐIỀU TRỊ
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.treatmentPlan || "---"}
+                </p>
+              </div>
+
+              {/* GHI CHÚ BÁC SĨ */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  GHI CHÚ BÁC SĨ
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.doctorNotes || "---"}
+                </p>
+              </div>
+
+              {/* NGƯỜI TẠO */}
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  NGƯỜI TẠO
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.createdBy || "---"}
+                </p>
+              </div>
+
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  CÁC CHUYÊN KHOA ĐANG CHỜ KHÁM
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.specialtyClinics
+                    ?.filter((specialty) => specialty.specialtyStatus === 1)
+                    .map((specialty) => specialty.specialtyName)
+                    .join(", ") || "---"}
+                </p>
+              </div>
+
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  CÁC CHUYÊN KHOA ĐÃ KHÁM
+                </p>
+
+                <p className="text-[15px] font-medium text-[#202939]">
+                  {consultation.specialtyClinics
+                    ?.filter((specialty) => specialty.specialtyStatus === 3)
+                    .map((specialty) => specialty.specialtyName)
+                    .join(", ") || "---"}
+                </p>
+              </div>
+              <div className="space-y-1">
+                <p className="text-[14px] font-medium text-[#697586]">
+                  TRẠNG THÁI
+                </p>
+
+                <StateActive
+                  stateActive={consultation.status}
+                  listState={[
+                    {
+                      state: TYPE_STATUS.Draft,
+                      text: "Đang chờ khám",
+                      textColor: "#92400E",
+                      backgroundColor: "#FEF3C7",
+                    },
+                    {
+                      state: TYPE_STATUS.InProgress,
+                      text: "Đang khám tổng quát",
+                      textColor: "#1E3A8A",
+                      backgroundColor: "#DBEAFE",
+                    },
+                    {
+                      state: TYPE_STATUS.ToSpecialty,
+                      text: "Chờ khám chuyên khoa",
+                      textColor: "#6B21A8",
+                      backgroundColor: "#E9D5FF",
+                    },
+                    {
+                      state: TYPE_STATUS.PendingPrescription,
+                      text: "Chờ nhận thuốc/kính",
+                      textColor: "#9A3412",
+                      backgroundColor: "#FED7AA",
+                    },
+                    {
+                      state: TYPE_STATUS.Completed,
+                      text: "Hoàn thành",
+                      textColor: "#166534",
+                      backgroundColor: "#DCFCE7",
+                    },
+                    {
+                      state: TYPE_STATUS.Cancelled,
+                      text: "Đã hủy",
+                      textColor: "#991B1B",
+                      backgroundColor: "#FEE2E2",
+                    },
+                  ]}
+                />
+              </div>
+            </GridColumn>
           </div>
-
+        </div>
-          {/* CONTENT */}
+        <div>
-          <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+          <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
-            {/* ID PHIÊN KHÁM */}
+            {/* HEADER */}
-            <div className="space-y-1">
+            <div className="flex items-center justify-between">
-              <p className="text-[14px] font-medium text-[#697586]">
+              <h2 className="text-xl font-semibold text-black">
-                ID PHIÊN KHÁM
+                Danh sách đơn thuốc
-              </p>
+              </h2>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.id}
-              </p>
             </div>
-
+            <DataWrapper
-            {/* MÃ PHIÊN KHÁM */}
+              data={consultation.aggregatedPrescriptionItems}
-            <div className="space-y-1">
+              loading={consulDetailQuery.isLoading}
-              <p className="text-[14px] font-medium text-[#697586]">
+              title="Không có dữ liệu"
-                MÃ PHIÊN KHÁM
+              note="Vui lòng thử lại sau"
-              </p>
+            >
-
+              <Table
-              <p className="text-[15px] font-medium text-[#202939]">
+                rowKey={(item) => item.id}
-                {consultation.sessionCode}
+                data={consultation.aggregatedPrescriptionItems}
-              </p>
+                column={[
-            </div>
-
-            {/* NGÀY GIỜ KHÁM */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                NGÀY, GIỜ KHÁM
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.visitDate}
-              </p>
-            </div>
-
-            {/* TRIỆU CHỨNG */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">DẤU HIỆU</p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.symptomsText || "---"}
-              </p>
-            </div>
-
-            {/* KHIẾU NẠI CHÍNH */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                KHIẾU NẠI CHÍNH
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.chiefComplaint || "---"}
-              </p>
-            </div>
-
-            {/* CHỈ SỐ HUYẾT ÁP, CHỈ SỐ MẠCH */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                CHỈ SỐ HUYẾT ÁP, CHỈ SỐ MẠCH
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.vitalSigns || "---"}
-              </p>
-            </div>
-
-            {/* CHẨN ĐOÁN */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                CHUẨN ĐOÁN
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.diagnosis || "---"}
-              </p>
-            </div>
-
-            {/* KẾ HOẠCH ĐIỀU TRỊ */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                KẾ HOẠCH ĐIỀU TRỊ
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.treatmentPlan || "---"}
-              </p>
-            </div>
-
-            {/* GHI CHÚ BÁC SĨ */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                GHI CHÚ BÁC SĨ
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.doctorNotes || "---"}
-              </p>
-            </div>
-
-            {/* NGƯỜI TẠO */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                NGƯỜI TẠO
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.createdBy || "---"}
-              </p>
-            </div>
-
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                CÁC CHUYÊN KHOA ĐANG CHỜ KHÁM
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.specialtyClinics
-                  ?.filter((specialty) => specialty.specialtyStatus === 1)
-                  .map((specialty) => specialty.specialtyName)
-                  .join(", ") || "---"}
-              </p>
-            </div>
-
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                CÁC CHUYÊN KHOA ĐÃ KHÁM
-              </p>
-
-              <p className="text-[15px] font-medium text-[#202939]">
-                {consultation.specialtyClinics
-                  ?.filter((specialty) => specialty.specialtyStatus === 3)
-                  .map((specialty) => specialty.specialtyName)
-                  .join(", ") || "---"}
-              </p>
-            </div>
-
-            {/* TRẠNG THÁI */}
-            <div className="space-y-1">
-              <p className="text-[14px] font-medium text-[#697586]">
-                TRẠNG THÁI
-              </p>
-
-              <StateActive
-                stateActive={consultation.status}
-                listState={[
                   {
-                    state: TYPE_STATUS.Draft,
+                    title: "Tên thuốc",
-                    text: "Đang chờ khám",
+                    render: (item: PrescriptionItem) => (
-                    textColor: "#92400E",
+                      <span>{item.medicineName}</span>
-                    backgroundColor: "#FEF3C7",
+                    ),
                   },
-
                   {
-                    state: TYPE_STATUS.InProgress,
+                    title: "Liều dùng",
-                    text: "Đang khám tổng quát",
+                    render: (item: PrescriptionItem) => (
-                    textColor: "#1E3A8A",
+                      <span>{item.dosage}</span>
-                    backgroundColor: "#DBEAFE",
+                    ),
                   },
-
                   {
-                    state: TYPE_STATUS.ToSpecialty,
+                    title: "Tần suất",
-                    text: "Chờ khám chuyên khoa",
+                    render: (item: PrescriptionItem) => (
-                    textColor: "#6B21A8",
+                      <span>{item.frequency}</span>
-                    backgroundColor: "#E9D5FF",
+                    ),
                   },
-
                   {
-                    state: TYPE_STATUS.PendingPrescription,
+                    title: "Thời gian",
-                    text: "Chờ nhận thuốc/kính",
+                    render: (item: PrescriptionItem) => (
-                    textColor: "#9A3412",
+                      <span>{item.duration}</span>
-                    backgroundColor: "#FED7AA",
+                    ),
                   },
-
                   {
-                    state: TYPE_STATUS.Completed,
+                    title: "Hướng dẫn",
-                    text: "Hoàn thành",
+                    render: (item: PrescriptionItem) => (
-                    textColor: "#166534",
+                      <span>{item.instructions || "---"}</span>
-                    backgroundColor: "#DCFCE7",
+                    ),
-                  },
-
-                  {
-                    state: TYPE_STATUS.Cancelled,
-                    text: "Đã hủy",
-                    textColor: "#991B1B",
-                    backgroundColor: "#FEE2E2",
                   },
                 ]}
               />
-            </div>
+            </DataWrapper>
           </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>
   );
 };

src/components/page/consultation/MainPageConsultation/MainPageConsultation.tsx

@@ -20,44 +20,44 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 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 React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import Pagination from "@/components/customs/custom-pagination";
 import moment from "moment";
 import specialtyServices, { SpecialtyItem } from "@/services/specialtyServices";
 
 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 router = useRouter();
-
   const pathname = usePathname();
-
   const searchParams = useSearchParams();
-
   const queryClient = useQueryClient();
-
   /* =========================
         QUERY PARAMS
   ========================= */
 
   const _page = searchParams.get("_page");
-
   const _pageSize = searchParams.get("_pageSize");
-
   const _keyword = searchParams.get("_keyword");
-
   const _status = searchParams.get("_status");
-
   const _specialtyId = searchParams.get("_specialtyId");
-
+  const _type = searchParams.get("_type");
-  /* =========================
+  const isAllTab = !_type || _type === "all";
-        STATE
-  ========================= */
 
   const [selectedConsultationId, setSelectedConsultationId] =
     useState<string>("");
@@ -66,10 +66,6 @@ const MainPageConsultation = () => {
 
   const [openCompleteDialog, setOpenCompleteDialog] = useState(false);
 
-  /* =========================
-        GET LIST
-  ========================= */
-
   const consultationQuery = useQuery<ConsultationResponse>({
     queryKey: [QUERY_KEY.table_list_consultation, _page, _pageSize, _keyword],
 
@@ -102,10 +98,6 @@ const MainPageConsultation = () => {
     },
   });
 
-  /* =========================
-        DATA
-  ========================= */
-
   const specialtyQuery = useQuery({
     queryKey: [QUERY_KEY.list_specialty_lookup],
     queryFn: async () => {
@@ -121,10 +113,20 @@ const MainPageConsultation = () => {
   const consultationData = useMemo(() => {
     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) {
       data = data.filter((item) =>
         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 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 params = new URLSearchParams(searchParams.toString());
 
@@ -166,25 +181,32 @@ const MainPageConsultation = () => {
     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) => {
     setSelectedConsultationId(item.id);
@@ -204,10 +226,6 @@ const MainPageConsultation = () => {
     setOpenCompleteDialog(false);
   };
 
-  /* =========================
-        CANCEL
-  ========================= */
-
   const cancelConsultationMutation = useMutation({
     mutationFn: async () => {
       return await httpRequest({
@@ -230,10 +248,6 @@ const MainPageConsultation = () => {
     },
   });
 
-  /* =========================
-        COMPLETE
-  ========================= */
-
   const completeConsultationMutation = useMutation({
     mutationFn: async () => {
       return await httpRequest({
@@ -258,10 +272,6 @@ const MainPageConsultation = () => {
     },
   });
 
-  /* =========================
-        CONFIRM
-  ========================= */
-
   const handleConfirmCancel = () => {
     cancelConsultationMutation.mutate();
   };
@@ -271,303 +281,412 @@ const MainPageConsultation = () => {
   };
 
   return (
-    <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
+    <div>
-      {/* HEADER */}
+      <div className="rounded-lg bg-white shadow mb-6 p-6">
-      <div className="flex items-center justify-between">
+        <TabNavLink query="_type" listHref={specialtyTabs} />
-        <h2 className="text-xl font-semibold text-black">Phiên khám</h2>
-
-        <CustomButton
-          variant="midnightBlue"
-          fullWidth={false}
-          icon={<ClipboardPlus />}
-          // onClick={handleOpenCreate}
-          href="/consultation/create"
-        >
-          Tạo phiên khám
-        </CustomButton>
       </div>
-
+      <div className="flex flex-col gap-4 rounded-lg bg-white shadow p-6">
-      {/* SEARCH */}
+        {/* HEADER */}
-      <div className="flex items-center justify-between gap-4">
+        <div className="flex items-center justify-between">
-        <div className="w-full md:min-w-[400px]">
+          <h2 className="text-xl font-semibold text-black">Phiên khám</h2>
-          <Search
+          {isAllTab && (
-            keyword={_keyword ?? ""}
+            <CustomButton
-            setKeyword={(value) => updateQuery("_keyword", value)}
+              variant="midnightBlue"
-            placeholder="Tìm kiếm phiên khám..."
+              fullWidth={false}
-          />
+              icon={<ClipboardPlus />}
+              // onClick={handleOpenCreate}
+              href="/consultation/create"
+            >
+              Tạo phiên khám
+            </CustomButton>
+          )}
         </div>
 
-        <FilterCustom<string | null>
+        {/* SEARCH */}
-          name="Chuyên khoa"
+        <div
-          value={_specialtyId}
+          className={clsx(
-          onChange={(value) => updateQuery("_specialtyId", value ?? "")}
+            "flex gap-4",
-          listOption={useMemo(() => {
+            isAllTab
-            return (
+              ? "flex-col lg:flex-row lg:items-center lg:justify-between"
-              specialtyQuery.data?.map((item) => ({
+              : "flex-col",
-                uuid: item.id,
+          )}
-                name: item.name,
+        >
-              })) || []
+          <div className="w-full lg:min-w-[400px]">
-            );
+            <Search
-          }, [specialtyQuery.data])}
+              keyword={_keyword ?? ""}
-        />
+              setKeyword={(value) => updateQuery("_keyword", value)}
-        <FilterCustom<number | null>
+              placeholder="Tìm kiếm phiên khám..."
-          name="Trạng thái"
+            />
-          value={_status ? Number(_status) : null}
+          </div>
-          onChange={(value) => updateQuery("_status", value ?? "")}
+
-          listOption={[
+          {isAllTab && (
-            {
+            <div className="flex flex-col gap-4 sm:flex-row">
-              uuid: TYPE_STATUS.Draft,
+              <FilterCustom<string | null>
-              name: "Đang chờ khám",
+                name="Chuyên khoa"
-            },
+                value={_specialtyId}
-            {
+                onChange={(value) => updateQuery("_specialtyId", value ?? "")}
-              uuid: TYPE_STATUS.InProgress,
+                listOption={
-              name: "Đang khám tổng quát",
+                  specialtyQuery.data?.map((item) => ({
-            },
+                    uuid: item.id,
-            {
+                    name: item.name,
-              uuid: TYPE_STATUS.ToSpecialty,
+                  })) || []
-              name: "Chờ khám chuyên khoa",
+                }
-            },
+              />
-            {
+
-              uuid: TYPE_STATUS.PendingPrescription,
+              <FilterCustom<number | null>
-              name: "Chờ nhận thuốc/kính",
+                name="Trạng thái"
-            },
+                value={_status ? Number(_status) : null}
-            {
+                onChange={(value) => updateQuery("_status", value ?? "")}
-              uuid: TYPE_STATUS.Completed,
+                listOption={[
-              name: "Hoàn thành",
+                  {
-            },
+                    uuid: TYPE_STATUS.Draft,
-            {
+                    name: "Đang chờ khám",
-              uuid: TYPE_STATUS.Cancelled,
+                  },
-              name: "Đã hủy",
+                  {
-            },
+                    uuid: TYPE_STATUS.InProgress,
-          ]}
+                    name: "Đang khám tổng quát",
+                  },
+                  {
+                    uuid: TYPE_STATUS.ToSpecialty,
+                    name: "Chờ khám chuyên khoa",
+                  },
+                  {
+                    uuid: TYPE_STATUS.PendingPrescription,
+                    name: "Chờ nhận thuốc/kính",
+                  },
+                  {
+                    uuid: TYPE_STATUS.Completed,
+                    name: "Hoàn thành",
+                  },
+                  {
+                    uuid: TYPE_STATUS.Cancelled,
+                    name: "Đã hủy",
+                  },
+                ]}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* TABLE */}
+        <DataWrapper
+          data={consultationData}
+          loading={consultationQuery.isLoading}
+          title="Không có dữ liệu"
+          note="Vui lòng thử lại sau"
+        >
+          <Table
+            rowKey={(item) => item.id}
+            data={consultationData}
+            column={[
+              {
+                title: "TÊN BỆNH NHÂN",
+
+                render: (item: ConsultationItem) => (
+                  <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",
+                fixedLeft: true,
+                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
+                            href={detailHref}
+                            className="text-blue-500 hover:underline"
+                          >
+                            {item.sessionCode}
+                          </Link>
+                        </TooltipTrigger>
+
+                        <TooltipContent>
+                          <p className="rounded-full border bg-gray-400 p-2">
+                            Chi tiết phiên khám
+                          </p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  );
+                },
+              },
+
+              {
+                title: "NGÀY KHÁM",
+                render: (item: ConsultationItem) => (
+                  <span>
+                    {item.visitDate
+                      ? moment(item.visitDate).format("DD/MM/YYYY")
+                      : "---"}
+                  </span>
+                ),
+              },
+
+              {
+                title: "DẤU HIỆU",
+
+                render: (item: ConsultationItem) => (
+                  <span>{item.symptomsText || "---"}</span>
+                ),
+              },
+
+              {
+                title: "CHUẨN ĐOÁN",
+
+                render: (item: ConsultationItem) => (
+                  <span>{item.diagnosis || "---"}</span>
+                ),
+              },
+
+              {
+                title: "KẾ HOẠCH ĐIỀU TRỊ",
+
+                render: (item: ConsultationItem) => (
+                  <span>{item.treatmentPlan || "---"}</span>
+                ),
+              },
+
+              {
+                title: "GHI CHÚ BÁC SĨ",
+
+                render: (item: ConsultationItem) => (
+                  <span>{item.doctorNotes || "---"}</span>
+                ),
+              },
+              {
+                title: "TRẠNG THÁI",
+                render: (item: ConsultationItem) => {
+                  // ===== TAB CHUYÊN KHOA =====
+                  if (!isAllTab) {
+                    const specialty = item.specialtyClinics.find(
+                      (x) => x.specialtyId === _type,
+                    );
+
+                    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={item.status}
+                      listState={[
+                        {
+                          state: TYPE_STATUS.Draft,
+                          text: "Đang chờ khám",
+                          textColor: "#92400E",
+                          backgroundColor: "#FEF3C7",
+                        },
+                        {
+                          state: TYPE_STATUS.InProgress,
+                          text: "Đang khám tổng quát",
+                          textColor: "#1E3A8A",
+                          backgroundColor: "#DBEAFE",
+                        },
+                        {
+                          state: TYPE_STATUS.ToSpecialty,
+                          text: "Chờ khám chuyên khoa",
+                          textColor: "#6B21A8",
+                          backgroundColor: "#E9D5FF",
+                        },
+                        {
+                          state: TYPE_STATUS.PendingPrescription,
+                          text: "Chờ nhận thuốc/kính",
+                          textColor: "#9A3412",
+                          backgroundColor: "#FED7AA",
+                        },
+                        {
+                          state: TYPE_STATUS.Completed,
+                          text: "Hoàn thành",
+                          textColor: "#166534",
+                          backgroundColor: "#DCFCE7",
+                        },
+                        {
+                          state: TYPE_STATUS.Cancelled,
+                          text: "Đã hủy",
+                          textColor: "#991B1B",
+                          backgroundColor: "#FEE2E2",
+                        },
+                      ]}
+                    />
+                  );
+                },
+              },
+              {
+                fixedRight: true,
+
+                title: "ACTION",
+
+                render: (item: ConsultationItem) => {
+                  const isCancelled = item.status === TYPE_STATUS.Cancelled;
+
+                  const isCompleted = item.status === TYPE_STATUS.Completed;
+
+                  const isDisabled = isCancelled || isCompleted;
+
+                  // ===== TAB CHUYÊN KHOA =====
+                  if (!isAllTab) {
+                    const specialty = item.specialtyClinics.find(
+                      (x) => x.specialtyId === _type,
+                    );
+
+                    if (!specialty) return null;
+
+                    return (
+                      <CustomButton
+                        size="sm"
+                        variant="midnightBlue"
+                        disabled={isDisabled}
+                        href={
+                          !isDisabled
+                            ? `/consultation/update-specialty?_id=${item.id}&specialtyClinicId=${specialty.id}`
+                            : undefined
+                        }
+                      >
+                        Cập nhật
+                      </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>
+
+                      <CustomButton
+                        size="sm"
+                        variant="red"
+                        disabled={isDisabled}
+                        onClick={() => handleOpenCancel(item)}
+                      >
+                        Hủy
+                      </CustomButton>
+
+                      <CustomButton
+                        size="sm"
+                        variant="green"
+                        disabled={isDisabled}
+                        onClick={() => handleOpenComplete(item)}
+                      >
+                        Hoàn thành
+                      </CustomButton>
+                    </div>
+                  );
+                },
+              },
+            ]}
+          />
+        </DataWrapper>
+        <Pagination
+          total={consultationData.length}
+          page={page}
+          pageSize={pageSize}
+          onSetPage={(value) => updateQuery("_page", value)}
+          onSetPageSize={(value) => updateQuery("_pageSize", value)}
+          dependencies={[_pageSize, _keyword, _specialtyId, _status]}
         />
       </div>
 
-      {/* TABLE */}
-      <DataWrapper
-        data={consultationData}
-        loading={consultationQuery.isLoading}
-        title="Không có dữ liệu"
-        note="Vui lòng thử lại sau"
-      >
-        <Table
-          rowKey={(item) => item.id}
-          data={consultationData}
-          column={[
-            {
-              title: "TÊN BỆNH NHÂN",
-
-              render: (item: ConsultationItem) => (
-                <span>{item.patientName}</span>
-              ),
-            },
-
-            {
-              title: "MÃ PHIÊN KHÁM",
-              fixedLeft: true,
-              render: (item: ConsultationItem) => (
-                <Link
-                  href={`/consultation/${item.id}`}
-                  className="text-blue-500 hover:underline"
-                >
-                  {item.sessionCode}
-                </Link>
-              ),
-            },
-
-            {
-              title: "NGÀY KHÁM",
-              render: (item: ConsultationItem) => (
-                <span>
-                  {item.visitDate
-                    ? moment(item.visitDate).format("DD/MM/YYYY")
-                    : "---"}
-                </span>
-              ),
-            },
-
-            {
-              title: "DẤU HIỆU",
-
-              render: (item: ConsultationItem) => (
-                <span>{item.symptomsText || "---"}</span>
-              ),
-            },
-
-            {
-              title: "CHUẨN ĐOÁN",
-
-              render: (item: ConsultationItem) => (
-                <span>{item.diagnosis || "---"}</span>
-              ),
-            },
-
-            {
-              title: "KẾ HOẠCH ĐIỀU TRỊ",
-
-              render: (item: ConsultationItem) => (
-                <span>{item.treatmentPlan || "---"}</span>
-              ),
-            },
-
-            {
-              title: "GHI CHÚ BÁC SĨ",
-
-              render: (item: ConsultationItem) => (
-                <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",
-
-              render: (item: ConsultationItem) => (
-                <StateActive
-                  stateActive={item.status}
-                  listState={[
-                    {
-                      state: TYPE_STATUS.Draft,
-                      text: "Đang chờ khám",
-                      textColor: "#92400E",
-                      backgroundColor: "#FEF3C7",
-                    },
-
-                    {
-                      state: TYPE_STATUS.InProgress,
-                      text: "Đang khám tổng quát",
-                      textColor: "#1E3A8A",
-                      backgroundColor: "#DBEAFE",
-                    },
-
-                    {
-                      state: TYPE_STATUS.ToSpecialty,
-                      text: "Chờ khám chuyên khoa",
-                      textColor: "#6B21A8",
-                      backgroundColor: "#E9D5FF",
-                    },
-
-                    {
-                      state: TYPE_STATUS.PendingPrescription,
-                      text: "Chờ nhận thuốc/kính",
-                      textColor: "#9A3412",
-                      backgroundColor: "#FED7AA",
-                    },
-
-                    {
-                      state: TYPE_STATUS.Completed,
-                      text: "Hoàn thành",
-                      textColor: "#166534",
-                      backgroundColor: "#DCFCE7",
-                    },
-
-                    {
-                      state: TYPE_STATUS.Cancelled,
-                      text: "Đã hủy",
-                      textColor: "#991B1B",
-                      backgroundColor: "#FEE2E2",
-                    },
-                  ]}
-                />
-              ),
-            },
-
-            {
-              fixedRight: true,
-
-              title: "ACTION",
-
-              render: (item: ConsultationItem) => {
-                const isCancelled = item.status === TYPE_STATUS.Cancelled;
-
-                const isCompleted = item.status === TYPE_STATUS.Completed;
-
-                const isDisabled = isCancelled || isCompleted;
-
-                // Tìm chuyên khoa có specialtyStatus = 1
-                const specialtyClinicActive = item.specialtyClinics?.find(
-                  (specialty) => specialty.specialtyStatus === 1,
-                );
-
-                return (
-                  <div className="flex items-center gap-2">
-                    {/* UPDATE */}
-                    <CustomButton
-                      size="sm"
-                      disabled={isDisabled}
-                      icon={
-                        specialtyClinicActive ? undefined : (
-                          <Pencil className="text-blue-400" />
-                        )
-                      }
-                      href={
-                        specialtyClinicActive
-                          ? `/consultation/update-specialty?_id=${item.id}&specialtyClinicId=${specialtyClinicActive.id}`
-                          : `/consultation/update?_id=${item.id}`
-                      }
-                    >
-                      {specialtyClinicActive
-                        ? `Cập nhật ${specialtyClinicActive.specialtyName}`
-                        : undefined}
-                    </CustomButton>
-
-                    {/* CANCEL */}
-                    <CustomButton
-                      size="sm"
-                      variant="red"
-                      disabled={isDisabled}
-                      onClick={() => handleOpenCancel(item)}
-                    >
-                      Hủy
-                    </CustomButton>
-
-                    {/* COMPLETE */}
-                    <CustomButton
-                      size="sm"
-                      variant="green"
-                      disabled={isDisabled}
-                      onClick={() => handleOpenComplete(item)}
-                    >
-                      Hoàn thành
-                    </CustomButton>
-                  </div>
-                );
-              },
-            },
-          ]}
-        />
-      </DataWrapper>
-      <Pagination
-        total={consultationData.length}
-        page={page}
-        pageSize={pageSize}
-        onSetPage={(value) => updateQuery("_page", value)}
-        onSetPageSize={(value) => updateQuery("_pageSize", value)}
-        dependencies={[_pageSize, _keyword, _specialtyId, _status]}
-      />
-
       {/* CANCEL DIALOG */}
       <CustomDialog
         open={openCancelDialog}

src/components/page/consultation/UpdateConsultation/UpdateConsultation.tsx

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

src/components/page/consultation/UpdateSpecialtyClinicId/UpdateSpecialtyClinicId.tsx

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

src/components/page/patient/DetailPatient/DetailPatient.tsx

@@ -21,6 +21,12 @@ import StateActive from "@/components/customs/StateActive";
 import DataWrapper from "@/components/customs/DataWrapper";
 import Table from "@/components/customs/custom-table";
 import moment from "moment";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
 // import CustomDialog from "@/components/customs/custom-dialog";
 
 const DetailPatient = () => {
@@ -110,12 +116,11 @@ const DetailPatient = () => {
         <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
           <div className="flex flex-col gap-5">
             <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>
               <div>
                 <CustomButton
@@ -278,12 +283,24 @@ const DetailPatient = () => {
                 title: "MÃ PHIÊN KHÁM",
                 fixedLeft: true,
                 render: (item: ConsultationItem) => (
-                  <Link
+                  <TooltipProvider>
-                    href={`/consultation/${item.id}`}
+                    <Tooltip>
-                    className="text-blue-500 hover:underline"
+                      <TooltipTrigger asChild>
-                  >
+                        <Link
-                    {item.sessionCode}
+                          href={`/consultation/${item.id}`}
-                  </Link>
+                          className="text-blue-500 hover:underline"
+                        >
+                          {item.sessionCode}
+                        </Link>
+                      </TooltipTrigger>
+
+                      <TooltipContent>
+                        <p className="p-2 bg-gray-400 border rounded-full">
+                          Chi tiết phiên khám
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 ),
               },
 

src/components/page/patient/MainPagePatient/MainPagePatient.tsx

@@ -20,6 +20,13 @@ import React, { useMemo, useState } from "react";
 import PopupCreatePatient from "../PopupCreatePatient";
 import PopupUpdatePatient from "../PopupUpdatePatient";
 import Pagination from "@/components/customs/custom-pagination";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
+import moment from "moment";
 
 const MainPagePatient = () => {
   const router = useRouter();
@@ -61,6 +68,7 @@ const MainPagePatient = () => {
           Page: Number(_page || 1),
           PageSize: Number(_pageSize || 10),
           Search: _keyword || "",
+          // IdentificationNumber: _keyword || "",
           SortBy: "id",
           Desc: true,
         }),
@@ -171,8 +179,29 @@ const MainPagePatient = () => {
    * DATA
    */
   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 (
     <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",
 
               render: (item: PatientItem) => (
-                <Link
+                <TooltipProvider>
-                  href={`/patient/${item.id}`}
+                  <Tooltip>
-                  className="text-blue-500 hover:underline"
+                    <TooltipTrigger asChild>
-                >
+                      <Link
-                  {item.fullName || "---"}
+                        href={`/patient/${item.id}`}
-                </Link>
+                        className="text-blue-500 hover:underline"
+                      >
+                        {item.fullName}
+                      </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>
               ),
             },
 

src/components/page/prescription/CreatePrescription/CreatePrescription.tsx

@@ -56,6 +56,7 @@ const CreatePrescription = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const queryKeys = [QUERY_KEY.table_list_consultation];
   const [file, setFile] = useState<File | null>(null);
+  const [folderName, setFolderName] = useState("prescriptions");
 
   const [form, setForm] = useState<PrescriptionForm>({
     examinationSessionSpecialtyId: "",
@@ -181,7 +182,7 @@ const CreatePrescription = () => {
   const handleAddMedicine = () => {
     setForm((prev) => ({
       ...prev,
-      items: [...prev.items, { ...defaultMedicine }],
+      items: [{ ...defaultMedicine }, ...prev.items],
     }));
   };
 
@@ -228,7 +229,7 @@ const CreatePrescription = () => {
       setLoading(true);
       const uploadResponse: any = await prescriptionServices.uploadImage(
         file,
-        "prescriptions",
+        folderName,
       );
 
       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">
             {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
-                key={index}
+                key={`${index}-${form.items.length}`}
                 className="rounded-2xl border border-gray-200 p-5"
               >
                 {/* TITLE */}

src/components/page/prescription/DetailPrescription/DetailPrescription.tsx

@@ -5,13 +5,18 @@ import { httpRequest } from "@/services";
 import prescriptionServices, {
   PrescriptionDetail,
 } from "@/services/prescriptionServices";
+import consultationServices, {
+  ConsultationItem,
+} from "@/services/consultationServices";
 import { useQuery } from "@tanstack/react-query";
 import Image from "next/image";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import React, { useState } from "react";
 import CustomPopup from "@/components/customs/custom-popup";
+import { ArrowLeft } from "lucide-react";
 
 const DetailPrescription = () => {
+  const router = useRouter();
   const params = useParams();
   const PrescriptionId = params?.id as string;
   const [openImagePreview, setOpenImagePreview] = useState(false);
@@ -31,7 +36,7 @@ const DetailPrescription = () => {
       return (
         res || {
           id: "",
-          examinationSessionId: "",
+          examinationSessionSpecialtyId: "",
           prescriptionCode: "",
           prescriptionImg: null,
           notes: "",
@@ -44,9 +49,46 @@ const DetailPrescription = () => {
 
   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 (
     <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 */}
       {prescriptionDetailQuery.isLoading && <p>Đang tải...</p>}
@@ -64,11 +106,12 @@ const DetailPrescription = () => {
           </div>
 
           <div>
-            <strong>Id phiên khám:</strong> {data.examinationSessionId}
+            <strong>Chuyên khoa:</strong>{" "}
+            {specialtyName || data.examinationSessionSpecialtyId || "---"}
           </div>
 
           <div>
-            <strong>Ghi chú:</strong> {data.notes || "-"}
+            <strong>Ghi chú:</strong> {data.notes || "---"}
           </div>
 
           {/* IMAGE */}

src/components/page/prescription/MainPrescription/MainPrescription.tsx

@@ -10,8 +10,14 @@ import prescriptionServices, {
   PrescriptionItem,
   PrescriptionResponse,
 } from "@/services/prescriptionServices";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
 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 Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -121,12 +127,24 @@ const MainPrescription = () => {
             {
               title: "MÃ ĐƠN THUỐC",
               render: (item: any) => (
-                <Link
+                <TooltipProvider>
-                  href={`/prescription/${item.id}`}
+                  <Tooltip>
-                  className="text-blue-500 hover:underline"
+                    <TooltipTrigger asChild>
-                >
+                      <Link
-                  {item.prescriptionCode}
+                        href={`/prescription/${item.id}`}
-                </Link>
+                        className="text-blue-500 hover:underline"
+                      >
+                        {item.prescriptionCode}
+                      </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 =================
-            // {
+            {
-            //   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>

src/components/page/statistical/MainPageStatistical/MainPageStatistical.tsx

@@ -1,30 +1,49 @@
 "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 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 consultationServices, {
   ReportResponse,
 } 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 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>({
-    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 () => {
-      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>({
         showMessageFailed: true,
@@ -38,68 +57,132 @@ const MainPageStatistical = () => {
     },
   });
 
+  const report = reportQuery.data;
+
   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 (
-    <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
+    <div className="flex flex-col gap-6">
       {/* HEADER */}
-      <div className="flex items-center justify-between">
+      <div className="rounded-xl bg-white p-6 shadow">
-        <h2 className="text-xl font-semibold text-black">
+        <div className="flex items-center justify-between">
-          Thống kê các phiên khám
+          <h2 className="text-2xl font-semibold">Thống kê phiên khám</h2>
-        </h2>
+
+          <FilterDateRange
+            date={date}
+            setDate={setDate}
+            typeDate={typeDate}
+            setTypeDate={setTypeDate}
+          />
+        </div>
       </div>
-      <DataWrapper
+
-        data={reportData}
+      {/* CARDS */}
-        loading={reportQuery.isLoading}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
-        title="Không có dữ liệu"
+        <div className="rounded-xl bg-white p-5 shadow">
-        note="Vui lòng thử lại sau"
+          <div className="mb-3 flex items-center justify-between">
-      >
+            <Users size={22} />
-        <Table
+          </div>
-          rowKey={(item) => item.specialtyId}
+
+          <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
           data={reportData}
-          column={[
+          loading={reportQuery.isLoading}
-            {
+          title="Không có dữ liệu"
-              title: "MÃ CHUYÊN KHOA",
+          note="Vui lòng thử lại sau"
-              render: (item) => <span>{item.specialtyId}</span>,
+        >
-            },
+          <Table
-            {
+            rowKey={(item) => item.specialtyId}
-              title: "TÊN CHUYÊN KHOA",
+            data={reportData}
-              render: (item) => <span>{item.specialtyName}</span>,
+            column={[
-            },
+              {
-            {
+                title: "MÃ CHUYÊN KHOA",
-              title: "SỐ CA KHÁM",
+                render: (item) => <span>{item.specialtyId}</span>,
-              render: (item) => <span>{item.totalCases}</span>,
+              },
-            },
+              {
-          ]}
+                title: "TÊN CHUYÊN KHOA",
-        />
+                render: (item) => <span>{item.specialtyName}</span>,
-      </DataWrapper>
+              },
-      {/* <Pagination
+              {
-        total={reportData.length}
+                title: "SỐ CA KHÁM",
-        page={page}
+                render: (item) => (
-        pageSize={pageSize}
+                  <span className="font-semibold">{item.totalCases}</span>
-        onSetPage={(value) => updateQuery("_page", value)}
+                ),
-        onSetPageSize={(value) => updateQuery("_pageSize", value)}
+              },
-        dependencies={[_pageSize]}
+            ]}
-      /> */}
+          />
+        </DataWrapper>
+      </div>
+
+      {/* BÁO CÁO TỔNG HỢP */}
+      <div className="rounded-xl bg-white p-6 shadow">
+        <h3 className="mb-4 text-lg font-semibold">Báo cáo tổng hợp</h3>
+
+        <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>
   );
 };

src/components/utils/FilterDateRage/FilterDateRange.tsx

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

src/components/utils/FilterDateRage/components/CalendarMain/CalendarMain.tsx

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

src/components/utils/FilterDateRage/components/CalendarMain/index.ts

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

src/components/utils/FilterDateRage/components/CalendarMain/interface/index.ts

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

src/components/utils/FilterDateRage/components/DateOption/DateOption.tsx

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

src/components/utils/FilterDateRage/components/DateOption/index.ts

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

src/components/utils/FilterDateRage/components/DateOption/interface/index.ts

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

src/components/utils/FilterDateRage/components/RangeDatePicker/RangeDatePicker.tsx

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

src/components/utils/FilterDateRage/components/RangeDatePicker/index.ts

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

src/components/utils/FilterDateRage/components/RangeDatePicker/interface/index.ts

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

src/components/utils/FilterDateRage/index.ts

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

src/components/utils/FilterDateRage/interface/index.ts

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

src/constant/config/enum.ts

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

src/constant/config/index.ts

@@ -5,6 +5,7 @@ import {
   Pill,
   Users,
 } from "lucide-react";
+import { TYPE_DATE } from "./enum";
 
 export enum PATH {
   HOME = "/",
@@ -35,17 +36,17 @@ export const Menus: {
 }[] = [
   {
     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",
         icon: Users,
-        path: PATH.PATIENT || PATH.HOME,
+        path: PATH.PATIENT,
-        pathActive: PATH.PATIENT || PATH.HOME,
+        pathActive: PATH.PATIENT,
       },
       {
         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";

src/services/consultationServices.ts

@@ -34,10 +34,26 @@ export interface ConsultationItem {
     glassRequired: string | null;
     glassType: string | null;
     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 {
@@ -46,7 +62,7 @@ export interface ConsultationDetail {
   patientName: string;
   sessionCode: string;
   visitDate: string;
-  status: number;
+  status: string | number;
   chiefComplaint: string | null;
   symptomsText: string | null;
   vitalSigns: string | null;
@@ -66,10 +82,26 @@ export interface ConsultationDetail {
     glassRequired: boolean | null;
     glassType: string | null;
     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 {

src/services/prescriptionServices.ts

@@ -28,9 +28,9 @@ export interface PrescriptionItem {
 
 export interface PrescriptionDetail {
   id: string;
-  examinationSessionId: string;
+  examinationSessionSpecialtyId: string;
   prescriptionCode: string;
-  prescriptionImg: string | null;
+  prescriptionImg: string;
   notes: string;
   createdBy: string;
   items: {
@@ -112,11 +112,7 @@ const prescriptionServices = {
   /**
    * 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) => {
     const formData = new FormData();
 

yarn.lock

@@ -303,6 +303,44 @@ __metadata:
   languageName: node
   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":
   version: 0.19.2
   resolution: "@humanfs/core@npm:0.19.2"
@@ -733,6 +771,423 @@ __metadata:
   languageName: node
   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":
   version: 2.12.0
   resolution: "@reduxjs/toolkit@npm:2.12.0"
@@ -1393,6 +1848,15 @@ __metadata:
   languageName: node
   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":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
@@ -1890,6 +2354,13 @@ __metadata:
   languageName: node
   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":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -2574,6 +3045,13 @@ __metadata:
   languageName: node
   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":
   version: 1.0.1
   resolution: "get-proto@npm:1.0.1"
@@ -3171,6 +3649,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "kham-benh-mo-pho@workspace:."
   dependencies:
+    "@radix-ui/react-popover": "npm:^1.1.15"
+    "@radix-ui/react-tooltip": "npm:^1.2.8"
     "@reduxjs/toolkit": "npm:^2.12.0"
     "@tailwindcss/postcss": "npm:^4"
     "@tanstack/react-query": "npm:^5.100.11"
@@ -3192,6 +3672,7 @@ __metadata:
     nprogress: "npm:^0.2.0"
     react: "npm:19.2.4"
     react-dom: "npm:19.2.4"
+    react-moment: "npm:^2.0.2"
     react-redux: "npm:^9.3.0"
     react-toastify: "npm:^11.1.0"
     tailwindcss: "npm:^4"
@@ -3881,6 +4362,20 @@ __metadata:
   languageName: node
   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":
   version: 9.3.0
   resolution: "react-redux@npm:9.3.0"
@@ -3900,6 +4395,57 @@ __metadata:
   languageName: node
   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":
   version: 11.1.0
   resolution: "react-toastify@npm:11.1.0"
@@ -4482,7 +5028,7 @@ __metadata:
   languageName: node
   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
   resolution: "tslib@npm:2.8.1"
   checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
@@ -4704,6 +5250,37 @@ __metadata:
   languageName: node
   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":
   version: 1.6.0
   resolution: "use-sync-external-store@npm:1.6.0"