init: SR System — Helpdesk & ITAM Portal

2026-06-02 13:50:39 +09:00
commit 832c9f096f
262 changed files with 30470 additions and 0 deletions
@@ -0,0 +1,377 @@
+---
+name: Premium Enterprise — SR System HQ Helpdesk
+version: 2.0.0
+merged_from:
+  - Stitch/Premium Enterprise (v1)
+  - project_m_dashboard_shell_1
+  - project_m_dashboard_shell_2
+colors:
+  # === Canvas & Surface ===
+  surface: '#f8f9ff'
+  surface-dim: '#cbdbf5'
+  surface-bright: '#f8f9ff'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#eff4ff'
+  surface-container: '#e5eeff'
+  surface-container-high: '#dce9ff'
+  surface-container-highest: '#d3e4fe'
+  on-surface: '#0b1c30'
+  on-surface-variant: '#464555'
+  inverse-surface: '#213145'
+  inverse-on-surface: '#eaf1ff'
+  outline: '#777587'
+  outline-variant: '#c7c4d8'
+  surface-tint: '#4d44e3'
+  # === Brand Indigo ===
+  primary: '#3525cd'
+  on-primary: '#ffffff'
+  primary-container: '#4f46e5'
+  on-primary-container: '#dad7ff'
+  inverse-primary: '#c3c0ff'
+  # === Accent Purple ===
+  secondary: '#712ae2'
+  on-secondary: '#ffffff'
+  secondary-container: '#8a4cfc'
+  on-secondary-container: '#fffbff'
+  # === Semantic Amber (tertiary, for ITAM warnings) ===
+  tertiary: '#7e3000'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#a44100'
+  on-tertiary-container: '#ffd2be'
+  # === Semantic Error ===
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  # === Fixed Tints ===
+  primary-fixed: '#e2dfff'
+  primary-fixed-dim: '#c3c0ff'
+  on-primary-fixed: '#0f0069'
+  on-primary-fixed-variant: '#3323cc'
+  secondary-fixed: '#eaddff'
+  secondary-fixed-dim: '#d2bbff'
+  on-secondary-fixed: '#25005a'
+  on-secondary-fixed-variant: '#5a00c6'
+  tertiary-fixed: '#ffdbcc'
+  tertiary-fixed-dim: '#ffb695'
+  on-tertiary-fixed: '#351000'
+  on-tertiary-fixed-variant: '#7b2f00'
+  background: '#f2f3f8'
+  on-background: '#0b1c30'
+  surface-variant: '#d3e4fe'
+  # === NEW: Status / Semantic Colors (from reference) ===
+  status-open: '#3b82f6'          # Blue  — SR Open
+  status-open-bg: '#eff6ff'
+  status-resolved: '#10b981'      # Emerald — Resolved
+  status-resolved-bg: '#ecfdf5'
+  status-critical: '#ef4444'      # Red — Critical Priority
+  status-critical-bg: '#fef2f2'
+  status-pending: '#f59e0b'       # Amber — Pending / In-progress
+  status-pending-bg: '#fffbeb'
+  status-closed: '#6b7280'        # Gray — Closed / Archived
+  status-closed-bg: '#f9fafb'
+  # === NEW: Project Dot Colors (from shell reference) ===
+  project-dot-green: '#22c55e'
+  project-dot-orange: '#f97316'
+  project-dot-blue: '#3b82f6'
+  project-dot-pink: '#ec4899'
+  project-dot-purple: '#a855f7'
+  project-dot-gray: '#d1d5db'
+typography:
+  h1:
+    fontFamily: Outfit
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.2'
+  h2:
+    fontFamily: Outfit
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: '1.3'
+  h3:
+    fontFamily: Outfit
+    fontSize: 20px
+    fontWeight: '500'
+    lineHeight: '1.4'
+  h4:
+    fontFamily: Outfit
+    fontSize: 16px
+    fontWeight: '600'
+    lineHeight: '1.4'
+  body-lg:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  body-md:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  body-sm:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  data-label:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: '1.2'
+    letterSpacing: 0.02em
+  button:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '600'
+    lineHeight: '1'
+  nav-item:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '500'
+    lineHeight: '1'
+  nav-group-label:
+    fontFamily: Inter
+    fontSize: 11px
+    fontWeight: '600'
+    lineHeight: '1'
+    letterSpacing: 0.08em
+    textTransform: uppercase
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 4px
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  gutter: 24px
+  margin-page: 32px
+---
+
+## Brand & Style
+
+This design system establishes an **"Approachable Enterprise"** aesthetic for the SR System — a HQ Helpdesk and IT Asset Management Portal for dispatched SI/SM engineers. It balances the rigor of data-dense corporate tools with a modern, human-centric softness.
+
+The visual style is **Corporate Modern with Tactile Influences**. It utilizes generous whitespace, a high-quality Off-white canvas (`#F2F3F8`), and soft ambient shadows to create clear spatial hierarchy. The intent is to lower cognitive load for power users while maintaining a premium feel through refined typography and intentional roundness.
+
+**Merged from:** Stitch Premium Enterprise v1 + Project M. Dashboard Shell (expanded & icon-collapsed variants).
+
+---
+
+## Colors
+
+The palette is anchored by **Deep Indigo** for primary actions and brand presence. The canvas follows a "Softer Background" philosophy:
+- **Canvas:** `#F2F3F8` Off-white, slightly cooler than the v1 value, to contrast white cards more clearly.
+- **Surfaces:** Pure White `#FFFFFF` for cards and main content containers.
+- **Brand Indigo:** `#4F46E5` for primary buttons, active nav states, and key CTAs.
+- **Accents:** Soft purples (`#712AE2`) for secondary actions; muted semantic colors for SR status badges.
+- **Status Colors (NEW):** A distinct set of semantic tokens for SR ticket states (Open, In-Progress, Resolved, Closed, Critical) and ITAM asset states. These must remain consistent across all badge, chip, and table row usages.
+- **Project Dot Colors (NEW):** 5 distinct hues (green, orange, blue, pink, purple) used as visual identifiers for active dispatch projects in the sidebar project list.
+
+---
+
+## Typography
+
+Dual-font strategy:
+- **Outfit** — Headlines, section titles, sidebar brand name.
+- **Inter** — All data labels, body text, nav items, badges.
+
+Hierarchy is achieved through weight and tonal contrast. Data labels use `letter-spacing: 0.02em` and `font-weight: 500`.  
+Nav group labels (e.g., "MY PROJECTS", "MAIN MENU") use `font-size: 11px`, `font-weight: 600`, `letter-spacing: 0.08em`, uppercase.
+
+---
+
+## Layout & Spacing
+
+### Sidebar Behavior (UPDATED from reference)
+The sidebar has **two responsive states**:
+
+| State | Width | Content |
+|---|---|---|
+| **Expanded** (default, ≥1280px) | 250px | Logo + label + full nav text + project list + CTA card |
+| **Collapsed** (manual toggle or ≤1024px) | 64px | Icon-only nav + project color dots + icon CTA |
+
+A `>>` / `<<` toggle chevron is placed in the top bar to switch states. Active state = pill-shaped highlight (`8px–12px` rounded rect) in `primary-fixed` tint.
+
+### Top Navigation Bar
+- Height: 64px, white background, `1px solid outline-variant` bottom border.
+- **Left zone:** Sidebar toggle chevron + Search bar (centered, `#F3F4F6` bg, 12px radius).
+- **Right zone:** Calendar icon → Chat icon → Bell icon (with unread badge) → `[Avatar] Name / Location ▾`.
+
+### Main Content Grid
+- 12-column fluid grid with 24px gutters, 32px page margins.
+- Summary card row at top: 4 equal columns (SR counts, active dispatches, equipment status, pending reports).
+- Below: mix of 8+4 or 6+6 column splits for tables + detail panels.
+
+### Page Container
+
+All pages follow a standardized container pattern for layout consistency:
+
+```tsx
+className="p-4 sm:p-6 lg:p-8"   // Responsive padding
+max-w-7xl mx-auto                // Content max-width (or max-w-5xl for profile)
+```
+
+**Padding:**
+- Mobile (< 640px): `p-4` (16px)
+- Tablet (640–1024px): `p-6` (24px)
+- Desktop (≥ 1024px): `p-8` (32px)
+
+**Max-width:**
+- Standard pages: `max-w-7xl` (1280px)
+- Profile page: `max-w-5xl` (1024px) — lighter content density
+
+**Components that must use this pattern:**
+- All `src/app/(main)/*/page.tsx` files
+- All sub-page files in route groups
+- The root div of each page should directly use `p-4 sm:p-6 lg:p-8`
+
+**Exceptions:**
+- Modals and overlays (use their own sizing)
+- The sidebar and header (managed by MainShell)
+
+---
+
+## Elevation & Depth
+
+| Level | Surface | Treatment |
+|---|---|---|
+| **0 — Canvas** | `#F2F3F8` | Background only |
+| **1 — Cards / Sidebar** | White | `1px border (#E5E7EB)` + `box-shadow: 0 1px 3px rgba(0,0,0,0.06)` |
+| **2 — Floating / Active** | White | `box-shadow: 0 4px 16px rgba(0,0,0,0.08)` |
+| **3 — Modal / Overlay** | White | `box-shadow: 0 20px 48px rgba(0,0,0,0.14)` + backdrop blur |
+
+Hover states increase shadow spread; border color stays constant.
+
+---
+
+## Shapes
+
+- **Content Cards:** `border-radius: 16px` (lg)
+- **Buttons / Inputs:** `12px–16px`
+- **Sidebar Nav Active State:** Pill-shape or `8px–12px` rounded rect background
+- **Status Badges / Chips:** Pill (`border-radius: 9999px`), low-opacity bg tint + high-contrast text
+- **Avatars:** `border-radius: 9999px` (circular)
+- **Project Dots:** `border-radius: 9999px`, `width: 8px`, `height: 8px`
+
+---
+
+## Components
+
+### Sidebar (UPDATED)
+
+**Expanded State (250px)**
+```
+┌─────────────────────────┐
+│ 🟣 SR System            │  ← Logo dot (gradient circle) + Outfit h4
+├─────────────────────────┤
+│ MAIN MENU               │  ← nav-group-label style
+│   ⊞  Dashboard          │  ← Active: pill bg (#EEF2FF), text (#4F46E5)
+│   📋 SR Issues          │
+│   🚀 Dispatch           │
+│   💻 ITAM               │
+│   📊 Work Reports       │
+│   🎓 Training           │
+│   ⚙️  Settings          │
+├─────────────────────────┤
+│ MY PROJECTS         [+] │  ← nav-group-label + icon button
+│   🟢 Samsung Pay SI     │
+│   🟠 LG CNS SM          │
+│   🔵 Kakao Maintenance  │
+│   🔴 SK Hynix Dev       │
+├─────────────────────────┤
+│ ╭───────────────────╮   │
+│ │ 💡 Quick Note     │   │  ← CTA Card: #FFF9EC bg, amber accent
+│ │  Share updates    │   │
+│ │ [Write a message] │   │
+│ ╰───────────────────╯   │
+└─────────────────────────┘
+```
+
+**Collapsed State (64px)**  
+Icons only; project list shows 8px color dots; CTA card reduces to single 💡 icon button.
+
+---
+
+### Top Navigation Bar
+- **Search:** `placeholder="Search issues, assets, employees..."` — 400px wide at center.
+- **Icons (right):** Calendar (`📅`), Chat/Message (`💬`), Bell (`🔔` with red dot if unread).
+- **Profile:** Circular avatar (32px) + `Inter Medium` name + subtitle (department/location) + dropdown `▾`.
+
+---
+
+### Summary Cards (Dashboard Header Row)
+4 cards with colored left-border accent and inline sparkline or icon:
+1. **Open SR Tickets** — Blue left-border, count + delta vs last week.
+2. **Active Dispatches** — Indigo left-border, headcount + project list mini chips.
+3. **Equipment In-Use** — Amber left-border, asset count + status bar.
+4. **Pending Reports** — Purple left-border, overdue count highlighted in red.
+
+---
+
+### Buttons & Controls
+- **Primary:** `bg: #4F46E5`, white text, `12px` radius, `px-16 py-8`, Inter SemiBold 14px.
+- **Secondary Outlined:** transparent bg, `1px solid #4F46E5`, indigo text.
+- **Ghost:** No border, gray text, hover bg `#F3F4F6`.
+- **Danger:** `bg: #EF4444` for destructive actions.
+- **'New SR' (Primary CTA):** In Top Nav right area — Primary style with `+` icon prefix.
+
+---
+
+### Status Badges / Chips (SR Tickets)
+```
+OPEN       → bg: #EFF6FF, text: #3B82F6, border: none
+IN-PROGRESS→ bg: #FFFBEB, text: #F59E0B
+RESOLVED   → bg: #ECFDF5, text: #10B981
+CLOSED     → bg: #F9FAFB, text: #6B7280
+CRITICAL   → bg: #FEF2F2, text: #EF4444, font-weight: 600
+```
+All pill-shaped (`border-radius: 9999px`), `px-8 py-2`, `font-size: 12px`.
+
+---
+
+### Data Tables
+- Header: `font-size: 12px`, Inter SemiBold, `letter-spacing: 0.04em`, uppercase, `color: #6B7280`.
+- Row hover: `bg: #F8F9FF`.
+- Selected row: `bg: #EEF2FF`.
+- Pagination: Simple `<  1  2  3 ... 12  >` strip, `border-top: 1px solid #E5E7EB`.
+- Column widths: flexible, min-width per type (`ID: 60px, Date: 100px, Status: 120px, Text: auto`).
+
+---
+
+### SR Issue Detail Panel
+A right-side slide-over panel (480px) or full-page route:
+- **Header:** Title, SR ID badge, Status badge, Priority chip, Assignee avatar.
+- **Thread / Comments:** Chat-bubble layout, alternating left (requester) / right (HQ support).
+- **Code Block:** Dark bg (`#1E1E2E`), monospace font (JetBrains Mono 13px), copy button.
+- **Attachment Area:** File chip list with extension icon + filename + size.
+
+---
+
+### Dispatch Timeline
+Vertical timeline component for employee career:
+- Left rail: `2px solid #E5E7EB` with colored dot per project.
+- Each entry: Project name (Outfit SemiBold), period badge, role chip, tech stack pill list.
+
+---
+
+### ITAM Asset Viewer
+- Expandable JSON spec panel using styled key-value grid.
+- Asset status pill in header.
+- Maintenance history as compact table below specs.
+
+---
+
+## Responsive Breakpoints
+
+| Breakpoint | Sidebar | Layout |
+|---|---|---|
+| `≥ 1280px` | 250px expanded | Full dashboard |
+| `1024px–1279px` | 64px collapsed (auto) | Icon sidebar |
+| `< 1024px` | Hidden (drawer overlay) | Mobile nav bar at bottom |