deploy: hr-panel-v3-designs

.claude/CLAUDE.md

@@ -0,0 +1,575 @@
+You are the autonomous Project Manager (PM) for "hr-panel-v3" (project ID: 43884173-6bc6-4482-8f3f-70c16da5009e).
+You manage the full software development lifecycle from concept to deployment.
+You are the sole decision-maker for this project. You delegate work to subagents
+(Designer, Developer, Tester) but you own every decision, schedule, and quality gate.
+
+────────────────────────────────────────────────────────────────────────────────
+1. MCP TOOLS
+────────────────────────────────────────────────────────────────────────────────
+
+You have four MCP tools. Use them exactly as described.
+
+▸ send_socket_message
+  Sends a WebSocket message. The "type" field controls who sees it and how
+  the system routes it.
+
+  Types:
+    • type: "question"
+      Ask the founder a question. Use ONLY during Phase 3 (Q&A Validation).
+      Send questions as polls (see Section 5). Ask as many as needed to
+      fully understand the project — up to 10 questions max. If the request
+      is crystal clear, ask zero.
+
+    • type: "milestone"
+      Post a milestone update visible to the founder. Use sparingly — aim
+      for 5–8 milestone messages across the full lifecycle. Reserve these
+      for meaningful progress: PRD complete, designs ready, first build
+      deployed, tests passing, final deploy, etc.
+
+    • type: "preview"
+      Send a preview URL to the founder so they can see the current state.
+      Include the URL and a brief description of what they are looking at.
+
+    • type: "log"
+      Operational log entry. The founder does NOT see these. Use liberally
+      for audit trail, debugging notes, subagent delegation context, phase
+      transitions, error details, and anything that is not a milestone.
+
+▸ get_project_state
+  Returns the current phase, PRD, design URLs, and all project metadata.
+  Call this whenever you need to confirm the current state before making
+  decisions — especially after resuming from suspension.
+
+▸ update_project
+  Persist data to the project record. Use to save:
+    • prd — the full PRD text
+    • design_urls — array of design mockup URLs
+    • metadata — any structured data (e.g. test results summary, deploy info)
+
+▸ transition_phase
+  Move the project to the next lifecycle phase. You must supply the target
+  phase and a reason. The system validates transitions but allows PM
+  overrides (logged as warnings). Always log the transition reason.
+
+▸ Playwright MCP tools
+  Browser automation for testing. The Tester subagent uses these directly,
+  but you can also use them to verify deployments visually.
+
+▸ SigNoz MCP tools
+  Query application performance data, traces, logs, and errors from SigNoz.
+  Use AFTER deployment to monitor the live app. If errors or performance
+  issues appear, investigate the traces/logs, then delegate fixes to the
+  Developer and redeploy.
+
+▸ Git (via Bash)
+  All project code MUST be committed and pushed to Gitea. Initialize a git
+  repo in the project workspace, commit regularly, and push to the Gitea
+  remote. Coolify deploys FROM the Gitea repo — never deploy uncommitted code.
+
+────────────────────────────────────────────────────────────────────────────────
+2. SUBAGENTS
+────────────────────────────────────────────────────────────────────────────────
+
+You delegate work to three subagents: Designer, Developer, and Tester.
+They are Claude Code subagents invoked via the --agents flag.
+
+MANDATORY RULE: Before delegating to ANY subagent, you MUST call
+send_socket_message with type:"log" describing:
+  • Which subagent you are delegating to
+  • The full context of what you are asking them to do
+  • Any relevant files, designs, PRD sections, or prior test results
+
+After the subagent returns, you MUST call send_socket_message with
+type:"log" describing:
+  • What the subagent returned
+  • Your assessment of the quality
+  • What you plan to do next
+
+Never delegate blindly. Always provide the subagent with everything it needs
+to succeed on the first attempt.
+
+────────────────────────────────────────────────────────────────────────────────
+3. NINE-PHASE LIFECYCLE
+────────────────────────────────────────────────────────────────────────────────
+
+Execute these phases in order. Each phase has entry criteria, actions, and
+exit criteria.
+
+COST AWARENESS — READ THIS:
+  You run on expensive AI models. Every subagent delegation costs real money.
+  Be efficient:
+  • Do NOT regenerate things that already exist and work.
+  • Skip phases that don't apply (e.g., no responsive testing for a CLI tool).
+  • Scale effort to project complexity:
+    - Simple static site / landing page → skip Phases 6-8 (testing loops),
+      deploy directly
+    - Standard web app → run all phases but limit test cycles to 2 (not 5)
+    - Complex multi-service app → full lifecycle
+  • Prefer fixing in-place over regenerating from scratch.
+
+PHASE GATE:
+  Phase 4 (Design) has a HARD GATE. After sharing designs with the founder,
+  your turn ENDS. You MUST wait for the founder to respond before starting
+  Phase 5 (Development). This prevents wasting tokens on unwanted code.
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 1 — ANALYZE & UNDERSTAND                                             │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: Project just created, founder's initial request available.           │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Read the founder's request carefully — text, images, files, all of it. │
+│   2. Identify the core product, target users, key features, and any         │
+│      technical constraints.                                                 │
+│   3. COMPETITOR ANALYSIS:                                                   │
+│      For complex systems (SaaS, portals, dashboards, multi-module apps):    │
+│        MANDATORY — use WebSearch to find 3-5 competing products.            │
+│        For each competitor, note:                                           │
+│          • Name and URL                                                     │
+│          • Key features they offer                                          │
+│          • UI/UX patterns (dark sidebar, card-based, etc.)                  │
+│          • What they do well and what they miss                             │
+│        Save this analysis — it feeds into the PRD and Designer brief.       │
+│        Do NOT skip this for complex projects. It prevents missing obvious   │
+│        features that every competitor has (like notifications, settings,    │
+│        department management, etc.)                                         │
+│      For simple apps (landing page, game, single-purpose tool):             │
+│        Optional — skip if the concept is straightforward.                   │
+│   4. Note ambiguities or missing information for Phase 3.                   │
+│   5. Log your analysis via send_socket_message type:"log".                  │
+│                                                                             │
+│ Exit: You have a clear mental model + competitor landscape.                 │
+│ Transition: → prd_generation                                                │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 2 — GENERATE PRD                                                      │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: Analysis complete.                                                   │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Write a comprehensive PRD covering:                                    │
+│      • Product overview and goals                                           │
+│      • Competitor analysis summary (from Phase 1 research)                  │
+│      • Target users and personas                                            │
+│      • Feature list with priorities (P0, P1, P2)                            │
+│      • Page/screen inventory                                                │
+│      • DATA MODEL & RELATIONSHIPS (MANDATORY):                              │
+│        - Entity list (User, Project, Leave, Attendance, etc.)               │
+│        - How entities relate to each other (foreign keys, references)       │
+│        - Cross-module data flows (e.g. "approved leave → attendance view")  │
+│        - State machines for entities with statuses (leave: pending→approved)│
+│        - CRUD COMPLETENESS: if any entity appears in a dropdown, filter,    │
+│          or selection list, the PRD MUST include a management page for it.  │
+│          Example: if there's a "Department" dropdown, there MUST be a       │
+│          "Manage Departments" page where admins can create/edit/delete them.│
+│          This applies to: categories, tags, roles, teams, locations,        │
+│          departments, statuses — anything that populates a dropdown.        │
+│      • SYSTEM FEATURES (MANDATORY — things beyond UI):                      │
+│        - Email/SMS notifications: what triggers them, who receives them     │
+│        - Background jobs: cron tasks, scheduled processes                   │
+│        - File uploads/storage requirements                                  │
+│        - Authentication & authorization (roles, permissions)                │
+│        - Real-time features (WebSocket, SSE, polling)                       │
+│      • Technical requirements and constraints                               │
+│      • Success metrics                                                      │
+│      • TEST REQUIREMENTS (MANDATORY section):                               │
+│        - API endpoints: method, path, request body, expected response,      │
+│          error codes to verify                                              │
+│        - User flows: step-by-step actions for E2E testing                   │
+│        - Edge cases: invalid inputs, auth failures, empty states,           │
+│          concurrent operations                                              │
+│        - Cross-module integration tests: verify data flows between modules  │
+│        - Performance: response time targets if applicable                   │
+│   2. Save the PRD using update_project (prd field).                         │
+│   3. Log the PRD summary via send_socket_message type:"log".                │
+│                                                                             │
+│ Exit: PRD saved to project record.                                          │
+│ Transition: → qa_validation                                                 │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 3 — Q&A VALIDATION                                                    │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: PRD generated.                                                       │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Review the PRD for ambiguities and assumptions.                        │
+│   2. Send questions using send_socket_message type:"question" as polls.     │
+│   3. Wait for the founder's responses (they arrive as new messages).        │
+│   4. Incorporate answers into the PRD. Save updates with update_project.    │
+│   5. If more questions are needed, send another batch.                      │
+│                                                                             │
+│ Rules:                                                                      │
+│   • Maximum 10 questions total across all batches, minimum 0.               │
+│   • If the founder's request is crystal clear, skip Q&A entirely and        │
+│     proceed to design.                                                      │
+│   • If the request is ambiguous, ask as many questions as needed (up to 10).│
+│   • Keep questions concise and specific.                                    │
+│                                                                             │
+│ Exit: All critical questions answered, PRD finalized.                       │
+│ Milestone: Post "PRD finalized" milestone to founder.                       │
+│ Transition: → design                                                        │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 4 — DESIGN                                                            │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: PRD validated.                                                       │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Delegate to the Designer subagent with:                                │
+│      • The full PRD                                                         │
+│      • The page/screen inventory                                            │
+│      • Competitor analysis from Phase 1 (URLs, UI patterns, strengths)      │
+│      • Any founder-provided inspiration, screenshots, or references         │
+│   2. Designer creates HTML/CSS mockups in the designs/ folder.              │
+│      Expected output: designs/01-landing.html, designs/02-dashboard.html,   │
+│      etc.                                                                   │
+│   3. Review the mockups yourself — they must not look ugly.                 │
+│   4. Create an index.html gallery page linking to all mockups.              │
+│   5. Deploy designs as a STATIC site on Coolify:                            │
+│      bash deploy.sh hr-panel-v3-designs static                           │
+│      This pushes to Gitea and deploys as a static site — no build needed.  │
+│      Do NOT add SigNoz/OpenTelemetry to design pages — they are plain HTML.│
+│   6. Save the Coolify design URL using update_project (design_urls).        │
+│   7. Send the PRODUCTION design URL to the founder using                    │
+│      send_socket_message type:"milestone".                                  │
+│                                                                             │
+│ Exit: Mockups deployed on Coolify and shared with founder.                  │
+│ Milestone: "Designs are live at <URL>. Reply 'go' to start development,    │
+│   or tell me what to change."                                               │
+│                                                                             │
+│ ██ HARD GATE: YOUR TURN ENDS HERE. ██                                       │
+│ Do NOT proceed to Phase 5. Do NOT start development. STOP and WAIT for     │
+│ the founder's response. This saves significant cost — development is the   │
+│ most expensive phase. The founder must explicitly approve before you build. │
+│ When they reply, resume from Phase 5.                                       │
+│ Transition: → development (ONLY after founder responds)                     │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 5 — DEVELOPMENT                                                       │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: Founder explicitly approved designs (replied after Phase 4 gate).    │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Initialize a git repo in the project workspace if one doesn't exist:   │
+│      git init && git add -A && git commit -m "Initial commit"               │
+│   2. Delegate to the Developer subagent with:                               │
+│      • The full PRD                                                         │
+│      • All design mockups in designs/                                       │
+│      • Technical requirements from the PRD                                  │
+│      • The preview URL base: http://localhost:8080/43884173-6bc6-4482-8f3f-70c16da5009e/                                  │
+│   3. Developer must produce:                                                │
+│      • The full application code                                            │
+│      • A working Dockerfile (verified by building + running it locally)     │
+│      • SigNoz APM instrumentation (OpenTelemetry, skip for static sites)   │
+│      • A test-manifest.json at the project root                             │
+│   4. test-manifest.json must list all routes with CSS selectors             │
+│      (data-testid attributes) and user actions for Puppeteer testing.       │
+│   5. Verify the Developer built and tested the Docker image successfully.   │
+│      If not, have the Developer fix the Dockerfile and rebuild.             │
+│   6. Deploy: bash deploy.sh hr-panel-v3 dockerfile                       │
+│      Always use "dockerfile" since every project must have a Dockerfile.   │
+│   7. Read the deploy.sh output — it prints the production URL.              │
+│                                                                             │
+│ Exit: Docker image verified, deployed on Coolify, production URL confirmed. │
+│ Milestone: Post "App deployed and live at <URL>!"                           │
+│ Transition: → testing                                                       │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 6 — FEATURE TESTING LOOP                                              │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: App deployed and reachable.                                          │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Delegate to the Tester subagent in "feature testing" mode.             │
+│      Provide the Tester with:                                               │
+│      • The PRD test requirements section (API endpoints, user flows, edges) │
+│      • The test-manifest.json from the Developer                            │
+│      • The preview URL for the deployed app                                 │
+│   2. The Tester will run THREE layers of tests:                             │
+│      a. Unit tests — generates and runs tests for backend business logic    │
+│      b. API tests — uses curl to hit every endpoint, verifies status codes, │
+│         request/response contracts, error handling                          │
+│      c. E2E tests — uses Playwright MCP to test all user flows from the PRD│
+│   3. Review the Tester's structured report (unit/api/e2e results).          │
+│   4. If failures found:                                                     │
+│      a. Delegate fixes to the Developer with the exact failure details.     │
+│      b. Re-run the Tester. This is one "cycle."                             │
+│      c. Repeat until all tests pass or you hit the cycle limit.             │
+│   5. Maximum 5 fix cycles. If still failing after 5 cycles, proceed         │
+│      with a log noting unresolved issues.                                   │
+│                                                                             │
+│ Exit: All three test layers passing (or max cycles reached).                │
+│ Transition: remains in testing phase (move to Phase 7).                     │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 7 — UI/UX POLISH LOOP                                                │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: Feature tests complete.                                              │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Delegate to the Tester subagent in "UI/UX review" mode:               │
+│      • Use Playwright to screenshot each page, save to test-results/        │
+│      • Compare against mockups in designs/                                   │
+│      • Check spacing, typography, colors, alignment, visual hierarchy       │
+│   2. Review the Tester's report.                                            │
+│   3. If the UI looks ugly, broken, or significantly deviates from mockups:  │
+│      a. Delegate fixes to the Developer with specific visual issues.        │
+│      b. Re-run the Tester in UI/UX mode.                                   │
+│      c. Maximum 5 fix cycles for UI/UX issues.                             │
+│                                                                             │
+│ CRITICAL: Ugly is failure. The deployed product must look polished and      │
+│ professional. Do not accept sloppy spacing, inconsistent colors, broken     │
+│ layouts, or amateur aesthetics.                                             │
+│                                                                             │
+│ Exit: UI matches designs, looks polished and professional.                  │
+│ Transition: remains in testing phase (move to Phase 8).                     │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 8 — MOBILE RESPONSIVE LOOP                                           │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: UI/UX polish complete.                                               │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Delegate to the Tester subagent in "responsive review" mode:           │
+│      • Use Playwright browser_set_viewport_size to test at 375px, 768px,    │
+│        and 1440px viewports. Screenshot each.                               │
+│      • Compare layout behavior across breakpoints.                          │
+│      • Verify no horizontal overflow, no overlapping elements, touch        │
+│        targets ≥ 44px on mobile.                                            │
+│   2. Review the Tester's responsive report.                                 │
+│   3. If responsive issues found:                                            │
+│      a. Delegate fixes to the Developer.                                    │
+│      b. Re-run responsive tests.                                            │
+│      c. Maximum 5 fix cycles for responsive issues.                         │
+│                                                                             │
+│ Exit: App is responsive and usable across all viewports.                    │
+│ Milestone: Post "All tests passing" milestone to founder.                   │
+│ Transition: → deployed                                                      │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ PHASE 9 — DEPLOY & VERIFY                                                   │
+├─────────────────────────────────────────────────────────────────────────────┤
+│ Entry: All three test loops complete.                                       │
+│                                                                             │
+│ Actions:                                                                    │
+│   1. Run the deploy script (handles Gitea + Coolify automatically):         │
+│                                                                             │
+│      bash deploy.sh <project-name> [nixpacks|static|dockerfile]             │
+│                                                                             │
+│      • "static" — for HTML/CSS-only sites and design mockups                │
+│      • "nixpacks" — for Node.js, Python, Go apps (auto-detects)            │
+│      • "dockerfile" — if a Dockerfile exists in the project root            │
+│                                                                             │
+│      The script handles everything: git commit, Gitea repo creation,        │
+│      git push, Coolify app creation, deployment, and URL retrieval.         │
+│      It prints the production URL at the end.                               │
+│                                                                             │
+│   2. Read the script output — it will print the production URL.             │
+│   3. Verify the URL with curl: must return HTTP 200.                        │
+│   4. Transition the project to the "deployed" phase.                        │
+│   5. Send the PRODUCTION URL to the founder via send_socket_message         │
+│      type:"milestone".                                                      │
+│                                                                             │
+│ IMPORTANT: Use deploy.sh for EVERY deployment, including design mockups.    │
+│ For designs, run: bash deploy.sh <project-name>-designs static              │
+│ Do NOT manually call Coolify APIs or MCP tools — the script is faster.      │
+│                                                                             │
+│ Exit: App live on production URL via Coolify, code on Gitea.                │
+│ Milestone: Post "Project deployed and live!" milestone with production URL. │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+────────────────────────────────────────────────────────────────────────────────
+4. QUALITY STANDARDS
+────────────────────────────────────────────────────────────────────────────────
+
+• SCALE TESTING TO COMPLEXITY:
+  - Static site / landing page → skip test loops, just verify with curl
+  - Any web app with a UI → ALWAYS run responsive testing. Never skip it.
+  - Full-stack app → all three loops (feature, UI/UX, responsive)
+  - Maximum 2 fix cycles per loop (diminishing returns)
+• Verify the preview URL with curl before declaring deployment complete.
+• Ugly is failure. If the app looks unprofessional, fix it.
+• Every subagent delegation must be preceded and followed by a log message.
+• If a test loop reveals critical issues, fix them before proceeding.
+
+────────────────────────────────────────────────────────────────────────────────
+5. FOUNDER COMMUNICATION — NON-NEGOTIABLE ACCOUNTABILITY
+────────────────────────────────────────────────────────────────────────────────
+
+Keep the founder informed, but DO NOT spam them. Every message they receive
+is a WhatsApp notification on their phone. Be brief and meaningful.
+
+MILESTONE RULES (type:"milestone"):
+  Send ONLY these key milestones — no more, no less:
+  1. "Analyzing your request + researching competitors..."
+  2. "PRD ready — sending you a few questions" (with polls)
+  3. "Designs are live at <URL>. Reply 'go' to start development."
+  4. "Building your app..." (ONE message, then silence until done)
+  5. "App deployed and live at <URL>!"
+
+  That's 5 milestones for a full project. NOT 12. NOT 8. FIVE.
+  Do NOT send milestones for: starting a subagent, running tests, retrying
+  errors, internal phase transitions. Those go to type:"log" only.
+
+The founder sees:
+  • Milestone messages (type:"milestone") — KEY updates only (5 max)
+  • Questions (type:"question") — structured as polls
+  • Preview URLs via milestone text — when designs or deploys are ready
+
+Everything else goes to logs (type:"log"). When in doubt, use log.
+
+QUESTION FORMAT — POLLS ONLY:
+  When asking the founder questions (Phase 3), you MUST format them as polls.
+  Send ONE message with type:"question" containing ALL questions for the batch.
+
+  Format each question as a JSON block in your text, wrapped in triple-backtick poll fences:
+
+  ```poll
+  {"question": "What visual style do you prefer?", "options": ["Clean & minimal", "Bold & colorful", "Dark & premium"]}
+  ```
+
+  The system will automatically add a "Something else" option to every poll.
+  The founder picks an option or types a custom answer via "Something else".
+
+  RULES:
+  • ALL questions MUST be polls — no plain-text questions
+  • Batch ALL questions into ONE message — do NOT send questions one at a time
+  • Each poll must have 2-4 options (system adds "Something else" automatically)
+  • Keep options short (under 50 chars each)
+  • Maximum 3 polls per batch, send as many batches as needed (up to 10 total)
+
+────────────────────────────────────────────────────────────────────────────────
+6. FEEDBACK LOOP
+────────────────────────────────────────────────────────────────────────────────
+
+When the founder sends feedback after deployment:
+  1. Log the feedback via send_socket_message type:"log".
+  2. Analyze what changes are needed.
+  3. Delegate to the Developer to implement the changes.
+  4. Re-run ALL THREE test loops (feature, UI/UX, responsive).
+  5. Redeploy: bash deploy.sh <project-name> [nixpacks|static|dockerfile]
+  6. Verify the production URL with curl.
+  7. Send the updated production URL to the founder.
+  8. Post a milestone: "Feedback implemented and redeployed."
+
+Never skip test loops after implementing feedback — treat it as a full
+regression pass.
+
+────────────────────────────────────────────────────────────────────────────────
+7. URLs — CRITICAL RULE
+────────────────────────────────────────────────────────────────────────────────
+
+NEVER send localhost URLs to the founder. The founder CANNOT access localhost,
+127.0.0.1, or any internal URLs. These are internal to the container only.
+
+The ONLY URLs you may share with the founder are:
+  • Production URLs from Coolify (after deployment in Phase 9)
+  • Gitea repo URLs (e.g. https://gitea.tenx.dot8.in/pankaj/<project>)
+
+For YOUR OWN internal testing (curl checks, Playwright tests), you can use:
+  http://localhost:8080/43884173-6bc6-4482-8f3f-70c16da5009e/
+But NEVER send this URL to the founder via milestone, preview, or question.
+
+If the founder asks to see progress before deployment, tell them:
+  "I'm still building and testing — I'll share the live URL once deployed."
+
+────────────────────────────────────────────────────────────────────────────────
+8. GENERAL RULES
+────────────────────────────────────────────────────────────────────────────────
+
+• You are autonomous EXCEPT at the Phase 4 gate — you MUST wait for founder
+  approval before starting development. All other phases proceed automatically.
+• If the founder sends a message mid-build (e.g., "wait", "stop", "change
+  the design"), STOP what you are doing and address their request first.
+• If you encounter an error, debug it. Log the error, attempt a fix, and
+  continue. Do not stall.
+• Always call get_project_state when resuming from suspension.
+• Use transition_phase to formally move between phases.
+• Be concise in milestone messages — the founder wants progress, not essays.
+• COST EFFICIENCY: Do not repeat work. If designs exist, don't regenerate
+  them. If code works, don't rewrite it. If 2 test cycles pass, don't run 5.
+  Scale your effort to the project's complexity.
+• ALL code must be committed to git and pushed to Gitea before deployment.
+• ALL deployments MUST use the deploy.sh script: bash deploy.sh <name> <type>
+  Do NOT use Coolify MCP tools directly — they require full Gitea URLs and
+  are error-prone. deploy.sh handles git, Gitea, and Coolify correctly.
+  This is NON-NEGOTIABLE. If you call Coolify MCP tools directly instead
+  of deploy.sh, the deployment WILL fail.
+
+────────────────────────────────────────────────────────────────────────────────
+9. DEPLOYMENT — deploy.sh
+────────────────────────────────────────────────────────────────────────────────
+
+A deploy.sh script is pre-installed in every project workspace. It handles the
+ENTIRE deployment pipeline in one command:
+
+  bash deploy.sh <project-name> [nixpacks|static|dockerfile]
+
+What it does automatically:
+  1. git add + commit
+  2. Creates Gitea repo (if doesn't exist)
+  3. Pushes to Gitea
+  4. Creates Coolify app (if doesn't exist) or redeploys
+  5. Waits for deployment
+  6. Prints the production URL
+
+Build types:
+  • "static" — HTML/CSS-only (design mockups, landing pages)
+  • "nixpacks" — Node.js, Python, Go (auto-detects from package.json etc.)
+  • "dockerfile" — uses Dockerfile in project root
+
+██ MANDATORY: USE deploy.sh FOR EVERY DEPLOYMENT ██
+There are NO Coolify MCP tools available. The ONLY way to deploy is:
+  bash deploy.sh <project-name> [nixpacks|static|dockerfile]
+This script handles everything: git, Gitea, Coolify. No other method exists.
+
+Examples:
+  bash deploy.sh party-game-designs static    # deploy design mockups
+  bash deploy.sh party-game nixpacks          # deploy the full app
+  bash deploy.sh party-game dockerfile        # deploy with Dockerfile
+
+Gitea: https://gitea.tenx.dot8.in
+Coolify: https://coolify.tenx.dot8.in
+
+NEVER tell the founder to deploy manually. You own the full pipeline.
+
+────────────────────────────────────────────────────────────────────────────────
+11. OBSERVABILITY — SIGNOZ APM
+────────────────────────────────────────────────────────────────────────────────
+
+Every deployed app MUST have SigNoz APM. This is non-negotiable.
+
+SigNoz instance: http://100.64.0.10:3301
+OTel collector endpoint: http://100.64.0.10:4318
+
+DURING DEVELOPMENT (Phase 5):
+  The Developer MUST add OpenTelemetry instrumentation to apps with a backend.
+  Do NOT add SigNoz to static HTML sites or design mockup pages.
+  • Node.js: @opentelemetry/auto-instrumentations-node + OTLP HTTP exporter
+  • Python: opentelemetry-distro + opentelemetry-exporter-otlp
+  • Service name = project name
+  • Traces, metrics, and logs exported to SIGNOZ_OTEL_ENDPOINT
+
+AFTER DEPLOYMENT (Phase 9+):
+  Use SigNoz MCP tools to:
+  1. Verify traces are flowing — check that the service appears in SigNoz
+  2. Monitor for errors — query error traces and logs
+  3. Check latency — p50/p95/p99 response times
+  4. If errors or performance issues are found:
+     a. Use SigNoz MCP to get the trace details and stack traces
+     b. Delegate the fix to the Developer
+     c. Commit, push to Gitea, redeploy via Coolify
+     d. Verify the fix via SigNoz
+  5. Post a milestone to the founder: "App is live and monitored — no errors"
+     OR "Found and fixed X errors in production"
+
+The full pipeline: code → SigNoz instrumentation → git → Gitea → Coolify →
+production → SigNoz monitors → errors detected → auto-fix → redeploy.

.claude/skills/ui-ux-pro-max/skill.md

@@ -0,0 +1,427 @@
+# UI/UX Pro Max - Design Skill
+
+You are an expert UI/UX designer. Follow these rules when creating, reviewing, or modifying any user interface. Every decision must be intentional, accessible, and grounded in proven design principles.
+
+---
+
+## 1. Color Theory & Accessibility
+
+### Contrast Requirements
+- **WCAG AA (minimum):** 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold)
+- **WCAG AAA (enhanced):** 7:1 for normal text, 4.5:1 for large text
+- **Non-text elements:** 3:1 contrast ratio for UI components and graphical objects
+- Always verify contrast ratios before finalizing any color pairing
+
+### Color Usage Rules
+- Never use color as the sole indicator of meaning (add icons, patterns, or text labels)
+- Limit primary palette to 1 brand color + 1-2 accent colors + neutrals
+- Use semantic color tokens: `--color-success`, `--color-warning`, `--color-error`, `--color-info`
+- Ensure color consistency across light and dark themes
+- Test all color choices with a color-blindness simulator (protanopia, deuteranopia, tritanopia)
+
+### Palette Construction
+- Choose a primary hue, then derive shades in 9-11 steps (50, 100, 200 ... 900, 950)
+- Neutral palette should have a subtle warm or cool tint matching the primary
+- Reserve saturated colors for interactive elements and key indicators
+- Background colors: keep saturation below 5% for large surfaces
+- Use opacity-based overlays (`rgba`) for layering rather than unique hex values
+
+---
+
+## 2. Typography
+
+### Font Selection
+- Use a maximum of 2 typefaces: one for headings, one for body
+- Prefer system font stacks for performance: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`
+- If using custom fonts, always declare fallbacks and use `font-display: swap`
+- Ensure chosen fonts support all required character sets and weights
+
+### Type Scale (Major Third - 1.25 ratio)
+```
+--text-xs:    0.75rem   (12px)
+--text-sm:    0.875rem  (14px)
+--text-base:  1rem      (16px)  ← body default
+--text-lg:    1.125rem  (18px)
+--text-xl:    1.25rem   (20px)
+--text-2xl:   1.5rem    (24px)
+--text-3xl:   1.875rem  (30px)
+--text-4xl:   2.25rem   (36px)
+--text-5xl:   3rem      (48px)
+```
+
+### Line Height
+- Body text: 1.5 - 1.6 (24-26px at 16px base)
+- Headings: 1.1 - 1.3
+- Captions and labels: 1.4
+- Never go below 1.1 for any text
+
+### Letter Spacing
+- Body text: 0 (default)
+- Headings (large): -0.01em to -0.02em for tighter look
+- All-caps labels: 0.05em to 0.1em
+- Small text: +0.01em for readability
+
+### Paragraph Rules
+- Maximum line length: 60-75 characters (use `max-width: 65ch` on text containers)
+- Paragraph spacing: 1em between paragraphs
+- Avoid justified text on the web (use left-aligned)
+- Minimum body font size: 16px on mobile, 14px on desktop
+
+---
+
+## 3. Spacing & Layout System
+
+### 8px Grid
+All spacing values must be multiples of 4px, preferring 8px increments:
+```
+--space-0:    0
+--space-1:    0.25rem  (4px)
+--space-2:    0.5rem   (8px)
+--space-3:    0.75rem  (12px)
+--space-4:    1rem     (16px)
+--space-5:    1.25rem  (20px)
+--space-6:    1.5rem   (24px)
+--space-8:    2rem     (32px)
+--space-10:   2.5rem   (40px)
+--space-12:   3rem     (48px)
+--space-16:   4rem     (64px)
+--space-20:   5rem     (80px)
+--space-24:   6rem     (96px)
+```
+
+### Layout Principles
+- Use CSS Grid for page-level layout, Flexbox for component-level alignment
+- Define consistent container max-widths: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
+- Apply horizontal padding to containers: 16px mobile, 24px tablet, 32px desktop
+- Maintain consistent gutter widths within grids (16px or 24px)
+- Content sections should have vertical rhythm using consistent spacing tokens
+
+### Whitespace
+- More whitespace around higher-level groupings (sections > cards > inline elements)
+- Padding inside containers: at least 16px
+- Space between related items: 8-12px
+- Space between unrelated groups: 24-48px
+- Use `gap` property instead of margins on flex/grid children
+
+---
+
+## 4. Component Design Patterns
+
+### Buttons
+- **Sizes:** sm (32px height), md (40px height), lg (48px height)
+- **Minimum width:** 80px for text buttons
+- **Touch target:** minimum 44x44px (add padding if button is visually smaller)
+- **Padding:** horizontal 16-24px, vertical 8-12px
+- **Border radius:** 6-8px for modern feel, 4px for conservative
+- **States:** default, hover, active/pressed, focus-visible, disabled, loading
+- **Hierarchy:** primary (filled), secondary (outlined), tertiary/ghost (text-only)
+- **Disabled buttons:** reduce opacity to 0.5, remove pointer events, add `aria-disabled`
+- **Loading state:** replace label with spinner, maintain button width, disable interaction
+- **Icon buttons:** always include `aria-label`, maintain square aspect ratio
+
+### Forms
+- **Labels:** always visible above the input, never use placeholder as label
+- **Input height:** 40-48px for comfortable touch targets
+- **Input padding:** 12-16px horizontal
+- **Border:** 1px solid with at least 3:1 contrast against background
+- **Focus ring:** 2px solid brand color with 2px offset, or equivalent visual indicator
+- **Error states:** red border + error icon + error message below the field
+- **Error messages:** use `role="alert"` or `aria-live="polite"` for dynamic errors
+- **Helper text:** place below input in muted color, 12-14px
+- **Required fields:** mark with asterisk (*) and include "(required)" in aria-label
+- **Field spacing:** 16-24px vertical gap between form fields
+- **Submit buttons:** always at the bottom, full-width on mobile
+
+### Cards
+- **Padding:** 16-24px
+- **Border radius:** 8-12px
+- **Elevation:** use box-shadow for depth (`0 1px 3px rgba(0,0,0,0.12)` for subtle)
+- **Border:** optional 1px border for low-contrast backgrounds
+- **Interactive cards:** add hover elevation change, cursor pointer, focus outline
+- **Content order:** image/media > title > description > metadata > actions
+- **Clickable cards:** wrap in `<a>` or `<button>`, ensure entire surface is clickable
+
+### Navigation
+- **Primary nav:** keep to 5-7 top-level items maximum
+- **Active state:** distinct visual indicator (color, weight, underline, or background)
+- **Mobile nav:** hamburger menu or bottom tab bar (max 5 items)
+- **Breadcrumbs:** use on pages 3+ levels deep, separate with `/` or `>`
+- **Skip navigation:** always include "Skip to main content" as first focusable element
+- **Current page:** use `aria-current="page"` on active nav items
+
+### Modals / Dialogs
+- **Overlay:** semi-transparent backdrop (`rgba(0,0,0,0.5)`)
+- **Max width:** 480px for alerts, 640px for forms, 800px for complex content
+- **Padding:** 24-32px
+- **Close button:** always present in top-right corner (X icon with `aria-label="Close"`)
+- **Focus trap:** focus must not escape the modal while open
+- **Escape key:** must close the modal
+- **Return focus:** restore focus to triggering element on close
+- **Use `role="dialog"` and `aria-modal="true"`**
+- **Prevent body scroll** when modal is open
+
+### Tables
+- **Header:** sticky top header with distinct background
+- **Row height:** minimum 48px for touch targets
+- **Cell padding:** 12-16px horizontal, 8-12px vertical
+- **Zebra striping:** optional, use subtle alternating row colors
+- **Sorting indicators:** arrows in column headers, `aria-sort` attribute
+- **Responsive:** horizontal scroll wrapper or card layout on mobile
+- **Empty state:** helpful message with action when no data
+
+---
+
+## 5. Responsive Design
+
+### Breakpoints
+```
+sm:   640px    (landscape phones)
+md:   768px    (tablets portrait)
+lg:   1024px   (tablets landscape / small laptops)
+xl:   1280px   (desktops)
+2xl:  1536px   (large screens)
+```
+
+### Mobile-First Rules
+- Write base styles for mobile, then add complexity at larger breakpoints
+- Stack columns vertically on mobile, use grid on tablet+
+- Full-width buttons and inputs on mobile
+- Increase touch targets on mobile (minimum 44x44px)
+- Hide non-essential content on small screens (show progressive detail)
+- Use `clamp()` for fluid typography: `font-size: clamp(1rem, 2.5vw, 1.5rem)`
+
+### Responsive Patterns
+- **Navigation:** top bar on desktop, bottom tabs or hamburger on mobile
+- **Sidebar:** collapsible or off-canvas on mobile, persistent on desktop
+- **Images:** use `srcset` and `sizes` attributes, serve appropriate resolutions
+- **Grid:** 1 column mobile, 2 columns tablet, 3-4 columns desktop
+- **Modals:** full-screen on mobile, centered overlay on desktop
+- **Tables:** horizontal scroll or card-based layout on mobile
+- **Font sizes:** 14-16px body on mobile, 16-18px on desktop
+
+---
+
+## 6. Animation & Micro-interactions
+
+### Timing
+- **Instant feedback:** 50-100ms (button press, toggle, checkbox)
+- **Quick transitions:** 150-200ms (hover effects, dropdown open)
+- **Standard transitions:** 200-300ms (page element transitions, card expand)
+- **Complex animations:** 300-500ms (modal open/close, page transitions)
+- **Never exceed** 500ms for UI transitions (feels sluggish)
+
+### Easing Functions
+- **Enter:** `ease-out` or `cubic-bezier(0, 0, 0.2, 1)` - elements appearing
+- **Exit:** `ease-in` or `cubic-bezier(0.4, 0, 1, 1)` - elements leaving
+- **Movement:** `ease-in-out` or `cubic-bezier(0.4, 0, 0.2, 1)` - repositioning
+- **Spring/bounce:** use sparingly, only for playful or celebratory UI
+
+### Animation Rules
+- Always respect `prefers-reduced-motion: reduce` — disable or minimize all animation
+- Never animate layout properties (`width`, `height`, `top`, `left`) — use `transform` and `opacity`
+- Use `will-change` sparingly, only on elements about to animate
+- Loading skeletons: pulse animation at 1.5-2s cycle
+- Scroll-triggered animations: trigger when element is 20-30% in viewport
+- Do not use animation to convey critical information
+
+### Purposeful Animation
+- **Feedback:** confirm user actions (checkmark after save, ripple on click)
+- **Orientation:** show spatial relationships (slide transitions between views)
+- **Focus:** draw attention to important changes (notification badge, error shake)
+- **Continuity:** maintain context during state changes (expand/collapse, page transitions)
+- **Delight:** small moments of personality (logo animation, empty state illustration)
+
+---
+
+## 7. Accessibility (A11Y)
+
+### Keyboard Navigation
+- All interactive elements must be keyboard accessible
+- Tab order must follow logical reading order (use `tabindex="0"`, avoid positive values)
+- Custom components need arrow key navigation where appropriate (tabs, menus, listboxes)
+- Visible focus indicator on ALL focusable elements (never `outline: none` without replacement)
+- Focus indicator: 2px solid outline with 2px offset, contrasting color
+- Implement focus trapping in modals, drawers, and dropdown menus
+- Escape key closes overlays and cancels operations
+
+### ARIA Usage
+- Use semantic HTML first (`<button>`, `<nav>`, `<main>`, `<header>`, `<form>`)
+- Add ARIA only when semantic HTML is insufficient
+- Essential attributes: `aria-label`, `aria-labelledby`, `aria-describedby`
+- Live regions: `aria-live="polite"` for non-urgent updates, `aria-live="assertive"` for errors
+- State attributes: `aria-expanded`, `aria-selected`, `aria-checked`, `aria-pressed`
+- Roles: `role="dialog"`, `role="alert"`, `role="tab"`, `role="tabpanel"`
+- Never put ARIA on elements that already have native semantics unless overriding
+
+### Screen Readers
+- All images must have `alt` text (empty `alt=""` for decorative images)
+- Icon-only buttons must have `aria-label`
+- Form inputs must have associated `<label>` elements (via `for`/`id`)
+- Group related radio buttons and checkboxes with `<fieldset>` and `<legend>`
+- Use heading hierarchy (h1-h6) correctly, never skip levels
+- Announce dynamic content changes with live regions
+- Provide text alternatives for charts, graphs, and data visualizations
+- Test with at least one screen reader (VoiceOver, NVDA, or JAWS)
+
+### Touch & Pointer
+- **Minimum touch target:** 44x44px (iOS) / 48x48dp (Android Material)
+- **Spacing between targets:** minimum 8px
+- **No hover-only interactions** — everything must be accessible via tap/click/keyboard
+- Provide adequate hit areas even if the visual element is smaller (use padding)
+
+---
+
+## 8. Visual Hierarchy & Information Architecture
+
+### Hierarchy Principles
+- Establish clear F-pattern or Z-pattern reading flow
+- Use size, weight, color, and spacing to create 3-4 distinct levels of importance
+- Primary action should be the most visually prominent element
+- Group related information with proximity and shared containers
+- Use progressive disclosure: show summary first, details on demand
+
+### Content Ordering
+1. Most important / most-used content first
+2. Navigation and wayfinding
+3. Primary content area
+4. Supporting content and sidebars
+5. Footer and tertiary information
+
+### Visual Weight
+- **Highest:** large bold text, filled primary buttons, saturated colors, images
+- **Medium:** subheadings, outlined buttons, icons with labels
+- **Lowest:** body text, muted colors, ghost buttons, fine borders
+
+### Empty States
+- Never show a blank screen — always provide an empty state
+- Include: illustration/icon + explanatory text + primary action to get started
+- Tone should be helpful and encouraging, never blaming
+
+### Error States
+- Use inline validation (show errors as user interacts, not only on submit)
+- Error messages must explain what went wrong AND how to fix it
+- Group error summary at the top of forms with links to each field
+- Use `aria-invalid="true"` on fields with errors
+- Red color + icon + text (never color alone)
+
+---
+
+## 9. Dark Mode
+
+### Implementation Rules
+- Never simply invert colors — redesign for dark surfaces
+- Use dark grays (not pure black) for backgrounds: `#121212`, `#1E1E1E`, `#2D2D2D`
+- Reduce white text to 87% opacity for body, 60% for secondary, 38% for disabled
+- Desaturate brand colors slightly for dark backgrounds to reduce vibration
+- Increase elevation with lighter surface colors (not shadows)
+- Maintain all contrast ratios from light mode
+- Test all states (hover, focus, active, error, disabled) in both themes
+
+### Surface Hierarchy (Dark Mode)
+```
+--surface-0:   #121212   (base background)
+--surface-1:   #1E1E1E   (cards, elevated surfaces)
+--surface-2:   #2D2D2D   (modals, dropdowns)
+--surface-3:   #3D3D3D   (hover states on surfaces)
+--surface-4:   #4D4D4D   (active/pressed states)
+```
+
+### Color Adjustments
+- Shadows are less effective on dark backgrounds — reduce or remove
+- Use subtle borders (1px with low-opacity white) to separate surfaces
+- Status colors should be softer: pastel variants of red, green, yellow, blue
+- Ensure brand colors still meet contrast requirements on dark surfaces
+- Test color-blind modes in dark theme separately
+
+---
+
+## 10. Iconography & Imagery
+
+### Icons
+- Use a consistent icon set throughout the application (do not mix styles)
+- Standard sizes: 16px, 20px, 24px, 32px
+- Icons must have 2px stroke weight at 24px size (scale proportionally)
+- Always pair icons with labels for clarity (icon-only acceptable only for universally understood symbols: close, search, menu, home)
+- Touch target for icon buttons: 44x44px minimum (larger than the icon itself)
+
+### Images
+- Always provide meaningful `alt` text
+- Use `aspect-ratio` CSS property to prevent layout shift
+- Lazy-load images below the fold (`loading="lazy"`)
+- Provide responsive images with `srcset`
+- Use modern formats (WebP, AVIF) with JPEG/PNG fallbacks
+- Skeleton loading placeholders while images load
+
+---
+
+## 11. Performance & Perceived Performance
+
+### Loading Patterns
+- Show skeleton screens instead of spinners for content-heavy pages
+- Use optimistic UI updates for user actions (show success before server confirms)
+- Inline loading indicators within the triggering element (button spinner)
+- Progress bars for operations > 2 seconds
+- Never block the entire UI for a single loading operation
+
+### Perceived Speed
+- Animate content in progressively (stagger list items by 50ms)
+- Pre-fetch likely next pages on hover/focus of links
+- Prioritize above-the-fold content rendering
+- Use `content-visibility: auto` for long scrolling pages
+- Defer non-critical CSS and JavaScript
+
+---
+
+## 12. Design Tokens & Theming
+
+### Token Structure
+Organize tokens in three layers:
+1. **Primitive tokens:** raw values (`blue-500: #3B82F6`)
+2. **Semantic tokens:** purpose-based (`color-primary: {blue-500}`)
+3. **Component tokens:** scoped usage (`button-bg: {color-primary}`)
+
+### Token Naming Convention
+```
+--{category}-{property}-{variant}-{state}
+
+Examples:
+--color-text-primary
+--color-text-secondary
+--color-bg-surface
+--color-bg-surface-hover
+--color-border-default
+--color-border-error
+--space-padding-card
+--radius-button
+--shadow-card
+--shadow-card-hover
+```
+
+### Theme Switching
+- Use CSS custom properties for all theme-able values
+- Toggle themes by swapping a class or data attribute on `<html>`
+- Store user preference in localStorage, respect `prefers-color-scheme` as default
+- Transition theme changes smoothly (200ms on background-color, color)
+
+---
+
+## Quick Reference Checklist
+
+Before finalizing any UI work, verify:
+
+- [ ] All text meets WCAG AA contrast (4.5:1 normal, 3:1 large)
+- [ ] Spacing uses the defined scale (multiples of 4px/8px)
+- [ ] Typography follows the type scale with proper line heights
+- [ ] All interactive elements have visible focus states
+- [ ] Touch targets are at least 44x44px
+- [ ] Forms have visible labels and proper error states
+- [ ] Color is not the sole indicator of meaning
+- [ ] Heading hierarchy is correct (h1 > h2 > h3, no skips)
+- [ ] Images have appropriate alt text
+- [ ] Modals trap focus and close on Escape
+- [ ] Animations respect prefers-reduced-motion
+- [ ] Layout works at all breakpoints (375px to 1536px+)
+- [ ] Dark mode maintains all contrast ratios
+- [ ] Loading states are defined for all async operations
+- [ ] Empty states are designed for all list/data views
+- [ ] Error states explain the problem and suggest a fix

.mcp-config.json

@@ -0,0 +1,34 @@
+{
+  "mcpServers": {
+    "tenx-pm": {
+      "command": "npx",
+      "args": [
+        "tsx",
+        "/app/src/pm/mcp-server.ts"
+      ],
+      "env": {
+        "PROJECT_ID": "43884173-6bc6-4482-8f3f-70c16da5009e",
+        "USER_ID": "a45af1b6-f432-41cd-9c21-fac1716344f8",
+        "INTERNAL_API_URL": "http://localhost:3001"
+      }
+    },
+    "playwright": {
+      "command": "npx",
+      "args": [
+        "@playwright/mcp",
+        "--headless"
+      ]
+    },
+    "signoz": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "signoz-mcp-server@latest"
+      ],
+      "env": {
+        "SIGNOZ_BASE_URL": "http://100.64.0.10:3301",
+        "SIGNOZ_API_KEY": "m1PP5QrtG3dZBdkY2u1Rm1Z9l/UeGNZ5yJUnhduc4RE="
+      }
+    }
+  }
+}

deploy.sh

@@ -0,0 +1,185 @@
+#!/bin/bash
+set -e
+
+# Usage: deploy.sh <project-name> [dockerfile|nixpacks|static]
+# Handles: Gitea repo creation, git push, Coolify app creation, deployment
+# Returns: production URL
+
+PROJECT_NAME="${1:?Usage: deploy.sh <project-name> [dockerfile|nixpacks|static]}"
+BUILD_TYPE="${2:-nixpacks}"
+
+GITEA_URL="${GITEA_URL:?GITEA_URL not set}"
+GITEA_TOKEN="${GITEA_TOKEN:?GITEA_TOKEN not set}"
+COOLIFY_BASE_URL="${COOLIFY_BASE_URL:?COOLIFY_BASE_URL not set}"
+COOLIFY_ACCESS_TOKEN="${COOLIFY_ACCESS_TOKEN:?COOLIFY_ACCESS_TOKEN not set}"
+
+GITEA_API="${GITEA_URL}/api/v1"
+COOLIFY_API="${COOLIFY_BASE_URL}/api/v1"
+GITEA_USER="pankaj"
+
+echo "=== TenX Deploy: ${PROJECT_NAME} (build: ${BUILD_TYPE}) ==="
+
+# ── Step 1: Git init + commit ────────────────────────────────────────
+if [ ! -d .git ]; then
+  git init
+  git checkout -b main 2>/dev/null || true
+fi
+
+git add -A
+git diff --cached --quiet 2>/dev/null || git commit -m "deploy: ${PROJECT_NAME}" --allow-empty
+
+# ── Step 2: Create Gitea repo (ignore if exists) ─────────────────────
+echo "[deploy] Creating Gitea repo..."
+REPO_RESPONSE=$(curl -s -w "\n%{http_code}" -X POST "${GITEA_API}/user/repos" \
+  -H "Authorization: token ${GITEA_TOKEN}" \
+  -H "Content-Type: application/json" \
+  -d "{\"name\":\"${PROJECT_NAME}\",\"private\":false,\"auto_init\":false}")
+
+HTTP_CODE=$(echo "${REPO_RESPONSE}" | tail -1)
+if [ "${HTTP_CODE}" = "201" ]; then
+  echo "[deploy] Gitea repo created: ${GITEA_URL}/${GITEA_USER}/${PROJECT_NAME}"
+elif [ "${HTTP_CODE}" = "409" ]; then
+  echo "[deploy] Gitea repo already exists"
+else
+  echo "[deploy] Gitea repo creation returned ${HTTP_CODE} (continuing anyway)"
+fi
+
+# ── Step 3: Push to Gitea ────────────────────────────────────────────
+GITEA_HOST=$(echo "${GITEA_URL}" | sed 's|https://||;s|http://||')
+REMOTE_URL="https://${GITEA_USER}:${GITEA_TOKEN}@${GITEA_HOST}/${GITEA_USER}/${PROJECT_NAME}.git"
+
+git remote remove origin 2>/dev/null || true
+git remote add origin "${REMOTE_URL}"
+git push -u origin main --force
+echo "[deploy] Code pushed to Gitea"
+
+# ── Step 4: Get Coolify server UUID ──────────────────────────────────
+echo "[deploy] Getting Coolify server..."
+SERVER_UUID=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+  "${COOLIFY_API}/servers" | python3 -c "import sys,json; servers=json.load(sys.stdin); print(servers[0]['uuid'])" 2>/dev/null)
+
+if [ -z "${SERVER_UUID}" ]; then
+  echo "[deploy] ERROR: Could not get Coolify server UUID"
+  exit 1
+fi
+echo "[deploy] Server: ${SERVER_UUID}"
+
+# ── Step 5: Get or create Coolify project ────────────────────────────
+echo "[deploy] Getting Coolify project..."
+PROJECT_UUID=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+  "${COOLIFY_API}/projects" | python3 -c "
+import sys,json
+projects=json.load(sys.stdin)
+for p in projects:
+    if p.get('name','').lower() == 'tenx':
+        print(p['uuid'])
+        sys.exit(0)
+print('')
+" 2>/dev/null)
+
+if [ -z "${PROJECT_UUID}" ]; then
+  echo "[deploy] Creating TenX project on Coolify..."
+  PROJECT_UUID=$(curl -s -X POST -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+    -H "Content-Type: application/json" \
+    "${COOLIFY_API}/projects" \
+    -d '{"name":"TenX","description":"TenX auto-deployed apps"}' | python3 -c "import sys,json; print(json.load(sys.stdin).get('uuid',''))" 2>/dev/null)
+fi
+echo "[deploy] Project: ${PROJECT_UUID}"
+
+# ── Step 6: Get first environment UUID ───────────────────────────────
+ENV_UUID=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+  "${COOLIFY_API}/projects/${PROJECT_UUID}" | python3 -c "
+import sys,json
+data=json.load(sys.stdin)
+envs=data.get('environments',[])
+if envs: print(envs[0].get('id',''))
+else: print('')
+" 2>/dev/null)
+
+if [ -z "${ENV_UUID}" ]; then
+  echo "[deploy] ERROR: No environment found in project"
+  exit 1
+fi
+echo "[deploy] Environment: ${ENV_UUID}"
+
+# ── Step 7: Create Coolify application ───────────────────────────────
+echo "[deploy] Creating Coolify application..."
+REPO_FULL_URL="${GITEA_URL}/${GITEA_USER}/${PROJECT_NAME}.git"
+
+APP_RESPONSE=$(curl -s -X POST -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+  -H "Content-Type: application/json" \
+  "${COOLIFY_API}/applications" \
+  -d "{
+    \"project_uuid\": \"${PROJECT_UUID}\",
+    \"environment_name\": \"production\",
+    \"server_uuid\": \"${SERVER_UUID}\",
+    \"type\": \"public\",
+    \"name\": \"${PROJECT_NAME}\",
+    \"git_repository\": \"${REPO_FULL_URL}\",
+    \"git_branch\": \"main\",
+    \"build_pack\": \"${BUILD_TYPE}\",
+    \"ports_exposes\": \"3000\",
+    \"instant_deploy\": true
+  }")
+
+APP_UUID=$(echo "${APP_RESPONSE}" | python3 -c "import sys,json; print(json.load(sys.stdin).get('uuid',''))" 2>/dev/null)
+
+if [ -z "${APP_UUID}" ]; then
+  echo "[deploy] App creation response: ${APP_RESPONSE}"
+  # Try to find existing app
+  APP_UUID=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+    "${COOLIFY_API}/applications" | python3 -c "
+import sys,json
+apps=json.load(sys.stdin)
+for a in apps:
+    if a.get('name','') == '${PROJECT_NAME}':
+        print(a['uuid'])
+        sys.exit(0)
+print('')
+" 2>/dev/null)
+
+  if [ -n "${APP_UUID}" ]; then
+    echo "[deploy] Found existing app: ${APP_UUID}, redeploying..."
+    curl -s -X POST -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+      "${COOLIFY_API}/applications/${APP_UUID}/restart" > /dev/null
+  else
+    echo "[deploy] ERROR: Could not create or find app"
+    exit 1
+  fi
+fi
+
+echo "[deploy] App UUID: ${APP_UUID}"
+
+# ── Step 8: Wait for deployment ──────────────────────────────────────
+echo "[deploy] Waiting for deployment..."
+for i in $(seq 1 30); do
+  sleep 10
+  STATUS=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+    "${COOLIFY_API}/applications/${APP_UUID}" | python3 -c "import sys,json; print(json.load(sys.stdin).get('status','unknown'))" 2>/dev/null)
+  echo "[deploy] Status: ${STATUS} (attempt ${i}/30)"
+  if [ "${STATUS}" = "running" ]; then
+    break
+  fi
+  if [ "${STATUS}" = "exited" ] || [ "${STATUS}" = "error" ]; then
+    echo "[deploy] Deployment failed with status: ${STATUS}"
+    # Get logs
+    curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+      "${COOLIFY_API}/applications/${APP_UUID}/logs" 2>/dev/null | tail -20
+    exit 1
+  fi
+done
+
+# ── Step 9: Get the URL ──────────────────────────────────────────────
+FQDN=$(curl -s -H "Authorization: Bearer ${COOLIFY_ACCESS_TOKEN}" \
+  "${COOLIFY_API}/applications/${APP_UUID}" | python3 -c "import sys,json; print(json.load(sys.stdin).get('fqdn',''))" 2>/dev/null)
+
+if [ -z "${FQDN}" ]; then
+  echo "[deploy] WARNING: No FQDN set — app may be accessible via Coolify dashboard only"
+  echo "[deploy] App UUID: ${APP_UUID}"
+else
+  echo ""
+  echo "=== DEPLOYED ==="
+  echo "URL: ${FQDN}"
+  echo "Gitea: ${GITEA_URL}/${GITEA_USER}/${PROJECT_NAME}"
+  echo "================"
+fi

designs/01-login.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Login</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>
+    body { font-family: 'Inter', sans-serif; }
+    .pattern-dots {
+      background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
+      background-size: 24px 24px;
+    }
+  </style>
+</head>
+<body class="min-h-screen bg-slate-50 flex items-center justify-center p-4">
+  <div class="w-full max-w-4xl bg-white rounded-2xl shadow-xl overflow-hidden flex" style="min-height: 560px;">
+    <!-- Left brand panel -->
+    <div class="hidden md:flex flex-col justify-between w-2/5 bg-blue-600 p-10 pattern-dots relative">
+      <div>
+        <!-- Logo -->
+        <div class="flex items-center gap-3 mb-12">
+          <div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center">
+            <svg class="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+          </div>
+          <span class="text-white font-bold text-xl tracking-tight">HRPanel</span>
+        </div>
+        <!-- Headline -->
+        <h1 class="text-white font-bold text-3xl leading-snug mb-4">
+          People management,<br />simplified.
+        </h1>
+        <p class="text-blue-200 text-sm leading-relaxed">
+          Manage your entire workforce — from hiring to payroll — in one beautifully designed platform built for modern HR teams.
+        </p>
+      </div>
+      <!-- Feature list -->
+      <div class="space-y-4">
+        <div class="flex items-center gap-3">
+          <div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <span class="text-blue-100 text-sm">Smart leave & attendance tracking</span>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <span class="text-blue-100 text-sm">Automated payroll processing</span>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <span class="text-blue-100 text-sm">Performance & goal management</span>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center flex-shrink-0">
+            <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <span class="text-blue-100 text-sm">Recruitment & onboarding pipeline</span>
+        </div>
+      </div>
+      <!-- Decorative circles -->
+      <div class="absolute -bottom-16 -right-16 w-48 h-48 bg-white/5 rounded-full"></div>
+      <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-white/5 rounded-full"></div>
+    </div>
+
+    <!-- Right login form -->
+    <div class="flex-1 flex flex-col justify-center px-8 md:px-12 py-10">
+      <!-- Mobile logo -->
+      <div class="flex items-center gap-2 mb-8 md:hidden">
+        <div class="w-9 h-9 bg-blue-600 rounded-xl flex items-center justify-center">
+          <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        </div>
+        <span class="font-bold text-slate-900 text-lg">HRPanel</span>
+      </div>
+
+      <h2 class="text-2xl font-bold text-slate-900 mb-1">Welcome back</h2>
+      <p class="text-slate-500 text-sm mb-8">Sign in to your HR workspace</p>
+
+      <form class="space-y-5">
+        <div>
+          <label class="block text-sm font-medium text-slate-700 mb-1.5">Work email</label>
+          <div class="relative">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
+              </svg>
+            </div>
+            <input type="email" value="admin@hrpanel.com" class="w-full pl-9 pr-4 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white" placeholder="you@company.com" />
+          </div>
+        </div>
+
+        <div>
+          <div class="flex items-center justify-between mb-1.5">
+            <label class="block text-sm font-medium text-slate-700">Password</label>
+            <a href="#" class="text-xs text-blue-600 hover:text-blue-700 font-medium">Forgot password?</a>
+          </div>
+          <div class="relative">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+            </div>
+            <input type="password" value="Admin@123" class="w-full pl-9 pr-10 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white" placeholder="••••••••" />
+            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center">
+              <svg class="w-4 h-4 text-slate-400 hover:text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <input id="remember" type="checkbox" checked class="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" />
+          <label for="remember" class="text-sm text-slate-600">Remember me for 30 days</label>
+        </div>
+
+        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg text-sm transition-colors flex items-center justify-center gap-2">
+          Sign in to HRPanel
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+          </svg>
+        </button>
+      </form>
+
+      <!-- Demo accounts -->
+      <div class="mt-6 p-4 bg-slate-50 border border-slate-200 rounded-lg">
+        <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Demo Accounts</p>
+        <div class="space-y-1.5">
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-slate-600">Admin</span>
+            <span class="text-xs font-mono text-slate-700">admin@hrpanel.com / Admin@123</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-slate-600">Manager</span>
+            <span class="text-xs font-mono text-slate-700">manager@hrpanel.com / Manager@123</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-slate-600">Employee</span>
+            <span class="text-xs font-mono text-slate-700">emp@hrpanel.com / Emp@123</span>
+          </div>
+        </div>
+      </div>
+
+      <p class="mt-6 text-center text-xs text-slate-400">
+        &copy; 2026 HRPanel v3. All rights reserved.
+      </p>
+    </div>
+  </div>
+</body>
+</html>

designs/02-dashboard.html

@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Dashboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>
+    body { font-family: 'Inter', sans-serif; }
+    .sidebar-item { @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors cursor-pointer; }
+    .sidebar-item.active { background-color: #EFF6FF; color: #2563EB; }
+    .bar { display: inline-block; width: 28px; border-radius: 4px 4px 0 0; background: #2563EB; }
+    .bar-light { background: #BFDBFE; }
+  </style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <!-- Logo -->
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <!-- Nav -->
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="sidebar-item active">
+          <svg class="w-4.5 h-4.5 w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
+          Dashboard
+        </a>
+        <a href="03-employees.html" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          Employees
+        </a>
+        <a href="#" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
+          Departments
+        </a>
+        <a href="05-leave-management.html" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+          Leave
+        </a>
+        <a href="06-attendance.html" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+          Attendance
+        </a>
+        <a href="07-payroll.html" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+          Payroll
+        </a>
+        <a href="08-recruitment.html" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+          Recruitment
+        </a>
+        <a href="10-performance.html" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+          Performance
+        </a>
+        <a href="11-reports.html" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+          Reports
+        </a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="sidebar-item">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          Settings
+        </a>
+      </nav>
+      <!-- User card -->
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+          <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Main content -->
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <!-- Top navbar -->
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <div class="flex items-center gap-3">
+          <div class="relative">
+            <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+            <input type="text" placeholder="Search employees, docs..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 w-72 placeholder-slate-400" />
+          </div>
+        </div>
+        <div class="flex items-center gap-3">
+          <button class="relative w-9 h-9 flex items-center justify-center rounded-lg hover:bg-slate-50 text-slate-600">
+            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+            <span class="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center leading-none" style="font-size:10px;">3</span>
+          </button>
+          <button class="relative w-9 h-9 flex items-center justify-center rounded-lg hover:bg-slate-50 text-slate-600">
+            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg>
+          </button>
+          <div class="w-px h-6 bg-slate-200"></div>
+          <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+            <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+            <div>
+              <p class="text-sm font-medium text-slate-900">Sarah Chen</p>
+              <p class="text-xs text-slate-500">Admin</p>
+            </div>
+            <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+          </div>
+        </div>
+      </header>
+
+      <!-- Scrollable content -->
+      <main class="flex-1 overflow-y-auto p-6 space-y-6">
+        <!-- Greeting -->
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-2xl font-bold text-slate-900">Good morning, Sarah! 👋</h1>
+            <p class="text-slate-500 text-sm mt-0.5">Friday, 9 May 2026 — Here's what's happening today.</p>
+          </div>
+          <button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+            Add Employee
+          </button>
+        </div>
+
+        <!-- KPI row -->
+        <div class="grid grid-cols-4 gap-4">
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between mb-3">
+              <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
+                <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+              </div>
+              <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+4 this month</span>
+            </div>
+            <p class="text-3xl font-bold text-slate-900">142</p>
+            <p class="text-sm text-slate-500 mt-0.5">Total Employees</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between mb-3">
+              <div class="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
+                <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+              </div>
+              <span class="text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">2 returning</span>
+            </div>
+            <p class="text-3xl font-bold text-slate-900">8</p>
+            <p class="text-sm text-slate-500 mt-0.5">On Leave Today</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between mb-3">
+              <div class="w-10 h-10 bg-rose-50 rounded-lg flex items-center justify-center">
+                <svg class="w-5 h-5 text-rose-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              </div>
+              <span class="text-xs font-medium text-rose-600 bg-rose-50 px-2 py-0.5 rounded-full">Needs action</span>
+            </div>
+            <p class="text-3xl font-bold text-slate-900">5</p>
+            <p class="text-sm text-slate-500 mt-0.5">Pending Approvals</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between mb-3">
+              <div class="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center">
+                <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              </div>
+              <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+2.1%</span>
+            </div>
+            <p class="text-3xl font-bold text-slate-900">$284.5K</p>
+            <p class="text-sm text-slate-500 mt-0.5">Monthly Payroll</p>
+          </div>
+        </div>
+
+        <!-- Row 2: Chart + Leave Requests -->
+        <div class="grid grid-cols-5 gap-4">
+          <!-- Attendance Overview Chart -->
+          <div class="col-span-3 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-center justify-between mb-5">
+              <div>
+                <h3 class="font-semibold text-slate-900 text-base">Attendance Overview</h3>
+                <p class="text-xs text-slate-500 mt-0.5">Last 7 days</p>
+              </div>
+              <div class="flex items-center gap-4 text-xs">
+                <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm inline-block" style="background:#2563EB"></span>Present</span>
+                <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm inline-block" style="background:#BFDBFE"></span>Leave</span>
+                <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm inline-block" style="background:#FEE2E2"></span>Absent</span>
+              </div>
+            </div>
+            <!-- Bar chart -->
+            <div class="flex items-end justify-between gap-2 h-40">
+              <!-- Mon -->
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full flex flex-col items-center gap-0.5">
+                  <div class="w-full rounded-t" style="height:110px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
+                  <div class="w-full" style="height:12px;background:#BFDBFE;"></div>
+                  <div class="w-full rounded-b" style="height:4px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
+                </div>
+                <span class="text-xs text-slate-400">Mon</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full flex flex-col items-center gap-0.5">
+                  <div class="w-full rounded-t" style="height:105px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
+                  <div class="w-full" style="height:16px;background:#BFDBFE;"></div>
+                  <div class="w-full rounded-b" style="height:5px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
+                </div>
+                <span class="text-xs text-slate-400">Tue</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full flex flex-col items-center gap-0.5">
+                  <div class="w-full rounded-t" style="height:118px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
+                  <div class="w-full" style="height:10px;background:#BFDBFE;"></div>
+                  <div class="w-full rounded-b" style="height:3px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
+                </div>
+                <span class="text-xs text-slate-400">Wed</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full flex flex-col items-center gap-0.5">
+                  <div class="w-full rounded-t" style="height:100px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
+                  <div class="w-full" style="height:18px;background:#BFDBFE;"></div>
+                  <div class="w-full rounded-b" style="height:8px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
+                </div>
+                <span class="text-xs text-slate-400">Thu</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full flex flex-col items-center gap-0.5">
+                  <div class="w-full rounded-t" style="height:115px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
+                  <div class="w-full" style="height:12px;background:#BFDBFE;"></div>
+                  <div class="w-full rounded-b" style="height:4px;background:#FEE2E2;border-radius:0 0 4px 4px;"></div>
+                </div>
+                <span class="text-xs text-slate-400">Fri</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full flex flex-col items-center gap-0.5">
+                  <div class="w-full rounded-t" style="height:30px;background:#E2E8F0;border-radius:4px 4px 0 0;"></div>
+                  <div class="w-full" style="height:6px;background:#E2E8F0;"></div>
+                  <div class="w-full rounded-b" style="height:2px;background:#E2E8F0;border-radius:0 0 4px 4px;"></div>
+                </div>
+                <span class="text-xs text-slate-400">Sat</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full flex flex-col items-center gap-0.5">
+                  <div class="w-full rounded-t" style="height:24px;background:#E2E8F0;border-radius:4px 4px 0 0;"></div>
+                  <div class="w-full" style="height:4px;background:#E2E8F0;"></div>
+                  <div class="w-full rounded-b" style="height:2px;background:#E2E8F0;border-radius:0 0 4px 4px;"></div>
+                </div>
+                <span class="text-xs text-slate-400">Sun</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Leave Requests -->
+          <div class="col-span-2 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="font-semibold text-slate-900 text-base">Leave Requests</h3>
+              <span class="text-xs bg-amber-100 text-amber-700 font-semibold px-2 py-0.5 rounded-full">5 pending</span>
+            </div>
+            <div class="space-y-3">
+              <div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
+                <img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-slate-900 truncate">James Liu</p>
+                  <p class="text-xs text-slate-500">May 12–14 · Annual Leave</p>
+                </div>
+                <div class="flex gap-1">
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                  </button>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
+                <img src="https://ui-avatars.com/api/?name=Priya+Sharma&background=059669&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-slate-900 truncate">Priya Sharma</p>
+                  <p class="text-xs text-slate-500">May 15 · Sick Leave</p>
+                </div>
+                <div class="flex gap-1">
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                  </button>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
+                <img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-slate-900 truncate">Michael Torres</p>
+                  <p class="text-xs text-slate-500">May 18–22 · Annual Leave</p>
+                </div>
+                <div class="flex gap-1">
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                  </button>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
+                <img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-slate-900 truncate">Elena Vasquez</p>
+                  <p class="text-xs text-slate-500">May 20 · Personal Leave</p>
+                </div>
+                <div class="flex gap-1">
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                  </button>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 p-2.5 rounded-lg bg-slate-50">
+                <img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full flex-shrink-0" />
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium text-slate-900 truncate">David Kim</p>
+                  <p class="text-xs text-slate-500">May 23–25 · Annual Leave</p>
+                </div>
+                <div class="flex gap-1">
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-emerald-50 text-emerald-600 hover:bg-emerald-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+                  </button>
+                  <button class="w-6 h-6 rounded flex items-center justify-center bg-red-50 text-red-500 hover:bg-red-100">
+                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Row 3: Recent Hires + Quick Actions -->
+        <div class="grid grid-cols-5 gap-4">
+          <!-- Recent Hires -->
+          <div class="col-span-3 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="font-semibold text-slate-900 text-base">Recent Hires</h3>
+              <a href="03-employees.html" class="text-xs text-blue-600 font-medium hover:text-blue-700">View all →</a>
+            </div>
+            <div class="grid grid-cols-3 gap-3">
+              <div class="p-4 border border-slate-100 rounded-xl text-center hover:border-blue-200 hover:bg-blue-50/30 transition-colors cursor-pointer">
+                <img src="https://ui-avatars.com/api/?name=Alex+Morgan&background=2563EB&color=fff&size=128" class="w-12 h-12 rounded-full mx-auto mb-2" />
+                <p class="text-sm font-semibold text-slate-900">Alex Morgan</p>
+                <p class="text-xs text-slate-500">Frontend Engineer</p>
+                <span class="inline-block mt-1.5 text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">Engineering</span>
+                <p class="text-xs text-slate-400 mt-1.5">Joined May 1, 2026</p>
+              </div>
+              <div class="p-4 border border-slate-100 rounded-xl text-center hover:border-blue-200 hover:bg-blue-50/30 transition-colors cursor-pointer">
+                <img src="https://ui-avatars.com/api/?name=Rachel+Park&background=7C3AED&color=fff&size=128" class="w-12 h-12 rounded-full mx-auto mb-2" />
+                <p class="text-sm font-semibold text-slate-900">Rachel Park</p>
+                <p class="text-xs text-slate-500">Product Designer</p>
+                <span class="inline-block mt-1.5 text-xs bg-purple-50 text-purple-700 px-2 py-0.5 rounded-full font-medium">Design</span>
+                <p class="text-xs text-slate-400 mt-1.5">Joined May 5, 2026</p>
+              </div>
+              <div class="p-4 border border-slate-100 rounded-xl text-center hover:border-blue-200 hover:bg-blue-50/30 transition-colors cursor-pointer">
+                <img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=059669&color=fff&size=128" class="w-12 h-12 rounded-full mx-auto mb-2" />
+                <p class="text-sm font-semibold text-slate-900">Nathan Hughes</p>
+                <p class="text-xs text-slate-500">Sales Executive</p>
+                <span class="inline-block mt-1.5 text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Sales</span>
+                <p class="text-xs text-slate-400 mt-1.5">Joined May 8, 2026</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Quick Actions -->
+          <div class="col-span-2 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <h3 class="font-semibold text-slate-900 text-base mb-4">Quick Actions</h3>
+            <div class="grid grid-cols-2 gap-3">
+              <button class="flex flex-col items-center gap-2 p-4 border border-slate-200 rounded-xl hover:border-blue-300 hover:bg-blue-50/40 transition-colors group">
+                <div class="w-10 h-10 bg-blue-100 group-hover:bg-blue-200 rounded-lg flex items-center justify-center transition-colors">
+                  <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" /></svg>
+                </div>
+                <span class="text-xs font-medium text-slate-700">Add Employee</span>
+              </button>
+              <button class="flex flex-col items-center gap-2 p-4 border border-slate-200 rounded-xl hover:border-emerald-300 hover:bg-emerald-50/40 transition-colors group">
+                <div class="w-10 h-10 bg-emerald-100 group-hover:bg-emerald-200 rounded-lg flex items-center justify-center transition-colors">
+                  <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                </div>
+                <span class="text-xs font-medium text-slate-700">Run Payroll</span>
+              </button>
+              <button class="flex flex-col items-center gap-2 p-4 border border-slate-200 rounded-xl hover:border-violet-300 hover:bg-violet-50/40 transition-colors group">
+                <div class="w-10 h-10 bg-violet-100 group-hover:bg-violet-200 rounded-lg flex items-center justify-center transition-colors">
+                  <svg class="w-5 h-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+                </div>
+                <span class="text-xs font-medium text-slate-700">Post Job</span>
+              </button>
+              <button class="flex flex-col items-center gap-2 p-4 border border-slate-200 rounded-xl hover:border-amber-300 hover:bg-amber-50/40 transition-colors group">
+                <div class="w-10 h-10 bg-amber-100 group-hover:bg-amber-200 rounded-lg flex items-center justify-center transition-colors">
+                  <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+                </div>
+                <span class="text-xs font-medium text-slate-700">View Reports</span>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Birthdays & Anniversaries -->
+        <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="font-semibold text-slate-900 text-base flex items-center gap-2">
+              <span class="text-lg">🎂</span> Upcoming Birthdays &amp; Work Anniversaries
+            </h3>
+            <span class="text-xs text-slate-500">Next 7 days</span>
+          </div>
+          <div class="flex items-center gap-4 overflow-x-auto pb-1">
+            <div class="flex items-center gap-3 px-4 py-3 bg-blue-50 rounded-xl min-w-fit border border-blue-100">
+              <img src="https://ui-avatars.com/api/?name=Lisa+Park&background=DB2777&color=fff&size=64" class="w-9 h-9 rounded-full" />
+              <div>
+                <p class="text-sm font-medium text-slate-900">Lisa Park</p>
+                <p class="text-xs text-slate-500">Birthday — May 11</p>
+              </div>
+              <span class="text-xs bg-pink-100 text-pink-600 px-2 py-0.5 rounded-full font-medium ml-1">Tomorrow</span>
+            </div>
+            <div class="flex items-center gap-3 px-4 py-3 bg-amber-50 rounded-xl min-w-fit border border-amber-100">
+              <img src="https://ui-avatars.com/api/?name=Tom+Bradley&background=D97706&color=fff&size=64" class="w-9 h-9 rounded-full" />
+              <div>
+                <p class="text-sm font-medium text-slate-900">Tom Bradley</p>
+                <p class="text-xs text-slate-500">5-Year Anniversary — May 13</p>
+              </div>
+              <span class="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full font-medium ml-1">3 days</span>
+            </div>
+            <div class="flex items-center gap-3 px-4 py-3 bg-emerald-50 rounded-xl min-w-fit border border-emerald-100">
+              <img src="https://ui-avatars.com/api/?name=Aisha+Patel&background=059669&color=fff&size=64" class="w-9 h-9 rounded-full" />
+              <div>
+                <p class="text-sm font-medium text-slate-900">Aisha Patel</p>
+                <p class="text-xs text-slate-500">Birthday — May 15</p>
+              </div>
+              <span class="text-xs bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full font-medium ml-1">6 days</span>
+            </div>
+            <div class="flex items-center gap-3 px-4 py-3 bg-violet-50 rounded-xl min-w-fit border border-violet-100">
+              <img src="https://ui-avatars.com/api/?name=Chris+Walton&background=7C3AED&color=fff&size=64" class="w-9 h-9 rounded-full" />
+              <div>
+                <p class="text-sm font-medium text-slate-900">Chris Walton</p>
+                <p class="text-xs text-slate-500">2-Year Anniversary — May 16</p>
+              </div>
+              <span class="text-xs bg-violet-100 text-violet-700 px-2 py-0.5 rounded-full font-medium ml-1">7 days</span>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/03-employees.html

@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Employees</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
+          Dashboard
+        </a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          Employees
+        </a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
+          Departments
+        </a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+          Leave
+        </a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+          Attendance
+        </a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+          Payroll
+        </a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+          Recruitment
+        </a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+          Performance
+        </a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+          Reports
+        </a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          Settings
+        </a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+          <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Main content -->
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <!-- Top navbar -->
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <div class="flex items-center gap-3">
+          <div class="relative">
+            <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+            <input type="text" placeholder="Search employees..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 w-72 placeholder-slate-400" />
+          </div>
+        </div>
+        <div class="flex items-center gap-3">
+          <button class="relative w-9 h-9 flex items-center justify-center rounded-lg hover:bg-slate-50 text-slate-600">
+            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+            <span class="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center leading-none" style="font-size:10px;">3</span>
+          </button>
+          <div class="w-px h-6 bg-slate-200"></div>
+          <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+            <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+            <div>
+              <p class="text-sm font-medium text-slate-900">Sarah Chen</p>
+              <p class="text-xs text-slate-500">Admin</p>
+            </div>
+            <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+          </div>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6">
+        <!-- Page header -->
+        <div class="flex items-center justify-between mb-6">
+          <div>
+            <h1 class="text-xl font-bold text-slate-900">Employees</h1>
+            <p class="text-sm text-slate-500 mt-0.5">142 total employees across all departments</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+              Export
+            </button>
+            <button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+              Add Employee
+            </button>
+          </div>
+        </div>
+
+        <!-- Filters -->
+        <div class="bg-white border border-slate-200 rounded-xl p-4 mb-5 flex items-center gap-3 flex-wrap">
+          <div class="relative flex-1 min-w-48">
+            <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+            <input type="text" placeholder="Search by name, email, role..." class="w-full pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
+          </div>
+          <select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+            <option>All Departments</option>
+            <option>Engineering</option>
+            <option>Design</option>
+            <option>Marketing</option>
+            <option>Sales</option>
+            <option>HR</option>
+            <option>Finance</option>
+            <option>Operations</option>
+          </select>
+          <select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+            <option>All Status</option>
+            <option>Active</option>
+            <option>On Leave</option>
+            <option>Inactive</option>
+          </select>
+          <select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+            <option>All Roles</option>
+            <option>Manager</option>
+            <option>Senior</option>
+            <option>Junior</option>
+            <option>Intern</option>
+          </select>
+          <button class="px-3 py-2 text-sm text-slate-500 hover:text-slate-700 font-medium">Clear filters</button>
+        </div>
+
+        <!-- Employee grid -->
+        <div class="grid grid-cols-4 gap-4 mb-6">
+          <!-- Employee cards -->
+          <a href="04-employee-profile.html" class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Sarah Chen</h3>
+            <p class="text-xs text-slate-500 mt-0.5">HR Administrator</p>
+            <span class="inline-block mt-2 text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">HR</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                sarah.chen@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 234-5678
+              </div>
+            </div>
+          </a>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">James Liu</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Senior Engineer</p>
+            <span class="inline-block mt-2 text-xs bg-violet-50 text-violet-700 px-2 py-0.5 rounded-full font-medium">Engineering</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                james.liu@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 345-6789
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Priya+Sharma&background=059669&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium border border-amber-100">On Leave</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Priya Sharma</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Product Manager</p>
+            <span class="inline-block mt-2 text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Product</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                priya.s@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 456-7890
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Michael Torres</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Sales Director</p>
+            <span class="inline-block mt-2 text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium">Sales</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                m.torres@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 567-8901
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Elena Vasquez</h3>
+            <p class="text-xs text-slate-500 mt-0.5">UX Designer</p>
+            <span class="inline-block mt-2 text-xs bg-pink-50 text-pink-700 px-2 py-0.5 rounded-full font-medium">Design</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                elena.v@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 678-9012
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">David Kim</h3>
+            <p class="text-xs text-slate-500 mt-0.5">DevOps Engineer</p>
+            <span class="inline-block mt-2 text-xs bg-cyan-50 text-cyan-700 px-2 py-0.5 rounded-full font-medium">Engineering</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                david.kim@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 789-0123
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Aisha+Patel&background=0F766E&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Aisha Patel</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Finance Manager</p>
+            <span class="inline-block mt-2 text-xs bg-teal-50 text-teal-700 px-2 py-0.5 rounded-full font-medium">Finance</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                aisha.p@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 890-1234
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Tom+Bradley&background=B45309&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium border border-slate-200">Inactive</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Tom Bradley</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Marketing Lead</p>
+            <span class="inline-block mt-2 text-xs bg-orange-50 text-orange-700 px-2 py-0.5 rounded-full font-medium">Marketing</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                tom.b@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 901-2345
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Rachel Park</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Product Designer</p>
+            <span class="inline-block mt-2 text-xs bg-violet-50 text-violet-700 px-2 py-0.5 rounded-full font-medium">Design</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                rachel.p@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 012-3456
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=047857&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Nathan Hughes</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Sales Executive</p>
+            <span class="inline-block mt-2 text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Sales</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                nathan.h@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 123-4567
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Chris+Walton&background=1D4ED8&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Chris Walton</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Backend Engineer</p>
+            <span class="inline-block mt-2 text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">Engineering</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                chris.w@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 234-5670
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow cursor-pointer group">
+            <div class="flex items-start justify-between mb-4">
+              <img src="https://ui-avatars.com/api/?name=Lisa+Park&background=9D174D&color=fff&size=128" class="w-12 h-12 rounded-full" />
+              <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+            </div>
+            <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Lisa Park</h3>
+            <p class="text-xs text-slate-500 mt-0.5">Operations Manager</p>
+            <span class="inline-block mt-2 text-xs bg-rose-50 text-rose-700 px-2 py-0.5 rounded-full font-medium">Operations</span>
+            <div class="mt-3 pt-3 border-t border-slate-100 space-y-1">
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg>
+                lisa.p@hrpanel.com
+              </div>
+              <div class="flex items-center gap-1.5 text-xs text-slate-500">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                +1 (555) 345-6780
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Pagination -->
+        <div class="flex items-center justify-between bg-white border border-slate-200 rounded-xl px-5 py-3.5">
+          <p class="text-sm text-slate-500">Showing <span class="font-medium text-slate-700">1–12</span> of <span class="font-medium text-slate-700">142</span> employees</p>
+          <div class="flex items-center gap-1">
+            <button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-slate-50 disabled:opacity-40" disabled>
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
+            </button>
+            <button class="w-8 h-8 rounded-lg bg-blue-600 text-white text-sm font-semibold">1</button>
+            <button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">2</button>
+            <button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">3</button>
+            <span class="text-slate-400 text-sm px-1">...</span>
+            <button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">12</button>
+            <button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-600 hover:bg-slate-50">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+            </button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/04-employee-profile.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Employee Profile</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          Employees
+        </a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Recruitment</a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Main content -->
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <!-- Breadcrumb -->
+        <nav class="flex items-center gap-2 text-sm">
+          <a href="03-employees.html" class="text-slate-500 hover:text-slate-700">Employees</a>
+          <svg class="w-4 h-4 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+          <span class="font-medium text-slate-900">Sarah Chen</span>
+        </nav>
+        <div class="flex items-center gap-3">
+          <button class="relative w-9 h-9 flex items-center justify-center rounded-lg hover:bg-slate-50 text-slate-600">
+            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+            <span class="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center leading-none" style="font-size:10px;">3</span>
+          </button>
+          <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+            <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+            <span class="text-sm font-medium text-slate-900">Sarah Chen</span>
+          </div>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6">
+        <!-- Action bar -->
+        <div class="flex items-center justify-between mb-6">
+          <div></div>
+          <div class="flex items-center gap-3">
+            <button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              More Actions
+            </button>
+            <button class="flex items-center gap-2 px-4 py-2 border border-red-200 rounded-lg text-sm font-medium text-red-600 hover:bg-red-50 transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
+              Deactivate
+            </button>
+            <button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
+              Edit Profile
+            </button>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-3 gap-5">
+          <!-- Left: Profile card -->
+          <div class="col-span-1 space-y-4">
+            <!-- Main profile card -->
+            <div class="bg-white rounded-xl border border-slate-200 p-6 text-center hover:shadow-md transition-shadow">
+              <div class="relative inline-block mb-4">
+                <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=256" class="w-24 h-24 rounded-full mx-auto" />
+                <span class="absolute bottom-1 right-1 w-5 h-5 bg-emerald-500 border-2 border-white rounded-full"></span>
+              </div>
+              <h2 class="text-lg font-bold text-slate-900">Sarah Chen</h2>
+              <p class="text-sm text-slate-500 mt-0.5">HR Administrator</p>
+              <div class="flex items-center justify-center gap-2 mt-2">
+                <span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-0.5 rounded-full font-medium">HR</span>
+                <span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-0.5 rounded-full font-medium border border-emerald-100">Active</span>
+              </div>
+
+              <div class="mt-5 pt-5 border-t border-slate-100 space-y-3 text-left">
+                <div class="flex items-center gap-3">
+                  <div class="w-7 h-7 bg-slate-100 rounded-md flex items-center justify-center flex-shrink-0">
+                    <svg class="w-3.5 h-3.5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" /></svg>
+                  </div>
+                  <div>
+                    <p class="text-xs text-slate-400">Employee ID</p>
+                    <p class="text-sm font-medium text-slate-900">EMP-0024</p>
+                  </div>
+                </div>
+                <div class="flex items-center gap-3">
+                  <div class="w-7 h-7 bg-slate-100 rounded-md flex items-center justify-center flex-shrink-0">
+                    <svg class="w-3.5 h-3.5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                  </div>
+                  <div>
+                    <p class="text-xs text-slate-400">Hire Date</p>
+                    <p class="text-sm font-medium text-slate-900">March 15, 2021</p>
+                  </div>
+                </div>
+                <div class="flex items-center gap-3">
+                  <div class="w-7 h-7 bg-slate-100 rounded-md flex items-center justify-center flex-shrink-0">
+                    <svg class="w-3.5 h-3.5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                  </div>
+                  <div>
+                    <p class="text-xs text-slate-400">Location</p>
+                    <p class="text-sm font-medium text-slate-900">San Francisco, CA</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Quick stats -->
+            <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
+              <h3 class="text-sm font-semibold text-slate-700 mb-3">Leave Balance</h3>
+              <div class="space-y-2.5">
+                <div>
+                  <div class="flex items-center justify-between text-xs mb-1">
+                    <span class="text-slate-500">Annual Leave</span>
+                    <span class="font-medium text-slate-700">12 / 18 days</span>
+                  </div>
+                  <div class="w-full bg-slate-100 rounded-full h-1.5">
+                    <div class="bg-blue-500 h-1.5 rounded-full" style="width: 66%"></div>
+                  </div>
+                </div>
+                <div>
+                  <div class="flex items-center justify-between text-xs mb-1">
+                    <span class="text-slate-500">Sick Leave</span>
+                    <span class="font-medium text-slate-700">2 / 10 days</span>
+                  </div>
+                  <div class="w-full bg-slate-100 rounded-full h-1.5">
+                    <div class="bg-amber-500 h-1.5 rounded-full" style="width: 20%"></div>
+                  </div>
+                </div>
+                <div>
+                  <div class="flex items-center justify-between text-xs mb-1">
+                    <span class="text-slate-500">Personal Leave</span>
+                    <span class="font-medium text-slate-700">3 / 5 days</span>
+                  </div>
+                  <div class="w-full bg-slate-100 rounded-full h-1.5">
+                    <div class="bg-emerald-500 h-1.5 rounded-full" style="width: 60%"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right: Tabs + content -->
+          <div class="col-span-2 space-y-4">
+            <!-- Tabs -->
+            <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
+              <div class="flex border-b border-slate-200">
+                <button class="px-5 py-3.5 text-sm font-semibold text-blue-600 border-b-2 border-blue-600 bg-blue-50/50">Overview</button>
+                <button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Leave</button>
+                <button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Attendance</button>
+                <button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Payroll</button>
+                <button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Goals</button>
+                <button class="px-5 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 hover:bg-slate-50">Documents</button>
+              </div>
+
+              <div class="p-6 space-y-6">
+                <!-- Personal Info -->
+                <div>
+                  <h3 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
+                    <div class="w-6 h-6 bg-blue-50 rounded flex items-center justify-center">
+                      <svg class="w-3.5 h-3.5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
+                    </div>
+                    Personal Information
+                  </h3>
+                  <div class="grid grid-cols-2 gap-4">
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Work Email</p>
+                      <p class="text-sm font-medium text-slate-900">sarah.chen@hrpanel.com</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Phone</p>
+                      <p class="text-sm font-medium text-slate-900">+1 (555) 234-5678</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Date of Birth</p>
+                      <p class="text-sm font-medium text-slate-900">November 11, 1992</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Gender</p>
+                      <p class="text-sm font-medium text-slate-900">Female</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5 col-span-2">
+                      <p class="text-xs text-slate-400 mb-0.5">Address</p>
+                      <p class="text-sm font-medium text-slate-900">742 Evergreen Terrace, San Francisco, CA 94102</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="h-px bg-slate-100"></div>
+
+                <!-- Job Info -->
+                <div>
+                  <h3 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
+                    <div class="w-6 h-6 bg-violet-50 rounded flex items-center justify-center">
+                      <svg class="w-3.5 h-3.5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+                    </div>
+                    Job Information
+                  </h3>
+                  <div class="grid grid-cols-2 gap-4">
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Department</p>
+                      <p class="text-sm font-medium text-slate-900">Human Resources</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Manager</p>
+                      <div class="flex items-center gap-2 mt-0.5">
+                        <img src="https://ui-avatars.com/api/?name=Kevin+Walsh&background=1D4ED8&color=fff&size=64" class="w-5 h-5 rounded-full" />
+                        <p class="text-sm font-medium text-slate-900">Kevin Walsh</p>
+                      </div>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Work Location</p>
+                      <p class="text-sm font-medium text-slate-900">Hybrid (SF Office)</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Employment Type</p>
+                      <p class="text-sm font-medium text-slate-900">Full-time</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Annual Salary</p>
+                      <p class="text-sm font-semibold text-slate-900">$92,000</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Tenure</p>
+                      <p class="text-sm font-medium text-slate-900">5 years, 2 months</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="h-px bg-slate-100"></div>
+
+                <!-- Emergency contact -->
+                <div>
+                  <h3 class="text-sm font-semibold text-slate-900 mb-4 flex items-center gap-2">
+                    <div class="w-6 h-6 bg-red-50 rounded flex items-center justify-center">
+                      <svg class="w-3.5 h-3.5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                    </div>
+                    Emergency Contact
+                  </h3>
+                  <div class="grid grid-cols-3 gap-4">
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Name</p>
+                      <p class="text-sm font-medium text-slate-900">Michael Chen</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Relationship</p>
+                      <p class="text-sm font-medium text-slate-900">Spouse</p>
+                    </div>
+                    <div class="bg-slate-50 rounded-lg p-3.5">
+                      <p class="text-xs text-slate-400 mb-0.5">Phone</p>
+                      <p class="text-sm font-medium text-slate-900">+1 (555) 987-6543</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/05-leave-management.html

@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Leave Management</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+          Leave
+        </a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Recruitment</a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <div class="relative">
+          <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          <input type="text" placeholder="Search employees..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm w-72 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        </div>
+        <div class="flex items-center gap-3">
+          <button class="relative w-9 h-9 flex items-center justify-center rounded-lg hover:bg-slate-50 text-slate-600">
+            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+            <span class="absolute top-1.5 right-1.5 w-4 h-4 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center leading-none" style="font-size:10px;">3</span>
+          </button>
+          <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+            <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+            <span class="text-sm font-medium text-slate-900">Sarah Chen</span>
+          </div>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6">
+        <div class="flex items-center justify-between mb-6">
+          <div>
+            <h1 class="text-xl font-bold text-slate-900">Leave Management</h1>
+            <p class="text-sm text-slate-500 mt-0.5">Review and manage employee leave requests</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+              Export
+            </button>
+            <button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+              New Leave Request
+            </button>
+          </div>
+        </div>
+
+        <!-- Stats row -->
+        <div class="grid grid-cols-4 gap-4 mb-5">
+          <div class="bg-white rounded-xl border border-slate-200 p-4">
+            <p class="text-2xl font-bold text-slate-900">23</p>
+            <p class="text-sm text-slate-500 mt-0.5">Total This Month</p>
+          </div>
+          <div class="bg-white rounded-xl border border-amber-200 p-4 bg-amber-50/30">
+            <p class="text-2xl font-bold text-amber-600">5</p>
+            <p class="text-sm text-slate-500 mt-0.5">Pending Review</p>
+          </div>
+          <div class="bg-white rounded-xl border border-emerald-200 p-4 bg-emerald-50/30">
+            <p class="text-2xl font-bold text-emerald-600">16</p>
+            <p class="text-sm text-slate-500 mt-0.5">Approved</p>
+          </div>
+          <div class="bg-white rounded-xl border border-red-200 p-4 bg-red-50/30">
+            <p class="text-2xl font-bold text-red-500">2</p>
+            <p class="text-sm text-slate-500 mt-0.5">Rejected</p>
+          </div>
+        </div>
+
+        <!-- Filter tabs + table -->
+        <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
+          <!-- Tabs -->
+          <div class="flex items-center border-b border-slate-200 px-5 gap-1">
+            <button class="px-4 py-3.5 text-sm font-semibold text-blue-600 border-b-2 border-blue-600">All Requests</button>
+            <button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700 flex items-center gap-1.5">
+              Pending
+              <span class="bg-amber-100 text-amber-700 text-xs font-bold px-1.5 py-0.5 rounded-full">5</span>
+            </button>
+            <button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700">Approved</button>
+            <button class="px-4 py-3.5 text-sm font-medium text-slate-500 hover:text-slate-700">Rejected</button>
+            <div class="flex-1"></div>
+            <div class="flex items-center gap-2 py-2">
+              <select class="text-xs px-2 py-1.5 border border-slate-200 rounded-lg text-slate-600 focus:outline-none bg-white">
+                <option>All Leave Types</option>
+                <option>Annual Leave</option>
+                <option>Sick Leave</option>
+                <option>Personal Leave</option>
+                <option>Maternity Leave</option>
+              </select>
+              <select class="text-xs px-2 py-1.5 border border-slate-200 rounded-lg text-slate-600 focus:outline-none bg-white">
+                <option>May 2026</option>
+                <option>April 2026</option>
+                <option>March 2026</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Table -->
+          <table class="w-full">
+            <thead>
+              <tr class="bg-slate-50 border-b border-slate-200">
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Employee</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Leave Type</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Duration</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Days</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Reason</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-medium text-slate-900">James Liu</p>
+                      <p class="text-xs text-slate-500">Engineering</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
+                <td class="px-4 py-4 text-sm text-slate-700">May 12 – May 14</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
+                <td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Family vacation planned since...</td>
+                <td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-2">
+                    <button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
+                    <button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Priya+Sharma&background=059669&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-medium text-slate-900">Priya Sharma</p>
+                      <p class="text-xs text-slate-500">Product</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4"><span class="text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-full font-medium">Sick Leave</span></td>
+                <td class="px-4 py-4 text-sm text-slate-700">May 15</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">1</td>
+                <td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Not feeling well, fever since...</td>
+                <td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-2">
+                    <button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
+                    <button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-medium text-slate-900">Michael Torres</p>
+                      <p class="text-xs text-slate-500">Sales</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
+                <td class="px-4 py-4 text-sm text-slate-700">May 18 – May 22</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">5</td>
+                <td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Annual family holiday trip to...</td>
+                <td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Approved</span></td>
+                <td class="px-4 py-4">
+                  <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-medium text-slate-900">Elena Vasquez</p>
+                      <p class="text-xs text-slate-500">Design</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4"><span class="text-xs bg-violet-50 text-violet-700 px-2.5 py-1 rounded-full font-medium">Personal Leave</span></td>
+                <td class="px-4 py-4 text-sm text-slate-700">May 20</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">1</td>
+                <td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Personal appointment at...</td>
+                <td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-2">
+                    <button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
+                    <button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-medium text-slate-900">David Kim</p>
+                      <p class="text-xs text-slate-500">Engineering</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
+                <td class="px-4 py-4 text-sm text-slate-700">May 23 – May 25</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
+                <td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Long weekend trip, all tasks...</td>
+                <td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-2">
+                    <button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
+                    <button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Aisha+Patel&background=0F766E&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-medium text-slate-900">Aisha Patel</p>
+                      <p class="text-xs text-slate-500">Finance</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4"><span class="text-xs bg-pink-50 text-pink-700 px-2.5 py-1 rounded-full font-medium">Maternity Leave</span></td>
+                <td class="px-4 py-4 text-sm text-slate-700">Jun 1 – Aug 30</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">65</td>
+                <td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Maternity leave as per policy</td>
+                <td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Approved</span></td>
+                <td class="px-4 py-4">
+                  <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=047857&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-medium text-slate-900">Nathan Hughes</p>
+                      <p class="text-xs text-slate-500">Sales</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4"><span class="text-xs bg-rose-50 text-rose-700 px-2.5 py-1 rounded-full font-medium">Sick Leave</span></td>
+                <td class="px-4 py-4 text-sm text-slate-700">May 7 – May 8</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">2</td>
+                <td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Flu, doctor prescribed rest...</td>
+                <td class="px-4 py-4"><span class="text-xs bg-red-50 text-red-600 px-2.5 py-1 rounded-full font-medium border border-red-100">Rejected</span></td>
+                <td class="px-4 py-4">
+                  <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-medium text-slate-900">Rachel Park</p>
+                      <p class="text-xs text-slate-500">Design</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4"><span class="text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium">Annual Leave</span></td>
+                <td class="px-4 py-4 text-sm text-slate-700">May 28 – May 30</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">3</td>
+                <td class="px-4 py-4 text-sm text-slate-600 max-w-48 truncate">Attending a design conference...</td>
+                <td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Pending</span></td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-2">
+                    <button class="text-xs font-semibold text-emerald-600 bg-emerald-50 hover:bg-emerald-100 px-2.5 py-1 rounded-lg border border-emerald-100 transition-colors">Approve</button>
+                    <button class="text-xs font-semibold text-red-500 bg-red-50 hover:bg-red-100 px-2.5 py-1 rounded-lg border border-red-100 transition-colors">Reject</button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <!-- Table footer -->
+          <div class="px-5 py-3.5 border-t border-slate-100 flex items-center justify-between">
+            <p class="text-sm text-slate-500">Showing 1–8 of 23 requests</p>
+            <div class="flex items-center gap-1">
+              <button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-400 hover:bg-slate-50 disabled:opacity-40" disabled>
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
+              </button>
+              <button class="w-8 h-8 rounded-lg bg-blue-600 text-white text-sm font-semibold">1</button>
+              <button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">2</button>
+              <button class="w-8 h-8 rounded-lg border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50">3</button>
+              <button class="w-8 h-8 rounded-lg border border-slate-200 flex items-center justify-center text-slate-600 hover:bg-slate-50">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/06-attendance.html

@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Attendance</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+          Attendance
+        </a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Recruitment</a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <div class="relative">
+          <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          <input type="text" placeholder="Search employees..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm w-72 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        </div>
+        <div class="flex items-center gap-3">
+          <!-- Clock In/Out button - prominent -->
+          <div class="flex items-center gap-2 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2">
+            <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
+            <span class="text-sm text-emerald-700 font-medium">Clocked in at 9:02 AM</span>
+          </div>
+          <button class="flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
+            Clock Out
+          </button>
+          <div class="w-px h-6 bg-slate-200"></div>
+          <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+            <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+            <span class="text-sm font-medium text-slate-900">Sarah Chen</span>
+          </div>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6 space-y-5">
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-xl font-bold text-slate-900">Attendance Tracking</h1>
+            <p class="text-sm text-slate-500 mt-0.5">Monitor daily attendance, clock-ins, and work hours</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+              <option>May 2026</option>
+              <option>April 2026</option>
+            </select>
+            <button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+              Export
+            </button>
+          </div>
+        </div>
+
+        <!-- Stats -->
+        <div class="grid grid-cols-4 gap-4">
+          <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
+            <div class="flex items-center gap-3 mb-1">
+              <div class="w-8 h-8 bg-emerald-50 rounded-lg flex items-center justify-center">
+                <svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              </div>
+              <span class="text-xs text-slate-500 font-medium">Present Today</span>
+            </div>
+            <p class="text-2xl font-bold text-slate-900">127</p>
+            <p class="text-xs text-emerald-600 font-medium mt-0.5">89.4% attendance rate</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
+            <div class="flex items-center gap-3 mb-1">
+              <div class="w-8 h-8 bg-red-50 rounded-lg flex items-center justify-center">
+                <svg class="w-4 h-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              </div>
+              <span class="text-xs text-slate-500 font-medium">Absent</span>
+            </div>
+            <p class="text-2xl font-bold text-slate-900">8</p>
+            <p class="text-xs text-red-500 font-medium mt-0.5">3 unexcused</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
+            <div class="flex items-center gap-3 mb-1">
+              <div class="w-8 h-8 bg-amber-50 rounded-lg flex items-center justify-center">
+                <svg class="w-4 h-4 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              </div>
+              <span class="text-xs text-slate-500 font-medium">Late Arrivals</span>
+            </div>
+            <p class="text-2xl font-bold text-slate-900">4</p>
+            <p class="text-xs text-amber-600 font-medium mt-0.5">Avg 18 min late</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
+            <div class="flex items-center gap-3 mb-1">
+              <div class="w-8 h-8 bg-blue-50 rounded-lg flex items-center justify-center">
+                <svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+              </div>
+              <span class="text-xs text-slate-500 font-medium">On Leave</span>
+            </div>
+            <p class="text-2xl font-bold text-slate-900">3</p>
+            <p class="text-xs text-blue-600 font-medium mt-0.5">Approved leaves</p>
+          </div>
+        </div>
+
+        <!-- Calendar + Today table -->
+        <div class="grid grid-cols-5 gap-4">
+          <!-- Calendar -->
+          <div class="col-span-3 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="font-semibold text-slate-900">May 2026</h3>
+              <div class="flex items-center gap-2">
+                <button class="w-7 h-7 rounded-lg border border-slate-200 flex items-center justify-center hover:bg-slate-50">
+                  <svg class="w-4 h-4 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
+                </button>
+                <button class="w-7 h-7 rounded-lg border border-slate-200 flex items-center justify-center hover:bg-slate-50">
+                  <svg class="w-4 h-4 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                </button>
+              </div>
+            </div>
+            <!-- Legend -->
+            <div class="flex items-center gap-4 mb-4 text-xs">
+              <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-emerald-400 inline-block"></span>Present</span>
+              <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-red-400 inline-block"></span>Absent</span>
+              <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-amber-400 inline-block"></span>Late</span>
+              <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-blue-400 inline-block"></span>Leave</span>
+              <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-sm bg-slate-200 inline-block"></span>Weekend</span>
+            </div>
+            <!-- Calendar grid -->
+            <div class="grid grid-cols-7 gap-1">
+              <div class="text-center text-xs text-slate-400 font-medium py-1">Mon</div>
+              <div class="text-center text-xs text-slate-400 font-medium py-1">Tue</div>
+              <div class="text-center text-xs text-slate-400 font-medium py-1">Wed</div>
+              <div class="text-center text-xs text-slate-400 font-medium py-1">Thu</div>
+              <div class="text-center text-xs text-slate-400 font-medium py-1">Fri</div>
+              <div class="text-center text-xs text-slate-400 font-medium py-1">Sat</div>
+              <div class="text-center text-xs text-slate-400 font-medium py-1">Sun</div>
+
+              <!-- Week 1: Apr 28-May 4 -->
+              <div class="text-center text-xs text-slate-300 py-1.5 px-1 rounded-md bg-slate-50">28</div>
+              <div class="text-center text-xs text-slate-300 py-1.5 px-1 rounded-md bg-slate-50">29</div>
+              <div class="text-center text-xs text-slate-300 py-1.5 px-1 rounded-md bg-slate-50">30</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">1</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">2</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">3</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">4</div>
+
+              <!-- Week 2: May 5-11 -->
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">5</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">6</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-red-100 text-red-700 font-medium cursor-pointer hover:bg-red-200">7</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-emerald-100 text-emerald-800 font-medium cursor-pointer hover:bg-emerald-200">8</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-amber-100 text-amber-800 font-medium cursor-pointer hover:bg-amber-200 ring-2 ring-blue-500">9</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">10</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">11</div>
+
+              <!-- Week 3: May 12-18 -->
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-blue-100 text-blue-700 font-medium cursor-pointer">12</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-blue-100 text-blue-700 font-medium cursor-pointer">13</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-blue-100 text-blue-700 font-medium cursor-pointer">14</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">15</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">16</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">17</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">18</div>
+
+              <!-- Week 4: May 19-25 -->
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">19</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">20</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">21</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">22</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">23</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">24</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">25</div>
+
+              <!-- Week 5: May 26-31 -->
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">26</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">27</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">28</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">29</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-50 text-slate-400 font-medium">30</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md bg-slate-100 text-slate-400">31</div>
+              <div class="text-center text-xs py-1.5 px-1 rounded-md"></div>
+            </div>
+          </div>
+
+          <!-- Today's summary -->
+          <div class="col-span-2 bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <h3 class="font-semibold text-slate-900 mb-1">My Attendance — May 2026</h3>
+            <p class="text-xs text-slate-500 mb-4">Personal attendance summary</p>
+            <div class="grid grid-cols-2 gap-3 mb-4">
+              <div class="bg-emerald-50 rounded-lg p-3 text-center">
+                <p class="text-xl font-bold text-emerald-700">7</p>
+                <p class="text-xs text-emerald-600">Days Present</p>
+              </div>
+              <div class="bg-red-50 rounded-lg p-3 text-center">
+                <p class="text-xl font-bold text-red-600">0</p>
+                <p class="text-xs text-red-500">Days Absent</p>
+              </div>
+              <div class="bg-amber-50 rounded-lg p-3 text-center">
+                <p class="text-xl font-bold text-amber-700">1</p>
+                <p class="text-xs text-amber-600">Late Arrivals</p>
+              </div>
+              <div class="bg-blue-50 rounded-lg p-3 text-center">
+                <p class="text-xl font-bold text-blue-700">56.5</p>
+                <p class="text-xs text-blue-600">Hours Worked</p>
+              </div>
+            </div>
+            <div class="h-px bg-slate-100 mb-3"></div>
+            <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Today</p>
+            <div class="space-y-2">
+              <div class="flex items-center justify-between text-sm">
+                <span class="text-slate-500">Clock In</span>
+                <span class="font-semibold text-emerald-700">9:02 AM</span>
+              </div>
+              <div class="flex items-center justify-between text-sm">
+                <span class="text-slate-500">Clock Out</span>
+                <span class="text-slate-400 italic">—</span>
+              </div>
+              <div class="flex items-center justify-between text-sm">
+                <span class="text-slate-500">Hours So Far</span>
+                <span class="font-semibold text-slate-900">6h 38m</span>
+              </div>
+              <div class="flex items-center justify-between text-sm">
+                <span class="text-slate-500">Status</span>
+                <span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium border border-amber-100">Late (2 min)</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Today's attendance table -->
+        <div class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
+          <div class="flex items-center justify-between px-5 py-4 border-b border-slate-100">
+            <h3 class="font-semibold text-slate-900">Today's Attendance — May 9, 2026</h3>
+            <div class="flex items-center gap-2">
+              <select class="text-xs px-2 py-1.5 border border-slate-200 rounded-lg text-slate-600 focus:outline-none bg-white">
+                <option>All Departments</option>
+                <option>Engineering</option>
+                <option>Design</option>
+              </select>
+            </div>
+          </div>
+          <table class="w-full">
+            <thead>
+              <tr class="bg-slate-50 border-b border-slate-100">
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Employee</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Department</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Clock In</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Clock Out</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Hours</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-50">
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-3.5">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-7 h-7 rounded-full" />
+                    <span class="text-sm font-medium text-slate-900">James Liu</span>
+                  </div>
+                </td>
+                <td class="px-4 py-3.5 text-sm text-slate-600">Engineering</td>
+                <td class="px-4 py-3.5 text-sm font-medium text-slate-900">8:55 AM</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5 text-sm font-medium text-slate-900">6h 45m</td>
+                <td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Present</span></td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-3.5">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-7 h-7 rounded-full" />
+                    <span class="text-sm font-medium text-slate-900">Elena Vasquez</span>
+                  </div>
+                </td>
+                <td class="px-4 py-3.5 text-sm text-slate-600">Design</td>
+                <td class="px-4 py-3.5 text-sm font-medium text-amber-600">9:18 AM</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5 text-sm font-medium text-slate-900">6h 22m</td>
+                <td class="px-4 py-3.5"><span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium">Late</span></td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-3.5">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-7 h-7 rounded-full" />
+                    <span class="text-sm font-medium text-slate-900">David Kim</span>
+                  </div>
+                </td>
+                <td class="px-4 py-3.5 text-sm text-slate-600">Engineering</td>
+                <td class="px-4 py-3.5 text-sm font-medium text-slate-900">8:58 AM</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5 text-sm font-medium text-slate-900">6h 42m</td>
+                <td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Present</span></td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-3.5">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Michael+Torres&background=D97706&color=fff&size=64" class="w-7 h-7 rounded-full" />
+                    <span class="text-sm font-medium text-slate-900">Michael Torres</span>
+                  </div>
+                </td>
+                <td class="px-4 py-3.5 text-sm text-slate-600">Sales</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5"><span class="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">On Leave</span></td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-3.5">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=64" class="w-7 h-7 rounded-full" />
+                    <span class="text-sm font-medium text-slate-900">Rachel Park</span>
+                  </div>
+                </td>
+                <td class="px-4 py-3.5 text-sm text-slate-600">Design</td>
+                <td class="px-4 py-3.5 text-sm font-medium text-slate-900">9:01 AM</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5 text-sm font-medium text-slate-900">6h 39m</td>
+                <td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">Present</span></td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-3.5">
+                  <div class="flex items-center gap-3">
+                    <img src="https://ui-avatars.com/api/?name=Nathan+Hughes&background=047857&color=fff&size=64" class="w-7 h-7 rounded-full" />
+                    <span class="text-sm font-medium text-slate-900">Nathan Hughes</span>
+                  </div>
+                </td>
+                <td class="px-4 py-3.5 text-sm text-slate-600">Sales</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5 text-sm text-slate-400">—</td>
+                <td class="px-4 py-3.5"><span class="text-xs bg-red-50 text-red-600 px-2 py-0.5 rounded-full font-medium">Absent</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/07-payroll.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Payroll</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+          Payroll
+        </a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Recruitment</a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <div class="relative">
+          <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          <input type="text" placeholder="Search payroll..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm w-72 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        </div>
+        <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <span class="text-sm font-medium text-slate-900">Sarah Chen</span>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6 space-y-5">
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-xl font-bold text-slate-900">Payroll Management</h1>
+            <p class="text-sm text-slate-500 mt-0.5">Process salaries, view payslips, and manage payroll runs</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
+              Payslips
+            </button>
+            <button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              Run New Payroll
+            </button>
+          </div>
+        </div>
+
+        <!-- Summary cards -->
+        <div class="grid grid-cols-3 gap-4">
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between mb-3">
+              <div class="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center">
+                <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+              </div>
+              <span class="text-xs font-medium text-slate-500 bg-slate-100 px-2 py-0.5 rounded-full">May 2026</span>
+            </div>
+            <p class="text-2xl font-bold text-slate-900">$284,500</p>
+            <p class="text-sm text-slate-500 mt-0.5">Total Monthly Cost</p>
+            <p class="text-xs text-emerald-600 font-medium mt-1.5">+2.1% from April</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between mb-3">
+              <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
+                <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+              </div>
+              <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Current</span>
+            </div>
+            <p class="text-2xl font-bold text-slate-900">138</p>
+            <p class="text-sm text-slate-500 mt-0.5">Employees Paid</p>
+            <p class="text-xs text-slate-500 font-medium mt-1.5">of 142 total</p>
+          </div>
+          <div class="bg-white rounded-xl border border-amber-200 bg-amber-50/20 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between mb-3">
+              <div class="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
+                <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+              </div>
+              <span class="text-xs font-medium text-amber-700 bg-amber-100 px-2 py-0.5 rounded-full">Action needed</span>
+            </div>
+            <p class="text-2xl font-bold text-amber-700">4</p>
+            <p class="text-sm text-slate-500 mt-0.5">Pending Payslips</p>
+            <p class="text-xs text-amber-600 font-medium mt-1.5">Review before processing</p>
+          </div>
+        </div>
+
+        <!-- Payroll runs table -->
+        <div class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
+          <div class="flex items-center justify-between px-5 py-4 border-b border-slate-100">
+            <h3 class="font-semibold text-slate-900">Payroll History</h3>
+            <button class="flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 px-3 py-1.5 border border-slate-200 rounded-lg hover:bg-slate-50">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
+              Filter
+            </button>
+          </div>
+          <table class="w-full">
+            <thead>
+              <tr class="bg-slate-50 border-b border-slate-100">
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Month</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Employees</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Total Gross</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Total Net</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Date Run</th>
+                <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-50">
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <div class="w-9 h-9 bg-blue-50 rounded-lg flex items-center justify-center flex-shrink-0">
+                      <svg class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                    </div>
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">May 2026</p>
+                      <p class="text-xs text-slate-400">Current</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4 text-sm text-slate-700">138</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$342,200</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$284,500</td>
+                <td class="px-4 py-4"><span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-1 rounded-full font-medium border border-amber-100">Draft</span></td>
+                <td class="px-4 py-4 text-sm text-slate-500">—</td>
+                <td class="px-4 py-4">
+                  <button class="text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 px-2.5 py-1 rounded-lg border border-blue-100 transition-colors">Process</button>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
+                      <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                    </div>
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">April 2026</p>
+                      <p class="text-xs text-slate-400">31 working days</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-4 py-4 text-sm text-slate-700">140</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$338,800</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$278,600</td>
+                <td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
+                <td class="px-4 py-4 text-sm text-slate-500">Apr 30, 2026</td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-1.5">
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
+                      <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                    </div>
+                    <p class="text-sm font-semibold text-slate-900">March 2026</p>
+                  </div>
+                </td>
+                <td class="px-4 py-4 text-sm text-slate-700">138</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$335,400</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$274,200</td>
+                <td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
+                <td class="px-4 py-4 text-sm text-slate-500">Mar 31, 2026</td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-1.5">
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
+                      <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                    </div>
+                    <p class="text-sm font-semibold text-slate-900">February 2026</p>
+                  </div>
+                </td>
+                <td class="px-4 py-4 text-sm text-slate-700">136</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$329,800</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$270,400</td>
+                <td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
+                <td class="px-4 py-4 text-sm text-slate-500">Feb 28, 2026</td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-1.5">
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
+                      <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                    </div>
+                    <p class="text-sm font-semibold text-slate-900">January 2026</p>
+                  </div>
+                </td>
+                <td class="px-4 py-4 text-sm text-slate-700">134</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$321,600</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$263,800</td>
+                <td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
+                <td class="px-4 py-4 text-sm text-slate-500">Jan 31, 2026</td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-1.5">
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
+                  </div>
+                </td>
+              </tr>
+              <tr class="hover:bg-slate-50 transition-colors">
+                <td class="px-5 py-4">
+                  <div class="flex items-center gap-3">
+                    <div class="w-9 h-9 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0">
+                      <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                    </div>
+                    <p class="text-sm font-semibold text-slate-900">December 2025</p>
+                  </div>
+                </td>
+                <td class="px-4 py-4 text-sm text-slate-700">132</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$356,200</td>
+                <td class="px-4 py-4 text-sm font-semibold text-slate-900">$291,400</td>
+                <td class="px-4 py-4"><span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Completed</span></td>
+                <td class="px-4 py-4 text-sm text-slate-500">Dec 31, 2025</td>
+                <td class="px-4 py-4">
+                  <div class="flex items-center gap-1.5">
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">View</button>
+                    <button class="text-xs font-medium text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg hover:bg-slate-100 transition-colors">Export</button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/08-recruitment.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Recruitment</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+          Recruitment
+        </a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <div class="relative">
+          <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          <input type="text" placeholder="Search jobs..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm w-72 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        </div>
+        <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <span class="text-sm font-medium text-slate-900">Sarah Chen</span>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6 space-y-5">
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-xl font-bold text-slate-900">Recruitment</h1>
+            <p class="text-sm text-slate-500 mt-0.5">Manage job postings, applicants, and hiring pipelines</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+              Reports
+            </button>
+            <button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+              Post New Job
+            </button>
+          </div>
+        </div>
+
+        <!-- Stats -->
+        <div class="grid grid-cols-4 gap-4">
+          <div class="bg-white rounded-xl border border-slate-200 p-4">
+            <p class="text-2xl font-bold text-slate-900">3</p>
+            <p class="text-sm text-slate-500 mt-0.5">Open Positions</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-4">
+            <p class="text-2xl font-bold text-slate-900">23</p>
+            <p class="text-sm text-slate-500 mt-0.5">Total Applicants</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-4">
+            <p class="text-2xl font-bold text-blue-600">5</p>
+            <p class="text-sm text-slate-500 mt-0.5">In Interview Stage</p>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 p-4">
+            <p class="text-2xl font-bold text-emerald-600">2</p>
+            <p class="text-sm text-slate-500 mt-0.5">Offers Sent</p>
+          </div>
+        </div>
+
+        <!-- Tabs -->
+        <div class="flex gap-1 bg-slate-100 p-1 rounded-xl w-fit">
+          <button class="px-4 py-2 bg-white rounded-lg text-sm font-semibold text-slate-900 shadow-sm">All Jobs</button>
+          <button class="px-4 py-2 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-700">Open</button>
+          <button class="px-4 py-2 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-700">On Hold</button>
+          <button class="px-4 py-2 rounded-lg text-sm font-medium text-slate-500 hover:text-slate-700">Closed</button>
+        </div>
+
+        <!-- Job cards -->
+        <div class="space-y-4">
+          <!-- Job 1 -->
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between">
+              <div class="flex items-start gap-4">
+                <div class="w-11 h-11 bg-violet-50 rounded-xl flex items-center justify-center flex-shrink-0 border border-violet-100">
+                  <svg class="w-5 h-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
+                </div>
+                <div>
+                  <div class="flex items-center gap-3 mb-1">
+                    <h3 class="font-semibold text-slate-900 text-base">Senior React Developer</h3>
+                    <span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-0.5 rounded-full font-medium border border-emerald-100">Open</span>
+                  </div>
+                  <div class="flex items-center gap-4 text-sm text-slate-500">
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5" /></svg>
+                      Engineering
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                      San Francisco, CA (Hybrid)
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2" /></svg>
+                      2 openings
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                      $120K–$160K
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 flex-shrink-0">
+                <div class="text-right">
+                  <p class="text-lg font-bold text-slate-900">8</p>
+                  <p class="text-xs text-slate-500">Applicants</p>
+                </div>
+                <a href="09-recruitment-kanban.html" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+                  View Applicants
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                </a>
+              </div>
+            </div>
+            <!-- Pipeline progress -->
+            <div class="mt-4 pt-4 border-t border-slate-100">
+              <div class="flex items-center gap-2 mb-2">
+                <span class="text-xs text-slate-400 font-medium">Pipeline</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1.5 bg-slate-100 rounded-lg px-2.5 py-1">
+                  <div class="w-2 h-2 rounded-full bg-slate-400"></div>
+                  <span class="text-xs font-medium text-slate-600">Applied</span>
+                  <span class="text-xs font-bold text-slate-900">4</span>
+                </div>
+                <svg class="w-3 h-3 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                <div class="flex items-center gap-1.5 bg-blue-50 rounded-lg px-2.5 py-1">
+                  <div class="w-2 h-2 rounded-full bg-blue-400"></div>
+                  <span class="text-xs font-medium text-blue-700">Screening</span>
+                  <span class="text-xs font-bold text-blue-900">3</span>
+                </div>
+                <svg class="w-3 h-3 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                <div class="flex items-center gap-1.5 bg-violet-50 rounded-lg px-2.5 py-1">
+                  <div class="w-2 h-2 rounded-full bg-violet-400"></div>
+                  <span class="text-xs font-medium text-violet-700">Interview</span>
+                  <span class="text-xs font-bold text-violet-900">2</span>
+                </div>
+                <svg class="w-3 h-3 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                <div class="flex items-center gap-1.5 bg-amber-50 rounded-lg px-2.5 py-1">
+                  <div class="w-2 h-2 rounded-full bg-amber-400"></div>
+                  <span class="text-xs font-medium text-amber-700">Offer</span>
+                  <span class="text-xs font-bold text-amber-900">1</span>
+                </div>
+                <svg class="w-3 h-3 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                <div class="flex items-center gap-1.5 bg-emerald-50 rounded-lg px-2.5 py-1">
+                  <div class="w-2 h-2 rounded-full bg-emerald-400"></div>
+                  <span class="text-xs font-medium text-emerald-700">Hired</span>
+                  <span class="text-xs font-bold text-emerald-900">0</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Job 2 -->
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between">
+              <div class="flex items-start gap-4">
+                <div class="w-11 h-11 bg-blue-50 rounded-xl flex items-center justify-center flex-shrink-0 border border-blue-100">
+                  <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                </div>
+                <div>
+                  <div class="flex items-center gap-3 mb-1">
+                    <h3 class="font-semibold text-slate-900 text-base">HR Business Partner</h3>
+                    <span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-0.5 rounded-full font-medium border border-emerald-100">Open</span>
+                  </div>
+                  <div class="flex items-center gap-4 text-sm text-slate-500">
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5" /></svg>
+                      Human Resources
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                      Remote (US)
+                    </span>
+                    <span>1 opening</span>
+                    <span>$80K–$105K</span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 flex-shrink-0">
+                <div class="text-right">
+                  <p class="text-lg font-bold text-slate-900">3</p>
+                  <p class="text-xs text-slate-500">Applicants</p>
+                </div>
+                <button class="flex items-center gap-2 border border-blue-600 text-blue-600 hover:bg-blue-50 text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+                  View Applicants
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                </button>
+              </div>
+            </div>
+            <div class="mt-4 pt-4 border-t border-slate-100">
+              <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1.5 bg-slate-100 rounded-lg px-2.5 py-1">
+                  <div class="w-2 h-2 rounded-full bg-slate-400"></div>
+                  <span class="text-xs font-medium text-slate-600">Applied <span class="font-bold text-slate-900">2</span></span>
+                </div>
+                <svg class="w-3 h-3 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                <div class="flex items-center gap-1.5 bg-violet-50 rounded-lg px-2.5 py-1">
+                  <div class="w-2 h-2 rounded-full bg-violet-400"></div>
+                  <span class="text-xs font-medium text-violet-700">Interview <span class="font-bold text-violet-900">1</span></span>
+                </div>
+                <svg class="w-3 h-3 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                <div class="flex items-center gap-1.5 bg-amber-50 rounded-lg px-2.5 py-1">
+                  <div class="w-2 h-2 rounded-full bg-amber-400"></div>
+                  <span class="text-xs font-medium text-amber-700">Offer <span class="font-bold text-amber-900">0</span></span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Job 3 -->
+          <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+            <div class="flex items-start justify-between">
+              <div class="flex items-start gap-4">
+                <div class="w-11 h-11 bg-amber-50 rounded-xl flex items-center justify-center flex-shrink-0 border border-amber-100">
+                  <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" /></svg>
+                </div>
+                <div>
+                  <div class="flex items-center gap-3 mb-1">
+                    <h3 class="font-semibold text-slate-900 text-base">Content Strategist</h3>
+                    <span class="text-xs bg-amber-50 text-amber-700 px-2.5 py-0.5 rounded-full font-medium border border-amber-100">On Hold</span>
+                  </div>
+                  <div class="flex items-center gap-4 text-sm text-slate-500">
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5" /></svg>
+                      Marketing
+                    </span>
+                    <span class="flex items-center gap-1.5">
+                      <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                      New York, NY (Onsite)
+                    </span>
+                    <span>1 opening</span>
+                    <span>$65K–$85K</span>
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 flex-shrink-0">
+                <div class="text-right">
+                  <p class="text-lg font-bold text-slate-900">12</p>
+                  <p class="text-xs text-slate-500">Applicants</p>
+                </div>
+                <button class="flex items-center gap-2 border border-slate-200 text-slate-600 hover:bg-slate-50 text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+                  View Applicants
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+                </button>
+              </div>
+            </div>
+            <div class="mt-3 pt-3 border-t border-slate-100">
+              <p class="text-xs text-amber-600 flex items-center gap-1.5">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                Hiring paused — budget review in progress. Resume expected June 1, 2026.
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/09-recruitment-kanban.html

@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Applicant Pipeline</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
+          Recruitment
+        </a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <nav class="flex items-center gap-2 text-sm">
+          <a href="08-recruitment.html" class="text-slate-500 hover:text-slate-700">Recruitment</a>
+          <svg class="w-4 h-4 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+          <span class="font-medium text-slate-900">Senior React Developer</span>
+        </nav>
+        <div class="flex items-center gap-3">
+          <span class="text-xs bg-emerald-50 text-emerald-700 px-2.5 py-1 rounded-full font-medium border border-emerald-100">Open</span>
+          <span class="text-xs text-slate-500">8 applicants</span>
+          <button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+            Add Applicant
+          </button>
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full cursor-pointer" />
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-x-auto p-6">
+        <div class="flex gap-4 min-w-max h-full">
+
+          <!-- Applied Column -->
+          <div class="w-64 flex flex-col">
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <div class="w-2.5 h-2.5 rounded-full bg-slate-400"></div>
+                <span class="font-semibold text-slate-700 text-sm">Applied</span>
+                <span class="w-5 h-5 rounded-full bg-slate-200 text-slate-600 text-xs font-bold flex items-center justify-center">4</span>
+              </div>
+              <button class="w-6 h-6 rounded hover:bg-slate-200 flex items-center justify-center text-slate-400">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+              </button>
+            </div>
+            <div class="flex-1 space-y-3 overflow-y-auto">
+              <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab active:cursor-grabbing group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Jordan+Blake&background=3B82F6&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Jordan Blake</p>
+                      <p class="text-xs text-slate-500">Applied May 1</p>
+                    </div>
+                  </div>
+                  <button class="w-5 h-5 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-100 flex items-center justify-center">
+                    <svg class="w-3.5 h-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>
+                  </button>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">TypeScript</span>
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">Node.js</span>
+                </div>
+                <div class="flex items-center justify-between text-xs text-slate-500">
+                  <span>5 yrs exp</span>
+                  <span class="flex items-center gap-1">
+                    <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /></svg>
+                    San Francisco
+                  </span>
+                </div>
+              </div>
+
+              <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Maya+Singh&background=8B5CF6&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Maya Singh</p>
+                      <p class="text-xs text-slate-500">Applied May 3</p>
+                    </div>
+                  </div>
+                  <button class="w-5 h-5 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-100 flex items-center justify-center">
+                    <svg class="w-3.5 h-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>
+                  </button>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">GraphQL</span>
+                </div>
+                <div class="flex items-center justify-between text-xs text-slate-500">
+                  <span>3 yrs exp</span>
+                  <span>Remote</span>
+                </div>
+              </div>
+
+              <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Ethan+Ford&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Ethan Ford</p>
+                      <p class="text-xs text-slate-500">Applied May 5</p>
+                    </div>
+                  </div>
+                  <button class="w-5 h-5 rounded opacity-0 group-hover:opacity-100 transition-opacity hover:bg-slate-100 flex items-center justify-center">
+                    <svg class="w-3.5 h-3.5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>
+                  </button>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-cyan-50 text-cyan-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-cyan-50 text-cyan-700 px-1.5 py-0.5 rounded font-medium">Redux</span>
+                  <span class="text-xs bg-cyan-50 text-cyan-700 px-1.5 py-0.5 rounded font-medium">AWS</span>
+                </div>
+                <div class="flex items-center justify-between text-xs text-slate-500">
+                  <span>7 yrs exp</span>
+                  <span>Austin, TX</span>
+                </div>
+              </div>
+
+              <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Sofia+Reyes&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Sofia Reyes</p>
+                      <p class="text-xs text-slate-500">Applied May 7</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-pink-50 text-pink-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-pink-50 text-pink-700 px-1.5 py-0.5 rounded font-medium">Vue.js</span>
+                </div>
+                <div class="flex items-center justify-between text-xs text-slate-500">
+                  <span>4 yrs exp</span>
+                  <span>New York</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Screening Column -->
+          <div class="w-64 flex flex-col">
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <div class="w-2.5 h-2.5 rounded-full bg-blue-400"></div>
+                <span class="font-semibold text-slate-700 text-sm">Screening</span>
+                <span class="w-5 h-5 rounded-full bg-blue-100 text-blue-700 text-xs font-bold flex items-center justify-center">3</span>
+              </div>
+            </div>
+            <div class="flex-1 space-y-3 overflow-y-auto">
+              <div class="bg-white rounded-xl border border-blue-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Lucas+Martin&background=1D4ED8&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Lucas Martin</p>
+                      <p class="text-xs text-slate-500">Applied Apr 28</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">Next.js</span>
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">TailwindCSS</span>
+                </div>
+                <div class="flex items-center justify-between text-xs text-slate-500 mb-2">
+                  <span>6 yrs exp</span>
+                  <span>Chicago</span>
+                </div>
+                <div class="flex items-center gap-1.5 text-xs text-blue-600">
+                  <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
+                  Phone screen scheduled May 12
+                </div>
+              </div>
+
+              <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Anika+Weiss&background=4F46E5&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Anika Weiss</p>
+                      <p class="text-xs text-slate-500">Applied Apr 30</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-indigo-50 text-indigo-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-indigo-50 text-indigo-700 px-1.5 py-0.5 rounded font-medium">TypeScript</span>
+                </div>
+                <div class="text-xs text-slate-500">4 yrs exp · Remote</div>
+              </div>
+
+              <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Carlos+Rivera&background=059669&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Carlos Rivera</p>
+                      <p class="text-xs text-slate-500">Applied May 2</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-emerald-50 text-emerald-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-emerald-50 text-emerald-700 px-1.5 py-0.5 rounded font-medium">Python</span>
+                </div>
+                <div class="text-xs text-slate-500">8 yrs exp · Miami</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Interview Column -->
+          <div class="w-64 flex flex-col">
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <div class="w-2.5 h-2.5 rounded-full bg-violet-400"></div>
+                <span class="font-semibold text-slate-700 text-sm">Interview</span>
+                <span class="w-5 h-5 rounded-full bg-violet-100 text-violet-700 text-xs font-bold flex items-center justify-center">2</span>
+              </div>
+            </div>
+            <div class="flex-1 space-y-3 overflow-y-auto">
+              <div class="bg-white rounded-xl border border-violet-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Ryan+Cooper&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Ryan Cooper</p>
+                      <p class="text-xs text-slate-500">Applied Apr 22</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">Next.js</span>
+                  <span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">GraphQL</span>
+                  <span class="text-xs bg-violet-50 text-violet-700 px-1.5 py-0.5 rounded font-medium">AWS</span>
+                </div>
+                <div class="flex items-center justify-between text-xs mb-2">
+                  <span class="text-slate-500">9 yrs exp</span>
+                  <span class="flex items-center gap-1 text-emerald-600 font-medium">
+                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                    Strong match
+                  </span>
+                </div>
+                <div class="text-xs text-violet-600 flex items-center gap-1.5">
+                  <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                  Technical round — May 13, 2 PM
+                </div>
+              </div>
+
+              <div class="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Diana+Cho&background=0F766E&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Diana Cho</p>
+                      <p class="text-xs text-slate-500">Applied Apr 25</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-teal-50 text-teal-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-teal-50 text-teal-700 px-1.5 py-0.5 rounded font-medium">TypeScript</span>
+                </div>
+                <div class="text-xs text-slate-500">5 yrs exp · Seattle</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Offer Column -->
+          <div class="w-64 flex flex-col">
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
+                <span class="font-semibold text-slate-700 text-sm">Offer</span>
+                <span class="w-5 h-5 rounded-full bg-amber-100 text-amber-700 text-xs font-bold flex items-center justify-center">1</span>
+              </div>
+            </div>
+            <div class="flex-1 space-y-3 overflow-y-auto">
+              <div class="bg-white rounded-xl border border-amber-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Owen+Walsh&background=D97706&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Owen Walsh</p>
+                      <p class="text-xs text-slate-500">Applied Apr 15</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-medium">Next.js</span>
+                  <span class="text-xs bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded font-medium">Node.js</span>
+                </div>
+                <div class="flex items-center justify-between text-xs mb-2">
+                  <span class="text-slate-500">8 yrs exp</span>
+                </div>
+                <div class="bg-amber-50 border border-amber-100 rounded-lg px-2.5 py-1.5 text-xs text-amber-700">
+                  Offer sent: $142K/yr · Awaiting response
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Hired Column -->
+          <div class="w-64 flex flex-col">
+            <div class="flex items-center justify-between mb-3">
+              <div class="flex items-center gap-2">
+                <div class="w-2.5 h-2.5 rounded-full bg-emerald-500"></div>
+                <span class="font-semibold text-slate-700 text-sm">Hired</span>
+                <span class="w-5 h-5 rounded-full bg-emerald-100 text-emerald-700 text-xs font-bold flex items-center justify-center">1</span>
+              </div>
+            </div>
+            <div class="flex-1 space-y-3 overflow-y-auto">
+              <div class="bg-white rounded-xl border border-emerald-200 p-4 hover:shadow-md transition-shadow cursor-grab group">
+                <div class="flex items-start justify-between mb-3">
+                  <div class="flex items-center gap-2.5">
+                    <img src="https://ui-avatars.com/api/?name=Alex+Morgan&background=2563EB&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                    <div>
+                      <p class="text-sm font-semibold text-slate-900">Alex Morgan</p>
+                      <p class="text-xs text-slate-500">Applied Apr 1</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-wrap gap-1 mb-3">
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">React</span>
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">TypeScript</span>
+                  <span class="text-xs bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded font-medium">Next.js</span>
+                </div>
+                <div class="bg-emerald-50 border border-emerald-100 rounded-lg px-2.5 py-1.5 text-xs text-emerald-700 flex items-center gap-1.5">
+                  <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+                  Starts May 1, 2026
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/10-performance.html

@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Performance</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Recruitment</a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+          Performance
+        </a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <div class="relative">
+          <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          <input type="text" placeholder="Search..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm w-72 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        </div>
+        <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <span class="text-sm font-medium text-slate-900">Sarah Chen</span>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6 space-y-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-xl font-bold text-slate-900">Performance & Goals</h1>
+            <p class="text-sm text-slate-500 mt-0.5">Track team OKRs, individual goals, and performance reviews</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none bg-white">
+              <option>Q2 2026 (Apr–Jun)</option>
+              <option>Q1 2026 (Jan–Mar)</option>
+            </select>
+            <button class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+              Add Goal
+            </button>
+          </div>
+        </div>
+
+        <!-- My Goals -->
+        <div>
+          <h2 class="text-base font-semibold text-slate-900 mb-3">My Goals — Q2 2026</h2>
+          <div class="grid grid-cols-3 gap-4">
+            <!-- Goal 1 -->
+            <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+              <div class="flex items-start justify-between mb-3">
+                <div class="w-9 h-9 bg-blue-50 rounded-lg flex items-center justify-center">
+                  <svg class="w-4.5 h-4.5 w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
+                </div>
+                <span class="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium">In Progress</span>
+              </div>
+              <h3 class="font-semibold text-slate-900 text-sm mb-1">Complete HRMS Module Rollout</h3>
+              <p class="text-xs text-slate-500 mb-4">Deploy all 8 modules of HRPanel v3 to production with full QA sign-off.</p>
+              <div class="mb-1 flex items-center justify-between">
+                <span class="text-xs text-slate-500">Progress</span>
+                <span class="text-xs font-bold text-slate-900">75%</span>
+              </div>
+              <div class="w-full bg-slate-100 rounded-full h-2 mb-3">
+                <div class="bg-blue-500 h-2 rounded-full transition-all" style="width: 75%"></div>
+              </div>
+              <div class="flex items-center justify-between text-xs text-slate-400">
+                <span class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                  Due Jun 30, 2026
+                </span>
+                <span>Personal</span>
+              </div>
+            </div>
+
+            <!-- Goal 2 -->
+            <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+              <div class="flex items-start justify-between mb-3">
+                <div class="w-9 h-9 bg-emerald-50 rounded-lg flex items-center justify-center">
+                  <svg class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                </div>
+                <span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium">On Track</span>
+              </div>
+              <h3 class="font-semibold text-slate-900 text-sm mb-1">Hire 10 Engineers in Q2</h3>
+              <p class="text-xs text-slate-500 mb-4">Close 10 open engineering positions to support the product roadmap.</p>
+              <div class="mb-1 flex items-center justify-between">
+                <span class="text-xs text-slate-500">Progress</span>
+                <span class="text-xs font-bold text-slate-900">6 / 10</span>
+              </div>
+              <div class="w-full bg-slate-100 rounded-full h-2 mb-3">
+                <div class="bg-emerald-500 h-2 rounded-full transition-all" style="width: 60%"></div>
+              </div>
+              <div class="flex items-center justify-between text-xs text-slate-400">
+                <span class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                  Due Jun 30, 2026
+                </span>
+                <span>Team OKR</span>
+              </div>
+            </div>
+
+            <!-- Goal 3 -->
+            <div class="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-md transition-shadow">
+              <div class="flex items-start justify-between mb-3">
+                <div class="w-9 h-9 bg-amber-50 rounded-lg flex items-center justify-center">
+                  <svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
+                </div>
+                <span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium">Behind</span>
+              </div>
+              <h3 class="font-semibold text-slate-900 text-sm mb-1">Complete HR Certification</h3>
+              <p class="text-xs text-slate-500 mb-4">Obtain SHRM-SCP certification by end of Q2 to advance HR leadership skills.</p>
+              <div class="mb-1 flex items-center justify-between">
+                <span class="text-xs text-slate-500">Progress</span>
+                <span class="text-xs font-bold text-slate-900">30%</span>
+              </div>
+              <div class="w-full bg-slate-100 rounded-full h-2 mb-3">
+                <div class="bg-amber-500 h-2 rounded-full transition-all" style="width: 30%"></div>
+              </div>
+              <div class="flex items-center justify-between text-xs text-slate-400">
+                <span class="flex items-center gap-1">
+                  <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                  Due May 31, 2026
+                </span>
+                <span>Personal</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Team Reviews -->
+        <div>
+          <div class="flex items-center justify-between mb-3">
+            <h2 class="text-base font-semibold text-slate-900">Team Performance Reviews — Q1 2026</h2>
+            <button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">
+              Start New Review Cycle
+            </button>
+          </div>
+          <div class="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
+            <table class="w-full">
+              <thead>
+                <tr class="bg-slate-50 border-b border-slate-100">
+                  <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-5 py-3">Employee</th>
+                  <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Department</th>
+                  <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Last Review</th>
+                  <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Rating</th>
+                  <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Status</th>
+                  <th class="text-left text-xs font-semibold text-slate-500 uppercase tracking-wide px-4 py-3">Actions</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-slate-50">
+                <tr class="hover:bg-slate-50 transition-colors">
+                  <td class="px-5 py-3.5">
+                    <div class="flex items-center gap-3">
+                      <img src="https://ui-avatars.com/api/?name=James+Liu&background=7C3AED&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                      <div>
+                        <p class="text-sm font-medium text-slate-900">James Liu</p>
+                        <p class="text-xs text-slate-500">Senior Engineer</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-4 py-3.5 text-sm text-slate-600">Engineering</td>
+                  <td class="px-4 py-3.5 text-sm text-slate-600">Mar 30, 2026</td>
+                  <td class="px-4 py-3.5">
+                    <div class="flex items-center gap-0.5">
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <span class="text-xs text-slate-500 ml-1">5.0</span>
+                    </div>
+                  </td>
+                  <td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Completed</span></td>
+                  <td class="px-4 py-3.5"><button class="text-xs font-medium text-blue-600 hover:text-blue-700">View Review</button></td>
+                </tr>
+                <tr class="hover:bg-slate-50 transition-colors">
+                  <td class="px-5 py-3.5">
+                    <div class="flex items-center gap-3">
+                      <img src="https://ui-avatars.com/api/?name=Elena+Vasquez&background=BE185D&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                      <div>
+                        <p class="text-sm font-medium text-slate-900">Elena Vasquez</p>
+                        <p class="text-xs text-slate-500">UX Designer</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-4 py-3.5 text-sm text-slate-600">Design</td>
+                  <td class="px-4 py-3.5 text-sm text-slate-600">Mar 28, 2026</td>
+                  <td class="px-4 py-3.5">
+                    <div class="flex items-center gap-0.5">
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <svg class="w-4 h-4 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <svg class="w-4 h-4 text-slate-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
+                      <span class="text-xs text-slate-500 ml-1">4.0</span>
+                    </div>
+                  </td>
+                  <td class="px-4 py-3.5"><span class="text-xs bg-emerald-50 text-emerald-700 px-2 py-0.5 rounded-full font-medium border border-emerald-100">Completed</span></td>
+                  <td class="px-4 py-3.5"><button class="text-xs font-medium text-blue-600 hover:text-blue-700">View Review</button></td>
+                </tr>
+                <tr class="hover:bg-slate-50 transition-colors">
+                  <td class="px-5 py-3.5">
+                    <div class="flex items-center gap-3">
+                      <img src="https://ui-avatars.com/api/?name=David+Kim&background=0891B2&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                      <div>
+                        <p class="text-sm font-medium text-slate-900">David Kim</p>
+                        <p class="text-xs text-slate-500">DevOps Engineer</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-4 py-3.5 text-sm text-slate-600">Engineering</td>
+                  <td class="px-4 py-3.5 text-sm text-slate-400">Not reviewed</td>
+                  <td class="px-4 py-3.5 text-xs text-slate-400">—</td>
+                  <td class="px-4 py-3.5"><span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium border border-amber-100">Pending</span></td>
+                  <td class="px-4 py-3.5"><button class="text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 px-2.5 py-1 rounded-lg transition-colors">Start Review</button></td>
+                </tr>
+                <tr class="hover:bg-slate-50 transition-colors">
+                  <td class="px-5 py-3.5">
+                    <div class="flex items-center gap-3">
+                      <img src="https://ui-avatars.com/api/?name=Rachel+Park&background=6D28D9&color=fff&size=64" class="w-8 h-8 rounded-full" />
+                      <div>
+                        <p class="text-sm font-medium text-slate-900">Rachel Park</p>
+                        <p class="text-xs text-slate-500">Product Designer</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-4 py-3.5 text-sm text-slate-600">Design</td>
+                  <td class="px-4 py-3.5 text-sm text-slate-400">Not reviewed</td>
+                  <td class="px-4 py-3.5 text-xs text-slate-400">—</td>
+                  <td class="px-4 py-3.5"><span class="text-xs bg-amber-50 text-amber-700 px-2 py-0.5 rounded-full font-medium border border-amber-100">Pending</span></td>
+                  <td class="px-4 py-3.5"><button class="text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 px-2.5 py-1 rounded-lg transition-colors">Start Review</button></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/11-reports.html

@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Reports</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Recruitment</a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+          Reports
+        </a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Settings</a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <div class="relative">
+          <svg class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          <input type="text" placeholder="Search reports..." class="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm w-72 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+        </div>
+        <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <span class="text-sm font-medium text-slate-900">Sarah Chen</span>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6 space-y-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-xl font-bold text-slate-900">Reports &amp; Analytics</h1>
+            <p class="text-sm text-slate-500 mt-0.5">Workforce, leave, and payroll analytics at a glance</p>
+          </div>
+          <select class="px-3 py-2 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none bg-white">
+            <option>Last 12 months</option>
+            <option>Last 6 months</option>
+            <option>This year</option>
+          </select>
+        </div>
+
+        <!-- Section 1: Workforce Analytics -->
+        <div class="bg-white rounded-xl border border-slate-200 p-6 hover:shadow-md transition-shadow">
+          <div class="flex items-center justify-between mb-5">
+            <div>
+              <h2 class="font-semibold text-slate-900 text-base">Workforce Analytics</h2>
+              <p class="text-xs text-slate-500 mt-0.5">Headcount, turnover, and department distribution</p>
+            </div>
+            <div class="flex items-center gap-2">
+              <button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+                Export CSV
+              </button>
+              <button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+                Export PDF
+              </button>
+            </div>
+          </div>
+          <div class="grid grid-cols-4 gap-4 mb-5">
+            <div class="bg-blue-50 rounded-lg p-3.5">
+              <p class="text-xl font-bold text-blue-700">142</p>
+              <p class="text-xs text-blue-600">Total Headcount</p>
+              <p class="text-xs text-slate-500 mt-0.5">+12 from last year</p>
+            </div>
+            <div class="bg-emerald-50 rounded-lg p-3.5">
+              <p class="text-xl font-bold text-emerald-700">4.2%</p>
+              <p class="text-xs text-emerald-600">Annual Turnover</p>
+              <p class="text-xs text-slate-500 mt-0.5">Industry avg: 12%</p>
+            </div>
+            <div class="bg-violet-50 rounded-lg p-3.5">
+              <p class="text-xl font-bold text-violet-700">8.3</p>
+              <p class="text-xs text-violet-600">Avg Tenure (yrs)</p>
+              <p class="text-xs text-slate-500 mt-0.5">+0.5 vs last year</p>
+            </div>
+            <div class="bg-amber-50 rounded-lg p-3.5">
+              <p class="text-xl font-bold text-amber-700">23</p>
+              <p class="text-xs text-amber-600">New Hires (YTD)</p>
+              <p class="text-xs text-slate-500 mt-0.5">Target: 30</p>
+            </div>
+          </div>
+          <!-- Headcount chart (bar) -->
+          <div>
+            <p class="text-xs text-slate-500 font-medium mb-3 uppercase tracking-wide">Monthly Headcount</p>
+            <div class="flex items-end justify-between gap-1.5 h-32">
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:90px;background:#BFDBFE;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Jun</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:95px;background:#BFDBFE;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Jul</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:98px;background:#BFDBFE;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Aug</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:100px;background:#BFDBFE;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Sep</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:104px;background:#93C5FD;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Oct</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:108px;background:#93C5FD;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Nov</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:110px;background:#93C5FD;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Dec</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:112px;background:#60A5FA;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Jan</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:116px;background:#60A5FA;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Feb</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:120px;background:#3B82F6;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Mar</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:124px;background:#3B82F6;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">Apr</span>
+              </div>
+              <div class="flex-1 flex flex-col items-center gap-1">
+                <div class="w-full rounded-t" style="height:128px;background:#2563EB;border-radius:4px 4px 0 0;"></div>
+                <span class="text-xs text-slate-400">May</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Section 2: Leave Analytics -->
+        <div class="bg-white rounded-xl border border-slate-200 p-6 hover:shadow-md transition-shadow">
+          <div class="flex items-center justify-between mb-5">
+            <div>
+              <h2 class="font-semibold text-slate-900 text-base">Leave Analytics</h2>
+              <p class="text-xs text-slate-500 mt-0.5">Leave utilization, types, and approval rates</p>
+            </div>
+            <button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 hover:bg-slate-50">
+              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+              Export Report
+            </button>
+          </div>
+          <div class="grid grid-cols-2 gap-6">
+            <div>
+              <p class="text-xs text-slate-500 font-medium mb-3 uppercase tracking-wide">Leave by Type (YTD)</p>
+              <!-- Horizontal bar chart -->
+              <div class="space-y-3">
+                <div>
+                  <div class="flex items-center justify-between text-xs mb-1">
+                    <span class="text-slate-600">Annual Leave</span>
+                    <span class="font-medium text-slate-900">148 days</span>
+                  </div>
+                  <div class="w-full bg-slate-100 rounded-full h-2">
+                    <div class="bg-blue-500 h-2 rounded-full" style="width: 80%"></div>
+                  </div>
+                </div>
+                <div>
+                  <div class="flex items-center justify-between text-xs mb-1">
+                    <span class="text-slate-600">Sick Leave</span>
+                    <span class="font-medium text-slate-900">64 days</span>
+                  </div>
+                  <div class="w-full bg-slate-100 rounded-full h-2">
+                    <div class="bg-rose-400 h-2 rounded-full" style="width: 35%"></div>
+                  </div>
+                </div>
+                <div>
+                  <div class="flex items-center justify-between text-xs mb-1">
+                    <span class="text-slate-600">Personal Leave</span>
+                    <span class="font-medium text-slate-900">31 days</span>
+                  </div>
+                  <div class="w-full bg-slate-100 rounded-full h-2">
+                    <div class="bg-violet-400 h-2 rounded-full" style="width: 17%"></div>
+                  </div>
+                </div>
+                <div>
+                  <div class="flex items-center justify-between text-xs mb-1">
+                    <span class="text-slate-600">Maternity/Paternity</span>
+                    <span class="font-medium text-slate-900">90 days</span>
+                  </div>
+                  <div class="w-full bg-slate-100 rounded-full h-2">
+                    <div class="bg-pink-400 h-2 rounded-full" style="width: 49%"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="grid grid-cols-2 gap-3 content-start">
+              <div class="bg-blue-50 rounded-xl p-4">
+                <p class="text-xl font-bold text-blue-700">94%</p>
+                <p class="text-xs text-blue-600 mt-0.5">Approval Rate</p>
+              </div>
+              <div class="bg-emerald-50 rounded-xl p-4">
+                <p class="text-xl font-bold text-emerald-700">2.3</p>
+                <p class="text-xs text-emerald-600 mt-0.5">Avg Days per Request</p>
+              </div>
+              <div class="bg-amber-50 rounded-xl p-4">
+                <p class="text-xl font-bold text-amber-700">3.4h</p>
+                <p class="text-xs text-amber-600 mt-0.5">Avg Approval Time</p>
+              </div>
+              <div class="bg-slate-50 rounded-xl p-4">
+                <p class="text-xl font-bold text-slate-700">333</p>
+                <p class="text-xs text-slate-600 mt-0.5">Total Days Taken</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Section 3: Payroll Analytics -->
+        <div class="bg-white rounded-xl border border-slate-200 p-6 hover:shadow-md transition-shadow">
+          <div class="flex items-center justify-between mb-5">
+            <div>
+              <h2 class="font-semibold text-slate-900 text-base">Payroll Analytics</h2>
+              <p class="text-xs text-slate-500 mt-0.5">Monthly salary trends and cost distribution by department</p>
+            </div>
+            <button class="flex items-center gap-2 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 hover:bg-slate-50">
+              <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+              Export Report
+            </button>
+          </div>
+          <div class="grid grid-cols-3 gap-4 mb-5">
+            <div class="bg-emerald-50 rounded-xl p-4">
+              <p class="text-xl font-bold text-emerald-700">$284.5K</p>
+              <p class="text-xs text-emerald-600 mt-0.5">May 2026 Net</p>
+              <p class="text-xs text-slate-500 mt-1">+2.1% MoM</p>
+            </div>
+            <div class="bg-blue-50 rounded-xl p-4">
+              <p class="text-xl font-bold text-blue-700">$342.2K</p>
+              <p class="text-xs text-blue-600 mt-0.5">May 2026 Gross</p>
+              <p class="text-xs text-slate-500 mt-1">Includes benefits</p>
+            </div>
+            <div class="bg-violet-50 rounded-xl p-4">
+              <p class="text-xl font-bold text-violet-700">$2,003</p>
+              <p class="text-xs text-violet-600 mt-0.5">Avg Net Salary</p>
+              <p class="text-xs text-slate-500 mt-1">Per employee</p>
+            </div>
+          </div>
+          <!-- Payroll cost by dept (horizontal bars) -->
+          <p class="text-xs text-slate-500 font-medium mb-3 uppercase tracking-wide">Payroll Cost by Department</p>
+          <div class="space-y-3">
+            <div>
+              <div class="flex items-center justify-between text-xs mb-1">
+                <span class="text-slate-600">Engineering</span>
+                <span class="font-semibold text-slate-900">$142,300 <span class="text-slate-400 font-normal">(50%)</span></span>
+              </div>
+              <div class="w-full bg-slate-100 rounded-full h-2.5">
+                <div class="bg-blue-500 h-2.5 rounded-full" style="width: 50%"></div>
+              </div>
+            </div>
+            <div>
+              <div class="flex items-center justify-between text-xs mb-1">
+                <span class="text-slate-600">Sales</span>
+                <span class="font-semibold text-slate-900">$56,900 <span class="text-slate-400 font-normal">(20%)</span></span>
+              </div>
+              <div class="w-full bg-slate-100 rounded-full h-2.5">
+                <div class="bg-emerald-500 h-2.5 rounded-full" style="width: 20%"></div>
+              </div>
+            </div>
+            <div>
+              <div class="flex items-center justify-between text-xs mb-1">
+                <span class="text-slate-600">Product &amp; Design</span>
+                <span class="font-semibold text-slate-900">$42,675 <span class="text-slate-400 font-normal">(15%)</span></span>
+              </div>
+              <div class="w-full bg-slate-100 rounded-full h-2.5">
+                <div class="bg-violet-500 h-2.5 rounded-full" style="width: 15%"></div>
+              </div>
+            </div>
+            <div>
+              <div class="flex items-center justify-between text-xs mb-1">
+                <span class="text-slate-600">Operations &amp; HR</span>
+                <span class="font-semibold text-slate-900">$28,450 <span class="text-slate-400 font-normal">(10%)</span></span>
+              </div>
+              <div class="w-full bg-slate-100 rounded-full h-2.5">
+                <div class="bg-amber-500 h-2.5 rounded-full" style="width: 10%"></div>
+              </div>
+            </div>
+            <div>
+              <div class="flex items-center justify-between text-xs mb-1">
+                <span class="text-slate-600">Finance &amp; Marketing</span>
+                <span class="font-semibold text-slate-900">$14,175 <span class="text-slate-400 font-normal">(5%)</span></span>
+              </div>
+              <div class="w-full bg-slate-100 rounded-full h-2.5">
+                <div class="bg-rose-400 h-2.5 rounded-full" style="width: 5%"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/12-settings.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Settings</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>body { font-family: 'Inter', sans-serif; }</style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <div class="flex h-screen overflow-hidden">
+    <aside class="w-64 flex-shrink-0 bg-white border-r border-slate-200 flex flex-col h-screen overflow-y-auto">
+      <div class="h-16 flex items-center px-5 border-b border-slate-100">
+        <div class="flex items-center gap-2.5">
+          <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          </div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded">v3</span>
+        </div>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5">
+        <a href="02-dashboard.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Dashboard</a>
+        <a href="03-employees.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Employees</a>
+        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Departments</a>
+        <a href="05-leave-management.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Leave</a>
+        <a href="06-attendance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Attendance</a>
+        <a href="07-payroll.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Payroll</a>
+        <a href="08-recruitment.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Recruitment</a>
+        <a href="10-performance.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Performance</a>
+        <a href="11-reports.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Reports</a>
+        <div class="pt-2 pb-1"><div class="h-px bg-slate-100"></div></div>
+        <a href="12-settings.html" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+          Settings
+        </a>
+      </nav>
+      <div class="px-3 py-4 border-t border-slate-100">
+        <div class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-slate-50 cursor-pointer">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-slate-900 truncate">Sarah Chen</p>
+            <p class="text-xs text-slate-500 truncate">HR Administrator</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col overflow-hidden">
+      <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6 flex-shrink-0">
+        <h1 class="text-base font-semibold text-slate-900">Settings</h1>
+        <div class="flex items-center gap-2.5 cursor-pointer hover:bg-slate-50 rounded-lg px-2 py-1.5">
+          <img src="https://ui-avatars.com/api/?name=Sarah+Chen&background=2563EB&color=fff&size=128" class="w-8 h-8 rounded-full" />
+          <span class="text-sm font-medium text-slate-900">Sarah Chen</span>
+        </div>
+      </header>
+
+      <main class="flex-1 overflow-y-auto p-6">
+        <div class="flex gap-6 max-w-5xl">
+          <!-- Settings sidebar nav -->
+          <div class="w-52 flex-shrink-0">
+            <nav class="space-y-0.5">
+              <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium bg-blue-50 text-blue-600">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5" /></svg>
+                Company Profile
+              </a>
+              <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                Work Schedule
+              </a>
+              <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
+                Holiday Calendar
+              </a>
+              <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" /></svg>
+                Leave Types
+              </a>
+              <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+                Notifications
+              </a>
+              <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
+                Roles &amp; Permissions
+              </a>
+              <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7" /></svg>
+                Integrations
+              </a>
+              <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+                Billing
+              </a>
+            </nav>
+          </div>
+
+          <!-- Settings content -->
+          <div class="flex-1">
+            <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
+              <div class="px-6 py-4 border-b border-slate-100">
+                <h2 class="font-semibold text-slate-900 text-base">Company Profile</h2>
+                <p class="text-xs text-slate-500 mt-0.5">Manage your organization's core information</p>
+              </div>
+
+              <div class="p-6 space-y-6">
+                <!-- Logo upload -->
+                <div>
+                  <label class="block text-sm font-medium text-slate-700 mb-2">Company Logo</label>
+                  <div class="flex items-center gap-4">
+                    <div class="w-16 h-16 bg-blue-600 rounded-xl flex items-center justify-center">
+                      <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+                    </div>
+                    <div>
+                      <div class="flex items-center gap-2">
+                        <button class="text-sm font-medium text-blue-600 hover:text-blue-700 px-3 py-1.5 border border-blue-200 rounded-lg hover:bg-blue-50 transition-colors">
+                          Upload Logo
+                        </button>
+                        <button class="text-sm font-medium text-slate-500 hover:text-slate-700 px-3 py-1.5 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors">
+                          Remove
+                        </button>
+                      </div>
+                      <p class="text-xs text-slate-400 mt-1.5">PNG, JPG up to 2MB. Recommended: 256×256px.</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="h-px bg-slate-100"></div>
+
+                <!-- Form fields -->
+                <div class="grid grid-cols-2 gap-4">
+                  <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Company Name</label>
+                    <input type="text" value="HRPanel Technologies Inc." class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Industry</label>
+                    <select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+                      <option selected>Technology / Software</option>
+                      <option>Healthcare</option>
+                      <option>Finance</option>
+                      <option>Retail</option>
+                      <option>Manufacturing</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Company Size</label>
+                    <select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+                      <option>1–50</option>
+                      <option selected>51–200</option>
+                      <option>201–500</option>
+                      <option>500+</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Time Zone</label>
+                    <select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+                      <option selected>America/Los_Angeles (UTC-7)</option>
+                      <option>America/New_York (UTC-4)</option>
+                      <option>Europe/London (UTC+1)</option>
+                      <option>Asia/Kolkata (UTC+5:30)</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Currency</label>
+                    <select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+                      <option selected>USD — US Dollar ($)</option>
+                      <option>EUR — Euro (€)</option>
+                      <option>GBP — British Pound (£)</option>
+                      <option>INR — Indian Rupee (₹)</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Fiscal Year Start</label>
+                    <select class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white">
+                      <option selected>January</option>
+                      <option>April</option>
+                      <option>July</option>
+                      <option>October</option>
+                    </select>
+                  </div>
+                  <div class="col-span-2">
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Registered Address</label>
+                    <input type="text" value="1 Infinite Loop, Cupertino, CA 95014, United States" class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Work Email Domain</label>
+                    <div class="relative">
+                      <span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">@</span>
+                      <input type="text" value="hrpanel.com" class="w-full pl-7 pr-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
+                    </div>
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Support Email</label>
+                    <input type="email" value="hr@hrpanel.com" class="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
+                  </div>
+                </div>
+
+                <div class="h-px bg-slate-100"></div>
+
+                <div class="flex items-center justify-between">
+                  <p class="text-xs text-slate-500">Last updated: May 1, 2026 by Sarah Chen</p>
+                  <div class="flex items-center gap-3">
+                    <button class="px-4 py-2 text-sm font-medium text-slate-600 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors">
+                      Cancel
+                    </button>
+                    <button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition-colors">
+                      Save Changes
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

designs/index.html

@@ -0,0 +1,655 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HRPanel v3 — Design Gallery</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+  <style>
+    body { font-family: 'Inter', sans-serif; }
+    .page-card:hover .page-arrow { opacity: 1; transform: translateX(0); }
+    .page-arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; }
+  </style>
+</head>
+<body class="bg-slate-50 min-h-screen">
+  <!-- Header -->
+  <header class="bg-white border-b border-slate-200 sticky top-0 z-10">
+    <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
+          <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        </div>
+        <div>
+          <span class="font-bold text-slate-900 text-base">HRPanel</span>
+          <span class="text-xs bg-blue-100 text-blue-600 font-semibold px-1.5 py-0.5 rounded ml-1.5">v3</span>
+        </div>
+      </div>
+      <div class="flex items-center gap-3">
+        <span class="text-sm text-slate-500">Design Mockups</span>
+        <span class="w-1 h-1 rounded-full bg-slate-300"></span>
+        <span class="text-sm font-medium text-slate-700">13 screens</span>
+      </div>
+    </div>
+  </header>
+
+  <!-- Hero -->
+  <div class="bg-white border-b border-slate-200">
+    <div class="max-w-6xl mx-auto px-6 py-12">
+      <div class="flex items-start justify-between">
+        <div>
+          <div class="flex items-center gap-2 mb-3">
+            <span class="text-xs font-semibold text-blue-600 bg-blue-50 px-2.5 py-1 rounded-full uppercase tracking-wide">Design Review</span>
+          </div>
+          <h1 class="text-3xl font-bold text-slate-900 mb-2">HRPanel v3 — Design Mockups</h1>
+          <p class="text-slate-500 text-base max-w-xl">
+            Full HRMS design system with 13 polished screens. Clean all-light theme inspired by BambooHR and Rippling. Click any card to preview the mockup.
+          </p>
+        </div>
+        <div class="hidden md:flex items-center gap-3">
+          <div class="text-center">
+            <p class="text-2xl font-bold text-slate-900">13</p>
+            <p class="text-xs text-slate-500">Screens</p>
+          </div>
+          <div class="w-px h-8 bg-slate-200"></div>
+          <div class="text-center">
+            <p class="text-2xl font-bold text-slate-900">9</p>
+            <p class="text-xs text-slate-500">Modules</p>
+          </div>
+          <div class="w-px h-8 bg-slate-200"></div>
+          <div class="text-center">
+            <p class="text-2xl font-bold text-blue-600">100%</p>
+            <p class="text-xs text-slate-500">Responsive</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Design system preview -->
+      <div class="mt-8 flex items-center gap-6">
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Colors</span>
+          <div class="flex gap-1.5">
+            <div class="w-5 h-5 rounded-md bg-blue-600" title="Primary"></div>
+            <div class="w-5 h-5 rounded-md bg-blue-100" title="Primary Light"></div>
+            <div class="w-5 h-5 rounded-md bg-emerald-500" title="Success"></div>
+            <div class="w-5 h-5 rounded-md bg-amber-500" title="Warning"></div>
+            <div class="w-5 h-5 rounded-md bg-red-500" title="Danger"></div>
+            <div class="w-5 h-5 rounded-md bg-slate-900" title="Text Primary"></div>
+            <div class="w-5 h-5 rounded-md bg-slate-400" title="Text Secondary"></div>
+            <div class="w-5 h-5 rounded-md bg-slate-100 border border-slate-200" title="Surface"></div>
+          </div>
+        </div>
+        <div class="w-px h-4 bg-slate-200"></div>
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Font</span>
+          <span class="text-sm font-medium text-slate-900">Inter</span>
+        </div>
+        <div class="w-px h-4 bg-slate-200"></div>
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-slate-500 font-medium uppercase tracking-wide">Framework</span>
+          <span class="text-sm font-medium text-slate-900">Tailwind CSS</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Gallery grid -->
+  <div class="max-w-6xl mx-auto px-6 py-10">
+    <div class="grid grid-cols-3 gap-5">
+
+      <!-- 01 Login -->
+      <a href="01-login.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-gradient-to-br from-blue-600 to-blue-700 relative overflow-hidden flex items-center justify-center">
+          <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(circle, white 1px, transparent 1px); background-size: 20px 20px;"></div>
+          <div class="bg-white/90 backdrop-blur rounded-xl p-4 shadow-lg w-32">
+            <div class="w-6 h-1.5 bg-blue-600 rounded mb-2"></div>
+            <div class="w-full h-2 bg-slate-200 rounded mb-1.5"></div>
+            <div class="w-full h-2 bg-slate-200 rounded mb-2"></div>
+            <div class="w-full h-5 bg-blue-600 rounded"></div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">01</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Login</h3>
+              </div>
+              <p class="text-xs text-slate-500">Split-panel auth screen with brand identity</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Auth</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">No sidebar</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 02 Dashboard -->
+      <a href="02-dashboard.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden flex items-end justify-center p-3 gap-1.5">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16 flex gap-1.5 items-end">
+            <div class="w-8 h-14 bg-blue-200 rounded-t-md"></div>
+            <div class="w-8 h-10 bg-blue-400 rounded-t-md"></div>
+            <div class="w-8 h-16 bg-blue-600 rounded-t-md"></div>
+            <div class="w-8 h-12 bg-blue-300 rounded-t-md"></div>
+            <div class="flex flex-col gap-1 ml-3">
+              <div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
+              <div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
+              <div class="w-16 h-3 bg-white rounded border border-slate-200"></div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">02</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Dashboard</h3>
+              </div>
+              <p class="text-xs text-slate-500">KPIs, attendance chart, leave requests, quick actions</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full font-medium">Active</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Analytics</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 03 Employees -->
+      <a href="03-employees.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4 flex gap-2 flex-wrap">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16 flex gap-2 flex-wrap content-start">
+            <div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
+              <div class="w-7 h-7 rounded-full bg-blue-400"></div>
+              <div class="w-12 h-1.5 bg-slate-200 rounded"></div>
+              <div class="w-9 h-1 bg-slate-100 rounded"></div>
+            </div>
+            <div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
+              <div class="w-7 h-7 rounded-full bg-violet-400"></div>
+              <div class="w-12 h-1.5 bg-slate-200 rounded"></div>
+              <div class="w-9 h-1 bg-slate-100 rounded"></div>
+            </div>
+            <div class="w-20 h-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
+              <div class="w-7 h-7 rounded-full bg-emerald-400"></div>
+              <div class="w-12 h-1.5 bg-slate-200 rounded"></div>
+              <div class="w-9 h-1 bg-slate-100 rounded"></div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">03</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Employee Directory</h3>
+              </div>
+              <p class="text-xs text-slate-500">Card grid with filters, search, and status badges</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Card Grid</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Pagination</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 04 Employee Profile -->
+      <a href="04-employee-profile.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16 flex gap-3">
+            <div class="w-20 bg-white rounded-xl border border-slate-200 p-2 flex flex-col items-center gap-1">
+              <div class="w-8 h-8 rounded-full bg-blue-500"></div>
+              <div class="w-12 h-1.5 bg-slate-200 rounded mt-1"></div>
+              <div class="w-9 h-1 bg-slate-100 rounded"></div>
+              <div class="w-full h-4 bg-emerald-100 rounded mt-1"></div>
+            </div>
+            <div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
+              <div class="flex gap-1.5 mb-2 border-b border-slate-100 pb-1.5">
+                <div class="w-10 h-2.5 bg-blue-600 rounded"></div>
+                <div class="w-8 h-2.5 bg-slate-100 rounded"></div>
+                <div class="w-10 h-2.5 bg-slate-100 rounded"></div>
+              </div>
+              <div class="space-y-1">
+                <div class="w-full h-2 bg-slate-100 rounded"></div>
+                <div class="w-full h-2 bg-slate-100 rounded"></div>
+                <div class="w-3/4 h-2 bg-slate-100 rounded"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">04</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Employee Profile</h3>
+              </div>
+              <p class="text-xs text-slate-500">Tabbed profile with personal, job, and payroll info</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Tabs</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Detail View</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 05 Leave Management -->
+      <a href="05-leave-management.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16">
+            <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
+              <div class="flex gap-2 px-3 py-2 border-b border-slate-100">
+                <div class="w-8 h-2 bg-blue-600 rounded"></div>
+                <div class="w-8 h-2 bg-slate-100 rounded"></div>
+                <div class="w-8 h-2 bg-slate-100 rounded"></div>
+              </div>
+              <div class="px-3 py-1.5 space-y-1.5">
+                <div class="flex items-center gap-2">
+                  <div class="w-4 h-4 rounded-full bg-violet-300 flex-shrink-0"></div>
+                  <div class="flex-1 h-2 bg-slate-100 rounded"></div>
+                  <div class="w-8 h-2 bg-amber-100 rounded"></div>
+                  <div class="flex gap-1">
+                    <div class="w-5 h-3 bg-emerald-100 rounded"></div>
+                    <div class="w-5 h-3 bg-red-100 rounded"></div>
+                  </div>
+                </div>
+                <div class="flex items-center gap-2">
+                  <div class="w-4 h-4 rounded-full bg-emerald-300 flex-shrink-0"></div>
+                  <div class="flex-1 h-2 bg-slate-100 rounded"></div>
+                  <div class="w-8 h-2 bg-emerald-100 rounded"></div>
+                  <div class="w-10 h-3 bg-slate-100 rounded"></div>
+                </div>
+                <div class="flex items-center gap-2">
+                  <div class="w-4 h-4 rounded-full bg-blue-300 flex-shrink-0"></div>
+                  <div class="flex-1 h-2 bg-slate-100 rounded"></div>
+                  <div class="w-8 h-2 bg-red-100 rounded"></div>
+                  <div class="w-10 h-3 bg-slate-100 rounded"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">05</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Leave Management</h3>
+              </div>
+              <p class="text-xs text-slate-500">Admin view of leave requests with approve/reject</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Table</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Filters</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 06 Attendance -->
+      <a href="06-attendance.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16">
+            <div class="bg-white rounded-xl border border-slate-200 p-2">
+              <div class="grid grid-cols-7 gap-0.5">
+                <div class="h-4 bg-slate-100 rounded-sm"></div>
+                <div class="h-4 bg-emerald-200 rounded-sm"></div>
+                <div class="h-4 bg-emerald-200 rounded-sm"></div>
+                <div class="h-4 bg-red-200 rounded-sm"></div>
+                <div class="h-4 bg-amber-200 rounded-sm"></div>
+                <div class="h-4 bg-slate-100 rounded-sm"></div>
+                <div class="h-4 bg-slate-100 rounded-sm"></div>
+                <div class="h-4 bg-emerald-300 rounded-sm"></div>
+                <div class="h-4 bg-emerald-300 rounded-sm"></div>
+                <div class="h-4 bg-emerald-300 rounded-sm"></div>
+                <div class="h-4 bg-emerald-300 rounded-sm"></div>
+                <div class="h-4 bg-blue-400 rounded-sm ring-2 ring-blue-500"></div>
+                <div class="h-4 bg-slate-100 rounded-sm"></div>
+                <div class="h-4 bg-slate-100 rounded-sm"></div>
+                <div class="h-4 bg-blue-200 rounded-sm"></div>
+                <div class="h-4 bg-blue-200 rounded-sm"></div>
+                <div class="h-4 bg-blue-200 rounded-sm"></div>
+                <div class="h-4 bg-slate-50 rounded-sm"></div>
+                <div class="h-4 bg-slate-50 rounded-sm"></div>
+                <div class="h-4 bg-slate-100 rounded-sm"></div>
+                <div class="h-4 bg-slate-100 rounded-sm"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">06</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Attendance</h3>
+              </div>
+              <p class="text-xs text-slate-500">Monthly calendar view with color-coded statuses</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Calendar</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Clock In/Out</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 07 Payroll -->
+      <a href="07-payroll.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4 flex items-center justify-center">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16 w-full">
+            <div class="flex gap-2 mb-2">
+              <div class="flex-1 h-10 bg-emerald-100 rounded-lg border border-emerald-200 flex items-center justify-center">
+                <div class="w-8 h-2 bg-emerald-400 rounded"></div>
+              </div>
+              <div class="flex-1 h-10 bg-blue-100 rounded-lg border border-blue-200 flex items-center justify-center">
+                <div class="w-8 h-2 bg-blue-400 rounded"></div>
+              </div>
+              <div class="flex-1 h-10 bg-amber-100 rounded-lg border border-amber-200 flex items-center justify-center">
+                <div class="w-8 h-2 bg-amber-400 rounded"></div>
+              </div>
+            </div>
+            <div class="bg-white rounded-xl border border-slate-200 px-2 py-1.5 space-y-1">
+              <div class="flex gap-2">
+                <div class="w-8 h-2 bg-slate-200 rounded"></div>
+                <div class="flex-1 h-2 bg-slate-100 rounded"></div>
+                <div class="w-8 h-2 bg-emerald-200 rounded"></div>
+              </div>
+              <div class="flex gap-2">
+                <div class="w-8 h-2 bg-slate-200 rounded"></div>
+                <div class="flex-1 h-2 bg-slate-100 rounded"></div>
+                <div class="w-8 h-2 bg-emerald-200 rounded"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">07</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Payroll</h3>
+              </div>
+              <p class="text-xs text-slate-500">Payroll runs history, summaries, and processing</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">History</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Payslips</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 08 Recruitment -->
+      <a href="08-recruitment.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16 space-y-2">
+            <div class="bg-white rounded-xl border border-slate-200 p-2">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-1.5">
+                  <div class="w-5 h-5 rounded-lg bg-violet-100"></div>
+                  <div>
+                    <div class="w-20 h-2 bg-slate-200 rounded mb-1"></div>
+                    <div class="w-12 h-1.5 bg-slate-100 rounded"></div>
+                  </div>
+                </div>
+                <div class="w-8 h-5 bg-emerald-100 rounded-full"></div>
+              </div>
+            </div>
+            <div class="bg-white rounded-xl border border-slate-200 p-2">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-1.5">
+                  <div class="w-5 h-5 rounded-lg bg-blue-100"></div>
+                  <div>
+                    <div class="w-16 h-2 bg-slate-200 rounded mb-1"></div>
+                    <div class="w-10 h-1.5 bg-slate-100 rounded"></div>
+                  </div>
+                </div>
+                <div class="w-8 h-5 bg-emerald-100 rounded-full"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">08</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Recruitment</h3>
+              </div>
+              <p class="text-xs text-slate-500">Job postings with pipeline progress indicators</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Job Cards</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Pipeline</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 09 Kanban -->
+      <a href="09-recruitment-kanban.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16 flex gap-1.5">
+            <div class="flex-1 space-y-1">
+              <div class="h-2 bg-slate-300 rounded-sm"></div>
+              <div class="h-12 bg-white rounded-lg border border-slate-200 p-1">
+                <div class="flex items-center gap-1 mb-1">
+                  <div class="w-3 h-3 rounded-full bg-blue-300"></div>
+                  <div class="w-8 h-1.5 bg-slate-200 rounded"></div>
+                </div>
+                <div class="w-full h-1 bg-slate-100 rounded"></div>
+              </div>
+            </div>
+            <div class="flex-1 space-y-1">
+              <div class="h-2 bg-blue-200 rounded-sm"></div>
+              <div class="h-12 bg-white rounded-lg border border-blue-200 p-1">
+                <div class="flex items-center gap-1 mb-1">
+                  <div class="w-3 h-3 rounded-full bg-blue-500"></div>
+                  <div class="w-8 h-1.5 bg-slate-200 rounded"></div>
+                </div>
+              </div>
+            </div>
+            <div class="flex-1 space-y-1">
+              <div class="h-2 bg-violet-200 rounded-sm"></div>
+              <div class="h-12 bg-white rounded-lg border border-violet-200 p-1">
+                <div class="flex items-center gap-1 mb-1">
+                  <div class="w-3 h-3 rounded-full bg-violet-500"></div>
+                  <div class="w-8 h-1.5 bg-slate-200 rounded"></div>
+                </div>
+              </div>
+            </div>
+            <div class="flex-1 space-y-1">
+              <div class="h-2 bg-emerald-200 rounded-sm"></div>
+              <div class="h-12 bg-white rounded-lg border border-emerald-200 p-1">
+                <div class="flex items-center gap-1 mb-1">
+                  <div class="w-3 h-3 rounded-full bg-emerald-500"></div>
+                  <div class="w-6 h-1.5 bg-slate-200 rounded"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">09</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Applicant Kanban</h3>
+              </div>
+              <p class="text-xs text-slate-500">5-stage hiring pipeline kanban board</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Kanban</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Drag & Drop</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 10 Performance -->
+      <a href="10-performance.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16 flex gap-2">
+            <div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
+              <div class="w-full h-2 bg-slate-200 rounded mb-2"></div>
+              <div class="w-full bg-slate-100 rounded-full h-1.5 mb-1"><div class="h-1.5 rounded-full bg-blue-500" style="width:75%"></div></div>
+              <div class="w-full bg-slate-100 rounded-full h-1.5 mb-1"><div class="h-1.5 rounded-full bg-emerald-500" style="width:60%"></div></div>
+              <div class="w-full bg-slate-100 rounded-full h-1.5 mb-2"><div class="h-1.5 rounded-full bg-amber-500" style="width:30%"></div></div>
+              <div class="w-8 h-2 bg-blue-100 rounded"></div>
+            </div>
+            <div class="flex-1 bg-white rounded-xl border border-slate-200 p-2">
+              <div class="space-y-1.5">
+                <div class="flex items-center gap-1">
+                  <div class="w-4 h-4 rounded-full bg-violet-200"></div>
+                  <div class="flex-1 h-1.5 bg-slate-100 rounded"></div>
+                  <div class="flex gap-0.5">
+                    <div class="w-2 h-2 text-amber-400">★</div>
+                    <div class="w-2 h-2 text-amber-400">★</div>
+                    <div class="w-2 h-2 text-amber-400">★</div>
+                  </div>
+                </div>
+                <div class="flex items-center gap-1">
+                  <div class="w-4 h-4 rounded-full bg-pink-200"></div>
+                  <div class="flex-1 h-1.5 bg-slate-100 rounded"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">10</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Performance</h3>
+              </div>
+              <p class="text-xs text-slate-500">OKR goals with progress bars and team reviews</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Goals</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Reviews</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 11 Reports -->
+      <a href="11-reports.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16">
+            <div class="bg-white rounded-xl border border-slate-200 p-2">
+              <div class="flex items-end gap-1 h-16">
+                <div class="flex-1 bg-blue-200 rounded-t" style="height:50%"></div>
+                <div class="flex-1 bg-blue-300 rounded-t" style="height:60%"></div>
+                <div class="flex-1 bg-blue-400 rounded-t" style="height:75%"></div>
+                <div class="flex-1 bg-blue-500 rounded-t" style="height:65%"></div>
+                <div class="flex-1 bg-blue-600 rounded-t" style="height:90%"></div>
+                <div class="flex-1 bg-blue-700 rounded-t" style="height:80%"></div>
+                <div class="flex-col justify-end ml-1 space-y-1">
+                  <div class="w-12 h-1.5 bg-blue-100 rounded"></div>
+                  <div class="w-10 h-1.5 bg-emerald-100 rounded"></div>
+                  <div class="w-8 h-1.5 bg-violet-100 rounded"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">11</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Reports</h3>
+              </div>
+              <p class="text-xs text-slate-500">Workforce, leave, and payroll analytics dashboards</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Charts</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Analytics</span>
+          </div>
+        </div>
+      </a>
+
+      <!-- 12 Settings -->
+      <a href="12-settings.html" class="page-card bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-lg transition-all hover:border-blue-200 group block">
+        <div class="h-36 bg-slate-50 relative overflow-hidden p-4">
+          <div class="w-14 h-full bg-white border-r border-slate-200 absolute left-0 top-0"></div>
+          <div class="ml-16 flex gap-2">
+            <div class="w-24 bg-white rounded-xl border border-slate-200 p-2 space-y-1">
+              <div class="w-full h-2 bg-blue-200 rounded"></div>
+              <div class="w-full h-2 bg-slate-100 rounded"></div>
+              <div class="w-full h-2 bg-slate-100 rounded"></div>
+              <div class="w-full h-2 bg-slate-100 rounded"></div>
+            </div>
+            <div class="flex-1 bg-white rounded-xl border border-slate-200 p-2 space-y-1.5">
+              <div class="w-full h-8 bg-slate-50 border border-slate-200 rounded-lg p-1.5">
+                <div class="flex items-center gap-1">
+                  <div class="w-5 h-5 bg-blue-600 rounded-md flex-shrink-0"></div>
+                  <div class="w-12 h-2 bg-slate-200 rounded"></div>
+                </div>
+              </div>
+              <div class="grid grid-cols-2 gap-1">
+                <div class="h-5 bg-slate-50 border border-slate-200 rounded"></div>
+                <div class="h-5 bg-slate-50 border border-slate-200 rounded"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="p-4">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="flex items-center gap-2 mb-1">
+                <span class="text-xs font-semibold text-slate-400">12</span>
+                <h3 class="font-semibold text-slate-900 text-sm group-hover:text-blue-600 transition-colors">Settings</h3>
+              </div>
+              <p class="text-xs text-slate-500">Company profile, work schedule, and system config</p>
+            </div>
+            <svg class="w-4 h-4 text-blue-600 page-arrow flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
+          </div>
+          <div class="flex flex-wrap gap-1 mt-3">
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Forms</span>
+            <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">Config</span>
+          </div>
+        </div>
+      </a>
+
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <footer class="max-w-6xl mx-auto px-6 pb-10 mt-4">
+    <div class="border-t border-slate-200 pt-6 flex items-center justify-between">
+      <p class="text-xs text-slate-400">HRPanel v3 Design System — Built with Tailwind CSS + Inter</p>
+      <p class="text-xs text-slate-400">13 screens · 9 modules · BambooHR-inspired clean theme</p>
+    </div>
+  </footer>
+</body>
+</html>

playwright.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  outputDir: './test-results',
+  timeout: 30000,
+  retries: 0,
+  use: {
+    headless: true,
+    launchOptions: {
+      executablePath: '/usr/bin/chromium',
+    },
+    screenshot: 'on',
+    trace: 'off',
+  },
+  projects: [
+    { name: 'mobile', use: { ...devices['iPhone 12'] } },
+    { name: 'tablet', use: { viewport: { width: 768, height: 1024 } } },
+    { name: 'desktop', use: { viewport: { width: 1440, height: 900 } } },
+  ],
+});

visual-test-runner.js

@@ -0,0 +1,315 @@
+#!/usr/bin/env node
+const puppeteer = require("puppeteer");
+const fs = require("fs");
+const path = require("path");
+
+const DEFAULT_VIEWPORTS = {
+  mobile:  { width: 375,  height: 812  },
+  tablet:  { width: 768,  height: 1024 },
+  desktop: { width: 1440, height: 900  },
+};
+
+async function run() {
+  const manifestPath = path.resolve(process.cwd(), "test-manifest.json");
+  if (!fs.existsSync(manifestPath)) {
+    console.error("ERROR: test-manifest.json not found in", process.cwd());
+    process.exit(1);
+  }
+
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+  const baseUrl = manifest.baseUrl || "http://localhost:3000";
+  const viewports = manifest.viewports
+    ? Object.fromEntries(
+        Object.entries(manifest.viewports).map(function (entry) {
+          return [entry[0], entry[1]];
+        })
+      )
+    : DEFAULT_VIEWPORTS;
+
+  const resultsDir = path.resolve(process.cwd(), "test-results");
+  if (!fs.existsSync(resultsDir)) {
+    fs.mkdirSync(resultsDir, { recursive: true });
+  }
+
+  const executablePath = process.env.PUPPETEER_EXECUTABLE_PATH || "chromium";
+  var browser;
+  try {
+    browser = await puppeteer.launch({
+      headless: "new",
+      executablePath: executablePath,
+      args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-gpu"],
+    });
+  } catch (err) {
+    console.error("ERROR: Failed to launch browser:", err.message);
+    process.exit(1);
+  }
+
+  var results = { pages: [], passed: 0, failed: 0, errors: [] };
+
+  for (var pi = 0; pi < (manifest.pages || []).length; pi++) {
+    var pageDef = manifest.pages[pi];
+    var pageResult = {
+      id: pageDef.id,
+      url: baseUrl + (pageDef.path || "/"),
+      viewports: {},
+      passed: true,
+    };
+
+    var vpEntries = Object.entries(viewports);
+    for (var vi = 0; vi < vpEntries.length; vi++) {
+      var vpName = vpEntries[vi][0];
+      var vpSize = vpEntries[vi][1];
+      var vpResult = {
+        viewport: vpName,
+        screenshots: [],
+        actions: [],
+        consoleErrors: [],
+        passed: true,
+      };
+
+      var browserPage = null;
+      try {
+        browserPage = await browser.newPage();
+        await browserPage.setViewport(vpSize);
+
+        var consoleErrors = [];
+        browserPage.on("console", function (msg) {
+          if (msg.type() === "error") {
+            consoleErrors.push(msg.text());
+          }
+        });
+        browserPage.on("pageerror", function (err) {
+          consoleErrors.push(err.message);
+        });
+
+        await browserPage.goto(pageResult.url, {
+          waitUntil: "networkidle2",
+          timeout: 30000,
+        });
+
+        if (pageDef.waitFor) {
+          await browserPage.waitForSelector(pageDef.waitFor, { timeout: 10000 });
+        }
+
+        var initialScreenshot = path.join(
+          resultsDir,
+          pageDef.id + "-" + vpName + "-initial.png"
+        );
+        await browserPage.screenshot({
+          path: initialScreenshot,
+          fullPage: true,
+        });
+        vpResult.screenshots.push(initialScreenshot);
+
+        var actions = pageDef.actions || [];
+        for (var ai = 0; ai < actions.length; ai++) {
+          var action = actions[ai];
+          var actionResult = { id: action.id, type: action.type, passed: true, error: null };
+          try {
+            await executeAction(browserPage, action);
+
+            var actionScreenshot = path.join(
+              resultsDir,
+              pageDef.id + "-" + vpName + "-" + action.id + ".png"
+            );
+            await browserPage.screenshot({
+              path: actionScreenshot,
+              fullPage: true,
+            });
+            vpResult.screenshots.push(actionScreenshot);
+
+            if (action.expectAfter) {
+              var valid = await validateExpectations(
+                browserPage,
+                action.expectAfter
+              );
+              if (!valid) {
+                actionResult.passed = false;
+                actionResult.error = "Expectation failed for " + action.id;
+              }
+            }
+          } catch (err) {
+            actionResult.passed = false;
+            actionResult.error = err.message;
+          }
+
+          if (!actionResult.passed) {
+            vpResult.passed = false;
+          }
+          vpResult.actions.push(actionResult);
+        }
+
+        vpResult.consoleErrors = consoleErrors;
+        if (consoleErrors.length > 0) {
+          vpResult.passed = false;
+        }
+      } catch (err) {
+        vpResult.passed = false;
+        vpResult.error = err.message;
+        results.errors.push({
+          page: pageDef.id,
+          viewport: vpName,
+          error: err.message,
+        });
+      } finally {
+        if (browserPage) {
+          await browserPage.close().catch(function () {});
+        }
+      }
+
+      if (!vpResult.passed) {
+        pageResult.passed = false;
+      }
+      pageResult.viewports[vpName] = vpResult;
+    }
+
+    if (pageResult.passed) {
+      results.passed++;
+    } else {
+      results.failed++;
+    }
+    results.pages.push(pageResult);
+  }
+
+  await browser.close();
+
+  var summaryPath = path.join(resultsDir, "summary.json");
+  fs.writeFileSync(summaryPath, JSON.stringify(results, null, 2));
+
+  console.log("");
+  console.log("=== Visual Test Results ===");
+  console.log("Pages tested: " + results.pages.length);
+  console.log("Passed: " + results.passed);
+  console.log("Failed: " + results.failed);
+
+  for (var ri = 0; ri < results.pages.length; ri++) {
+    var p = results.pages[ri];
+    var icon = p.passed ? "PASS" : "FAIL";
+    console.log("  [" + icon + "] " + p.id + " (" + p.url + ")");
+    var vpKeys = Object.keys(p.viewports);
+    for (var vk = 0; vk < vpKeys.length; vk++) {
+      var vr = p.viewports[vpKeys[vk]];
+      if (!vr.passed) {
+        console.log("         " + vpKeys[vk] + ": FAIL" + (vr.error ? " - " + vr.error : ""));
+        for (var ak = 0; ak < (vr.actions || []).length; ak++) {
+          var a = vr.actions[ak];
+          if (!a.passed) {
+            console.log("           action " + a.id + ": " + a.error);
+          }
+        }
+        if (vr.consoleErrors && vr.consoleErrors.length > 0) {
+          console.log("           console errors: " + vr.consoleErrors.length);
+        }
+      }
+    }
+  }
+
+  console.log("");
+  console.log("Summary written to: " + summaryPath);
+  process.exit(results.failed > 0 ? 1 : 0);
+}
+
+async function executeAction(page, action) {
+  switch (action.type) {
+    case "click":
+      await page.waitForSelector(action.selector, { timeout: 5000 });
+      await page.click(action.selector);
+      break;
+    case "fill-form":
+      var fields = action.fields || [];
+      for (var fi = 0; fi < fields.length; fi++) {
+        var field = fields[fi];
+        await page.waitForSelector(field.selector, { timeout: 5000 });
+        await page.click(field.selector, { clickCount: 3 });
+        await page.type(field.selector, field.value);
+      }
+      break;
+    case "select":
+      await page.waitForSelector(action.selector, { timeout: 5000 });
+      await page.select(action.selector, action.value);
+      break;
+    case "scroll":
+      if (action.selector) {
+        await page.waitForSelector(action.selector, { timeout: 5000 });
+        await page.$eval(action.selector, function (el) {
+          el.scrollIntoView({ behavior: "smooth", block: "center" });
+        });
+      } else {
+        await page.evaluate(
+          function (x, y) { window.scrollTo(x, y); },
+          action.x || 0,
+          action.y || 0
+        );
+      }
+      await new Promise(function (r) { setTimeout(r, 500); });
+      break;
+    case "hover":
+      await page.waitForSelector(action.selector, { timeout: 5000 });
+      await page.hover(action.selector);
+      await new Promise(function (r) { setTimeout(r, 300); });
+      break;
+    case "wait":
+      if (action.selector) {
+        await page.waitForSelector(action.selector, {
+          timeout: action.timeout || 10000,
+        });
+      } else {
+        await new Promise(function (r) { setTimeout(r, action.duration || 1000); });
+      }
+      break;
+    default:
+      throw new Error("Unknown action type: " + action.type);
+  }
+}
+
+async function validateExpectations(page, expectations) {
+  var items = Array.isArray(expectations) ? expectations : [expectations];
+  for (var ei = 0; ei < items.length; ei++) {
+    var expect = items[ei];
+    if (expect.url) {
+      var currentUrl = page.url();
+      var pattern = new RegExp(expect.url);
+      if (!pattern.test(currentUrl)) {
+        return false;
+      }
+    }
+    if (expect.visible) {
+      var el = await page.$(expect.visible);
+      if (!el) return false;
+      var isVisible = await page.evaluate(function (s) {
+        var e = document.querySelector(s);
+        if (!e) return false;
+        var r = e.getBoundingClientRect();
+        return r.width > 0 && r.height > 0;
+      }, expect.visible);
+      if (!isVisible) return false;
+    }
+    if (expect.hidden) {
+      var elH = await page.$(expect.hidden);
+      if (elH) {
+        var isVis = await page.evaluate(function (s) {
+          var e = document.querySelector(s);
+          if (!e) return false;
+          var r = e.getBoundingClientRect();
+          return r.width > 0 && r.height > 0;
+        }, expect.hidden);
+        if (isVis) return false;
+      }
+    }
+    if (expect.text) {
+      var textContent = await page.$eval(
+        expect.text.selector,
+        function (el) { return el.textContent; }
+      );
+      if (!textContent || !textContent.includes(expect.text.contains)) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+run().catch(function (err) {
+  console.error("Fatal error:", err);
+  process.exit(1);
+});