Merge branch 'iipbs_cs' of https://www.onasys.co.kr:3000/ONAANDALL/frontend

2025-07-24 10:54:18 +09:00
parent ecf430dd33 af98524806
commit f58f9c3fe3
11 changed files with 771 additions and 7 deletions
@@ -0,0 +1,14 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { Dashboard, DashboardService } from "../model/dashboard-interface";
+
+export class DashboardApiService implements DashboardService {
+  public async getDashboard(): Promise<Dashboard> {
+    const response = await client.get<Dashboard>(
+      ENDPOINT.CMS_SERVICE.DASHBOARD,
+    );
+    return response.data;
+  }
+}
+
+export const DashboardApi = new DashboardApiService();
@@ -0,0 +1,49 @@
+import type { ChartData, ChartDataset } from "chart.js";
+import { getCssVariableValue } from "@common/components";
+import type {
+  MenuStatisticsContent,
+  SiteStatisticsContent,
+} from "../model/dashboard-interface";
+
+export function processSiteAccessData(
+  siteAccessList: SiteStatisticsContent[],
+): ChartData<"line">["datasets"] {
+  const siteGroups: Record<string, ChartDataset> = siteAccessList.reduce(
+    (acc, item) => {
+      if (!acc[item.siteNm]) {
+        acc[item.siteNm] = {
+          label: item.siteNm,
+          data: Array(24).fill(0), // 24시간 데이터 초기화
+          borderColor: getCssVariableValue(
+            `--chart-${Math.floor(Math.random() * 5) + 1}`,
+          ),
+        };
+      }
+
+      // 시간대별 접속 카운트 누적
+      const hourIndex = parseInt(item.accessHour, 10);
+      if (!isNaN(hourIndex) && hourIndex >= 0 && hourIndex < 24) {
+        acc[item.siteNm]!.data[hourIndex] = item.accessCnt;
+      }
+
+      return acc;
+    },
+    {} as Record<string, ChartDataset>,
+  );
+
+  return Object.values(siteGroups) as ChartData<"line">["datasets"];
+}
+
+export function processMenuAccessData(
+  menuAccessList: MenuStatisticsContent[],
+): ChartData<"bar">["datasets"] {
+  const data = menuAccessList.map((item) => item.accessCnt);
+
+  return [
+    {
+      label: "메뉴별 접속 횟수",
+      data,
+      backgroundColor: "rgb(32, 148, 250)",
+    },
+  ] as ChartData<"bar">["datasets"];
+}
@@ -0,0 +1,172 @@
+import { type ChartData, type ChartOptions } from "chart.js";
+
+const commonData = {
+  labels: ["1", "2", "3", "4", "5", "6", "7"],
+  datasets: [
+    {
+      fill: true,
+      pointRadius: 0,
+      tension: 0.5,
+    },
+  ],
+};
+
+const commonOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      display: false,
+    },
+    y: {
+      display: false,
+    },
+  },
+};
+
+export const chartData: Record<
+  string,
+  { data: ChartData<"line" | "bar">; options: ChartOptions<"line" | "bar"> }
+> = {
+  memberChartData: {
+    data: {
+      ...commonData,
+      datasets: [
+        {
+          ...commonData.datasets[0],
+          data: [8, 10, 7, 12, 9, 13, 12],
+          borderColor: "rgba(255, 255, 255, 0.6)",
+          backgroundColor: "rgba(255, 255, 255, 0.1)",
+        },
+      ],
+    },
+    options: {
+      ...commonOptions,
+      scales: {
+        ...commonOptions.scales,
+        y: {
+          ...commonOptions.scales.y,
+          min: 5,
+          max: 15,
+        },
+      },
+    },
+  },
+  postChartData: {
+    data: {
+      ...commonData,
+      datasets: [
+        {
+          ...commonData.datasets[0],
+          data: [5200, 5350, 5450, 5520, 5600, 5650, 5678],
+          borderColor: "rgba(86, 138, 255, 1)",
+          backgroundColor: "rgba(86, 138, 255, 0.1)",
+        },
+      ],
+    },
+    options: {
+      ...commonOptions,
+    },
+  },
+  visitorChartData: {
+    data: {
+      ...commonData,
+      datasets: [
+        {
+          ...commonData.datasets[0],
+          data: [1800, 2100, 1950, 2300, 2150, 2250, 2345],
+          borderColor: "rgba(149, 131, 252)",
+          backgroundColor: "rgba(149, 131, 252, 0.1)",
+        },
+      ],
+    },
+    options: {
+      ...commonOptions,
+    },
+  },
+  apiChartData: {
+    data: {
+      ...commonData,
+      datasets: [
+        {
+          ...commonData.datasets[0],
+          data: [41000, 42500, 43200, 44100, 44800, 45200, 45678],
+          borderColor: "rgba(220, 103, 206)",
+          backgroundColor: "rgba(220, 103, 206, 0.1)",
+        },
+      ],
+    },
+    options: {
+      ...commonOptions,
+    },
+  },
+  siteAccessChartData: {
+    data: {
+      labels: Array.from({ length: 24 }, (_, i) =>
+        i.toString().padStart(2, "0"),
+      ),
+      datasets: [],
+    },
+    options: {
+      ...commonOptions,
+      plugins: {
+        legend: {
+          position: "top",
+        },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+        },
+      },
+      scales: {
+        x: {
+          title: {
+            text: "시간대",
+          },
+        },
+        y: {
+          title: {
+            text: "접속자 수",
+          },
+          beginAtZero: true,
+        },
+      },
+    },
+  },
+  menuAccessChartData: {
+    data: {
+      labels: [],
+      datasets: [],
+    },
+    options: {
+      ...commonOptions,
+      plugins: {
+        legend: {
+          position: "top",
+        },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+        },
+      },
+      scales: {
+        x: {
+          title: {
+            text: "메뉴명",
+          },
+        },
+        y: {
+          title: {
+            text: "접속 횟수",
+          },
+          beginAtZero: true,
+        },
+      },
+    },
+  },
+};
@@ -0,0 +1,32 @@
+export interface SiteStatisticsContent {
+  siteId: string;
+  siteNm: string;
+  accessHour: string;
+  accessCnt: number;
+}
+
+export interface MenuStatisticsContent {
+  menuCd: number;
+  menuNm: string;
+  accessCnt: number;
+}
+
+export interface Dashboard {
+  memberTotCnt: number;
+  memberTodayCnt: number;
+  pstTotCnt: number;
+  pstTodayCnt: number;
+  accessTodayCnt: number;
+  accessBefDayPer: number;
+  apiTodayCnt: number;
+  waitMemberCnt: number;
+  waitCntnCnt: number;
+  notiList: [];
+  schdlList: [];
+  siteAccessList: SiteStatisticsContent[];
+  menuAccessList: MenuStatisticsContent[];
+}
+
+export interface DashboardService {
+  getDashboard(): Promise<Dashboard>;
+}
@@ -0,0 +1,74 @@
+import dayjs from "dayjs";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Badge } from "@common/components";
+import type { RecentPost } from "@/entities/post";
+
+const noticePostTableColumns: ColumnDef<RecentPost>[] = [
+  {
+    header: "번호",
+    cell: ({ row, table }) => {
+      if (row.original.upndFixYn === "Y") {
+        return (
+          <Badge
+            color="orange"
+            className="flex size-8 items-center justify-center"
+          >
+            <i className="diveicon di-volume-up-fill" />
+          </Badge>
+        );
+      }
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "pstTtl",
+    header: "제목",
+  },
+  {
+    accessorKey: "wrtrNm",
+    header: "작성자",
+  },
+  {
+    accessorKey: "regDt",
+    header: "작성일",
+    cell: ({ row }) => dayjs(row.original.regDt).format("YYYY-MM-DD"),
+  },
+  {
+    accessorKey: "inqNocs",
+    header: "조회수",
+  },
+];
+
+const recentPostTableColumns: ColumnDef<RecentPost>[] = [
+  {
+    header: "번호",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "pstTtl",
+    header: "제목",
+  },
+  {
+    accessorKey: "wrtrNm",
+    header: "작성자",
+  },
+  {
+    accessorKey: "regDt",
+    header: "작성일",
+    cell: ({ row }) => dayjs(row.original.regDt).format("YYYY-MM-DD"),
+  },
+  {
+    accessorKey: "inqNocs",
+    header: "조회수",
+  },
+];
+
+export { noticePostTableColumns, recentPostTableColumns };
@@ -1,5 +1,409 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { getCoreRowModel } from "@tanstack/react-table";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Filler,
+  Legend,
+  Tooltip,
+  type ChartData,
+} from "chart.js";
+import { Bar, Line } from "react-chartjs-2";
+import { PostApi, type RecentPost } from "@/entities/post";
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
+import { DashboardApi } from "../api/dashboard-service";
+import { chartData } from "../model/chart-data";
+import {
+  noticePostTableColumns,
+  recentPostTableColumns,
+} from "../model/table-columns";
+import { processMenuAccessData, processSiteAccessData } from "../lib/utils";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Filler,
+  Legend,
+  Tooltip,
+);
+
 function DashboardPage() {
-  return <></>;
+  const router = useRouter();
+  const { data } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.DASHBOARD],
+    queryFn: () => DashboardApi.getDashboard(),
+  });
+
+  const noticePostQuery = useQuery({
+    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
+    queryFn: () =>
+      PostApi.getRecentPostList({
+        page: 0,
+        size: 5,
+        keywordType: "bbsTypeCd",
+        keyword: "BBSNOTICE",
+      }),
+  });
+
+  const recentPostQuery = useQuery({
+    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
+    queryFn: () =>
+      PostApi.getRecentPostList({
+        page: 0,
+        size: 5,
+      }),
+  });
+
+  const handleNoticePostRowClick = (row: RecentPost) => {
+    router.push(`/bbs/bbsnotice/${row.bbsId}/${row.pstNo}`);
+  };
+
+  const handleRecentPostRowClick = (row: RecentPost) => {
+    router.push(
+      `/bbs/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`,
+    );
+  };
+
+  const { tableComponent: noticePostTableComponent } = useDataTable({
+    query: noticePostQuery,
+    tableOptions: {
+      columns: noticePostTableColumns,
+      getCoreRowModel: getCoreRowModel(),
+    },
+    dataTableOptions: {
+      variant: "line",
+      onRowClick: handleNoticePostRowClick,
+    },
+  });
+
+  const { tableComponent: recentPostTableComponent } = useDataTable({
+    query: recentPostQuery,
+    tableOptions: {
+      columns: recentPostTableColumns,
+      getCoreRowModel: getCoreRowModel(),
+    },
+    dataTableOptions: {
+      variant: "line",
+      onRowClick: handleRecentPostRowClick,
+    },
+  });
+
+  return (
+    <div className="p-6">
+      <div className="flex flex-col gap-1">
+        {/* 첫번째 라인 */}
+        <div className="grid grid-cols-4 gap-1">
+          {/* 총 회원수 카드 */}
+          <div className="card card-border h-80 !bg-primary !p-0">
+            <div className="relative h-full">
+              <div className="absolute left-0 top-0 p-6 tracking-tighter text-white">
+                <h3 className="text-2xl font-medium">총 회원수</h3>
+                <div className="mt-2 text-6xl font-bold">
+                  {data?.memberTotCnt ?? "-"}
+                </div>
+                <p className="mt-1 text-2xl opacity-80">
+                  금일 신규 가입자 {data?.memberTodayCnt ?? "-"}명
+                </p>
+              </div>
+              {/* 차트 영역 */}
+              <div className="h-full">
+                <Line
+                  data={chartData.memberChartData!.data as ChartData<"line">}
+                  options={chartData.memberChartData!.options}
+                />
+              </div>
+            </div>
+          </div>
+          {/* 전체 게시물 카드 */}
+          <div className="card card-border h-80 !p-0">
+            <div className="relative h-full">
+              <div className="absolute left-0 top-0 p-6 tracking-tighter">
+                <h3 className="text-2xl font-medium">전체 게시물</h3>
+                <div className="mt-2 text-6xl font-bold">
+                  {data?.pstTotCnt ?? "-"}
+                </div>
+                <p className="mt-1 text-2xl opacity-80">
+                  금일 +{data?.pstTodayCnt ?? "-"} 등록
+                </p>
+              </div>
+              {/* 차트 영역 */}
+              <div className="h-full">
+                <Line
+                  data={chartData.postChartData!.data as ChartData<"line">}
+                  options={chartData.postChartData!.options}
+                />
+              </div>
+            </div>
+          </div>
+          {/* 오늘 접속자 수 카드 */}
+          <div className="card card-border h-80 !p-0">
+            <div className="relative h-full">
+              <div className="absolute left-0 top-0 p-6 tracking-tighter">
+                <h3 className="text-2xl font-medium">오늘 접속자 수</h3>
+                <div className="mt-2 text-6xl font-bold">
+                  {data?.accessTodayCnt ?? "-"}
+                </div>
+                <p className="mt-1 text-2xl opacity-80">
+                  전일 대비 +{data?.accessBefDayPer ?? "-"}%
+                </p>
+              </div>
+              {/* 차트 영역 */}
+              <div className="h-full">
+                <Line
+                  data={chartData.visitorChartData!.data as ChartData<"line">}
+                  options={chartData.visitorChartData!.options}
+                />
+              </div>
+            </div>
+          </div>
+          {/* API 호출 건수 카드 */}
+          <div className="card card-border h-80 !p-0">
+            <div className="relative h-full">
+              <div className="absolute left-0 top-0 p-6 tracking-tighter">
+                <h3 className="text-2xl font-medium">API 호출 건수</h3>
+                <div className="mt-2 text-6xl font-bold">
+                  {data?.apiTodayCnt ?? "-"}
+                </div>
+                <p className="mt-1 text-2xl opacity-80">금일 누적</p>
+              </div>
+              {/* 차트 영역 */}
+              <div className="h-full">
+                <Line
+                  data={chartData.apiChartData!.data as ChartData<"line">}
+                  options={chartData.apiChartData!.options}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 두번째 라인 */}
+        <div className="grid grid-cols-2 gap-1">
+          {/* 승인 대기 알림 */}
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">승인 대기 알림</h3>
+            </div>
+            <div className="p-4">
+              <div className="flex gap-4">
+                {/* 사용자 승인 */}
+                <div className="flex flex-1 flex-col items-start rounded-md bg-accent p-6">
+                  <div className="flex items-center">
+                    <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-lg bg-red-100">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="text-red-500"
+                      >
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="12" cy="7" r="4"></circle>
+                      </svg>
+                    </div>
+                    <span className="text-2xl font-medium">사용자 승인</span>
+                  </div>
+                  <div className="mt-5">
+                    <div className="text-5xl font-bold">
+                      {data?.waitMemberCnt}건
+                    </div>
+                    <div className="mt-2 text-2xl text-gray-500">
+                      신규 가입 승인 대기
+                    </div>
+                  </div>
+                </div>
+                {/* 매뉴 승인 */}
+                <div className="flex flex-1 flex-col items-start rounded-md bg-accent p-6">
+                  <div className="flex items-center">
+                    <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="text-blue-500"
+                      >
+                        <rect x="3" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="14" width="7" height="7"></rect>
+                        <rect x="3" y="14" width="7" height="7"></rect>
+                      </svg>
+                    </div>
+                    <span className="text-2xl font-medium">메뉴 승인</span>
+                  </div>
+                  <div className="mt-5">
+                    <div className="text-5xl font-bold">3건</div>
+                    <div className="mt-2 text-2xl text-gray-500">
+                      매뉴 수정 승인 대기
+                    </div>
+                  </div>
+                </div>
+                {/* 컨텐츠 승인 */}
+                <div className="flex flex-1 flex-col items-start rounded-md bg-accent p-6">
+                  <div className="flex items-center">
+                    <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-lg bg-yellow-100">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="text-yellow-500"
+                      >
+                        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
+                        <polyline points="14 2 14 8 20 8"></polyline>
+                      </svg>
+                    </div>
+                    <span className="text-2xl font-medium">컨텐츠 승인</span>
+                  </div>
+                  <div className="mt-5">
+                    <div className="text-5xl font-bold">
+                      {data?.waitCntnCnt}건
+                    </div>
+                    <div className="mt-2 text-2xl text-gray-500">
+                      컨텐츠 수정 승인 대기
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-1">
+            {/* 실시간 알림 */}
+            <div className="card card-border">
+              <div className="card-header">
+                <h3 className="text-2xl font-medium">실시간 알림</h3>
+              </div>
+              <div className="p-4">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">신규 사용자 가입</span>
+                    <span>1분 전</span>
+                  </div>
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">메뉴 수정 요청</span>
+                    <span>5분 전</span>
+                  </div>
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">게시물 신고</span>
+                    <span>10분 전</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">컨텐츠 승인 요청</span>
+                    <span>15분 전</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* 일정 알림 */}
+            <div className="card card-border">
+              <div className="card-header">
+                <h3 className="text-2xl font-medium">일정 알림</h3>
+              </div>
+              <div className="p-4">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">3월 정기 시스템 점검</span>
+                    <span>내일</span>
+                  </div>
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">서버 업데이트 예정</span>
+                    <span>3일 후</span>
+                  </div>
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">백업 스케줄</span>
+                    <span>5일 후</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">정기 보안 점검</span>
+                    <span>7일 후</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 세번째 라인 */}
+        <div className="grid grid-cols-2 gap-1">
+          {/* 접속자 통계 */}
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">접속자 통계</h3>
+            </div>
+            <div className="h-80 p-4">
+              <Line
+                data={{
+                  ...chartData.siteAccessChartData!.data,
+                  datasets: processSiteAccessData(data?.siteAccessList ?? []),
+                }}
+                options={chartData.siteAccessChartData!.options}
+              />
+            </div>
+          </div>
+          {/* 메뉴별 접속 통계 */}
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">메뉴별 접속 통계</h3>
+            </div>
+            <div className="h-80 p-4">
+              <Bar
+                data={{
+                  labels:
+                    data?.menuAccessList?.map((item) => item.menuNm) || [],
+                  datasets: processMenuAccessData(data?.menuAccessList || []),
+                }}
+                options={chartData.menuAccessChartData!.options}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* 네번째 라인 */}
+        <div className="grid grid-cols-2 gap-1">
+          {/* 공지사항 */}
+          <div className="card card-border !p-0">
+            <div className="card-header !m-0 !border-none">
+              <h3 className="text-2xl font-medium">공지사항</h3>
+            </div>
+            {noticePostTableComponent}
+          </div>
+          {/* 신규 게시글 */}
+          <div className="card card-border !p-0">
+            <div className="card-header !m-0 !border-none">
+              <h3 className="text-2xl font-medium">신규 게시글</h3>
+            </div>
+            {recentPostTableComponent}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

 export { DashboardPage };
@@ -23,6 +23,7 @@ export const ENDPOINT = {
    PRIVACYLOG: "/user-service//api/v1/prvc-inq-logs",
  },
  CMS_SERVICE: {
+    DASHBOARD: "/cms-service/api/v1/dashboard",
    SITES: "/cms-service/api/v1/sites",
    IPS: "/cms-service/api/v1/site-ips",
    DOMAINS: "/cms-service/api/v1/site-dmns",
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -20,7 +20,9 @@
    "preinstall": "npx only-allow pnpm"
  },
  "dependencies": {
+    "chart.js": "^4.4.8",
    "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
    "react-dom": "^18.3.1",
    "zustand": "^5.0.3"
  },
@@ -14,9 +14,15 @@ importers:

  .:
    dependencies:
+      chart.js:
+        specifier: ^4.4.8
+        version: 4.4.8
      react:
        specifier: ^18.3.1
        version: 18.3.1
+      react-chartjs-2:
+        specifier: ^5.3.0
+        version: 5.3.0(chart.js@4.4.8)(react@18.3.1)
      react-dom:
        specifier: ^18.3.1
        version: 18.3.1(react@18.3.1)
@@ -2549,7 +2555,7 @@ packages:
      magic-string: 0.27.0
      react-docgen-typescript: 2.2.2(typescript@5.6.3)
      typescript: 5.6.3
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
    dev: true

  /@jridgewell/gen-mapping@0.3.8:
@@ -2640,7 +2646,7 @@ packages:
      dnd-multi-backend: 8.1.2(dnd-core@16.0.1)
      framer-motion: 11.18.2(react-dom@18.3.1)(react@18.3.1)
      react: 18.3.1
-      react-dnd: 16.0.1(@types/node@22.13.5)(@types/react@18.3.18)(react@18.3.1)
+      react-dnd: 16.0.1(@types/node@22.13.9)(@types/react@18.3.18)(react@18.3.1)
      react-dnd-html5-backend: 16.0.1
      react-dnd-touch-backend: 16.0.1
      react-dom: 18.3.1(react@18.3.1)
@@ -4122,7 +4128,7 @@ packages:
      browser-assert: 1.2.1
      storybook: 8.6.0(prettier@3.5.2)
      ts-dedent: 2.2.0
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
    dev: true

  /@storybook/components@8.6.0(storybook@8.6.0):
@@ -4254,7 +4260,7 @@ packages:
      resolve: 1.22.10
      storybook: 8.6.0(prettier@3.5.2)
      tsconfig-paths: 4.2.0
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
    transitivePeerDependencies:
      - rollup
      - supports-color
@@ -4884,7 +4890,7 @@ packages:
      '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.9)
      '@types/babel__core': 7.20.5
      react-refresh: 0.14.2
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
    transitivePeerDependencies:
      - supports-color
    dev: true
@@ -10359,7 +10365,7 @@ packages:
      debug: 4.4.0
      globrex: 0.1.2
      tsconfck: 3.1.5(typescript@5.6.3)
-      vite: 6.2.0(@types/node@22.13.5)
+      vite: 6.2.0(@types/node@22.13.9)
    transitivePeerDependencies:
      - supports-color
      - typescript