saefulrahman
16cbe65c62
- Add .gitignore, .yarnrc.yml, and initial project metadata (AGENTS.md, DESIGN.md, package.json, Yarn lock, Tailwind, PostCSS, Next.js config, TypeScript config) - Add CSV data files (users, employees, contracts, attendances) - Implement API routes for auth, employees, contracts, attendances, analytics, and file upload - Add core pages (dashboard, employees, attendances, profile, login, main layout) - Add UI components (avatar, avatar picker, badge, button, card, input, modal, select, sidebar, navigation shell, top header) - Add attendance features (table, clock widget, unified permit modal with file upload, upload API) - Add employee management (contract timeline with file upload, employee form modal, employee table) - Add dashboard widgets (leaderboard, early bird, latecomer, night owl, day status feed, date filter bar) - Add utilities (avatar generator, analytics calculations, CSV DB layer, auth context) - Add type definitions for auth, employee, contract, attendance, dashboard All changes are synchronized with documentation (AGENTS.md, DESIGN.md, walkthrough).
114 lines
7.1 KiB
Markdown
114 lines
7.1 KiB
Markdown
# DESIGN.md - Eigen HRIS Visual Design System & UI Blueprint
|
|
|
|
## 1. Design Philosophy: "Anti-AI-Slop & Human-Centric"
|
|
Eigen HRIS avoids repetitive, low-effort template aesthetics ("AI Slop"—such as generic gray rounded cards, centered meaningless gradients, and bland stock dashboards). Instead, Eigen HRIS is engineered with:
|
|
- **High Intentionality & Structure:** Sharp borders, subtle shadows, deliberate typographic scale, and purposeful asymmetric layouts.
|
|
- **Personality-Driven Gamification:** Playful, human-centric recognition widgets for employees ("Si Paling Pagi", "Si Paling Rajin", "Si Paling Telat", "Si Paling Pulang Malam").
|
|
- **Dynamic & Tactile Feedback:** Crisp micro-interactions, responsive hover states, smooth transitions, and distinct status indicators.
|
|
|
|
---
|
|
|
|
## 2. Color Palette & Token Architecture
|
|
|
|
The color system is derived from the approved brand palette ([Color Hunt #1b4ef53874ff5996fff4ceff](https://colorhunt.co/palette/1b4ef53874ff5996fff4ceff)):
|
|
|
|
### Primary Brand Colors
|
|
| Token Name | Hex Code | Purpose & Application |
|
|
|---|---|---|
|
|
| `--color-brand-primary` | `#1b4ef5` | **Cobalt Electric**: Primary action buttons, active navigation markers, key metric callouts, high-emphasis icons. |
|
|
| `--color-brand-secondary` | `#3874ff` | **Royal Azure**: Secondary buttons, active interactive elements, gradient fills, table header highlights. |
|
|
| `--color-brand-tertiary` | `#5996ff` | **Sky Periwinkle**: Subtle borders, active tab underlines, hover glow, secondary badges. |
|
|
| `--color-brand-pastel` | `#f4ceff` | **Lilac Cloud / Lavender Mist**: Soft background tints for top highlight cards ("Si Paling Pagi", streak champion badges), subtle notification accents. |
|
|
|
|
### Neutral & Semantic Colors
|
|
| Token Name | Hex Code | Purpose |
|
|
|---|---|---|
|
|
| `--color-bg-app` | `#F8FAFC` | Main application background (Clean slate-50). |
|
|
| `--color-bg-card` | `#FFFFFF` | Card surface with crisp `border border-slate-200/80`. |
|
|
| `--color-text-primary` | `#0F172A` | Primary text (Slate 900) for sharp readability. |
|
|
| `--color-text-secondary` | `#475569` | Secondary text (Slate 600) for subtitles and table contents. |
|
|
| `--color-text-muted` | `#94A3B8` | Muted labels, timestamps, and placeholder text (Slate 400). |
|
|
| `--color-status-present` | `#10B981` | Emerald Green: Present (WFO / WFH), Approved requests. |
|
|
| `--color-status-late` | `#F59E0B` | Amber: Late clock-ins, Late permits. |
|
|
| `--color-status-leave` | `#8B5CF6` | Purple: Annual leave (Cuti). |
|
|
| `--color-status-sick` | `#EC4899` | Rose / Pink: Sick leave with doctor note. |
|
|
| `--color-status-danger` | `#EF4444` | Red: Rejected requests, Contract termination. |
|
|
|
|
---
|
|
|
|
## 3. Typography: Plus Jakarta Sans
|
|
|
|
The entire interface uses **Plus Jakarta Sans** for modern geometric clarity and high legibility.
|
|
|
|
### Hierarchy Scale
|
|
- **Display / Hero Title:** `32px` (`text-3xl`), `font-extrabold` (800), tracking `-0.03em`.
|
|
- **Page Headings:** `24px` (`text-2xl`), `font-bold` (700), tracking `-0.02em`.
|
|
- **Card / Widget Headings:** `16px` (`text-base`), `font-semibold` (600), tracking `-0.01em`.
|
|
- **Section Eyebrow / Category Label:** `12px` (`text-xs`), `font-bold` (700), `uppercase`, tracking `0.06em`, color `text-brand-primary` or `text-slate-500`.
|
|
- **Body Regular:** `14px` (`text-sm`), `font-normal` (400) / `font-medium` (500), `leading-relaxed`.
|
|
- **Tabular Data & Timestamps:** `13px` - `14px`, `font-mono` or `font-feature-settings: 'tnum'` for aligned clock times and numbers.
|
|
|
|
---
|
|
|
|
## 4. UI Components & Visual Patterns
|
|
|
|
### 4.1 Gamified Analytics Widget System
|
|
- **"Si Paling Rajin" (Streak Champion):**
|
|
- Card with electric cobalt `#1b4ef5` gradient border, flame streak badge (`🔥`), and total active days counter.
|
|
- **"Si Paling Pagi" (The Early Bird):**
|
|
- Card with soft lilac `#f4ceff` luminous background accent, golden sunburst badge (`☀️`), and average clock-in stamp (e.g., `07:42 AM`).
|
|
- **"Si Paling Telat" (The Snooze King):**
|
|
- Card with amber/warning border tint, alarm clock badge (`⏰`), and total accumulated late minutes breakdown.
|
|
- **"Si Paling Pulang Malam" (The Night Owl):**
|
|
- Card with deep blue/indigo background accent, crescent moon badge (`🌙`), and average late clock-out stamp (e.g., `20:15 PM`).
|
|
|
|
### 4.2 Online Avatar & Photo Picker Component
|
|
- **Avatar Display:**
|
|
- Crisp rounded avatar (`rounded-2xl` or circular) with dynamic online photo URLs.
|
|
- Border indicator corresponding to employment status (Green = Active, Orange = Probation, Gray = Inactive).
|
|
- **Online Avatar Generator Modal / Picker:**
|
|
- Interactive "Generate New Avatar" button fetching dynamic SVG/PNG portraits from online services (DiceBear, Pravatar, Unsplash).
|
|
- Seed customization input allowing instant avatar regeneration based on employee name or unique strings.
|
|
|
|
### 4.3 Navigation & Layout Shell
|
|
- **Sidebar:**
|
|
- Sleek vertical sidebar with deep cobalt active link indicators, subtle badges, and company branding (Eigen HRIS).
|
|
- **Top Header:**
|
|
- Global search bar, quick role badge (`SUPERADMIN` / `STAFF`), and user profile dropdown with quick status switch.
|
|
- **Interactive Filter Bar:**
|
|
- Segmented control pills for date ranges (*This Month*, *Last Month*, *Custom Range*).
|
|
- Day toggle buttons (*Yesterday*, *Today*, *Tomorrow*) with badge counts.
|
|
|
|
### 4.4 Data Tables & Status Badges
|
|
- **Unified Table:**
|
|
- Clean table headers (`bg-slate-50`, sticky positioning, crisp divider).
|
|
- Row hover transition with `hover:bg-slate-50/80`.
|
|
- Action buttons with icon tooltips (Edit, View Contract, Approve/Reject).
|
|
- **Status Badges:**
|
|
- Pill design (`rounded-full px-2.5 py-1 text-xs font-semibold`) with high-contrast text and soft pastel background tints.
|
|
|
|
---
|
|
|
|
## 5. Micro-Interactions & Transitions
|
|
- **Button Hover / Active:** Subtle scale transition (`active:scale-[0.98] transition-transform duration-150`).
|
|
- **Modal Dialogs:** Smooth backdrop blur (`backdrop-blur-sm bg-slate-900/40`) with fade-and-scale entrance.
|
|
- **Card Hover:** Subtle border illumination using `--color-brand-tertiary` (`#5996ff`).
|
|
|
|
---
|
|
|
|
## 6. Design System Maintenance & Changelog
|
|
> [!IMPORTANT]
|
|
> **Mandatory Documentation Sync:** Any modification to design tokens, typography, component behaviors, layouts, or visual aesthetics MUST be immediately documented in this file (`DESIGN.md`) alongside implementation updates.
|
|
|
|
### Changelog
|
|
| Date | Author / Agent | Changes & Notes |
|
|
|---|---|---|
|
|
| 2026-08-27 | System / Antigravity | Initial creation of the Eigen HRIS Design System: Color Hunt `#1b4ef53874ff5996fff4ceff` palette, Plus Jakarta Sans typography, gamified widgets, online photo picker components, and synchronization policy. |
|
|
| 2026-08-27 | User / Antigravity | Configured design system pipeline dependencies to be installed and managed via **Yarn**. |
|
|
| 2026-08-27 | System / Antigravity | Implemented complete anti-AI-slop UI components: custom tactile cards, avatar picker with live preview & style presets, status badges, celebratory confetti micro-interactions, responsive sidebars, and real-time WIB clock header. |
|
|
| 2026-08-27 | User / Antigravity | Added tactile file upload dropzone for permits/contracts, live upload preview badges, and one-click 'Lihat' (view) & 'Unduh' (download) action buttons for server-stored attachments. |
|
|
|
|
|
|
|
|
|