From c9bf16cf8e49fe86da84ba5dc89f490b23455506 Mon Sep 17 00:00:00 2001
From: kyy <b24053@hanmaceng.co.kr>
Date: Thu, 14 May 2026 17:01:20 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=9C=EC=9A=94=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EC=99=80=20=EB=A1=9C=EC=BC=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/overview/OverviewAxisNotes.tsx | 14 ++++++
 .../components/overview/OverviewMetric.tsx    | 19 +++++++
 .../overview/OverviewSelectionChips.tsx       | 50 +++++++++++++++++++
 common/core/components/overview/index.ts      |  3 ++
 common/locales/en.toml                        | 15 ++++++
 common/locales/ko.toml                        | 15 ++++++
 common/locales/template.toml                  | 15 ++++++
 7 files changed, 131 insertions(+)
 create mode 100644 common/core/components/overview/OverviewAxisNotes.tsx
 create mode 100644 common/core/components/overview/OverviewMetric.tsx
 create mode 100644 common/core/components/overview/OverviewSelectionChips.tsx
 create mode 100644 common/core/components/overview/index.ts

diff --git a/common/core/components/overview/OverviewAxisNotes.tsx b/common/core/components/overview/OverviewAxisNotes.tsx
new file mode 100644
index 00000000..e5b9a4ed
--- /dev/null
+++ b/common/core/components/overview/OverviewAxisNotes.tsx
@@ -0,0 +1,14 @@
+export function OverviewAxisNotes({
+  xAxisLabel,
+  yAxisLabel,
+}: {
+  xAxisLabel: string;
+  yAxisLabel: string;
+}) {
+  return (
+    <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+      <span>{xAxisLabel}</span>
+      <span>{yAxisLabel}</span>
+    </div>
+  );
+}
diff --git a/common/core/components/overview/OverviewMetric.tsx b/common/core/components/overview/OverviewMetric.tsx
new file mode 100644
index 00000000..92209381
--- /dev/null
+++ b/common/core/components/overview/OverviewMetric.tsx
@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+export function OverviewMetric({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <span className="inline-flex items-center gap-2 whitespace-nowrap text-sm">
+      <span className="text-muted-foreground">{icon}</span>
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-semibold tabular-nums">{value}</span>
+    </span>
+  );
+}
diff --git a/common/core/components/overview/OverviewSelectionChips.tsx b/common/core/components/overview/OverviewSelectionChips.tsx
new file mode 100644
index 00000000..63660c3b
--- /dev/null
+++ b/common/core/components/overview/OverviewSelectionChips.tsx
@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+
+type OverviewSelectionChipOption = {
+  id: string;
+  label: ReactNode;
+};
+
+export function OverviewSelectionChips({
+  allLabel,
+  options,
+  selectedIds,
+  onSelectAll,
+  onToggle,
+}: {
+  allLabel: string;
+  options: OverviewSelectionChipOption[];
+  selectedIds: string[];
+  onSelectAll: () => void;
+  onToggle: (id: string) => void;
+}) {
+  const isAllSelected = selectedIds.length === 0;
+
+  return (
+    <div className="flex flex-wrap gap-2 rounded-xl border border-border/60 bg-card/60 p-3">
+      <label className="inline-flex items-center gap-2 rounded-full border border-border/60 px-3 py-1.5 text-xs">
+        <input
+          type="checkbox"
+          checked={isAllSelected}
+          onChange={onSelectAll}
+          className="h-3.5 w-3.5"
+        />
+        <span>{allLabel}</span>
+      </label>
+      {options.map((option) => (
+        <label
+          key={option.id}
+          className="inline-flex items-center gap-2 rounded-full border border-border/60 px-3 py-1.5 text-xs"
+        >
+          <input
+            type="checkbox"
+            checked={selectedIds.includes(option.id)}
+            onChange={() => onToggle(option.id)}
+            className="h-3.5 w-3.5"
+          />
+          <span>{option.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}
diff --git a/common/core/components/overview/index.ts b/common/core/components/overview/index.ts
new file mode 100644
index 00000000..b6577afa
--- /dev/null
+++ b/common/core/components/overview/index.ts
@@ -0,0 +1,3 @@
+export { OverviewMetric } from "./OverviewMetric";
+export { OverviewAxisNotes } from "./OverviewAxisNotes";
+export { OverviewSelectionChips } from "./OverviewSelectionChips";
diff --git a/common/locales/en.toml b/common/locales/en.toml
index b57b3042..0a451791 100644
--- a/common/locales/en.toml
+++ b/common/locales/en.toml
@@ -86,6 +86,21 @@ theme_toggle = "Theme Toggle"
 unassigned = "Unassigned"
 unknown = "Unknown"
 
+[ui.common.overview]
+title = "Operational Status"
+
+[ui.common.chart.period]
+day = "Day"
+month = "Month"
+week = "Week"
+
+[ui.common.chart.series_summary]
+login_users = "Login {{login}} / Users {{subjects}}"
+
+[ui.common.chart.axis]
+x = "X-axis: Period"
+y = "Y-axis: Login Requests"
+
 [ui.common.badge]
 admin_only = "Admin only"
 command_only = "Command only"
diff --git a/common/locales/ko.toml b/common/locales/ko.toml
index c77ac6d6..249cbf04 100644
--- a/common/locales/ko.toml
+++ b/common/locales/ko.toml
@@ -86,6 +86,21 @@ theme_toggle = "테마 전환"
 unassigned = "미배정"
 unknown = "Unknown"
 
+[ui.common.overview]
+title = "운영 현황"
+
+[ui.common.chart.period]
+day = "일"
+month = "월"
+week = "주"
+
+[ui.common.chart.series_summary]
+login_users = "로그인 {{login}} / 사용자 {{subjects}}"
+
+[ui.common.chart.axis]
+x = "X축: 기간"
+y = "Y축: 로그인 요청 수"
+
 [ui.common.badge]
 admin_only = "Admin only"
 command_only = "Command only"
diff --git a/common/locales/template.toml b/common/locales/template.toml
index 0c4f4955..cce406f5 100644
--- a/common/locales/template.toml
+++ b/common/locales/template.toml
@@ -86,6 +86,21 @@ theme_toggle = ""
 unassigned = ""
 unknown = ""
 
+[ui.common.overview]
+title = ""
+
+[ui.common.chart.period]
+day = ""
+month = ""
+week = ""
+
+[ui.common.chart.series_summary]
+login_users = ""
+
+[ui.common.chart.axis]
+x = ""
+y = ""
+
 [ui.common.badge]
 admin_only = ""
 command_only = ""