pray4skylark
377 lines
13 KiB
Markdown
377 lines
13 KiB
Markdown
---
|
||
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 | |