pankaj/hr-portal-v5-designs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deploy: hr-portal-v5-designs

Browse Source
This commit is contained in:
TenX PM
2026-05-09 19:35:10 +00:00
commit 9add762d5c
27 changed files with 8904 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/CLAUDE.md
+581
View File
@@ -0,0 +1,581 @@
You are the autonomous Project Manager (PM) for "hr-portal-v5" (project ID: 6c14b994-a30b-495b-82bd-77ee501777cd).
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-portal-v5-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/6c14b994-a30b-495b-82bd-77ee501777cd/ │
│ 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-portal-v5 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)
• Send as many polls as needed per message (up to 10 total across the project)
• For complex projects (SaaS, portals, multi-module): ask 5-8 questions
• For simple projects (landing page, game): ask 1-3 or skip entirely
────────────────────────────────────────────────────────────────────────────────
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/6c14b994-a30b-495b-82bd-77ee501777cd/
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 ██
The ONLY way to deploy is:
bash deploy.sh <project-name> [nixpacks|static|dockerfile]
Do NOT curl the Coolify API directly. Do NOT use $COOLIFY_ACCESS_TOKEN
or $COOLIFY_BASE_URL in your own curl commands. Those env vars exist for
deploy.sh only. If you bypass deploy.sh, you are wasting tokens and money
constructing curl commands that the script already handles correctly.
EVERY deployment = deploy.sh. No exceptions. No curl workarounds.
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
+427
View File
@@ -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
+34
View File
@@ -0,0 +1,34 @@
{
"mcpServers": {
"tenx-pm": {
"command": "npx",
"args": [
"tsx",
"/app/src/pm/mcp-server.ts"
],
"env": {
"PROJECT_ID": "6c14b994-a30b-495b-82bd-77ee501777cd",
"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
Executable
+185
View File
@@ -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-landing.html
+506
View File
@@ -0,0 +1,506 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HR Portal — The HR Platform Your Team Will Actually Use</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FFFFFF; color: #111827; }
/* NAVBAR */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 48px; height: 64px;
background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
}
.navbar-logo {
display: flex; align-items: center; gap: 10px;
font-size: 20px; font-weight: 700; color: #111827;
}
.navbar-logo .logo-icon {
width: 32px; height: 32px; background: #4F46E5; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
.navbar-logo .logo-icon svg { width: 18px; height: 18px; }
.navbar-actions { display: flex; align-items: center; gap: 12px; }
.btn-outline {
padding: 8px 20px; border: 1.5px solid #4F46E5; border-radius: 6px;
color: #4F46E5; font-size: 14px; font-weight: 500;
background: transparent; cursor: pointer; text-decoration: none;
transition: all 0.15s;
}
.btn-outline:hover { background: #EEF2FF; }
.btn-primary {
padding: 8px 20px; border: none; border-radius: 6px;
background: #4F46E5; color: #FFFFFF; font-size: 14px; font-weight: 500;
cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.btn-primary:hover { background: #4338CA; }
/* HERO */
.hero {
padding: 140px 48px 80px;
display: flex; align-items: center; gap: 64px;
max-width: 1200px; margin: 0 auto;
}
.hero-content { flex: 1; }
.hero-badge {
display: inline-flex; align-items: center; gap: 6px;
background: #EEF2FF; color: #4F46E5; font-size: 13px; font-weight: 500;
padding: 4px 12px; border-radius: 20px; margin-bottom: 24px;
}
.hero-badge svg { width: 14px; height: 14px; }
.hero-title {
font-size: 52px; font-weight: 800; line-height: 1.15;
color: #111827; margin-bottom: 20px;
letter-spacing: -1px;
}
.hero-title span { color: #4F46E5; }
.hero-subtitle {
font-size: 18px; color: #6B7280; line-height: 1.6;
margin-bottom: 36px; max-width: 480px;
}
.hero-ctas { display: flex; align-items: center; gap: 16px; }
.btn-hero-primary {
padding: 14px 28px; background: #4F46E5; color: #FFF;
border: none; border-radius: 8px; font-size: 16px; font-weight: 600;
cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.btn-hero-primary:hover { background: #4338CA; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,0.3); }
.btn-hero-secondary {
padding: 14px 28px; background: transparent; color: #374151;
border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 16px; font-weight: 500;
cursor: pointer; text-decoration: none; transition: all 0.15s;
display: flex; align-items: center; gap: 8px;
}
.btn-hero-secondary:hover { border-color: #9CA3AF; background: #F9FAFB; }
.hero-meta { margin-top: 32px; display: flex; align-items: center; gap: 24px; }
.hero-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
.hero-meta-item svg { width: 16px; height: 16px; color: #10B981; }
/* HERO ILLUSTRATION */
.hero-visual { flex: 1; max-width: 520px; }
.dashboard-mock {
background: #FFFFFF; border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
overflow: hidden; border: 1px solid #E5E7EB;
}
.mock-topbar {
height: 36px; background: #F9FAFB; border-bottom: 1px solid #E5E7EB;
display: flex; align-items: center; gap: 6px; padding: 0 12px;
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.mock-dot.red { background: #EF4444; }
.mock-dot.yellow { background: #F59E0B; }
.mock-dot.green { background: #10B981; }
.mock-body { display: flex; height: 320px; }
.mock-sidebar {
width: 64px; background: #FFFFFF; border-right: 1px solid #E5E7EB;
padding: 12px 8px;
}
.mock-sidebar-item {
width: 48px; height: 8px; background: #E5E7EB; border-radius: 4px;
margin-bottom: 12px;
}
.mock-sidebar-item.active { background: #4F46E5; }
.mock-content { flex: 1; padding: 16px; background: #FAFAFA; }
.mock-stat-row { display: flex; gap: 8px; margin-bottom: 12px; }
.mock-stat {
flex: 1; background: #FFFFFF; border-radius: 6px; padding: 10px;
border: 1px solid #E5E7EB;
}
.mock-stat-num { width: 32px; height: 12px; background: #4F46E5; border-radius: 3px; margin-bottom: 4px; }
.mock-stat-label { width: 48px; height: 6px; background: #E5E7EB; border-radius: 3px; }
.mock-chart-row { display: flex; gap: 8px; }
.mock-chart {
flex: 3; background: #FFFFFF; border-radius: 6px; padding: 10px;
border: 1px solid #E5E7EB;
}
.mock-chart-title { width: 80px; height: 8px; background: #111827; border-radius: 3px; margin-bottom: 12px; }
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
.mock-bar { flex: 1; background: #4F46E5; border-radius: 3px 3px 0 0; opacity: 0.15; }
.mock-bar:nth-child(1) { height: 40%; opacity: 0.4; }
.mock-bar:nth-child(2) { height: 65%; opacity: 0.6; }
.mock-bar:nth-child(3) { height: 50%; opacity: 0.5; }
.mock-bar:nth-child(4) { height: 80%; opacity: 0.8; }
.mock-bar:nth-child(5) { height: 60%; opacity: 0.6; }
.mock-bar:nth-child(6) { height: 90%; background: #4F46E5; opacity: 1; }
.mock-list { flex: 2; background: #FFFFFF; border-radius: 6px; padding: 10px; border: 1px solid #E5E7EB; }
.mock-list-item { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.mock-avatar { width: 20px; height: 20px; border-radius: 50%; background: #4F46E5; opacity: 0.2; }
.mock-avatar:nth-child(1) { opacity: 0.8; }
.mock-text { flex: 1; }
.mock-text-line { height: 6px; background: #E5E7EB; border-radius: 3px; margin-bottom: 3px; }
.mock-text-line.short { width: 60%; }
/* FEATURES */
.features-section {
background: #FAFAFA; padding: 80px 48px;
}
.section-header { text-align: center; margin-bottom: 48px; }
.section-tag {
display: inline-block; background: #EEF2FF; color: #4F46E5;
font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px;
margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.section-title { font-size: 36px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.section-subtitle { font-size: 16px; color: #6B7280; }
.features-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
max-width: 1100px; margin: 0 auto;
}
.feature-card {
background: #FFFFFF; border-radius: 12px; padding: 32px;
border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
transition: all 0.2s;
}
.feature-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
.feature-icon {
width: 48px; height: 48px; background: #EEF2FF; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.feature-icon svg { width: 24px; height: 24px; color: #4F46E5; }
.feature-title { font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 8px; }
.feature-desc { font-size: 14px; color: #6B7280; line-height: 1.6; margin-bottom: 16px; }
.feature-list { list-style: none; }
.feature-list li {
font-size: 13px; color: #6B7280; padding: 4px 0;
display: flex; align-items: center; gap: 6px;
}
.feature-list li::before {
content: ''; width: 6px; height: 6px; background: #10B981;
border-radius: 50%; flex-shrink: 0;
}
/* STATS */
.stats-section {
background: #4F46E5; padding: 64px 48px;
}
.stats-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 48px; max-width: 900px; margin: 0 auto; text-align: center;
}
.stat-item {}
.stat-number { font-size: 48px; font-weight: 800; color: #FFFFFF; margin-bottom: 8px; }
.stat-label { font-size: 16px; color: #A5B4FC; }
/* TESTIMONIALS */
.testimonials-section { padding: 80px 48px; background: #FFFFFF; }
.testimonials-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
max-width: 1100px; margin: 0 auto;
}
.testimonial-card {
background: #F9FAFB; border-radius: 12px; padding: 28px;
border: 1px solid #E5E7EB;
}
.testimonial-quote { font-size: 15px; color: #374151; line-height: 1.6; margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 600; color: #FFFFFF;
}
.testimonial-name { font-size: 14px; font-weight: 600; color: #111827; }
.testimonial-role { font-size: 12px; color: #9CA3AF; }
/* FOOTER */
.footer {
background: #111827; padding: 48px; text-align: center;
color: #9CA3AF; font-size: 14px;
}
.footer-logo { font-size: 20px; font-weight: 700; color: #FFFFFF; margin-bottom: 16px; }
.footer-links { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; }
.footer-links a { color: #9CA3AF; text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: #FFFFFF; }
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar">
<div class="navbar-logo">
<div class="logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
HR Portal
</div>
<div style="display:flex;gap:32px;align-items:center;">
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">Features</a>
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">Pricing</a>
<a href="#" style="text-decoration:none;color:#6B7280;font-size:14px;font-weight:500;">About</a>
</div>
<div class="navbar-actions">
<a href="02-login.html" class="btn-outline">Sign In</a>
<a href="03-register.html" class="btn-primary">Get Started</a>
</div>
</nav>
<!-- HERO -->
<section style="padding-top:64px;">
<div class="hero">
<div class="hero-content">
<div class="hero-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>
Trusted by 500+ companies worldwide
</div>
<h1 class="hero-title">The HR platform your team will <span>actually use</span></h1>
<p class="hero-subtitle">Streamline employee management, automate leave approvals, run payroll, and get insights — all in one beautifully simple platform.</p>
<div class="hero-ctas">
<a href="03-register.html" class="btn-hero-primary">Start Free Trial</a>
<a href="#" class="btn-hero-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>
</svg>
Watch Demo
</a>
</div>
<div class="hero-meta">
<div class="hero-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
<polyline points="20 6 9 17 4 12"/>
</svg>
No credit card required
</div>
<div class="hero-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
<polyline points="20 6 9 17 4 12"/>
</svg>
14-day free trial
</div>
<div class="hero-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2.5">
<polyline points="20 6 9 17 4 12"/>
</svg>
Setup in minutes
</div>
</div>
</div>
<div class="hero-visual">
<div class="dashboard-mock">
<div class="mock-topbar">
<div class="mock-dot red"></div>
<div class="mock-dot yellow"></div>
<div class="mock-dot green"></div>
<div style="margin-left:12px;width:120px;height:8px;background:#E5E7EB;border-radius:4px;"></div>
</div>
<div class="mock-body">
<div class="mock-sidebar">
<div style="width:36px;height:36px;background:#EEF2FF;border-radius:6px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;">
<div style="width:20px;height:20px;background:#4F46E5;border-radius:4px;"></div>
</div>
<div class="mock-sidebar-item active"></div>
<div class="mock-sidebar-item"></div>
<div class="mock-sidebar-item"></div>
<div class="mock-sidebar-item"></div>
<div class="mock-sidebar-item"></div>
<div class="mock-sidebar-item"></div>
</div>
<div class="mock-content">
<div style="width:120px;height:10px;background:#111827;border-radius:4px;margin-bottom:4px;"></div>
<div style="width:80px;height:7px;background:#9CA3AF;border-radius:4px;margin-bottom:14px;"></div>
<div class="mock-stat-row">
<div class="mock-stat"><div class="mock-stat-num"></div><div class="mock-stat-label"></div></div>
<div class="mock-stat"><div class="mock-stat-num" style="background:#10B981;width:28px;"></div><div class="mock-stat-label"></div></div>
<div class="mock-stat"><div class="mock-stat-num" style="background:#F59E0B;width:24px;"></div><div class="mock-stat-label"></div></div>
<div class="mock-stat"><div class="mock-stat-num" style="background:#3B82F6;width:36px;"></div><div class="mock-stat-label"></div></div>
</div>
<div class="mock-chart-row">
<div class="mock-chart">
<div class="mock-chart-title"></div>
<div class="mock-bars">
<div class="mock-bar"></div>
<div class="mock-bar"></div>
<div class="mock-bar"></div>
<div class="mock-bar"></div>
<div class="mock-bar"></div>
<div class="mock-bar"></div>
</div>
</div>
<div class="mock-list">
<div style="width:60px;height:7px;background:#111827;border-radius:3px;margin-bottom:10px;"></div>
<div class="mock-list-item">
<div class="mock-avatar" style="background:#4F46E5;opacity:0.7;"></div>
<div class="mock-text">
<div class="mock-text-line"></div>
<div class="mock-text-line short"></div>
</div>
</div>
<div class="mock-list-item">
<div class="mock-avatar" style="background:#10B981;opacity:0.7;"></div>
<div class="mock-text">
<div class="mock-text-line"></div>
<div class="mock-text-line short"></div>
</div>
</div>
<div class="mock-list-item">
<div class="mock-avatar" style="background:#F59E0B;opacity:0.7;"></div>
<div class="mock-text">
<div class="mock-text-line"></div>
<div class="mock-text-line short"></div>
</div>
</div>
<div class="mock-list-item">
<div class="mock-avatar" style="background:#EF4444;opacity:0.7;"></div>
<div class="mock-text">
<div class="mock-text-line"></div>
<div class="mock-text-line short"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features-section">
<div class="section-header">
<div class="section-tag">Everything you need</div>
<h2 class="section-title">Built for modern HR teams</h2>
<p class="section-subtitle">From hire to retire, manage your entire workforce in one place.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
<h3 class="feature-title">Employee Management</h3>
<p class="feature-desc">Centralize all employee data, track documents, and manage the full employee lifecycle with ease.</p>
<ul class="feature-list">
<li>Employee directory and profiles</li>
<li>Document management</li>
<li>Org chart visualization</li>
<li>Department management</li>
</ul>
</div>
<div class="feature-card">
<div class="feature-icon" style="background:#ECFDF5;">
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>
</div>
<h3 class="feature-title">Leave &amp; Attendance</h3>
<p class="feature-desc">Automate leave approvals, track attendance in real-time, and give employees visibility into their balances.</p>
<ul class="feature-list">
<li>Multi-type leave policies</li>
<li>Automated approval workflows</li>
<li>Real-time attendance tracking</li>
<li>Holiday calendar management</li>
</ul>
</div>
<div class="feature-card">
<div class="feature-icon" style="background:#FFF7ED;">
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
<line x1="12" y1="1" x2="12" y2="23"/>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
<h3 class="feature-title">Payroll &amp; Insights</h3>
<p class="feature-desc">Run accurate payroll, manage salary structures, and get powerful analytics to make data-driven HR decisions.</p>
<ul class="feature-list">
<li>Automated payroll processing</li>
<li>Custom salary structures</li>
<li>Expense claim management</li>
<li>Analytics and reporting</li>
</ul>
</div>
</div>
</section>
<!-- STATS -->
<section class="stats-section">
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number">500+</div>
<div class="stat-label">Companies trust HR Portal</div>
</div>
<div class="stat-item">
<div class="stat-number">50,000+</div>
<div class="stat-label">Employees managed daily</div>
</div>
<div class="stat-item">
<div class="stat-number">99.9%</div>
<div class="stat-label">Uptime guaranteed</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials-section">
<div class="section-header">
<div class="section-tag">Customer Stories</div>
<h2 class="section-title">Loved by HR teams everywhere</h2>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<p class="testimonial-quote">"HR Portal cut our payroll processing time by 70%. What used to take two days now takes two hours. It's transformed how we manage our team."</p>
<div class="testimonial-author">
<div class="testimonial-avatar" style="background:#4F46E5;">SC</div>
<div>
<div class="testimonial-name">Sarah Chen</div>
<div class="testimonial-role">HR Director, TechFlow Inc.</div>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-quote">"The leave management system alone is worth it. Employees can see their balances, managers get instant notifications. No more email chains."</p>
<div class="testimonial-author">
<div class="testimonial-avatar" style="background:#10B981;">MR</div>
<div>
<div class="testimonial-name">Michael Rodriguez</div>
<div class="testimonial-role">COO, Nexus Dynamics</div>
</div>
</div>
</div>
<div class="testimonial-card">
<p class="testimonial-quote">"We scaled from 50 to 300 employees without adding a single HR person. The automation handles everything that used to require manual work."</p>
<div class="testimonial-author">
<div class="testimonial-avatar" style="background:#F59E0B;">PP</div>
<div>
<div class="testimonial-name">Priya Patel</div>
<div class="testimonial-role">CEO, GrowthBase</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="footer-logo">HR Portal</div>
<div class="footer-links">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Support</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
<p>© 2026 HR Portal. All rights reserved.</p>
</footer>
</body>
</html>
designs/02-login.html
+235
View File
@@ -0,0 +1,235 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Inter', sans-serif;
background: #FAFAFA;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 24px;
}
.login-card {
background: #FFFFFF;
border-radius: 12px;
border: 1px solid #E5E7EB;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
padding: 48px;
width: 100%;
max-width: 420px;
}
.card-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 32px;
font-size: 22px;
font-weight: 700;
color: #111827;
}
.logo-icon {
width: 36px; height: 36px;
background: #4F46E5;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
.logo-icon svg { width: 20px; height: 20px; }
.card-heading {
text-align: center;
margin-bottom: 28px;
}
.card-heading h1 {
font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 6px;
}
.card-heading p {
font-size: 14px; color: #6B7280;
}
.form-group { margin-bottom: 20px; }
.form-label {
display: block;
font-size: 14px; font-weight: 500; color: #374151;
margin-bottom: 6px;
}
.form-input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid #E5E7EB;
border-radius: 6px;
font-size: 14px; font-family: 'Inter', sans-serif;
color: #111827;
background: #FFFFFF;
transition: border-color 0.15s;
outline: none;
}
.form-input:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
.form-input::placeholder { color: #9CA3AF; }
.form-row-between {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 6px;
}
.forgot-link {
font-size: 13px; color: #4F46E5; text-decoration: none; font-weight: 500;
}
.forgot-link:hover { text-decoration: underline; }
.password-wrapper { position: relative; }
.password-toggle {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; color: #9CA3AF;
display: flex; align-items: center;
}
.checkbox-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 24px;
}
.checkbox-row input[type="checkbox"] {
width: 16px; height: 16px; accent-color: #4F46E5; cursor: pointer;
}
.checkbox-row label { font-size: 14px; color: #374151; cursor: pointer; }
.btn-submit {
width: 100%;
padding: 11px;
background: #4F46E5;
color: #FFFFFF;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: background 0.15s;
margin-bottom: 20px;
}
.btn-submit:hover { background: #4338CA; }
.divider {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px;
}
.divider-line { flex: 1; height: 1px; background: #E5E7EB; }
.divider-text { font-size: 12px; color: #9CA3AF; }
.btn-sso {
width: 100%;
padding: 10px;
background: #FFFFFF;
color: #374151;
border: 1.5px solid #E5E7EB;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.15s;
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-bottom: 24px;
}
.btn-sso:hover { border-color: #9CA3AF; background: #F9FAFB; }
.card-footer {
text-align: center;
font-size: 14px;
color: #6B7280;
}
.card-footer a {
color: #4F46E5; text-decoration: none; font-weight: 500;
}
.card-footer a:hover { text-decoration: underline; }
.top-bar {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 32px;
background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
}
.top-bar-logo {
display: flex; align-items: center; gap: 10px;
font-size: 18px; font-weight: 700; color: #111827;
text-decoration: none;
}
</style>
</head>
<body>
<div class="top-bar">
<a href="01-landing.html" class="top-bar-logo">
<div class="logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
HR Portal
</a>
<a href="03-register.html" style="font-size:14px;color:#6B7280;text-decoration:none;">New to HR Portal? <strong style="color:#4F46E5;">Create account</strong></a>
</div>
<div class="page-wrapper">
<div class="login-card">
<div class="card-heading">
<h1>Welcome back</h1>
<p>Sign in to your HR Portal account</p>
</div>
<form>
<div class="form-group">
<label class="form-label" for="email">Work Email</label>
<input class="form-input" type="email" id="email" placeholder="sarah@company.com" value="sarah@techflow.com">
</div>
<div class="form-group">
<div class="form-row-between">
<label class="form-label" for="password" style="margin-bottom:0;">Password</label>
<a href="#" class="forgot-link">Forgot password?</a>
</div>
<div class="password-wrapper">
<input class="form-input" type="password" id="password" placeholder="Enter your password" value="••••••••••" style="padding-right:44px;">
<button type="button" class="password-toggle">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
</button>
</div>
</div>
<div class="checkbox-row">
<input type="checkbox" id="remember" checked>
<label for="remember">Keep me signed in for 30 days</label>
</div>
<button type="submit" class="btn-submit">Sign In</button>
<div class="divider">
<div class="divider-line"></div>
<span class="divider-text">or continue with</span>
<div class="divider-line"></div>
</div>
<button type="button" class="btn-sso">
<svg width="18" height="18" viewBox="0 0 24 24">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
</svg>
Continue with Google Workspace
</button>
</form>
<div class="card-footer">
Don't have an account? <a href="03-register.html">Register your company</a>
</div>
</div>
</div>
</body>
</html>
designs/03-register.html
+304
View File
@@ -0,0 +1,304 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Your Company — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; min-height: 100vh; }
.top-bar {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 48px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
}
.logo {
display: flex; align-items: center; gap: 10px;
font-size: 18px; font-weight: 700; color: #111827; text-decoration: none;
}
.logo-icon {
width: 34px; height: 34px; background: #4F46E5; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
.logo-icon svg { width: 18px; height: 18px; }
/* STEP INDICATOR */
.page-wrapper { max-width: 760px; margin: 0 auto; padding: 48px 24px; }
.step-indicator {
display: flex; align-items: center; justify-content: center;
margin-bottom: 40px; gap: 0;
}
.step {
display: flex; align-items: center; gap: 8px;
}
.step-circle {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600;
}
.step-circle.done { background: #4F46E5; color: #FFF; }
.step-circle.active { background: #4F46E5; color: #FFF; box-shadow: 0 0 0 4px rgba(79,70,229,0.15); }
.step-circle.inactive { background: #F3F4F6; color: #9CA3AF; border: 1.5px solid #E5E7EB; }
.step-label { font-size: 13px; font-weight: 500; }
.step-label.active { color: #4F46E5; }
.step-label.inactive { color: #9CA3AF; }
.step-connector {
width: 80px; height: 2px; background: #E5E7EB; margin: 0 4px;
}
.step-connector.done { background: #4F46E5; }
.register-card {
background: #FFFFFF;
border-radius: 12px;
border: 1px solid #E5E7EB;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
overflow: hidden;
}
.card-header {
padding: 32px 40px 24px;
border-bottom: 1px solid #F3F4F6;
}
.card-header h1 { font-size: 22px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.card-header p { font-size: 14px; color: #6B7280; }
.card-section {
padding: 28px 40px;
border-bottom: 1px solid #F3F4F6;
}
.card-section:last-of-type { border-bottom: none; }
.section-title {
font-size: 13px; font-weight: 600; color: #9CA3AF;
text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 20px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.single { grid-template-columns: 1fr; }
.form-group { }
.form-label {
display: block; font-size: 14px; font-weight: 500; color: #374151;
margin-bottom: 6px;
}
.form-label .required { color: #EF4444; margin-left: 2px; }
.form-input, .form-select {
width: 100%; padding: 10px 14px;
border: 1.5px solid #E5E7EB; border-radius: 6px;
font-size: 14px; font-family: 'Inter', sans-serif; color: #111827;
background: #FFFFFF; transition: border-color 0.15s; outline: none;
appearance: none;
}
.form-input:focus, .form-select:focus {
border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08);
}
.form-input::placeholder { color: #9CA3AF; }
.form-select-wrapper { position: relative; }
.form-select-wrapper::after {
content: '';
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #9CA3AF;
pointer-events: none;
}
.hint { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
.password-strength { margin-top: 6px; }
.strength-bar {
height: 4px; background: #E5E7EB; border-radius: 2px; margin-bottom: 4px;
overflow: hidden;
}
.strength-fill { height: 100%; width: 75%; background: #10B981; border-radius: 2px; }
.strength-label { font-size: 12px; color: #10B981; font-weight: 500; }
.checkbox-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 20px 40px;
border-top: 1px solid #F3F4F6;
}
.checkbox-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: #4F46E5; cursor: pointer; }
.checkbox-row label { font-size: 14px; color: #374151; cursor: pointer; line-height: 1.5; }
.checkbox-row a { color: #4F46E5; text-decoration: none; }
.card-actions {
padding: 20px 40px;
display: flex; justify-content: space-between; align-items: center;
background: #F9FAFB; border-top: 1px solid #E5E7EB;
border-radius: 0 0 12px 12px;
}
.btn-back {
padding: 10px 20px; background: #FFFFFF; color: #374151;
border: 1.5px solid #E5E7EB; border-radius: 6px;
font-size: 14px; font-weight: 500; cursor: pointer;
transition: all 0.15s;
}
.btn-back:hover { border-color: #9CA3AF; }
.btn-next {
padding: 10px 28px; background: #4F46E5; color: #FFFFFF;
border: none; border-radius: 6px;
font-size: 14px; font-weight: 600; cursor: pointer;
transition: background 0.15s;
display: flex; align-items: center; gap: 8px;
}
.btn-next:hover { background: #4338CA; }
.already-have { font-size: 14px; color: #6B7280; }
.already-have a { color: #4F46E5; text-decoration: none; font-weight: 500; }
</style>
</head>
<body>
<div class="top-bar">
<a href="01-landing.html" class="logo">
<div class="logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
HR Portal
</a>
<div class="already-have">Already have an account? <a href="02-login.html">Sign in</a></div>
</div>
<div class="page-wrapper">
<!-- STEP INDICATOR -->
<div class="step-indicator">
<div class="step">
<div class="step-circle done">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
<polyline points="20 6 9 17 4 12"/>
</svg>
</div>
<span class="step-label active">Company Info</span>
</div>
<div class="step-connector done"></div>
<div class="step">
<div class="step-circle active">2</div>
<span class="step-label active">Admin Account</span>
</div>
<div class="step-connector"></div>
<div class="step">
<div class="step-circle inactive">3</div>
<span class="step-label inactive">Done</span>
</div>
</div>
<div class="register-card">
<div class="card-header">
<h1>Create your HR Portal account</h1>
<p>Set up your company and admin account to get started in minutes.</p>
</div>
<!-- COMPANY INFO -->
<div class="card-section">
<div class="section-title">Company Information</div>
<div class="form-grid">
<div class="form-group" style="grid-column: 1 / -1;">
<label class="form-label" for="company-name">Company Name <span class="required">*</span></label>
<input class="form-input" type="text" id="company-name" placeholder="Acme Corporation" value="TechFlow Inc.">
</div>
<div class="form-group">
<label class="form-label" for="company-size">Company Size <span class="required">*</span></label>
<div class="form-select-wrapper">
<select class="form-select" id="company-size">
<option>1–10 employees</option>
<option>11–50 employees</option>
<option selected>51–200 employees</option>
<option>201–500 employees</option>
<option>500+ employees</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="industry">Industry <span class="required">*</span></label>
<div class="form-select-wrapper">
<select class="form-select" id="industry">
<option>Healthcare</option>
<option selected>Technology</option>
<option>Finance</option>
<option>Retail</option>
<option>Manufacturing</option>
<option>Education</option>
<option>Other</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="country">Country</label>
<div class="form-select-wrapper">
<select class="form-select" id="country">
<option selected>United States</option>
<option>United Kingdom</option>
<option>India</option>
<option>Canada</option>
<option>Australia</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="timezone">Timezone</label>
<div class="form-select-wrapper">
<select class="form-select" id="timezone">
<option selected>PST (UTC-8)</option>
<option>MST (UTC-7)</option>
<option>CST (UTC-6)</option>
<option>EST (UTC-5)</option>
<option>IST (UTC+5:30)</option>
</select>
</div>
</div>
</div>
</div>
<!-- ADMIN ACCOUNT -->
<div class="card-section">
<div class="section-title">Admin Account Details</div>
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="first-name">First Name <span class="required">*</span></label>
<input class="form-input" type="text" id="first-name" placeholder="Sarah" value="Sarah">
</div>
<div class="form-group">
<label class="form-label" for="last-name">Last Name <span class="required">*</span></label>
<input class="form-input" type="text" id="last-name" placeholder="Chen" value="Chen">
</div>
<div class="form-group" style="grid-column: 1 / -1;">
<label class="form-label" for="email">Work Email <span class="required">*</span></label>
<input class="form-input" type="email" id="email" placeholder="you@company.com" value="sarah@techflow.com">
<p class="hint">This will be your login email and primary admin contact.</p>
</div>
<div class="form-group">
<label class="form-label" for="password">Password <span class="required">*</span></label>
<input class="form-input" type="password" id="password" value="••••••••••••">
<div class="password-strength">
<div class="strength-bar"><div class="strength-fill"></div></div>
<span class="strength-label">Strong password</span>
</div>
</div>
<div class="form-group">
<label class="form-label" for="confirm-password">Confirm Password <span class="required">*</span></label>
<input class="form-input" type="password" id="confirm-password" value="••••••••••••">
<p class="hint" style="color:#10B981;">Passwords match</p>
</div>
</div>
</div>
<div class="checkbox-row">
<input type="checkbox" id="terms" checked>
<label for="terms">
I agree to HR Portal's <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.
I understand that by creating this account, I become the primary administrator.
</label>
</div>
<div class="card-actions">
<a href="02-login.html" class="btn-back">Sign in instead</a>
<button class="btn-next">
Create Account
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="9 18 15 12 9 6"/>
</svg>
</button>
</div>
</div>
</div>
</body>
</html>
designs/04-admin-dashboard.html
+653
View File
@@ -0,0 +1,653 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
/* SIDEBAR */
.sidebar {
width: 240px; min-height: 100vh; background: #FFFFFF;
border-right: 1px solid #E5E7EB;
display: flex; flex-direction: column;
position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
}
.sidebar-logo {
padding: 20px 20px 16px;
display: flex; align-items: center; gap: 10px;
font-size: 18px; font-weight: 700; color: #111827;
border-bottom: 1px solid #F3F4F6;
}
.logo-icon {
width: 32px; height: 32px; background: #4F46E5; border-radius: 8px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-section-label {
padding: 8px 16px 4px;
font-size: 11px; font-weight: 600; color: #9CA3AF;
text-transform: uppercase; letter-spacing: 0.6px;
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px; margin: 1px 8px; border-radius: 6px;
font-size: 14px; font-weight: 500; color: #6B7280;
text-decoration: none; cursor: pointer;
transition: all 0.15s;
}
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge {
margin-left: auto;
background: #EF4444; color: #FFF;
font-size: 11px; font-weight: 600;
padding: 1px 7px; border-radius: 10px;
}
.nav-badge.yellow { background: #F59E0B; }
.sidebar-footer {
padding: 16px;
border-top: 1px solid #F3F4F6;
}
.user-row {
display: flex; align-items: center; gap: 10px;
padding: 8px; border-radius: 8px;
cursor: pointer; transition: background 0.15s;
}
.user-row:hover { background: #F9FAFB; }
.user-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: #4F46E5; color: #FFF;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn {
width: 100%; margin-top: 8px;
padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px;
background: transparent; color: #6B7280; font-size: 13px; font-weight: 500;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
transition: all 0.15s;
}
.logout-btn:hover { border-color: #EF4444; color: #EF4444; }
/* MAIN */
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav {
height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
display: flex; align-items: center; gap: 16px;
padding: 0 28px; position: sticky; top: 0; z-index: 40;
}
.search-bar {
flex: 1; max-width: 360px;
display: flex; align-items: center; gap: 8px;
background: #F9FAFB; border: 1.5px solid #E5E7EB; border-radius: 8px;
padding: 8px 14px;
}
.search-bar svg { width: 16px; height: 16px; color: #9CA3AF; flex-shrink: 0; }
.search-bar input {
border: none; background: transparent; font-size: 14px; color: #111827;
outline: none; width: 100%;
}
.search-bar input::placeholder { color: #9CA3AF; }
.topnav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
width: 36px; height: 36px; border-radius: 8px;
border: 1.5px solid #E5E7EB; background: #FFFFFF;
display: flex; align-items: center; justify-content: center;
cursor: pointer; position: relative; transition: all 0.15s;
}
.icon-btn:hover { background: #F9FAFB; border-color: #D1D5DB; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge {
position: absolute; top: -4px; right: -4px;
background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700;
width: 16px; height: 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 2px solid #FFFFFF;
}
.topnav-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: #4F46E5; color: #FFF;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; cursor: pointer;
}
.content { padding: 28px; }
/* WELCOME BANNER */
.welcome-banner {
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
border-radius: 12px; padding: 24px 28px;
margin-bottom: 24px; color: #FFFFFF;
display: flex; align-items: center; justify-content: space-between;
}
.welcome-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.welcome-sub { font-size: 14px; color: rgba(255,255,255,0.8); }
.welcome-right { text-align: right; }
.welcome-date { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
.welcome-btn {
padding: 8px 16px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px; color: #FFF; font-size: 13px; font-weight: 500; cursor: pointer;
transition: all 0.15s;
}
.welcome-btn:hover { background: rgba(255,255,255,0.3); }
/* STATS ROW */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
background: #FFFFFF; border-radius: 10px; padding: 20px;
border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
transition: all 0.2s;
}
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-label { font-size: 13px; color: #6B7280; font-weight: 500; }
.stat-icon {
width: 36px; height: 36px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 18px; height: 18px; }
.stat-value { font-size: 28px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.stat-change { font-size: 12px; color: #6B7280; display: flex; align-items: center; gap: 4px; }
.stat-change.up { color: #10B981; }
.stat-change.down { color: #EF4444; }
/* TWO COL GRID */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.card {
background: #FFFFFF; border-radius: 10px;
border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
overflow: hidden;
}
.card-header-row {
padding: 16px 20px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid #F3F4F6;
}
.card-title { font-size: 15px; font-weight: 600; color: #111827; }
.card-action { font-size: 13px; color: #4F46E5; cursor: pointer; font-weight: 500; text-decoration: none; }
.card-action:hover { text-decoration: underline; }
/* LEAVE REQUESTS */
.leave-item {
padding: 14px 20px;
border-bottom: 1px solid #F9FAFB;
display: flex; align-items: center; gap: 12px;
transition: background 0.1s;
}
.leave-item:hover { background: #FAFAFA; }
.leave-item:last-child { border-bottom: none; }
.emp-avatar {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; color: #FFF; flex-shrink: 0;
}
.leave-info { flex: 1; }
.leave-emp-name { font-size: 14px; font-weight: 500; color: #111827; }
.leave-meta { font-size: 12px; color: #9CA3AF; margin-top: 1px; }
.badge {
padding: 2px 8px; border-radius: 4px;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-green { background: #ECFDF5; color: #10B981; }
.badge-yellow { background: #FFFBEB; color: #F59E0B; }
.badge-red { background: #FEF2F2; color: #EF4444; }
.badge-purple { background: #F5F3FF; color: #7C3AED; }
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
.leave-actions { display: flex; gap: 6px; }
.btn-approve {
padding: 5px 12px; background: #ECFDF5; color: #10B981;
border: 1px solid #BBF7D0; border-radius: 5px;
font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.btn-approve:hover { background: #10B981; color: #FFF; }
.btn-reject {
padding: 5px 12px; background: #FEF2F2; color: #EF4444;
border: 1px solid #FECACA; border-radius: 5px;
font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.btn-reject:hover { background: #EF4444; color: #FFF; }
/* ACTIVITY */
.activity-item {
padding: 12px 20px;
display: flex; align-items: flex-start; gap: 12px;
border-bottom: 1px solid #F9FAFB;
transition: background 0.1s;
}
.activity-item:hover { background: #FAFAFA; }
.activity-item:last-child { border-bottom: none; }
.activity-icon {
width: 32px; height: 32px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.activity-content { flex: 1; }
.activity-text { font-size: 13px; color: #374151; line-height: 1.5; }
.activity-text strong { color: #111827; }
.activity-time { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
/* BOTTOM ROW */
.bottom-row { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
.dept-bar-item { padding: 10px 20px; display: flex; align-items: center; gap: 12px; }
.dept-bar-item:not(:last-child) { border-bottom: 1px solid #F9FAFB; }
.dept-name { font-size: 13px; font-weight: 500; color: #374151; width: 100px; flex-shrink: 0; }
.dept-bar-track { flex: 1; height: 8px; background: #F3F4F6; border-radius: 4px; overflow: hidden; }
.dept-bar-fill { height: 100%; border-radius: 4px; }
.dept-count { font-size: 13px; color: #6B7280; width: 40px; text-align: right; flex-shrink: 0; }
.announce-item { padding: 14px 20px; border-bottom: 1px solid #F9FAFB; }
.announce-item:last-child { border-bottom: none; }
.announce-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 3px; }
.announce-body { font-size: 13px; color: #6B7280; line-height: 1.5; }
.announce-meta { font-size: 11px; color: #9CA3AF; margin-top: 6px; }
</style>
</head>
<body>
<!-- SIDEBAR -->
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
HR Portal
</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
Dashboard
</a>
<a href="05-employee-directory.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
Employees
</a>
<a href="08-department-management.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Departments
</a>
<a href="09-leave-requests.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
Leave Management
<span class="nav-badge yellow">7</span>
</a>
<a href="11-attendance.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
Attendance
</a>
<a href="12-payroll-dashboard.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
Payroll
</a>
<a href="13-recruitment.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
Recruitment
</a>
<a href="14-expense-claims.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
Expense Claims
</a>
<a href="15-performance-reviews.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
Performance
</a>
<a href="16-reports.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
Reports
</a>
<a href="20-org-chart.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>
Org Chart
</a>
<a href="#" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
Announcements
</a>
<a href="17-settings.html" class="nav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>
Settings
</a>
</nav>
<div class="sidebar-footer">
<div class="user-row">
<div class="user-avatar">SC</div>
<div class="user-info">
<div class="user-name">Sarah Chen</div>
<div class="user-role">HR Administrator</div>
</div>
</div>
<button class="logout-btn">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
<polyline points="16 17 21 12 16 7"/>
<line x1="21" y1="12" x2="9" y2="12"/>
</svg>
Sign Out
</button>
</div>
</aside>
<!-- MAIN -->
<div class="main-wrapper">
<!-- TOPNAV -->
<header class="topnav">
<div class="search-bar">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input type="text" placeholder="Search employees, leaves, reports...">
</div>
<div class="topnav-actions">
<div class="icon-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
</svg>
<span class="notif-badge">3</span>
</div>
<div class="icon-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/>
</svg>
</div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<!-- CONTENT -->
<main class="content">
<!-- WELCOME BANNER -->
<div class="welcome-banner">
<div>
<div class="welcome-title">Good morning, Sarah! Here's what needs your attention.</div>
<div class="welcome-sub">You have 7 pending leave requests and 2 new job applications to review.</div>
</div>
<div class="welcome-right">
<div class="welcome-date">Friday, May 9, 2026</div>
<button class="welcome-btn">View Action Items</button>
</div>
</div>
<!-- STATS ROW -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-header">
<span class="stat-label">Total Employees</span>
<div class="stat-icon" style="background:#EEF2FF;">
<svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
</div>
<div class="stat-value">248</div>
<div class="stat-change up">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
+5 this month
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<span class="stat-label">On Leave Today</span>
<div class="stat-icon" style="background:#FFF7ED;">
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
</svg>
</div>
</div>
<div class="stat-value">12</div>
<div class="stat-change">4.8% of workforce</div>
</div>
<div class="stat-card">
<div class="stat-header">
<span class="stat-label">Pending Approvals</span>
<div class="stat-icon" style="background:#FEF2F2;">
<svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
<line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
</svg>
</div>
</div>
<div class="stat-value">7</div>
<div class="stat-change down">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
Needs action today
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<span class="stat-label">May Payroll</span>
<div class="stat-icon" style="background:#ECFDF5;">
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
<line x1="12" y1="1" x2="12" y2="23"/>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
</div>
<div class="stat-value">$284.5K</div>
<div class="stat-change up">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="18 15 12 9 6 15"/></svg>
+2.1% vs last month
</div>
</div>
</div>
<!-- TWO COLUMN -->
<div class="two-col">
<!-- PENDING LEAVE REQUESTS -->
<div class="card">
<div class="card-header-row">
<span class="card-title">Pending Leave Requests</span>
<a href="09-leave-requests.html" class="card-action">View all (7)</a>
</div>
<div class="leave-item">
<div class="emp-avatar" style="background:#4F46E5;">MR</div>
<div class="leave-info">
<div class="leave-emp-name">Michael Rodriguez</div>
<div class="leave-meta">May 12 – May 15 &nbsp;·&nbsp; 4 days</div>
</div>
<span class="badge badge-blue">Annual</span>
<div class="leave-actions">
<button class="btn-approve">Approve</button>
<button class="btn-reject">Reject</button>
</div>
</div>
<div class="leave-item">
<div class="emp-avatar" style="background:#10B981;">PP</div>
<div class="leave-info">
<div class="leave-emp-name">Priya Patel</div>
<div class="leave-meta">May 13 – May 13 &nbsp;·&nbsp; 1 day</div>
</div>
<span class="badge badge-yellow">Sick</span>
<div class="leave-actions">
<button class="btn-approve">Approve</button>
<button class="btn-reject">Reject</button>
</div>
</div>
<div class="leave-item">
<div class="emp-avatar" style="background:#F59E0B;">JK</div>
<div class="leave-info">
<div class="leave-emp-name">James Kim</div>
<div class="leave-meta">May 19 – May 23 &nbsp;·&nbsp; 5 days</div>
</div>
<span class="badge badge-blue">Annual</span>
<div class="leave-actions">
<button class="btn-approve">Approve</button>
<button class="btn-reject">Reject</button>
</div>
</div>
<div class="leave-item">
<div class="emp-avatar" style="background:#EF4444;">AL</div>
<div class="leave-info">
<div class="leave-emp-name">Aisha Larsson</div>
<div class="leave-meta">May 26 – May 28 &nbsp;·&nbsp; 3 days</div>
</div>
<span class="badge badge-purple">Casual</span>
<div class="leave-actions">
<button class="btn-approve">Approve</button>
<button class="btn-reject">Reject</button>
</div>
</div>
</div>
<!-- RECENT ACTIVITY -->
<div class="card">
<div class="card-header-row">
<span class="card-title">Recent Activity</span>
<a href="#" class="card-action">View log</a>
</div>
<div class="activity-item">
<div class="activity-icon" style="background:#EEF2FF;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-text"><strong>David Thompson</strong> was added to Engineering team</div>
<div class="activity-time">2 hours ago</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon" style="background:#ECFDF5;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2">
<polyline points="20 6 9 17 4 12"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-text">Leave request for <strong>Ravi Shankar</strong> was approved</div>
<div class="activity-time">3 hours ago</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon" style="background:#FFF7ED;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-text">April payroll of <strong>$278,400</strong> was processed</div>
<div class="activity-time">Yesterday, 4:30 PM</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon" style="background:#F5F3FF;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2">
<rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-text">New job posted: <strong>Senior Frontend Engineer</strong></div>
<div class="activity-time">Yesterday, 2:00 PM</div>
</div>
</div>
<div class="activity-item">
<div class="activity-icon" style="background:#FEF2F2;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
</div>
<div class="activity-content">
<div class="activity-text"><strong>Company announcement</strong> sent to all employees</div>
<div class="activity-time">May 8, 10:00 AM</div>
</div>
</div>
</div>
</div>
<!-- BOTTOM ROW -->
<div class="bottom-row">
<!-- DEPARTMENT OVERVIEW -->
<div class="card">
<div class="card-header-row">
<span class="card-title">Department Overview</span>
<a href="08-department-management.html" class="card-action">Manage</a>
</div>
<div class="dept-bar-item">
<span class="dept-name">Engineering</span>
<div class="dept-bar-track">
<div class="dept-bar-fill" style="width:62%;background:#4F46E5;"></div>
</div>
<span class="dept-count">45</span>
</div>
<div class="dept-bar-item">
<span class="dept-name">Operations</span>
<div class="dept-bar-track">
<div class="dept-bar-fill" style="width:43%;background:#3B82F6;"></div>
</div>
<span class="dept-count">31</span>
</div>
<div class="dept-bar-item">
<span class="dept-name">Sales</span>
<div class="dept-bar-track">
<div class="dept-bar-fill" style="width:33%;background:#10B981;"></div>
</div>
<span class="dept-count">24</span>
</div>
<div class="dept-bar-item">
<span class="dept-name">Marketing</span>
<div class="dept-bar-track">
<div class="dept-bar-fill" style="width:25%;background:#F59E0B;"></div>
</div>
<span class="dept-count">18</span>
</div>
<div class="dept-bar-item">
<span class="dept-name">Finance</span>
<div class="dept-bar-track">
<div class="dept-bar-fill" style="width:17%;background:#7C3AED;"></div>
</div>
<span class="dept-count">12</span>
</div>
<div class="dept-bar-item">
<span class="dept-name">HR</span>
<div class="dept-bar-track">
<div class="dept-bar-fill" style="width:11%;background:#EF4444;"></div>
</div>
<span class="dept-count">8</span>
</div>
</div>
<!-- ANNOUNCEMENTS -->
<div class="card">
<div class="card-header-row">
<span class="card-title">Announcements</span>
<a href="#" class="card-action">Post new</a>
</div>
<div class="announce-item">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
<span class="badge badge-indigo">Company</span>
<span style="font-size:11px;color:#9CA3AF;">Pinned</span>
</div>
<div class="announce-title">Q2 Performance Reviews Starting May 15</div>
<div class="announce-body">All managers must complete peer review forms by May 20. Self-assessments open from May 10.</div>
<div class="announce-meta">Posted by Sarah Chen &nbsp;·&nbsp; 2 days ago</div>
</div>
<div class="announce-item">
<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
<span class="badge badge-green">Policy</span>
</div>
<div class="announce-title">Updated Remote Work Policy</div>
<div class="announce-body">Effective June 1, employees may work remotely up to 3 days per week with manager approval.</div>
<div class="announce-meta">Posted by HR Team &nbsp;·&nbsp; May 7, 2026</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/05-employee-directory.html
+312
View File
@@ -0,0 +1,312 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employees — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; transition: all 0.15s; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb a:hover { color: #6B7280; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; color: #111827; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; }
.btn-primary:hover { background: #4338CA; }
.btn-primary svg { width: 16px; height: 16px; }
.stats-mini { display: flex; gap: 24px; margin-bottom: 20px; }
.stat-mini-item { display: flex; align-items: center; gap: 8px; }
.stat-mini-dot { width: 8px; height: 8px; border-radius: 50%; }
.stat-mini-label { font-size: 13px; color: #6B7280; }
.stat-mini-value { font-size: 14px; font-weight: 600; color: #111827; }
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.filter-search { flex: 1; max-width: 300px; display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; padding: 9px 14px; }
.filter-search svg { width: 16px; height: 16px; color: #9CA3AF; flex-shrink: 0; }
.filter-search input { border: none; background: transparent; font-size: 14px; color: #111827; outline: none; width: 100%; }
.filter-search input::placeholder { color: #9CA3AF; }
.filter-select { padding: 9px 14px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 14px; color: #374151; outline: none; cursor: pointer; appearance: none; min-width: 140px; }
.filter-btn { padding: 9px 14px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 14px; color: #374151; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.filter-btn svg { width: 16px; height: 16px; color: #9CA3AF; }
.filter-btn.active { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
th input[type="checkbox"] { accent-color: #4F46E5; }
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
.emp-cell { display: flex; align-items: center; gap: 12px; }
.emp-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #FFF; flex-shrink: 0; }
.emp-name { font-size: 14px; font-weight: 500; color: #111827; }
.emp-email { font-size: 12px; color: #9CA3AF; }
.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green { background: #ECFDF5; color: #10B981; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.action-btn { padding: 5px 12px; border-radius: 5px; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s; }
.action-btn-primary { background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; }
.action-btn-primary:hover { background: #4F46E5; color: #FFF; }
.action-btn-secondary { background: #F9FAFB; color: #6B7280; border: 1px solid #E5E7EB; }
.action-btn-secondary:hover { background: #F3F4F6; }
.actions-cell { display: flex; gap: 6px; }
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #F3F4F6; background: #FFFFFF; }
.page-info { font-size: 13px; color: #6B7280; }
.page-buttons { display: flex; gap: 4px; }
.page-btn { width: 32px; height: 32px; border-radius: 6px; border: 1.5px solid #E5E7EB; background: #FFFFFF; font-size: 13px; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; transition: all 0.15s; }
.page-btn:hover { border-color: #4F46E5; color: #4F46E5; }
.page-btn.active { background: #4F46E5; border-color: #4F46E5; color: #FFF; font-weight: 600; }
.page-btn svg { width: 14px; height: 14px; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
HR Portal
</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row">
<div class="user-avatar">SC</div>
<div>
<div class="user-name">Sarah Chen</div>
<div class="user-role">HR Administrator</div>
</div>
</div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Employees</span>
</div>
<div class="topnav-actions">
<div class="icon-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg>
<span class="notif-badge">3</span>
</div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<div class="page-title">Employees</div>
<div class="stats-mini" style="margin-top:6px;margin-bottom:0;">
<div class="stat-mini-item">
<div class="stat-mini-dot" style="background:#4F46E5;"></div>
<span class="stat-mini-label">Total:</span>
<span class="stat-mini-value">248</span>
</div>
<div class="stat-mini-item">
<div class="stat-mini-dot" style="background:#F59E0B;"></div>
<span class="stat-mini-label">On Leave:</span>
<span class="stat-mini-value">12</span>
</div>
<div class="stat-mini-item">
<div class="stat-mini-dot" style="background:#10B981;"></div>
<span class="stat-mini-label">New This Month:</span>
<span class="stat-mini-value">5</span>
</div>
</div>
</div>
<a href="07-add-employee.html" class="btn-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Add Employee
</a>
</div>
<div class="filter-bar">
<div class="filter-search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" placeholder="Search by name, email, department...">
</div>
<select class="filter-select">
<option>All Departments</option>
<option>Engineering</option>
<option>HR</option>
<option>Finance</option>
<option>Marketing</option>
<option>Operations</option>
<option>Sales</option>
</select>
<select class="filter-select">
<option>All Status</option>
<option>Active</option>
<option>Inactive</option>
<option>On Leave</option>
</select>
<button class="filter-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
Filters
</button>
<button class="filter-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export
</button>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>Employee</th>
<th>Department</th>
<th>Designation</th>
<th>Join Date</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#4F46E5;">SC</div><div><div class="emp-name">Sarah Chen</div><div class="emp-email">sarah.chen@techflow.com</div></div></div></td>
<td>HR</td>
<td>HR Director</td>
<td>Jan 15, 2022</td>
<td><span class="badge badge-green">Active</span></td>
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#10B981;">MR</div><div><div class="emp-name">Michael Rodriguez</div><div class="emp-email">m.rodriguez@techflow.com</div></div></div></td>
<td>Engineering</td>
<td>Senior Engineer</td>
<td>Mar 8, 2021</td>
<td><span class="badge badge-green">Active</span></td>
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#F59E0B;">PP</div><div><div class="emp-name">Priya Patel</div><div class="emp-email">priya.patel@techflow.com</div></div></div></td>
<td>Finance</td>
<td>Financial Analyst</td>
<td>Jun 22, 2022</td>
<td><span class="badge" style="background:#FEF3C7;color:#D97706;">On Leave</span></td>
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EF4444;">JK</div><div><div class="emp-name">James Kim</div><div class="emp-email">james.kim@techflow.com</div></div></div></td>
<td>Engineering</td>
<td>Frontend Developer</td>
<td>Sep 5, 2023</td>
<td><span class="badge badge-green">Active</span></td>
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">AL</div><div><div class="emp-name">Aisha Larsson</div><div class="emp-email">a.larsson@techflow.com</div></div></div></td>
<td>Marketing</td>
<td>Marketing Manager</td>
<td>Feb 14, 2023</td>
<td><span class="badge badge-green">Active</span></td>
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#3B82F6;">RS</div><div><div class="emp-name">Ravi Shankar</div><div class="emp-email">ravi.shankar@techflow.com</div></div></div></td>
<td>Operations</td>
<td>Operations Lead</td>
<td>Nov 12, 2020</td>
<td><span class="badge badge-green">Active</span></td>
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EC4899;">DT</div><div><div class="emp-name">Diana Torres</div><div class="emp-email">d.torres@techflow.com</div></div></div></td>
<td>Sales</td>
<td>Sales Representative</td>
<td>Apr 3, 2024</td>
<td><span class="badge badge-green">Active</span></td>
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#6366F1;">NW</div><div><div class="emp-name">Noah Williams</div><div class="emp-email">n.williams@techflow.com</div></div></div></td>
<td>Engineering</td>
<td>DevOps Engineer</td>
<td>Jul 19, 2022</td>
<td><span class="badge badge-gray">Inactive</span></td>
<td><div class="actions-cell"><a href="06-employee-profile.html" class="action-btn action-btn-primary">View</a><button class="action-btn action-btn-secondary">Edit</button></div></td>
</tr>
</tbody>
</table>
<div class="pagination">
<span class="page-info">Showing 1–8 of 248 employees</span>
<div class="page-buttons">
<button class="page-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">...</button>
<button class="page-btn">31</button>
<button class="page-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></button>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/06-employee-profile.html
+383
View File
@@ -0,0 +1,383 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Profile — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; transition: all 0.15s; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-header-left { display: flex; align-items: center; gap: 12px; }
.back-link { display: flex; align-items: center; gap: 6px; color: #6B7280; text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 6px; transition: all 0.15s; }
.back-link:hover { background: #F3F4F6; color: #374151; }
.back-link svg { width: 16px; height: 16px; }
.page-title { font-size: 22px; font-weight: 700; color: #111827; }
.header-actions { display: flex; gap: 8px; }
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-outline:hover { border-color: #9CA3AF; }
.btn-primary { padding: 8px 16px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary:hover { background: #4338CA; }
/* PROFILE HEADER */
.profile-header-card {
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 28px;
display: flex; align-items: flex-start; gap: 24px; margin-bottom: 24px;
}
.profile-avatar {
width: 80px; height: 80px; border-radius: 50%;
background: #4F46E5; color: #FFF;
display: flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 700; flex-shrink: 0;
}
.profile-info { flex: 1; }
.profile-name { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.profile-title { font-size: 16px; color: #6B7280; margin-bottom: 12px; }
.profile-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.badge { padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
.badge-green { background: #ECFDF5; color: #10B981; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-yellow { background: #FFFBEB; color: #F59E0B; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 20px; }
.profile-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
.profile-meta-item svg { width: 14px; height: 14px; color: #9CA3AF; }
.profile-stats { display: flex; flex-direction: column; gap: 12px; min-width: 200px; }
.quick-stat { text-align: center; background: #F9FAFB; border-radius: 8px; padding: 14px; border: 1px solid #E5E7EB; }
.quick-stat-value { font-size: 20px; font-weight: 700; color: #111827; }
.quick-stat-label { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
/* TABS */
.tabs { display: flex; gap: 0; border-bottom: 1px solid #E5E7EB; margin-bottom: 24px; overflow-x: auto; }
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.15s; text-decoration: none; }
.tab:hover { color: #374151; }
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }
/* TAB CONTENT */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.card-header-row { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F3F4F6; }
.card-title { font-size: 15px; font-weight: 600; color: #111827; }
.card-action { font-size: 13px; color: #4F46E5; cursor: pointer; font-weight: 500; }
.info-grid { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-item {}
.info-label { font-size: 11px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; }
.info-value { font-size: 14px; color: #111827; font-weight: 500; }
/* LEAVE BALANCE */
.leave-balances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.leave-balance-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.lb-type { font-size: 12px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.lb-progress { height: 6px; background: #F3F4F6; border-radius: 3px; margin-bottom: 10px; overflow: hidden; }
.lb-progress-fill { height: 100%; border-radius: 3px; }
.lb-numbers { display: flex; justify-content: space-between; align-items: baseline; }
.lb-used { font-size: 22px; font-weight: 700; color: #111827; }
.lb-total { font-size: 12px; color: #9CA3AF; }
/* QUICK STATS ROW */
.quick-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.qstat-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 16px; }
.qstat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qstat-icon svg { width: 20px; height: 20px; }
.qstat-value { font-size: 22px; font-weight: 700; color: #111827; }
.qstat-label { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
HR Portal
</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<a href="05-employee-directory.html">Employees</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Michael Rodriguez</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div class="page-header-left">
<a href="05-employee-directory.html" class="back-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
Back
</a>
<div class="page-title">Michael Rodriguez</div>
</div>
<div class="header-actions">
<button class="btn-outline">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export
</button>
<button class="btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
Edit Profile
</button>
</div>
</div>
<!-- PROFILE HEADER -->
<div class="profile-header-card">
<div class="profile-avatar">MR</div>
<div class="profile-info">
<div class="profile-name">Michael Rodriguez</div>
<div class="profile-title">Senior Software Engineer</div>
<div class="profile-badges">
<span class="badge badge-indigo">Engineering</span>
<span class="badge badge-green">Active</span>
<span class="badge badge-blue">Full-time</span>
</div>
<div class="profile-meta">
<div class="profile-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
m.rodriguez@techflow.com
</div>
<div class="profile-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.47a16 16 0 0 0 6.29 6.29l.87-.87a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+1 (415) 555-0187
</div>
<div class="profile-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
Joined Mar 8, 2021
</div>
<div class="profile-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
Reports to: Ravi Shankar
</div>
</div>
</div>
<div class="profile-stats">
<div class="quick-stat">
<div class="quick-stat-value" style="color:#4F46E5;">4.2</div>
<div class="quick-stat-label">Performance Score</div>
</div>
<div class="quick-stat">
<div class="quick-stat-value" style="color:#10B981;">98%</div>
<div class="quick-stat-label">Attendance Rate</div>
</div>
<div class="quick-stat">
<div class="quick-stat-value" style="color:#F59E0B;">168h</div>
<div class="quick-stat-label">Hours This Month</div>
</div>
</div>
</div>
<!-- TABS -->
<div class="tabs">
<a href="#" class="tab active">Overview</a>
<a href="#" class="tab">Leave</a>
<a href="#" class="tab">Attendance</a>
<a href="#" class="tab">Payslips</a>
<a href="#" class="tab">Documents</a>
<a href="#" class="tab">Performance</a>
</div>
<!-- OVERVIEW CONTENT -->
<div class="two-col">
<div class="card">
<div class="card-header-row">
<span class="card-title">Personal Information</span>
<span class="card-action">Edit</span>
</div>
<div class="info-grid">
<div class="info-item">
<div class="info-label">Full Name</div>
<div class="info-value">Michael David Rodriguez</div>
</div>
<div class="info-item">
<div class="info-label">Date of Birth</div>
<div class="info-value">April 14, 1990</div>
</div>
<div class="info-item">
<div class="info-label">Gender</div>
<div class="info-value">Male</div>
</div>
<div class="info-item">
<div class="info-label">Nationality</div>
<div class="info-value">American</div>
</div>
<div class="info-item" style="grid-column:1/-1;">
<div class="info-label">Address</div>
<div class="info-value">1247 Market Street, Apt 4B, San Francisco, CA 94103</div>
</div>
<div class="info-item">
<div class="info-label">Emergency Contact</div>
<div class="info-value">Elena Rodriguez (Wife)</div>
</div>
<div class="info-item">
<div class="info-label">Emergency Phone</div>
<div class="info-value">+1 (415) 555-0234</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header-row">
<span class="card-title">Employment Details</span>
<span class="card-action">Edit</span>
</div>
<div class="info-grid">
<div class="info-item">
<div class="info-label">Employee ID</div>
<div class="info-value">EMP-0042</div>
</div>
<div class="info-item">
<div class="info-label">Department</div>
<div class="info-value">Engineering</div>
</div>
<div class="info-item">
<div class="info-label">Designation</div>
<div class="info-value">Senior Software Engineer</div>
</div>
<div class="info-item">
<div class="info-label">Employment Type</div>
<div class="info-value">Full-time</div>
</div>
<div class="info-item">
<div class="info-label">Date of Joining</div>
<div class="info-value">March 8, 2021</div>
</div>
<div class="info-item">
<div class="info-label">Work Location</div>
<div class="info-value">San Francisco HQ</div>
</div>
<div class="info-item">
<div class="info-label">Manager</div>
<div class="info-value">Ravi Shankar</div>
</div>
<div class="info-item">
<div class="info-label">Salary Band</div>
<div class="info-value">Senior (L4)</div>
</div>
</div>
</div>
</div>
<!-- LEAVE BALANCES -->
<div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:12px;">Leave Balance</div>
<div class="leave-balances">
<div class="leave-balance-card">
<div class="lb-type">Annual Leave</div>
<div class="lb-progress"><div class="lb-progress-fill" style="width:90%;background:#4F46E5;"></div></div>
<div class="lb-numbers">
<div><span class="lb-used">18</span> <span style="font-size:13px;color:#6B7280;">days used</span></div>
<div class="lb-total">of 20 days</div>
</div>
</div>
<div class="leave-balance-card">
<div class="lb-type">Sick Leave</div>
<div class="lb-progress"><div class="lb-progress-fill" style="width:50%;background:#3B82F6;"></div></div>
<div class="lb-numbers">
<div><span class="lb-used">5</span> <span style="font-size:13px;color:#6B7280;">days used</span></div>
<div class="lb-total">of 10 days</div>
</div>
</div>
<div class="leave-balance-card">
<div class="lb-type">Casual Leave</div>
<div class="lb-progress"><div class="lb-progress-fill" style="width:60%;background:#10B981;"></div></div>
<div class="lb-numbers">
<div><span class="lb-used">3</span> <span style="font-size:13px;color:#6B7280;">days used</span></div>
<div class="lb-total">of 5 days</div>
</div>
</div>
</div>
<!-- QUICK STATS -->
<div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:12px;">This Month</div>
<div class="quick-stats-row">
<div class="qstat-card">
<div class="qstat-icon" style="background:#EEF2FF;">
<svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div>
<div class="qstat-value">168h 20m</div>
<div class="qstat-label">Working Hours</div>
</div>
</div>
<div class="qstat-card">
<div class="qstat-icon" style="background:#ECFDF5;">
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
</div>
<div>
<div class="qstat-value">98.2%</div>
<div class="qstat-label">Attendance Rate</div>
</div>
</div>
<div class="qstat-card">
<div class="qstat-icon" style="background:#FFF7ED;">
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
</div>
<div>
<div class="qstat-value">4.2 / 5.0</div>
<div class="qstat-label">Performance Score</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/07-add-employee.html
+365
View File
@@ -0,0 +1,365 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Employee — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn-cancel { padding: 8px 18px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn-save { padding: 8px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-save:hover { background: #4338CA; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; max-width: 900px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; color: #111827; }
.page-subtitle { font-size: 14px; color: #6B7280; margin-top: 2px; }
.form-actions { display: flex; gap: 8px; }
.form-section { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 20px; }
.section-header { padding: 18px 24px; border-bottom: 1px solid #F3F4F6; background: #FAFAFA; display: flex; align-items: center; gap: 10px; }
.section-num { width: 24px; height: 24px; background: #4F46E5; border-radius: 50%; color: #FFF; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.section-title { font-size: 14px; font-weight: 600; color: #111827; }
.section-subtitle { font-size: 12px; color: #9CA3AF; }
.section-body { padding: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.form-group {}
.form-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }
.form-label .req { color: #EF4444; }
.form-input, .form-select, .form-textarea {
width: 100%; padding: 9px 13px;
border: 1.5px solid #E5E7EB; border-radius: 6px;
font-size: 14px; font-family: 'Inter', sans-serif; color: #111827;
background: #FFFFFF; outline: none; transition: border-color 0.15s;
appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
.form-input::placeholder, .form-textarea::placeholder { color: #9CA3AF; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select-wrap { position: relative; }
.form-select-wrap::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #9CA3AF; pointer-events: none; }
.form-hint { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
.col-span-2 { grid-column: 1 / -1; }
/* AVATAR UPLOAD */
.avatar-upload { display: flex; align-items: center; gap: 20px; margin-bottom: 0; grid-column: 1 / -1; }
.avatar-preview { width: 72px; height: 72px; border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #9CA3AF; flex-shrink: 0; }
.avatar-upload-btn { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 13px; cursor: pointer; }
.avatar-upload-hint { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
/* CHECKBOX TOGGLE */
.checkbox-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4F46E5; cursor: pointer; }
.checkbox-row label { font-size: 14px; color: #374151; cursor: pointer; }
.divider { height: 1px; background: #F3F4F6; margin: 4px 0; }
/* BOTTOM SAVE BAR */
.save-bar {
position: fixed; bottom: 0; left: 240px; right: 0;
background: #FFFFFF; border-top: 1px solid #E5E7EB;
padding: 16px 28px; display: flex; align-items: center; justify-content: space-between;
z-index: 30;
}
.save-bar-note { font-size: 13px; color: #9CA3AF; }
.save-bar-actions { display: flex; gap: 10px; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
HR Portal
</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<a href="05-employee-directory.html">Employees</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Add New Employee</span>
</div>
<div class="topnav-actions">
<a href="05-employee-directory.html" class="btn-cancel">Cancel</a>
<button class="btn-save">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
Save Employee
</button>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content" style="padding-bottom:80px;">
<div class="page-header">
<div>
<div class="page-title">Add New Employee</div>
<div class="page-subtitle">Fill in the details below to create a new employee record.</div>
</div>
</div>
<!-- PERSONAL INFORMATION -->
<div class="form-section">
<div class="section-header">
<div class="section-num">1</div>
<div>
<div class="section-title">Personal Information</div>
<div class="section-subtitle">Basic personal details of the employee</div>
</div>
</div>
<div class="section-body">
<div class="form-grid">
<div class="form-group avatar-upload">
<div class="avatar-preview">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.58-7 8-7s8 3 8 7"/></svg>
</div>
<div>
<button class="avatar-upload-btn">Upload Photo</button>
<div class="avatar-upload-hint">PNG or JPG, max 2MB. Recommended 200x200px.</div>
</div>
</div>
<div class="form-group">
<label class="form-label" for="fname">First Name <span class="req">*</span></label>
<input class="form-input" type="text" id="fname" placeholder="John">
</div>
<div class="form-group">
<label class="form-label" for="lname">Last Name <span class="req">*</span></label>
<input class="form-input" type="text" id="lname" placeholder="Smith">
</div>
<div class="form-group">
<label class="form-label" for="email">Work Email <span class="req">*</span></label>
<input class="form-input" type="email" id="email" placeholder="john.smith@company.com">
</div>
<div class="form-group">
<label class="form-label" for="phone">Phone Number</label>
<input class="form-input" type="tel" id="phone" placeholder="+1 (555) 000-0000">
</div>
<div class="form-group">
<label class="form-label" for="dob">Date of Birth</label>
<input class="form-input" type="date" id="dob" value="1992-06-15">
</div>
<div class="form-group">
<label class="form-label" for="gender">Gender</label>
<div class="form-select-wrap">
<select class="form-select" id="gender">
<option value="">Select gender</option>
<option>Male</option>
<option>Female</option>
<option>Non-binary</option>
<option>Prefer not to say</option>
</select>
</div>
</div>
<div class="form-group col-span-2">
<label class="form-label" for="address">Home Address</label>
<textarea class="form-textarea" id="address" placeholder="Street address, City, State, ZIP Code"></textarea>
</div>
</div>
</div>
</div>
<!-- EMPLOYMENT DETAILS -->
<div class="form-section">
<div class="section-header">
<div class="section-num">2</div>
<div>
<div class="section-title">Employment Details</div>
<div class="section-subtitle">Role, department, and reporting structure</div>
</div>
</div>
<div class="section-body">
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="dept">Department <span class="req">*</span></label>
<div class="form-select-wrap">
<select class="form-select" id="dept">
<option value="">Select department</option>
<option>Engineering</option>
<option>HR</option>
<option>Finance</option>
<option>Marketing</option>
<option>Operations</option>
<option>Sales</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="designation">Designation / Job Title <span class="req">*</span></label>
<input class="form-input" type="text" id="designation" placeholder="e.g. Software Engineer">
</div>
<div class="form-group">
<label class="form-label" for="emp-type">Employment Type <span class="req">*</span></label>
<div class="form-select-wrap">
<select class="form-select" id="emp-type">
<option>Full-time</option>
<option>Part-time</option>
<option>Contract</option>
<option>Intern</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="doj">Date of Joining <span class="req">*</span></label>
<input class="form-input" type="date" id="doj" value="2026-05-15">
</div>
<div class="form-group">
<label class="form-label" for="manager">Reporting Manager</label>
<div class="form-select-wrap">
<select class="form-select" id="manager">
<option value="">Select manager</option>
<option>Sarah Chen (HR Director)</option>
<option>Ravi Shankar (Operations Lead)</option>
<option>Aisha Larsson (Marketing Manager)</option>
<option>Michael Rodriguez (Senior Engineer)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="location">Work Location</label>
<div class="form-select-wrap">
<select class="form-select" id="location">
<option>San Francisco HQ</option>
<option>New York Office</option>
<option>Remote</option>
<option>Austin Office</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- COMPENSATION -->
<div class="form-section">
<div class="section-header">
<div class="section-num">3</div>
<div>
<div class="section-title">Compensation</div>
<div class="section-subtitle">Salary structure and pay details</div>
</div>
</div>
<div class="section-body">
<div class="form-grid">
<div class="form-group">
<label class="form-label" for="salary-struct">Salary Structure <span class="req">*</span></label>
<div class="form-select-wrap">
<select class="form-select" id="salary-struct">
<option value="">Select a salary structure</option>
<option>Junior (L1) — $60K–$85K</option>
<option>Mid-level (L2) — $85K–$110K</option>
<option>Senior (L3) — $110K–$145K</option>
<option>Senior (L4) — $145K–$180K</option>
<option>Lead (L5) — $180K–$220K</option>
<option>Principal — Custom</option>
</select>
</div>
<div class="form-hint">Salary structure defines base pay, allowances, and deduction rules.</div>
</div>
<div class="form-group">
<label class="form-label" for="base-salary">Base Salary (Annual)</label>
<input class="form-input" type="number" id="base-salary" placeholder="120000">
</div>
</div>
</div>
</div>
<!-- ACCOUNT -->
<div class="form-section">
<div class="section-header">
<div class="section-num">4</div>
<div>
<div class="section-title">Account Setup</div>
<div class="section-subtitle">Configure login credentials and access</div>
</div>
</div>
<div class="section-body">
<div class="form-grid">
<div class="form-group col-span-2">
<div class="checkbox-row">
<input type="checkbox" id="auto-pass" checked>
<label for="auto-pass">Auto-generate a secure password and send login instructions via email</label>
</div>
<div class="form-hint" style="margin-top:8px;margin-left:26px;">A welcome email with login credentials will be sent to the employee's work email address.</div>
</div>
<div class="form-group col-span-2">
<div class="checkbox-row">
<input type="checkbox" id="send-welcome" checked>
<label for="send-welcome">Send welcome email with onboarding checklist</label>
</div>
</div>
<div class="form-group col-span-2">
<div class="checkbox-row">
<input type="checkbox" id="require-change">
<label for="require-change">Require password change on first login</label>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="save-bar">
<div class="save-bar-note">All fields marked with * are required</div>
<div class="save-bar-actions">
<a href="05-employee-directory.html" class="btn-cancel">Discard</a>
<button class="btn-save">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
Save Employee
</button>
</div>
</div>
</div>
</body>
</html>
designs/08-department-management.html
+331
View File
@@ -0,0 +1,331 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Departments — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; color: #111827; }
.page-subtitle { font-size: 14px; color: #6B7280; margin-top: 2px; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; }
.btn-primary:hover { background: #4338CA; }
.btn-primary svg { width: 16px; height: 16px; }
/* DEPT GRID */
.dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dept-card {
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
overflow: hidden; transition: all 0.2s;
}
.dept-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
.dept-card-header { padding: 20px 20px 0; display: flex; align-items: flex-start; justify-content: space-between; }
.dept-icon {
width: 48px; height: 48px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.dept-icon svg { width: 22px; height: 22px; }
.dept-card-actions { display: flex; gap: 4px; }
.icon-action { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #E5E7EB; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9CA3AF; transition: all 0.15s; }
.icon-action:hover.edit { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
.icon-action:hover.delete { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }
.icon-action svg { width: 14px; height: 14px; }
.dept-card-body { padding: 0 20px 20px; }
.dept-name { font-size: 17px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.dept-desc { font-size: 13px; color: #6B7280; line-height: 1.5; margin-bottom: 14px; }
.dept-head { display: flex; align-items: center; gap: 8px; padding: 10px; background: #F9FAFB; border-radius: 8px; margin-bottom: 14px; }
.dept-head-label { font-size: 11px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.dept-head-name { font-size: 13px; font-weight: 500; color: #111827; }
.dept-head-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #FFF; flex-shrink: 0; }
.dept-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #F3F4F6; }
.dept-count { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6B7280; }
.dept-count svg { width: 15px; height: 15px; }
.dept-count strong { color: #111827; font-weight: 600; }
.dept-link { font-size: 13px; color: #4F46E5; text-decoration: none; font-weight: 500; }
.dept-link:hover { text-decoration: underline; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
HR Portal
</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Departments</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<div class="page-title">Departments</div>
<div class="page-subtitle">6 departments &nbsp;·&nbsp; 138 employees total</div>
</div>
<button class="btn-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Department
</button>
</div>
<div class="dept-grid">
<!-- ENGINEERING -->
<div class="dept-card">
<div class="dept-card-header">
<div class="dept-icon" style="background:#EEF2FF;">
<svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
</div>
<div class="dept-card-actions">
<button class="icon-action edit">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
</button>
<button class="icon-action delete">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
</button>
</div>
</div>
<div class="dept-card-body">
<div class="dept-name">Engineering</div>
<div class="dept-desc">Product development, software engineering, DevOps, and technical architecture.</div>
<div class="dept-head">
<div class="dept-head-avatar" style="background:#4F46E5;">MR</div>
<div>
<div class="dept-head-label">Head of Department</div>
<div class="dept-head-name">Michael Rodriguez</div>
</div>
</div>
<div class="dept-footer">
<div class="dept-count">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<strong>45</strong> employees
</div>
<a href="05-employee-directory.html" class="dept-link">View team</a>
</div>
</div>
</div>
<!-- HR -->
<div class="dept-card">
<div class="dept-card-header">
<div class="dept-icon" style="background:#ECFDF5;">
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
</div>
<div class="dept-card-actions">
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
</div>
</div>
<div class="dept-card-body">
<div class="dept-name">Human Resources</div>
<div class="dept-desc">Talent acquisition, employee relations, benefits, and organizational development.</div>
<div class="dept-head">
<div class="dept-head-avatar" style="background:#10B981;">SC</div>
<div>
<div class="dept-head-label">Head of Department</div>
<div class="dept-head-name">Sarah Chen</div>
</div>
</div>
<div class="dept-footer">
<div class="dept-count">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<strong>8</strong> employees
</div>
<a href="05-employee-directory.html" class="dept-link">View team</a>
</div>
</div>
</div>
<!-- FINANCE -->
<div class="dept-card">
<div class="dept-card-header">
<div class="dept-icon" style="background:#FFFBEB;">
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<div class="dept-card-actions">
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
</div>
</div>
<div class="dept-card-body">
<div class="dept-name">Finance</div>
<div class="dept-desc">Financial planning, accounting, payroll processing, and audit compliance.</div>
<div class="dept-head">
<div class="dept-head-avatar" style="background:#F59E0B;">PP</div>
<div>
<div class="dept-head-label">Head of Department</div>
<div class="dept-head-name">Priya Patel</div>
</div>
</div>
<div class="dept-footer">
<div class="dept-count">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<strong>12</strong> employees
</div>
<a href="05-employee-directory.html" class="dept-link">View team</a>
</div>
</div>
</div>
<!-- MARKETING -->
<div class="dept-card">
<div class="dept-card-header">
<div class="dept-icon" style="background:#FEF2F2;">
<svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
</div>
<div class="dept-card-actions">
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
</div>
</div>
<div class="dept-card-body">
<div class="dept-name">Marketing</div>
<div class="dept-desc">Brand management, digital marketing, content strategy, and growth campaigns.</div>
<div class="dept-head">
<div class="dept-head-avatar" style="background:#7C3AED;">AL</div>
<div>
<div class="dept-head-label">Head of Department</div>
<div class="dept-head-name">Aisha Larsson</div>
</div>
</div>
<div class="dept-footer">
<div class="dept-count">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<strong>18</strong> employees
</div>
<a href="05-employee-directory.html" class="dept-link">View team</a>
</div>
</div>
</div>
<!-- OPERATIONS -->
<div class="dept-card">
<div class="dept-card-header">
<div class="dept-icon" style="background:#F0FDF4;">
<svg viewBox="0 0 24 24" fill="none" stroke="#16A34A" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>
</div>
<div class="dept-card-actions">
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
</div>
</div>
<div class="dept-card-body">
<div class="dept-name">Operations</div>
<div class="dept-desc">Supply chain management, facilities, vendor relations, and business processes.</div>
<div class="dept-head">
<div class="dept-head-avatar" style="background:#3B82F6;">RS</div>
<div>
<div class="dept-head-label">Head of Department</div>
<div class="dept-head-name">Ravi Shankar</div>
</div>
</div>
<div class="dept-footer">
<div class="dept-count">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<strong>31</strong> employees
</div>
<a href="05-employee-directory.html" class="dept-link">View team</a>
</div>
</div>
</div>
<!-- SALES -->
<div class="dept-card">
<div class="dept-card-header">
<div class="dept-icon" style="background:#F5F3FF;">
<svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
</div>
<div class="dept-card-actions">
<button class="icon-action edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
<button class="icon-action delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
</div>
</div>
<div class="dept-card-body">
<div class="dept-name">Sales</div>
<div class="dept-desc">Revenue generation, account management, business development, and customer success.</div>
<div class="dept-head">
<div class="dept-head-avatar" style="background:#EC4899;">DT</div>
<div>
<div class="dept-head-label">Head of Department</div>
<div class="dept-head-name">Diana Torres</div>
</div>
</div>
<div class="dept-footer">
<div class="dept-count">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<strong>24</strong> employees
</div>
<a href="05-employee-directory.html" class="dept-link">View team</a>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/09-leave-requests.html
+322
View File
@@ -0,0 +1,322 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leave Requests — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; }
.header-right { display: flex; gap: 8px; }
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary svg { width: 16px; height: 16px; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid #E5E7EB; margin-bottom: 20px; }
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all 0.15s; display: flex; align-items: center; gap: 6px; }
.tab:hover { color: #374151; }
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }
.tab-count { background: #F3F4F6; color: #6B7280; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.tab.active .tab-count { background: #EEF2FF; color: #4F46E5; }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-input { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; }
.filter-input:focus { border-color: #4F46E5; }
.filter-select { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; appearance: none; cursor: pointer; }
.filter-search { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; padding: 8px 13px; }
.filter-search svg { width: 15px; height: 15px; color: #9CA3AF; flex-shrink: 0; }
.filter-search input { border: none; background: transparent; font-size: 14px; outline: none; width: 180px; }
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
.emp-cell { display: flex; align-items: center; gap: 10px; }
.emp-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #FFF; flex-shrink: 0; }
.emp-name { font-size: 13px; font-weight: 500; color: #111827; }
.emp-dept { font-size: 11px; color: #9CA3AF; }
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-yellow { background: #FFFBEB; color: #D97706; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-red { background: #FEF2F2; color: #DC2626; }
.badge-purple { background: #F5F3FF; color: #7C3AED; }
.badge-orange { background: #FFF7ED; color: #EA580C; }
.badge-pink { background: #FDF2F8; color: #DB2777; }
.status-pending { background: #FFFBEB; color: #D97706; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.status-approved { background: #ECFDF5; color: #059669; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.status-rejected { background: #FEF2F2; color: #DC2626; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.reason-text { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6B7280; font-size: 13px; }
.actions-cell { display: flex; gap: 6px; }
.btn-approve { padding: 4px 10px; background: #ECFDF5; color: #10B981; border: 1px solid #BBF7D0; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.btn-approve:hover { background: #10B981; color: #FFF; }
.btn-reject { padding: 4px 10px; background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.btn-reject:hover { background: #EF4444; color: #FFF; }
.btn-view { padding: 4px 10px; background: #F9FAFB; color: #6B7280; border: 1px solid #E5E7EB; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: pointer; }
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #F3F4F6; }
.page-info { font-size: 13px; color: #6B7280; }
.page-buttons { display: flex; gap: 4px; }
.page-btn { width: 30px; height: 30px; border-radius: 6px; border: 1.5px solid #E5E7EB; background: #FFFFFF; font-size: 13px; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.page-btn.active { background: #4F46E5; border-color: #4F46E5; color: #FFF; font-weight: 600; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Leave Management</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div class="page-title">Leave Requests</div>
<div class="header-right">
<a href="10-leave-types.html" class="btn-outline">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2"/></svg>
Leave Types
</a>
<button class="btn-outline">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export
</button>
</div>
</div>
<div class="tabs">
<a href="#" class="tab">All Requests <span class="tab-count">52</span></a>
<a href="#" class="tab active">Pending <span class="tab-count">7</span></a>
<a href="#" class="tab">Approved <span class="tab-count">38</span></a>
<a href="#" class="tab">Rejected <span class="tab-count">7</span></a>
</div>
<div class="filter-bar">
<div class="filter-search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" placeholder="Search employee...">
</div>
<input class="filter-input" type="date" value="2026-05-01">
<input class="filter-input" type="date" value="2026-05-31">
<select class="filter-select">
<option>All Departments</option>
<option>Engineering</option>
<option>HR</option>
<option>Finance</option>
<option>Marketing</option>
</select>
<select class="filter-select">
<option>All Leave Types</option>
<option>Annual Leave</option>
<option>Sick Leave</option>
<option>Casual Leave</option>
<option>Maternity Leave</option>
</select>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th>Employee</th>
<th>Leave Type</th>
<th>From</th>
<th>To</th>
<th>Days</th>
<th>Reason</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#4F46E5;">MR</div><div><div class="emp-name">Michael Rodriguez</div><div class="emp-dept">Engineering</div></div></div></td>
<td><span class="badge badge-blue">Annual Leave</span></td>
<td>May 12, 2026</td>
<td>May 15, 2026</td>
<td>4</td>
<td><span class="reason-text">Family vacation, planned in advance</span></td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#10B981;">PP</div><div><div class="emp-name">Priya Patel</div><div class="emp-dept">Finance</div></div></div></td>
<td><span class="badge badge-orange">Sick Leave</span></td>
<td>May 13, 2026</td>
<td>May 13, 2026</td>
<td>1</td>
<td><span class="reason-text">Fever and cold, doctor's appointment</span></td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#F59E0B;">JK</div><div><div class="emp-name">James Kim</div><div class="emp-dept">Engineering</div></div></div></td>
<td><span class="badge badge-blue">Annual Leave</span></td>
<td>May 19, 2026</td>
<td>May 23, 2026</td>
<td>5</td>
<td><span class="reason-text">Wedding anniversary trip abroad</span></td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EF4444;">AL</div><div><div class="emp-name">Aisha Larsson</div><div class="emp-dept">Marketing</div></div></div></td>
<td><span class="badge badge-purple">Casual Leave</span></td>
<td>May 26, 2026</td>
<td>May 28, 2026</td>
<td>3</td>
<td><span class="reason-text">Personal errands and home renovation</span></td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#3B82F6;">RS</div><div><div class="emp-name">Ravi Shankar</div><div class="emp-dept">Operations</div></div></div></td>
<td><span class="badge badge-blue">Annual Leave</span></td>
<td>Jun 2, 2026</td>
<td>Jun 6, 2026</td>
<td>5</td>
<td><span class="reason-text">Family visit and religious festival</span></td>
<td><span class="status-approved">Approved</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EC4899;">DT</div><div><div class="emp-name">Diana Torres</div><div class="emp-dept">Sales</div></div></div></td>
<td><span class="badge badge-orange">Sick Leave</span></td>
<td>May 7, 2026</td>
<td>May 8, 2026</td>
<td>2</td>
<td><span class="reason-text">Migraine, needed bed rest</span></td>
<td><span class="status-approved">Approved</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#6366F1;">NW</div><div><div class="emp-name">Noah Williams</div><div class="emp-dept">Engineering</div></div></div></td>
<td><span class="badge badge-pink">Bereavement</span></td>
<td>Apr 28, 2026</td>
<td>Apr 30, 2026</td>
<td>3</td>
<td><span class="reason-text">Loss of grandparent, funeral attendance</span></td>
<td><span class="status-approved">Approved</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#059669;">LO</div><div><div class="emp-name">Lucas Oliveira</div><div class="emp-dept">Operations</div></div></div></td>
<td><span class="badge badge-blue">Annual Leave</span></td>
<td>Apr 14, 2026</td>
<td>Apr 18, 2026</td>
<td>5</td>
<td><span class="reason-text">Planned vacation to Mexico</span></td>
<td><span class="status-rejected">Rejected</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#D97706;">FA</div><div><div class="emp-name">Fatima Al-Rashid</div><div class="emp-dept">Finance</div></div></div></td>
<td><span class="badge badge-purple">Casual Leave</span></td>
<td>May 9, 2026</td>
<td>May 9, 2026</td>
<td>1</td>
<td><span class="reason-text">Urgent bank errand</span></td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">KL</div><div><div class="emp-name">Kevin Liu</div><div class="emp-dept">Marketing</div></div></div></td>
<td><span class="badge badge-orange">Sick Leave</span></td>
<td>May 5, 2026</td>
<td>May 6, 2026</td>
<td>2</td>
<td><span class="reason-text">Food poisoning, doctor advised rest</span></td>
<td><span class="status-approved">Approved</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
</tbody>
</table>
<div class="pagination">
<span class="page-info">Showing 1–10 of 52 requests</span>
<div class="page-buttons">
<button class="page-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">4</button>
<button class="page-btn">5</button>
<button class="page-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></button>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/10-leave-types.html
+293
View File
@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leave Types — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; }
.page-subtitle { font-size: 14px; color: #6B7280; margin-top: 2px; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary svg { width: 16px; height: 16px; }
.btn-outline { padding: 8px 14px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 13px; cursor: pointer; }
.back-link { display: flex; align-items: center; gap: 6px; color: #4F46E5; font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 20px; }
.back-link svg { width: 16px; height: 16px; }
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td { padding: 16px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
.leave-type-cell { display: flex; align-items: center; gap: 10px; }
.leave-type-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.leave-type-name { font-size: 14px; font-weight: 600; color: #111827; }
.leave-type-code { font-size: 11px; color: #9CA3AF; }
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-yellow { background: #FFFBEB; color: #D97706; }
.check-icon { color: #10B981; width: 18px; height: 18px; }
.x-icon { color: #D1D5DB; width: 18px; height: 18px; }
/* TOGGLE SWITCH */
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #D1D5DB; border-radius: 11px; transition: 0.2s; }
.toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
input:checked + .toggle-slider { background: #4F46E5; }
input:checked + .toggle-slider:before { transform: translateX(18px); }
.actions-cell { display: flex; gap: 4px; }
.action-icon { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #E5E7EB; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9CA3AF; transition: all 0.15s; }
.action-icon:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
.action-icon svg { width: 14px; height: 14px; }
.applicable-badge { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background: #F3F4F6; color: #374151; margin: 1px; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<a href="09-leave-requests.html">Leave Management</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Leave Types</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<a href="09-leave-requests.html" class="back-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
Back to Leave Requests
</a>
<div class="page-header">
<div>
<div class="page-title">Leave Types</div>
<div class="page-subtitle">Configure leave policies, entitlements, and eligibility rules</div>
</div>
<button class="btn-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Leave Type
</button>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th>Leave Type</th>
<th>Code</th>
<th>Days / Year</th>
<th>Carry Forward</th>
<th>Requires Approval</th>
<th>Applicable To</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="leave-type-cell">
<div class="leave-type-dot" style="background:#4F46E5;"></div>
<div>
<div class="leave-type-name">Annual Leave</div>
<div class="leave-type-code">Used for vacations &amp; personal time</div>
</div>
</div>
</td>
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">AL</span></td>
<td><strong>20</strong> days</td>
<td>
<div style="display:flex;align-items:center;gap:4px;">
<svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
Up to 10 days
</div>
</td>
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span class="applicable-badge">All Employees</span></td>
<td>
<label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
</td>
<td>
<div class="actions-cell">
<button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
<button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button>
</div>
</td>
</tr>
<tr>
<td>
<div class="leave-type-cell">
<div class="leave-type-dot" style="background:#F59E0B;"></div>
<div>
<div class="leave-type-name">Sick Leave</div>
<div class="leave-type-code">Medical and health related absences</div>
</div>
</div>
</td>
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">SL</span></td>
<td><strong>10</strong> days</td>
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td>
<div style="display:flex;align-items:center;gap:4px;font-size:13px;color:#9CA3AF;">
<svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
Self-approve
</div>
</td>
<td><span class="applicable-badge">All Employees</span></td>
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
</tr>
<tr>
<td>
<div class="leave-type-cell">
<div class="leave-type-dot" style="background:#10B981;"></div>
<div>
<div class="leave-type-name">Casual Leave</div>
<div class="leave-type-code">Short-term personal reasons</div>
</div>
</div>
</td>
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">CL</span></td>
<td><strong>5</strong> days</td>
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span class="applicable-badge">All Employees</span></td>
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
</tr>
<tr>
<td>
<div class="leave-type-cell">
<div class="leave-type-dot" style="background:#EC4899;"></div>
<div>
<div class="leave-type-name">Maternity Leave</div>
<div class="leave-type-code">Paid leave for new mothers</div>
</div>
</div>
</td>
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">ML</span></td>
<td><strong>90</strong> days</td>
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span class="applicable-badge">Female Employees</span></td>
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
</tr>
<tr>
<td>
<div class="leave-type-cell">
<div class="leave-type-dot" style="background:#3B82F6;"></div>
<div>
<div class="leave-type-name">Paternity Leave</div>
<div class="leave-type-code">Paid leave for new fathers</div>
</div>
</div>
</td>
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">PL</span></td>
<td><strong>5</strong> days</td>
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span class="applicable-badge">Male Employees</span></td>
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
</tr>
<tr>
<td>
<div class="leave-type-cell">
<div class="leave-type-dot" style="background:#6B7280;"></div>
<div>
<div class="leave-type-name">Bereavement Leave</div>
<div class="leave-type-code">Leave for family loss and mourning</div>
</div>
</div>
</td>
<td><span style="font-family:monospace;font-size:13px;background:#F3F4F6;padding:2px 8px;border-radius:4px;">BL</span></td>
<td><strong>3</strong> days</td>
<td><svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></td>
<td><svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg></td>
<td><span class="applicable-badge">All Employees</span></td>
<td><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></td>
<td><div class="actions-cell"><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button><button class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></button></div></td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</body>
</html>
designs/11-attendance.html
+293
View File
@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attendance — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; }
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tabs { display: flex; border-bottom: 1px solid #E5E7EB; margin-bottom: 20px; }
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.filter-input { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; }
.filter-select { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; cursor: pointer; appearance: none; min-width: 150px; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #FFFFFF; border-radius: 10px; padding: 18px 20px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 14px; }
.stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon svg { width: 20px; height: 20px; }
.stat-value { font-size: 24px; font-weight: 700; color: #111827; }
.stat-label { font-size: 12px; color: #9CA3AF; margin-top: 1px; }
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; }
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
.emp-cell { display: flex; align-items: center; gap: 10px; }
.emp-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #FFF; flex-shrink: 0; }
.emp-name { font-size: 13px; font-weight: 500; color: #111827; }
.emp-dept { font-size: 11px; color: #9CA3AF; }
.time-cell { font-size: 14px; font-weight: 500; color: #111827; }
.hours-cell { font-size: 14px; color: #374151; }
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-red { background: #FEF2F2; color: #DC2626; }
.badge-yellow { background: #FFFBEB; color: #D97706; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
.note-text { font-size: 12px; color: #9CA3AF; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Attendance</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div class="page-title">Attendance Log</div>
<div style="display:flex;gap:8px;">
<button class="btn-outline">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export
</button>
</div>
</div>
<div class="tabs">
<div class="tab active">Daily</div>
<div class="tab">Monthly</div>
<div class="tab">Calendar View</div>
</div>
<div class="filter-bar">
<input class="filter-input" type="date" value="2026-05-09">
<select class="filter-select">
<option>All Departments</option>
<option>Engineering</option>
<option>HR</option>
<option>Finance</option>
<option>Marketing</option>
<option>Operations</option>
</select>
<select class="filter-select">
<option>All Status</option>
<option>Present</option>
<option>Absent</option>
<option>On Leave</option>
<option>Half Day</option>
<option>Late Arrival</option>
</select>
</div>
<div class="stats-row">
<div class="stat-card">
<div class="stat-icon" style="background:#ECFDF5;"><svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg></div>
<div><div class="stat-value">198</div><div class="stat-label">Present</div></div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:#FEF2F2;"><svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="8" y1="12" x2="16" y2="12"/></svg></div>
<div><div class="stat-value">12</div><div class="stat-label">Absent</div></div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:#EFF6FF;"><svg viewBox="0 0 24 24" fill="none" stroke="#3B82F6" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
<div><div class="stat-value">15</div><div class="stat-label">On Leave</div></div>
</div>
<div class="stat-card">
<div class="stat-icon" style="background:#FFFBEB;"><svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
<div><div class="stat-value">5</div><div class="stat-label">Half Day</div></div>
</div>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th>Employee</th>
<th>Check In</th>
<th>Check Out</th>
<th>Working Hours</th>
<th>Status</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#4F46E5;">MR</div><div><div class="emp-name">Michael Rodriguez</div><div class="emp-dept">Engineering</div></div></div></td>
<td><div class="time-cell">09:02 AM</div></td>
<td><div class="time-cell">06:15 PM</div></td>
<td><div class="hours-cell">9h 13m</div></td>
<td><span class="badge badge-green">Present</span></td>
<td><span class="note-text">—</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#10B981;">PP</div><div><div class="emp-name">Priya Patel</div><div class="emp-dept">Finance</div></div></div></td>
<td><div class="time-cell">—</div></td>
<td><div class="time-cell">—</div></td>
<td><div class="hours-cell">—</div></td>
<td><span class="badge badge-blue">On Leave</span></td>
<td><span class="note-text">Sick leave approved</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#F59E0B;">JK</div><div><div class="emp-name">James Kim</div><div class="emp-dept">Engineering</div></div></div></td>
<td><div class="time-cell">09:45 AM</div></td>
<td><div class="time-cell">06:30 PM</div></td>
<td><div class="hours-cell">8h 45m</div></td>
<td><span class="badge badge-yellow">Late Arrival</span></td>
<td><span class="note-text">Traffic delay</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">AL</div><div><div class="emp-name">Aisha Larsson</div><div class="emp-dept">Marketing</div></div></div></td>
<td><div class="time-cell">08:55 AM</div></td>
<td><div class="time-cell">05:55 PM</div></td>
<td><div class="hours-cell">9h 00m</div></td>
<td><span class="badge badge-green">Present</span></td>
<td><span class="note-text">—</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#3B82F6;">RS</div><div><div class="emp-name">Ravi Shankar</div><div class="emp-dept">Operations</div></div></div></td>
<td><div class="time-cell">08:30 AM</div></td>
<td><div class="time-cell">01:00 PM</div></td>
<td><div class="hours-cell">4h 30m</div></td>
<td><span class="badge badge-yellow">Half Day</span></td>
<td><span class="note-text">Doctor appointment PM</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EC4899;">DT</div><div><div class="emp-name">Diana Torres</div><div class="emp-dept">Sales</div></div></div></td>
<td><div class="time-cell">09:00 AM</div></td>
<td><div class="time-cell">06:05 PM</div></td>
<td><div class="hours-cell">9h 05m</div></td>
<td><span class="badge badge-green">Present</span></td>
<td><span class="note-text">—</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#059669;">LO</div><div><div class="emp-name">Lucas Oliveira</div><div class="emp-dept">Operations</div></div></div></td>
<td><div class="time-cell">—</div></td>
<td><div class="time-cell">—</div></td>
<td><div class="hours-cell">—</div></td>
<td><span class="badge badge-red">Absent</span></td>
<td><span class="note-text">No notice provided</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#D97706;">FA</div><div><div class="emp-name">Fatima Al-Rashid</div><div class="emp-dept">Finance</div></div></div></td>
<td><div class="time-cell">08:48 AM</div></td>
<td><div class="time-cell">05:50 PM</div></td>
<td><div class="hours-cell">9h 02m</div></td>
<td><span class="badge badge-green">Present</span></td>
<td><span class="note-text">—</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#6366F1;">NW</div><div><div class="emp-name">Noah Williams</div><div class="emp-dept">Engineering</div></div></div></td>
<td><div class="time-cell">09:15 AM</div></td>
<td><div class="time-cell">06:20 PM</div></td>
<td><div class="hours-cell">9h 05m</div></td>
<td><span class="badge badge-green">Present</span></td>
<td><span class="note-text">WFH approved</span></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">KL</div><div><div class="emp-name">Kevin Liu</div><div class="emp-dept">Marketing</div></div></div></td>
<td><div class="time-cell">09:00 AM</div></td>
<td><div class="time-cell">06:00 PM</div></td>
<td><div class="hours-cell">9h 00m</div></td>
<td><span class="badge badge-green">Present</span></td>
<td><span class="note-text">—</span></td>
</tr>
</tbody>
</table>
<div style="padding:14px 20px;border-top:1px solid #F3F4F6;display:flex;justify-content:space-between;align-items:center;">
<span style="font-size:13px;color:#6B7280;">Showing 1–10 of 230 employees</span>
<div style="display:flex;gap:4px;">
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #4F46E5;background:#4F46E5;color:#FFF;font-size:13px;font-weight:600;cursor:pointer;">1</button>
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;">2</button>
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;">3</button>
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/12-payroll-dashboard.html
+278
View File
@@ -0,0 +1,278 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payroll — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; }
/* MONTH SELECTOR */
.month-selector { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; padding: 8px 16px; }
.month-nav-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6B7280; }
.month-nav-btn svg { width: 14px; height: 14px; }
.month-label { font-size: 15px; font-weight: 600; color: #111827; min-width: 120px; text-align: center; }
/* STATUS CARD */
.payroll-status-card {
background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
border: 2px dashed #E5E7EB;
border-radius: 12px; padding: 28px;
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px;
}
.payroll-status-card.pending { border-color: #FCD34D; background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 100%); }
.status-info {}
.status-title { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.status-sub { font-size: 14px; color: #6B7280; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-top: 10px; }
.status-badge.draft { background: #FEF9C3; color: #A16207; }
.btn-generate { padding: 12px 24px; background: #4F46E5; color: #FFF; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.btn-generate:hover { background: #4338CA; }
/* STATS ROW */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #FFFFFF; border-radius: 10px; padding: 20px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.stat-label { font-size: 12px; color: #6B7280; font-weight: 500; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.stat-value { font-size: 24px; font-weight: 700; color: #111827; }
.stat-sub { font-size: 12px; color: #9CA3AF; margin-top: 4px; }
/* TWO COL */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
.card-header-row { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F3F4F6; }
.card-title { font-size: 15px; font-weight: 600; color: #111827; }
.card-action { font-size: 13px; color: #4F46E5; cursor: pointer; font-weight: 500; }
table { width: 100%; border-collapse: collapse; }
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; }
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
td strong { color: #111827; font-weight: 600; }
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-yellow { background: #FFFBEB; color: #D97706; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Payroll</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div class="page-title">Payroll</div>
<div class="month-selector">
<button class="month-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
<span class="month-label">May 2026</span>
<button class="month-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></button>
</div>
</div>
<!-- STATUS CARD -->
<div class="payroll-status-card pending">
<div class="status-info">
<div class="status-title">May 2026 Payroll</div>
<div class="status-sub">Payroll has not been generated yet. Review attendance and leave data before processing.</div>
<div class="status-badge draft">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
Not Generated
</div>
</div>
<div style="text-align:right;">
<div style="font-size:12px;color:#9CA3AF;margin-bottom:12px;">Pay date: May 31, 2026</div>
<button class="btn-generate">Generate Payroll</button>
</div>
</div>
<!-- STATS -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-label">Total Employees</div>
<div class="stat-value">248</div>
<div class="stat-sub">On active payroll</div>
</div>
<div class="stat-card">
<div class="stat-label">Gross Payroll</div>
<div class="stat-value" style="color:#4F46E5;">$284,500</div>
<div class="stat-sub">+2.1% vs April</div>
</div>
<div class="stat-card">
<div class="stat-label">Total Deductions</div>
<div class="stat-value" style="color:#EF4444;">$43,200</div>
<div class="stat-sub">Tax, PF, insurance</div>
</div>
<div class="stat-card">
<div class="stat-label">Net Payable</div>
<div class="stat-value" style="color:#10B981;">$241,300</div>
<div class="stat-sub">After all deductions</div>
</div>
</div>
<!-- TWO COLUMN -->
<div class="two-col">
<!-- SALARY STRUCTURES -->
<div class="card">
<div class="card-header-row">
<span class="card-title">Salary Structures</span>
<span class="card-action">Manage</span>
</div>
<table>
<thead>
<tr>
<th>Structure Name</th>
<th>Base Salary</th>
<th>Employees</th>
</tr>
</thead>
<tbody>
<tr>
<td><div style="font-size:14px;font-weight:500;color:#111827;">Junior (L1)</div><div style="font-size:12px;color:#9CA3AF;">$60K – $85K / year</div></td>
<td><strong>$6,800</strong>/mo</td>
<td><span style="font-size:14px;font-weight:500;">42</span></td>
</tr>
<tr>
<td><div style="font-size:14px;font-weight:500;color:#111827;">Mid-Level (L2)</div><div style="font-size:12px;color:#9CA3AF;">$85K – $110K / year</div></td>
<td><strong>$8,200</strong>/mo</td>
<td><span style="font-size:14px;font-weight:500;">98</span></td>
</tr>
<tr>
<td><div style="font-size:14px;font-weight:500;color:#111827;">Senior (L3)</div><div style="font-size:12px;color:#9CA3AF;">$110K – $145K / year</div></td>
<td><strong>$10,500</strong>/mo</td>
<td><span style="font-size:14px;font-weight:500;">67</span></td>
</tr>
<tr>
<td><div style="font-size:14px;font-weight:500;color:#111827;">Senior (L4)</div><div style="font-size:12px;color:#9CA3AF;">$145K – $180K / year</div></td>
<td><strong>$13,200</strong>/mo</td>
<td><span style="font-size:14px;font-weight:500;">28</span></td>
</tr>
<tr>
<td><div style="font-size:14px;font-weight:500;color:#111827;">Lead (L5+)</div><div style="font-size:12px;color:#9CA3AF;">$180K – $220K / year</div></td>
<td><strong>$17,000</strong>/mo</td>
<td><span style="font-size:14px;font-weight:500;">13</span></td>
</tr>
</tbody>
</table>
</div>
<!-- PAYROLL HISTORY -->
<div class="card">
<div class="card-header-row">
<span class="card-title">Recent Payroll History</span>
<span class="card-action">View all</span>
</div>
<table>
<thead>
<tr>
<th>Period</th>
<th>Net Payable</th>
<th>Employees</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>April 2026</strong></td>
<td>$235,800</td>
<td>244</td>
<td><span class="badge badge-green">Paid</span></td>
</tr>
<tr>
<td><strong>March 2026</strong></td>
<td>$231,200</td>
<td>241</td>
<td><span class="badge badge-green">Paid</span></td>
</tr>
<tr>
<td><strong>February 2026</strong></td>
<td>$228,500</td>
<td>239</td>
<td><span class="badge badge-green">Paid</span></td>
</tr>
<tr>
<td><strong>January 2026</strong></td>
<td>$224,900</td>
<td>236</td>
<td><span class="badge badge-green">Paid</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</body>
</html>
designs/13-recruitment.html
+346
View File
@@ -0,0 +1,346 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recruitment — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary svg { width: 16px; height: 16px; }
/* JOB CARDS */
.jobs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
.job-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 20px; cursor: pointer; transition: all 0.15s; }
.job-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: #C7D2FE; }
.job-card.active-job { border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79,70,229,0.15); }
.job-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.job-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 3px; }
.job-dept { font-size: 12px; color: #9CA3AF; }
.job-open-dot { width: 8px; height: 8px; border-radius: 50%; background: #10B981; margin-top: 4px; }
.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-yellow { background: #FFFBEB; color: #D97706; }
.badge-purple { background: #F5F3FF; color: #7C3AED; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.job-meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #9CA3AF; }
.job-meta-item svg { width: 12px; height: 12px; }
.job-footer { display: flex; align-items: center; justify-content: space-between; }
.applicant-count { font-size: 13px; font-weight: 600; color: #111827; }
.applicant-label { font-size: 11px; color: #9CA3AF; }
.btn-pipeline { padding: 5px 12px; background: #EEF2FF; color: #4F46E5; border: 1px solid #C7D2FE; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.btn-pipeline:hover { background: #4F46E5; color: #FFF; }
/* KANBAN */
.kanban-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kanban-title { font-size: 16px; font-weight: 600; color: #111827; }
.kanban-subtitle { font-size: 13px; color: #9CA3AF; }
.kanban-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; overflow-x: auto; }
.kanban-col { background: #F9FAFB; border-radius: 10px; padding: 14px; min-width: 0; }
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.col-name { font-size: 13px; font-weight: 600; color: #374151; }
.col-count { background: #E5E7EB; color: #6B7280; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
.kanban-card { background: #FFFFFF; border-radius: 8px; border: 1px solid #E5E7EB; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #C7D2FE; }
.kanban-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #FFF; margin-bottom: 8px; }
.applicant-name { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 2px; }
.applied-date { font-size: 11px; color: #9CA3AF; margin-bottom: 8px; }
.btn-move { padding: 3px 10px; border: 1px solid #E5E7EB; background: #FFFFFF; border-radius: 4px; font-size: 11px; color: #6B7280; cursor: pointer; transition: all 0.15s; }
.btn-move:hover { border-color: #4F46E5; color: #4F46E5; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Recruitment</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<div class="page-title">Recruitment</div>
<div style="font-size:13px;color:#6B7280;margin-top:3px;">4 open positions &nbsp;·&nbsp; 19 total applicants</div>
</div>
<button class="btn-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Post New Job
</button>
</div>
<!-- JOB CARDS -->
<div class="jobs-row">
<div class="job-card active-job">
<div class="job-card-top">
<div>
<div class="job-title">Senior Frontend Engineer</div>
<div class="job-dept">Engineering</div>
</div>
<div class="job-open-dot"></div>
</div>
<div class="job-meta">
<span class="badge badge-blue">Full-time</span>
<div class="job-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
San Francisco
</div>
<div class="job-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
12 days open
</div>
</div>
<div class="job-footer">
<div><div class="applicant-count">8</div><div class="applicant-label">Applicants</div></div>
<button class="btn-pipeline">View Pipeline</button>
</div>
</div>
<div class="job-card">
<div class="job-card-top">
<div>
<div class="job-title">Product Designer</div>
<div class="job-dept">Design</div>
</div>
<div class="job-open-dot"></div>
</div>
<div class="job-meta">
<span class="badge badge-blue">Full-time</span>
<div class="job-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
Remote
</div>
<div class="job-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
5 days open
</div>
</div>
<div class="job-footer">
<div><div class="applicant-count">5</div><div class="applicant-label">Applicants</div></div>
<button class="btn-pipeline">View Pipeline</button>
</div>
</div>
<div class="job-card">
<div class="job-card-top">
<div>
<div class="job-title">Sales Account Manager</div>
<div class="job-dept">Sales</div>
</div>
<div class="job-open-dot"></div>
</div>
<div class="job-meta">
<span class="badge badge-blue">Full-time</span>
<div class="job-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
New York
</div>
<div class="job-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
3 days open
</div>
</div>
<div class="job-footer">
<div><div class="applicant-count">3</div><div class="applicant-label">Applicants</div></div>
<button class="btn-pipeline">View Pipeline</button>
</div>
</div>
<div class="job-card">
<div class="job-card-top">
<div>
<div class="job-title">DevOps Engineer</div>
<div class="job-dept">Engineering</div>
</div>
<div class="job-open-dot"></div>
</div>
<div class="job-meta">
<span class="badge badge-purple">Contract</span>
<div class="job-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
Remote
</div>
<div class="job-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
8 days open
</div>
</div>
<div class="job-footer">
<div><div class="applicant-count">3</div><div class="applicant-label">Applicants</div></div>
<button class="btn-pipeline">View Pipeline</button>
</div>
</div>
</div>
<!-- KANBAN PIPELINE -->
<div class="kanban-header">
<div>
<div class="kanban-title">Pipeline: Senior Frontend Engineer</div>
<div class="kanban-subtitle">Showing applicants for this role — click a job card above to switch</div>
</div>
</div>
<div class="kanban-board">
<!-- APPLIED -->
<div class="kanban-col">
<div class="kanban-col-header">
<span class="col-name">Applied</span>
<span class="col-count">8</span>
</div>
<div class="kanban-card">
<div class="kanban-avatar" style="background:#4F46E5;">AT</div>
<div class="applicant-name">Alex Thompson</div>
<div class="applied-date">Applied May 8, 2026</div>
<button class="btn-move">Move to Screening</button>
</div>
<div class="kanban-card">
<div class="kanban-avatar" style="background:#10B981;">MK</div>
<div class="applicant-name">Maya Kumar</div>
<div class="applied-date">Applied May 9, 2026</div>
<button class="btn-move">Move to Screening</button>
</div>
</div>
<!-- SCREENING -->
<div class="kanban-col">
<div class="kanban-col-header">
<span class="col-name">Screening</span>
<span class="col-count">5</span>
</div>
<div class="kanban-card">
<div class="kanban-avatar" style="background:#F59E0B;">JL</div>
<div class="applicant-name">Jordan Lee</div>
<div class="applied-date">Screening since May 5</div>
<button class="btn-move">Move to Interview</button>
</div>
<div class="kanban-card">
<div class="kanban-avatar" style="background:#EF4444;">SP</div>
<div class="applicant-name">Sofia Park</div>
<div class="applied-date">Screening since May 6</div>
<button class="btn-move">Move to Interview</button>
</div>
</div>
<!-- INTERVIEW -->
<div class="kanban-col">
<div class="kanban-col-header">
<span class="col-name">Interview</span>
<span class="col-count">3</span>
</div>
<div class="kanban-card">
<div class="kanban-avatar" style="background:#7C3AED;">RN</div>
<div class="applicant-name">Ryan Nakamura</div>
<div class="applied-date">Interview May 11, 2026</div>
<button class="btn-move">Move to Offer</button>
</div>
<div class="kanban-card">
<div class="kanban-avatar" style="background:#3B82F6;">EC</div>
<div class="applicant-name">Elena Costa</div>
<div class="applied-date">Interview May 12, 2026</div>
<button class="btn-move">Move to Offer</button>
</div>
</div>
<!-- OFFER -->
<div class="kanban-col">
<div class="kanban-col-header">
<span class="col-name">Offer</span>
<span class="col-count">1</span>
</div>
<div class="kanban-card">
<div class="kanban-avatar" style="background:#EC4899;">LM</div>
<div class="applicant-name">Luis Martinez</div>
<div class="applied-date">Offer sent May 7, 2026</div>
<button class="btn-move">Mark Accepted</button>
</div>
</div>
<!-- HIRED -->
<div class="kanban-col" style="background:#F0FDF4;">
<div class="kanban-col-header">
<span class="col-name" style="color:#059669;">Hired</span>
<span class="col-count" style="background:#DCFCE7;color:#059669;">2</span>
</div>
<div class="kanban-card" style="border-color:#BBF7D0;">
<div class="kanban-avatar" style="background:#10B981;">DB</div>
<div class="applicant-name">David Blake</div>
<div class="applied-date">Hired April 28, 2026</div>
<span style="font-size:11px;color:#10B981;font-weight:600;">Start: May 15</span>
</div>
<div class="kanban-card" style="border-color:#BBF7D0;">
<div class="kanban-avatar" style="background:#059669;">AS</div>
<div class="applicant-name">Anika Singh</div>
<div class="applied-date">Hired May 2, 2026</div>
<span style="font-size:11px;color:#10B981;font-weight:600;">Start: June 1</span>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/14-expense-claims.html
+293
View File
@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expense Claims — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; }
.header-right { display: flex; gap: 8px; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary svg { width: 16px; height: 16px; }
.btn-outline { padding: 8px 14px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; }
.tabs { display: flex; border-bottom: 1px solid #E5E7EB; margin-bottom: 20px; }
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; }
.tab.active { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; }
.tab-count { background: #F3F4F6; color: #6B7280; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.tab.active .tab-count { background: #EEF2FF; color: #4F46E5; }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.filter-search { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; padding: 8px 13px; flex: 1; max-width: 280px; }
.filter-search svg { width: 15px; height: 15px; color: #9CA3AF; flex-shrink: 0; }
.filter-search input { border: none; background: transparent; font-size: 14px; outline: none; width: 100%; }
.filter-select { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 14px; color: #374151; outline: none; appearance: none; cursor: pointer; min-width: 130px; }
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td { padding: 14px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
.emp-cell { display: flex; align-items: center; gap: 10px; }
.emp-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #FFF; flex-shrink: 0; }
.emp-name { font-size: 13px; font-weight: 500; color: #111827; }
.emp-dept { font-size: 11px; color: #9CA3AF; }
.expense-title { font-size: 13px; font-weight: 500; color: #111827; }
.expense-sub { font-size: 11px; color: #9CA3AF; }
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-orange { background: #FFF7ED; color: #EA580C; }
.badge-purple { background: #F5F3FF; color: #7C3AED; }
.badge-teal { background: #F0FDFA; color: #0D9488; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-red { background: #FEF2F2; color: #DC2626; }
.status-pending { background: #FFFBEB; color: #D97706; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.status-approved { background: #ECFDF5; color: #059669; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.status-reimbursed { background: #EFF6FF; color: #3B82F6; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.amount-cell { font-size: 14px; font-weight: 600; color: #111827; }
.receipt-icon { color: #9CA3AF; cursor: pointer; transition: color 0.15s; }
.receipt-icon:hover { color: #4F46E5; }
.actions-cell { display: flex; gap: 6px; }
.btn-approve { padding: 4px 10px; background: #ECFDF5; color: #10B981; border: 1px solid #BBF7D0; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
.btn-approve:hover { background: #10B981; color: #FFF; }
.btn-reject { padding: 4px 10px; background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; }
.btn-reject:hover { background: #EF4444; color: #FFF; }
.btn-view { padding: 4px 10px; background: #F9FAFB; color: #6B7280; border: 1px solid #E5E7EB; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: pointer; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Expense Claims</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div class="page-title">Expense Claims</div>
<div class="header-right">
<button class="btn-outline">Export</button>
<button class="btn-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Claim
</button>
</div>
</div>
<div class="tabs">
<div class="tab">All <span class="tab-count">42</span></div>
<div class="tab active">Pending <span class="tab-count">9</span></div>
<div class="tab">Approved <span class="tab-count">24</span></div>
<div class="tab">Reimbursed <span class="tab-count">9</span></div>
</div>
<div class="filter-bar">
<div class="filter-search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" placeholder="Search claims...">
</div>
<select class="filter-select">
<option>All Categories</option>
<option>Travel</option>
<option>Meals</option>
<option>Equipment</option>
<option>Accommodation</option>
</select>
<select class="filter-select">
<option>All Departments</option>
<option>Engineering</option>
<option>Sales</option>
<option>Marketing</option>
</select>
<select class="filter-select">
<option>This Month</option>
<option>Last Month</option>
<option>Last Quarter</option>
</select>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th>Employee</th>
<th>Title</th>
<th>Category</th>
<th>Amount</th>
<th>Receipt</th>
<th>Submitted</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#4F46E5;">MR</div><div><div class="emp-name">Michael Rodriguez</div><div class="emp-dept">Engineering</div></div></div></td>
<td><div class="expense-title">AWS Re:Invent Conference</div><div class="expense-sub">Las Vegas, NV</div></td>
<td><span class="badge badge-blue">Travel</span></td>
<td><span class="amount-cell">$1,240.00</span></td>
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
<td>May 7, 2026</td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#EC4899;">DT</div><div><div class="emp-name">Diana Torres</div><div class="emp-dept">Sales</div></div></div></td>
<td><div class="expense-title">Client Dinner — Acme Corp</div><div class="expense-sub">Restaurant receipt</div></td>
<td><span class="badge badge-orange">Meals</span></td>
<td><span class="amount-cell">$340.00</span></td>
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
<td>May 6, 2026</td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#7C3AED;">AL</div><div><div class="emp-name">Aisha Larsson</div><div class="emp-dept">Marketing</div></div></div></td>
<td><div class="expense-title">MacBook Pro Stand &amp; Hub</div><div class="expense-sub">Remote work equipment</div></td>
<td><span class="badge badge-purple">Equipment</span></td>
<td><span class="amount-cell">$178.50</span></td>
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
<td>May 5, 2026</td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#3B82F6;">RS</div><div><div class="emp-name">Ravi Shankar</div><div class="emp-dept">Operations</div></div></div></td>
<td><div class="expense-title">Marriott — Austin Summit</div><div class="expense-sub">2 nights accommodation</div></td>
<td><span class="badge badge-teal">Accommodation</span></td>
<td><span class="amount-cell">$520.00</span></td>
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
<td>Apr 28, 2026</td>
<td><span class="status-approved">Approved</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#F59E0B;">JK</div><div><div class="emp-name">James Kim</div><div class="emp-dept">Engineering</div></div></div></td>
<td><div class="expense-title">Team Lunch — Sprint Review</div><div class="expense-sub">Pizza delivery for 8 people</div></td>
<td><span class="badge badge-orange">Meals</span></td>
<td><span class="amount-cell">$186.00</span></td>
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
<td>May 2, 2026</td>
<td><span class="status-approved">Approved</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#10B981;">PP</div><div><div class="emp-name">Priya Patel</div><div class="emp-dept">Finance</div></div></div></td>
<td><div class="expense-title">Uber — Client Site Visits</div><div class="expense-sub">April 22–24 rides</div></td>
<td><span class="badge badge-blue">Travel</span></td>
<td><span class="amount-cell">$92.40</span></td>
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
<td>Apr 24, 2026</td>
<td><span class="status-reimbursed">Reimbursed</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#D97706;">FA</div><div><div class="emp-name">Fatima Al-Rashid</div><div class="emp-dept">Finance</div></div></div></td>
<td><div class="expense-title">QuickBooks Subscription</div><div class="expense-sub">Annual software license</div></td>
<td><span class="badge badge-purple">Equipment</span></td>
<td><span class="amount-cell">$299.00</span></td>
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
<td>May 8, 2026</td>
<td><span class="status-pending">Pending</span></td>
<td><div class="actions-cell"><button class="btn-approve">Approve</button><button class="btn-reject">Reject</button></div></td>
</tr>
<tr>
<td><div class="emp-cell"><div class="emp-avatar" style="background:#059669;">LO</div><div><div class="emp-name">Lucas Oliveira</div><div class="emp-dept">Operations</div></div></div></td>
<td><div class="expense-title">Marriott — Operations Summit</div><div class="expense-sub">3 nights accommodation</div></td>
<td><span class="badge badge-teal">Accommodation</span></td>
<td><span class="amount-cell">$780.00</span></td>
<td><svg class="receipt-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></td>
<td>Apr 20, 2026</td>
<td><span class="status-reimbursed">Reimbursed</span></td>
<td><div class="actions-cell"><button class="btn-view">View</button></div></td>
</tr>
</tbody>
</table>
<div style="padding:14px 20px;border-top:1px solid #F3F4F6;display:flex;justify-content:space-between;align-items:center;">
<span style="font-size:13px;color:#6B7280;">Showing 1–8 of 42 claims</span>
<div style="display:flex;gap:4px;">
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #4F46E5;background:#4F46E5;color:#FFF;font-size:13px;font-weight:600;cursor:pointer;">1</button>
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;">2</button>
<button style="width:30px;height:30px;border-radius:6px;border:1.5px solid #E5E7EB;background:#FFFFFF;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg></button>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/15-performance-reviews.html
+287
View File
@@ -0,0 +1,287 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Performance Reviews — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
/* ACTIVE CYCLE */
.active-cycle {
background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
border-radius: 12px; padding: 28px 32px;
color: #FFF; margin-bottom: 24px;
display: flex; align-items: center; justify-content: space-between;
}
.cycle-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.cycle-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.cycle-sub { font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 20px; }
.progress-section {}
.progress-label { display: flex; justify-content: space-between; margin-bottom: 6px; }
.progress-text { font-size: 13px; color: rgba(255,255,255,0.8); }
.progress-pct { font-size: 13px; font-weight: 700; color: #FFF; }
.progress-bar { height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px; width: 280px; overflow: hidden; }
.progress-fill { height: 100%; background: #FFFFFF; border-radius: 4px; width: 68%; }
.cycle-meta { margin-top: 12px; display: flex; gap: 20px; }
.cycle-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.8); }
.cycle-meta-item svg { width: 14px; height: 14px; }
.cycle-right { text-align: right; }
.btn-view-cycle { padding: 10px 20px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; color: #FFF; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.btn-view-cycle:hover { background: rgba(255,255,255,0.3); }
.cycle-stats-mini { display: flex; gap: 20px; margin-top: 16px; }
.cycle-stat-mini { text-align: center; }
.cycle-stat-num { font-size: 22px; font-weight: 700; }
.cycle-stat-label { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }
/* TABLE */
.section-title { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 16px; }
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
th { padding: 12px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; }
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td { padding: 16px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
.cycle-name { font-size: 14px; font-weight: 600; color: #111827; }
.cycle-period { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-yellow { background: #FFFBEB; color: #D97706; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
.progress-mini { width: 120px; height: 6px; background: #F3F4F6; border-radius: 3px; overflow: hidden; display: inline-block; margin-right: 6px; }
.progress-mini-fill { height: 100%; background: #4F46E5; border-radius: 3px; }
.progress-row { display: flex; align-items: center; }
.progress-pct-mini { font-size: 12px; font-weight: 600; color: #374151; }
.btn-action { padding: 5px 12px; border: 1px solid #E5E7EB; border-radius: 5px; background: #FFFFFF; color: #374151; font-size: 12px; font-weight: 500; cursor: pointer; margin-right: 4px; }
.btn-action:hover { border-color: #4F46E5; color: #4F46E5; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Performance Reviews</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div class="page-title">Performance Reviews</div>
<button class="btn-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Review Cycle
</button>
</div>
<!-- ACTIVE CYCLE -->
<div class="active-cycle">
<div>
<div class="cycle-badge">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
Active Cycle
</div>
<div class="cycle-title">Q1 2026 Annual Performance Review</div>
<div class="cycle-sub">Self-assessments, peer reviews, and manager evaluations in progress</div>
<div class="progress-section">
<div class="progress-label">
<span class="progress-text">Overall completion</span>
<span class="progress-pct">68%</span>
</div>
<div class="progress-bar"><div class="progress-fill"></div></div>
</div>
<div class="cycle-meta">
<div class="cycle-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
Jan 1 – Mar 31, 2026
</div>
<div class="cycle-meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
Deadline: May 20, 2026
</div>
</div>
</div>
<div class="cycle-right">
<button class="btn-view-cycle">View Details</button>
<div class="cycle-stats-mini">
<div class="cycle-stat-mini">
<div class="cycle-stat-num">168</div>
<div class="cycle-stat-label">Completed</div>
</div>
<div class="cycle-stat-mini">
<div class="cycle-stat-num">80</div>
<div class="cycle-stat-label">Pending</div>
</div>
<div class="cycle-stat-mini">
<div class="cycle-stat-num">248</div>
<div class="cycle-stat-label">Total</div>
</div>
</div>
</div>
</div>
<!-- REVIEW CYCLES TABLE -->
<div class="section-title">All Review Cycles</div>
<div class="table-card">
<table>
<thead>
<tr>
<th>Cycle Name</th>
<th>Period</th>
<th>Type</th>
<th>Status</th>
<th>Completion</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="cycle-name">Q1 2026 Annual Review</div>
<div class="cycle-period">Includes self, peer, and manager review</div>
</td>
<td>Jan 1 – Mar 31, 2026</td>
<td><span class="badge badge-blue">Annual</span></td>
<td><span class="badge" style="background:#EEF2FF;color:#4F46E5;">In Progress</span></td>
<td>
<div class="progress-row">
<div class="progress-mini"><div class="progress-mini-fill" style="width:68%;"></div></div>
<span class="progress-pct-mini">68%</span>
</div>
</td>
<td>
<button class="btn-action">View</button>
<button class="btn-action">Send Reminder</button>
</td>
</tr>
<tr>
<td>
<div class="cycle-name">Q4 2025 Annual Review</div>
<div class="cycle-period">Full 360-degree review cycle</div>
</td>
<td>Oct 1 – Dec 31, 2025</td>
<td><span class="badge badge-blue">Annual</span></td>
<td><span class="badge badge-green">Completed</span></td>
<td>
<div class="progress-row">
<div class="progress-mini"><div class="progress-mini-fill" style="width:100%;background:#10B981;"></div></div>
<span class="progress-pct-mini">100%</span>
</div>
</td>
<td>
<button class="btn-action">View Results</button>
</td>
</tr>
<tr>
<td>
<div class="cycle-name">Mid-Year 2025 Review</div>
<div class="cycle-period">Manager review only</div>
</td>
<td>Apr 1 – Jun 30, 2025</td>
<td><span class="badge badge-yellow">Mid-Year</span></td>
<td><span class="badge badge-green">Completed</span></td>
<td>
<div class="progress-row">
<div class="progress-mini"><div class="progress-mini-fill" style="width:100%;background:#10B981;"></div></div>
<span class="progress-pct-mini">100%</span>
</div>
</td>
<td>
<button class="btn-action">View Results</button>
</td>
</tr>
<tr>
<td>
<div class="cycle-name">Q2 2025 Annual Review</div>
<div class="cycle-period">Self and manager review</div>
</td>
<td>Jan 1 – Mar 31, 2025</td>
<td><span class="badge badge-blue">Annual</span></td>
<td><span class="badge badge-green">Completed</span></td>
<td>
<div class="progress-row">
<div class="progress-mini"><div class="progress-mini-fill" style="width:100%;background:#10B981;"></div></div>
<span class="progress-pct-mini">100%</span>
</div>
</td>
<td>
<button class="btn-action">View Results</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</body>
</html>
designs/16-reports.html
+315
View File
@@ -0,0 +1,315 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reports — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; }
.date-range { display: flex; align-items: center; gap: 8px; }
.date-input { padding: 8px 13px; background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; color: #374151; outline: none; }
.date-sep { font-size: 13px; color: #9CA3AF; }
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.report-card {
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;
}
.report-card-header { padding: 16px 20px; border-bottom: 1px solid #F3F4F6; display: flex; align-items: center; justify-content: space-between; }
.report-title { font-size: 14px; font-weight: 600; color: #111827; }
.report-export { font-size: 12px; color: #4F46E5; cursor: pointer; font-weight: 500; }
.report-body { padding: 20px; }
.report-stat { font-size: 26px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.report-stat-sub { font-size: 12px; color: #9CA3AF; margin-bottom: 16px; }
/* HEADCOUNT CHART (line mock) */
.line-chart { position: relative; height: 80px; margin-bottom: 8px; }
.line-chart svg { width: 100%; height: 100%; }
.chart-labels { display: flex; justify-content: space-between; }
.chart-label { font-size: 11px; color: #9CA3AF; }
/* LEAVE UTILIZATION BARS */
.horiz-bar-item { margin-bottom: 10px; }
.horiz-bar-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
.horiz-bar-label { font-size: 12px; color: #374151; }
.horiz-bar-val { font-size: 12px; font-weight: 600; color: #111827; }
.horiz-bar-track { height: 8px; background: #F3F4F6; border-radius: 4px; overflow: hidden; }
.horiz-bar-fill { height: 100%; border-radius: 4px; }
/* ATTENDANCE AREA MOCK */
.area-chart { height: 80px; position: relative; overflow: hidden; margin-bottom: 8px; }
.area-chart svg { width: 100%; height: 100%; }
/* PAYROLL BARS */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 80px; margin-bottom: 8px; }
.bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
.bar { width: 100%; border-radius: 4px 4px 0 0; }
.bar-month { font-size: 10px; color: #9CA3AF; margin-top: 4px; }
/* DONUT CHART */
.donut-container { display: flex; align-items: center; gap: 20px; }
.donut { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; }
.donut-legend { flex: 1; }
.donut-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.donut-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.donut-label { font-size: 12px; color: #374151; }
.donut-pct { font-size: 12px; font-weight: 600; color: #111827; margin-left: auto; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Reports &amp; Analytics</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div class="page-title">Reports &amp; Analytics</div>
<div style="display:flex;align-items:center;gap:10px;">
<div class="date-range">
<input class="date-input" type="date" value="2026-01-01">
<span class="date-sep">to</span>
<input class="date-input" type="date" value="2026-05-09">
</div>
<button class="btn-outline">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export All
</button>
</div>
</div>
<div class="reports-grid">
<!-- HEADCOUNT OVER TIME -->
<div class="report-card">
<div class="report-card-header">
<span class="report-title">Headcount Over Time</span>
<span class="report-export">Export CSV</span>
</div>
<div class="report-body">
<div class="report-stat">248</div>
<div class="report-stat-sub">Current headcount &nbsp;·&nbsp; <span style="color:#10B981;">+19 this year</span></div>
<div class="line-chart">
<svg viewBox="0 0 300 80" preserveAspectRatio="none">
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4F46E5" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#4F46E5" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M0,65 L50,60 L100,55 L150,50 L200,45 L250,38 L300,30" stroke="#4F46E5" stroke-width="2.5" fill="none"/>
<path d="M0,65 L50,60 L100,55 L150,50 L200,45 L250,38 L300,30 L300,80 L0,80 Z" fill="url(#g1)"/>
</svg>
</div>
<div class="chart-labels">
<span class="chart-label">Jan</span>
<span class="chart-label">Feb</span>
<span class="chart-label">Mar</span>
<span class="chart-label">Apr</span>
<span class="chart-label">May</span>
</div>
</div>
</div>
<!-- LEAVE UTILIZATION -->
<div class="report-card">
<div class="report-card-header">
<span class="report-title">Leave Utilization by Type</span>
<span class="report-export">Export CSV</span>
</div>
<div class="report-body">
<div class="report-stat">487</div>
<div class="report-stat-sub">Total leave days taken YTD</div>
<div class="horiz-bar-item">
<div class="horiz-bar-top"><span class="horiz-bar-label">Annual Leave</span><span class="horiz-bar-val">248 days</span></div>
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:80%;background:#4F46E5;"></div></div>
</div>
<div class="horiz-bar-item">
<div class="horiz-bar-top"><span class="horiz-bar-label">Sick Leave</span><span class="horiz-bar-val">142 days</span></div>
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:46%;background:#F59E0B;"></div></div>
</div>
<div class="horiz-bar-item">
<div class="horiz-bar-top"><span class="horiz-bar-label">Casual Leave</span><span class="horiz-bar-val">68 days</span></div>
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:22%;background:#10B981;"></div></div>
</div>
<div class="horiz-bar-item">
<div class="horiz-bar-top"><span class="horiz-bar-label">Other</span><span class="horiz-bar-val">29 days</span></div>
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:10%;background:#9CA3AF;"></div></div>
</div>
</div>
</div>
<!-- ATTENDANCE RATE -->
<div class="report-card">
<div class="report-card-header">
<span class="report-title">Attendance Rate Trend</span>
<span class="report-export">Export CSV</span>
</div>
<div class="report-body">
<div class="report-stat">94.6%</div>
<div class="report-stat-sub">Average attendance rate YTD</div>
<div class="area-chart">
<svg viewBox="0 0 300 80" preserveAspectRatio="none">
<defs>
<linearGradient id="g2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#10B981" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#10B981" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M0,25 L50,20 L100,30 L150,18 L200,22 L250,15 L300,20" stroke="#10B981" stroke-width="2.5" fill="none"/>
<path d="M0,25 L50,20 L100,30 L150,18 L200,22 L250,15 L300,20 L300,80 L0,80 Z" fill="url(#g2)"/>
</svg>
</div>
<div class="chart-labels">
<span class="chart-label">Jan</span>
<span class="chart-label">Feb</span>
<span class="chart-label">Mar</span>
<span class="chart-label">Apr</span>
<span class="chart-label">May</span>
</div>
</div>
</div>
<!-- PAYROLL BY MONTH -->
<div class="report-card">
<div class="report-card-header">
<span class="report-title">Payroll by Month</span>
<span class="report-export">Export CSV</span>
</div>
<div class="report-body">
<div class="report-stat">$1.18M</div>
<div class="report-stat-sub">Total payroll YTD (net)</div>
<div class="bar-chart">
<div class="bar-item"><div class="bar" style="height:55px;background:#EEF2FF;"></div><div class="bar-month" style="color:#4F46E5;">Jan</div></div>
<div class="bar-item"><div class="bar" style="height:57px;background:#EEF2FF;"></div><div class="bar-month" style="color:#4F46E5;">Feb</div></div>
<div class="bar-item"><div class="bar" style="height:60px;background:#EEF2FF;"></div><div class="bar-month" style="color:#4F46E5;">Mar</div></div>
<div class="bar-item"><div class="bar" style="height:63px;background:#EEF2FF;"></div><div class="bar-month" style="color:#4F46E5;">Apr</div></div>
<div class="bar-item"><div class="bar" style="height:66px;background:#4F46E5;"></div><div class="bar-month" style="color:#4F46E5;font-weight:600;">May</div></div>
</div>
</div>
</div>
<!-- DEPARTMENT BREAKDOWN -->
<div class="report-card">
<div class="report-card-header">
<span class="report-title">Department Breakdown</span>
<span class="report-export">Export CSV</span>
</div>
<div class="report-body">
<div class="report-stat">6</div>
<div class="report-stat-sub">Active departments</div>
<div class="donut-container">
<div class="donut" style="background: conic-gradient(#4F46E5 0% 32%, #10B981 32% 54%, #7C3AED 54% 71%, #F59E0B 54% 84%, #3B82F6 84% 95%, #EF4444 95% 100%);"></div>
<div class="donut-legend">
<div class="donut-item"><div class="donut-dot" style="background:#4F46E5;"></div><span class="donut-label">Engineering</span><span class="donut-pct">32%</span></div>
<div class="donut-item"><div class="donut-dot" style="background:#10B981;"></div><span class="donut-label">Operations</span><span class="donut-pct">22%</span></div>
<div class="donut-item"><div class="donut-dot" style="background:#7C3AED;"></div><span class="donut-label">Sales</span><span class="donut-pct">17%</span></div>
<div class="donut-item"><div class="donut-dot" style="background:#F59E0B;"></div><span class="donut-label">Marketing</span><span class="donut-pct">13%</span></div>
<div class="donut-item"><div class="donut-dot" style="background:#3B82F6;"></div><span class="donut-label">Finance</span><span class="donut-pct">11%</span></div>
<div class="donut-item"><div class="donut-dot" style="background:#EF4444;"></div><span class="donut-label">HR</span><span class="donut-pct">5%</span></div>
</div>
</div>
</div>
</div>
<!-- EXPENSE CLAIMS -->
<div class="report-card">
<div class="report-card-header">
<span class="report-title">Expense Claims by Category</span>
<span class="report-export">Export CSV</span>
</div>
<div class="report-body">
<div class="report-stat">$28,430</div>
<div class="report-stat-sub">Total claims YTD &nbsp;·&nbsp; 84 claims</div>
<div class="horiz-bar-item">
<div class="horiz-bar-top"><span class="horiz-bar-label">Travel</span><span class="horiz-bar-val">$12,800</span></div>
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:75%;background:#3B82F6;"></div></div>
</div>
<div class="horiz-bar-item">
<div class="horiz-bar-top"><span class="horiz-bar-label">Equipment</span><span class="horiz-bar-val">$8,400</span></div>
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:49%;background:#7C3AED;"></div></div>
</div>
<div class="horiz-bar-item">
<div class="horiz-bar-top"><span class="horiz-bar-label">Accommodation</span><span class="horiz-bar-val">$4,600</span></div>
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:27%;background:#0D9488;"></div></div>
</div>
<div class="horiz-bar-item">
<div class="horiz-bar-top"><span class="horiz-bar-label">Meals</span><span class="horiz-bar-val">$2,630</span></div>
<div class="horiz-bar-track"><div class="horiz-bar-fill" style="width:15%;background:#F59E0B;"></div></div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/17-settings.html
+281
View File
@@ -0,0 +1,281 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 0; }
/* SETTINGS LAYOUT */
.settings-layout { display: flex; min-height: calc(100vh - 64px); }
.settings-subnav { width: 220px; background: #FFFFFF; border-right: 1px solid #E5E7EB; padding: 20px 0; flex-shrink: 0; }
.subnav-title { font-size: 11px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; padding: 0 16px 8px; }
.subnav-item { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 14px; font-weight: 500; color: #6B7280; cursor: pointer; transition: all 0.15s; }
.subnav-item:hover { background: #F9FAFB; color: #111827; }
.subnav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.subnav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.settings-content { flex: 1; padding: 28px; max-width: 700px; }
.settings-section { margin-bottom: 28px; }
.section-header { margin-bottom: 20px; }
.section-title { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 4px; }
.section-sub { font-size: 13px; color: #9CA3AF; }
.card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 16px; }
.card-header-row { padding: 16px 20px; border-bottom: 1px solid #F3F4F6; }
.card-title { font-size: 14px; font-weight: 600; color: #111827; }
.card-sub { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
.card-body { padding: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { }
.form-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }
.form-input, .form-select { width: 100%; padding: 9px 13px; border: 1.5px solid #E5E7EB; border-radius: 6px; font-size: 14px; font-family: 'Inter', sans-serif; color: #111827; background: #FFFFFF; outline: none; transition: border-color 0.15s; appearance: none; }
.form-input:focus, .form-select:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
.col-span-2 { grid-column: 1 / -1; }
/* LOGO UPLOAD */
.logo-upload { border: 2px dashed #E5E7EB; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: all 0.15s; }
.logo-upload:hover { border-color: #4F46E5; background: #FAFAFA; }
.logo-preview { width: 64px; height: 64px; background: #4F46E5; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #FFF; font-size: 20px; font-weight: 700; }
.logo-upload-hint { font-size: 13px; color: #6B7280; margin-bottom: 4px; }
.logo-upload-sub { font-size: 12px; color: #9CA3AF; }
.btn-upload { display: inline-flex; padding: 6px 14px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 13px; cursor: pointer; margin-top: 8px; }
/* WORK HOURS */
.work-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.day-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid #E5E7EB; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: #374151; transition: all 0.15s; }
.day-toggle input[type="checkbox"] { accent-color: #4F46E5; }
.day-toggle.active { border-color: #4F46E5; background: #EEF2FF; color: #4F46E5; }
/* SAVE BUTTON */
.btn-save { padding: 10px 24px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.btn-save:hover { background: #4338CA; }
.btn-cancel { padding: 10px 18px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; cursor: pointer; margin-right: 8px; }
.page-header { font-size: 22px; font-weight: 700; padding: 28px 28px 0; margin-bottom: 0; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Settings</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<div class="content">
<div class="page-header">Settings</div>
<div class="settings-layout">
<!-- SETTINGS SUB-NAV -->
<div class="settings-subnav">
<div class="subnav-title">General</div>
<div class="subnav-item active">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Company Profile
</div>
<div class="subnav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
Leave Settings
</div>
<div class="subnav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
Work Hours
</div>
<div class="subnav-title" style="margin-top:16px;">System</div>
<div class="subnav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg>
Notifications
</div>
<div class="subnav-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
Integrations
</div>
</div>
<!-- SETTINGS CONTENT -->
<div class="settings-content">
<div class="settings-section">
<div class="section-header">
<div class="section-title">Company Profile</div>
<div class="section-sub">Update your company information and branding</div>
</div>
<!-- LOGO UPLOAD -->
<div class="card">
<div class="card-header-row">
<div class="card-title">Company Logo</div>
<div class="card-sub">Appears on payslips, emails, and the employee portal</div>
</div>
<div class="card-body">
<div class="logo-upload">
<div class="logo-preview">TF</div>
<div class="logo-upload-hint">Drag and drop your logo here, or click to browse</div>
<div class="logo-upload-sub">PNG, JPG, or SVG. Max 2MB. Recommended: 200×200px</div>
<button class="btn-upload">Upload Logo</button>
</div>
</div>
</div>
<!-- COMPANY INFO -->
<div class="card">
<div class="card-header-row">
<div class="card-title">Company Information</div>
</div>
<div class="card-body">
<div class="form-grid">
<div class="form-group col-span-2">
<label class="form-label">Company Name</label>
<input class="form-input" type="text" value="TechFlow Inc.">
</div>
<div class="form-group">
<label class="form-label">Industry</label>
<select class="form-select">
<option selected>Technology</option>
<option>Finance</option>
<option>Healthcare</option>
<option>Manufacturing</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Company Size</label>
<select class="form-select">
<option>1–10</option>
<option>11–50</option>
<option selected>51–200</option>
<option>201–500</option>
<option>500+</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Country</label>
<select class="form-select">
<option selected>United States</option>
<option>United Kingdom</option>
<option>India</option>
<option>Canada</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Timezone</label>
<select class="form-select">
<option selected>PST (UTC-8)</option>
<option>EST (UTC-5)</option>
<option>IST (UTC+5:30)</option>
<option>GMT (UTC+0)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Phone</label>
<input class="form-input" type="tel" value="+1 (415) 555-0100">
</div>
<div class="form-group">
<label class="form-label">Website</label>
<input class="form-input" type="url" value="https://techflow.com">
</div>
</div>
</div>
</div>
<!-- WORK HOURS -->
<div class="card">
<div class="card-header-row">
<div class="card-title">Default Work Hours</div>
<div class="card-sub">Standard working days and hours for attendance tracking</div>
</div>
<div class="card-body">
<div style="font-size:13px;font-weight:500;color:#374151;margin-bottom:10px;">Working Days</div>
<div class="work-days">
<label class="day-toggle active"><input type="checkbox" checked> Mon</label>
<label class="day-toggle active"><input type="checkbox" checked> Tue</label>
<label class="day-toggle active"><input type="checkbox" checked> Wed</label>
<label class="day-toggle active"><input type="checkbox" checked> Thu</label>
<label class="day-toggle active"><input type="checkbox" checked> Fri</label>
<label class="day-toggle"><input type="checkbox"> Sat</label>
<label class="day-toggle"><input type="checkbox"> Sun</label>
</div>
<div class="form-grid">
<div class="form-group">
<label class="form-label">Work Start Time</label>
<input class="form-input" type="time" value="09:00">
</div>
<div class="form-group">
<label class="form-label">Work End Time</label>
<input class="form-input" type="time" value="18:00">
</div>
</div>
</div>
</div>
<div style="display:flex;justify-content:flex-end;margin-top:8px;">
<button class="btn-cancel">Discard Changes</button>
<button class="btn-save">Save Settings</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
designs/18-employee-dashboard.html
+336
View File
@@ -0,0 +1,336 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Dashboard — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #10B981; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.topnav-name { font-size: 14px; font-weight: 500; color: #374151; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #10B981; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
/* WELCOME */
.welcome { background: linear-gradient(135deg, #10B981 0%, #059669 100%); border-radius: 12px; padding: 24px 28px; color: #FFF; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.welcome-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.welcome-sub { font-size: 14px; color: rgba(255,255,255,0.8); }
.checkin-btn { padding: 10px 22px; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; color: #FFF; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.checkin-btn svg { width: 16px; height: 16px; }
/* QUICK ACTIONS */
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.quick-action { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 16px 20px; cursor: pointer; transition: all 0.15s; text-align: center; text-decoration: none; }
.quick-action:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: #C7D2FE; }
.qa-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.qa-icon svg { width: 20px; height: 20px; }
.qa-label { font-size: 13px; font-weight: 500; color: #374151; }
/* TWO COL */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
.card-header-row { padding: 14px 18px; border-bottom: 1px solid #F3F4F6; display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: 14px; font-weight: 600; color: #111827; }
.card-action { font-size: 12px; color: #4F46E5; cursor: pointer; font-weight: 500; text-decoration: none; }
/* LEAVE BALANCE */
.lb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.lb-item { background: #F9FAFB; border-radius: 8px; padding: 12px; text-align: center; }
.lb-val { font-size: 22px; font-weight: 700; color: #111827; }
.lb-type { font-size: 11px; color: #9CA3AF; margin-top: 2px; }
.lb-sub { font-size: 11px; margin-top: 6px; }
/* MINI TABLE */
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th { padding: 8px 16px; font-size: 11px; font-weight: 600; color: #9CA3AF; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid #F3F4F6; }
.mini-table td { padding: 10px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F9FAFB; }
.mini-table tr:last-child td { border-bottom: none; }
.badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-yellow { background: #FFFBEB; color: #D97706; }
.badge-red { background: #FEF2F2; color: #DC2626; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
/* ATTENDANCE MINI CALENDAR */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 14px; }
.cal-day-label { font-size: 10px; font-weight: 600; color: #9CA3AF; text-align: center; padding: 4px; text-transform: uppercase; }
.cal-day { height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 12px; font-weight: 500; }
.cal-day.empty { }
.cal-day.present { background: #ECFDF5; color: #059669; }
.cal-day.leave { background: #EFF6FF; color: #3B82F6; }
.cal-day.absent { background: #FEF2F2; color: #DC2626; }
.cal-day.today { background: #4F46E5; color: #FFF; font-weight: 700; }
.cal-day.future { color: #D1D5DB; }
/* PAYSLIP CARD */
.payslip-card { padding: 16px 18px; }
.payslip-month { font-size: 13px; color: #9CA3AF; margin-bottom: 4px; }
.payslip-amount { font-size: 28px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.payslip-net { font-size: 12px; color: #9CA3AF; margin-bottom: 14px; }
.payslip-breakdown { display: flex; gap: 16px; margin-bottom: 16px; }
.payslip-item {}
.payslip-item-label { font-size: 11px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.payslip-item-val { font-size: 14px; font-weight: 600; color: #374151; margin-top: 2px; }
.btn-download { width: 100%; padding: 9px; background: #EEF2FF; color: #4F46E5; border: 1.5px solid #C7D2FE; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
.btn-download:hover { background: #4F46E5; color: #FFF; }
/* ANNOUNCEMENTS */
.announce-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
.announce-item { padding: 14px 18px; border-bottom: 1px solid #F9FAFB; }
.announce-item:last-child { border-bottom: none; }
.announce-badge { display: inline-block; background: #EEF2FF; color: #4F46E5; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; margin-bottom: 6px; }
.announce-title { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 3px; }
.announce-body { font-size: 12px; color: #6B7280; line-height: 1.5; }
.announce-time { font-size: 11px; color: #9CA3AF; margin-top: 6px; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="18-employee-dashboard.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>My Dashboard</a>
<a href="19-my-leave.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>My Leave</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>My Attendance</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>My Payslips</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="06-employee-profile.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
</nav>
<div class="sidebar-footer">
<div class="user-row">
<div class="user-avatar">JD</div>
<div><div class="user-name">John Davis</div><div class="user-role">Software Engineer</div></div>
</div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<span class="topnav-name">Employee Portal</span>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">2</span></div>
<div class="topnav-avatar">JD</div>
</div>
</header>
<main class="content">
<!-- WELCOME -->
<div class="welcome">
<div>
<div class="welcome-title">Good morning, John! Ready for the day?</div>
<div class="welcome-sub">Friday, May 9, 2026 &nbsp;·&nbsp; You haven't checked in yet today</div>
</div>
<button class="checkin-btn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
Check In Now
</button>
</div>
<!-- QUICK ACTIONS -->
<div class="quick-actions">
<a href="19-my-leave.html" class="quick-action">
<div class="qa-icon" style="background:#EEF2FF;">
<svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
</div>
<div class="qa-label">Request Leave</div>
</a>
<div class="quick-action">
<div class="qa-icon" style="background:#ECFDF5;">
<svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div class="qa-label">Check In</div>
</div>
<div class="quick-action">
<div class="qa-icon" style="background:#FFFBEB;">
<svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
</div>
<div class="qa-label">View Payslips</div>
</div>
<a href="06-employee-profile.html" class="quick-action">
<div class="qa-icon" style="background:#F5F3FF;">
<svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<div class="qa-label">My Profile</div>
</a>
</div>
<!-- TWO COL -->
<div class="two-col">
<!-- LEFT -->
<div>
<!-- LEAVE BALANCE -->
<div class="card" style="margin-bottom:16px;">
<div class="card-header-row">
<span class="card-title">Leave Balance</span>
<a href="19-my-leave.html" class="card-action">View all</a>
</div>
<div class="lb-grid">
<div class="lb-item">
<div class="lb-val" style="color:#4F46E5;">14</div>
<div class="lb-type">Annual</div>
<div class="lb-sub" style="color:#9CA3AF;">of 20 days</div>
</div>
<div class="lb-item">
<div class="lb-val" style="color:#F59E0B;">8</div>
<div class="lb-type">Sick</div>
<div class="lb-sub" style="color:#9CA3AF;">of 10 days</div>
</div>
<div class="lb-item">
<div class="lb-val" style="color:#10B981;">3</div>
<div class="lb-type">Casual</div>
<div class="lb-sub" style="color:#9CA3AF;">of 5 days</div>
</div>
</div>
</div>
<!-- RECENT LEAVE REQUESTS -->
<div class="card">
<div class="card-header-row">
<span class="card-title">My Leave Requests</span>
<a href="19-my-leave.html" class="card-action">View all</a>
</div>
<table class="mini-table">
<thead><tr><th>Type</th><th>Dates</th><th>Status</th></tr></thead>
<tbody>
<tr>
<td>Annual</td>
<td style="font-size:12px;">Apr 7–11</td>
<td><span class="badge badge-green">Approved</span></td>
</tr>
<tr>
<td>Sick</td>
<td style="font-size:12px;">Mar 22</td>
<td><span class="badge badge-green">Approved</span></td>
</tr>
<tr>
<td>Annual</td>
<td style="font-size:12px;">May 26–28</td>
<td><span class="badge badge-yellow">Pending</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- RIGHT -->
<div>
<!-- ATTENDANCE MINI CALENDAR -->
<div class="card" style="margin-bottom:16px;">
<div class="card-header-row">
<span class="card-title">May 2026 Attendance</span>
<span class="card-action">Full view</span>
</div>
<div class="cal-grid">
<div class="cal-day-label">S</div><div class="cal-day-label">M</div><div class="cal-day-label">T</div><div class="cal-day-label">W</div><div class="cal-day-label">T</div><div class="cal-day-label">F</div><div class="cal-day-label">S</div>
<div class="cal-day empty"></div>
<div class="cal-day empty"></div>
<div class="cal-day empty"></div>
<div class="cal-day empty"></div>
<div class="cal-day empty"></div>
<div class="cal-day present">1</div>
<div class="cal-day future">2</div>
<div class="cal-day future">3</div>
<div class="cal-day present">4</div>
<div class="cal-day present">5</div>
<div class="cal-day present">6</div>
<div class="cal-day present">7</div>
<div class="cal-day present">8</div>
<div class="cal-day today">9</div>
<div class="cal-day future">10</div>
<div class="cal-day future">11</div>
<div class="cal-day future">12</div>
<div class="cal-day future">13</div>
<div class="cal-day future">14</div>
<div class="cal-day future">15</div>
<div class="cal-day future">16</div>
</div>
<div style="display:flex;gap:12px;padding:0 14px 12px;font-size:11px;color:#9CA3AF;">
<span style="display:flex;align-items:center;gap:4px;"><span style="width:8px;height:8px;border-radius:2px;background:#ECFDF5;display:inline-block;"></span>Present</span>
<span style="display:flex;align-items:center;gap:4px;"><span style="width:8px;height:8px;border-radius:2px;background:#EFF6FF;display:inline-block;"></span>Leave</span>
<span style="display:flex;align-items:center;gap:4px;"><span style="width:8px;height:8px;border-radius:2px;background:#4F46E5;display:inline-block;"></span>Today</span>
</div>
</div>
<!-- LATEST PAYSLIP -->
<div class="card">
<div class="card-header-row">
<span class="card-title">Latest Payslip</span>
</div>
<div class="payslip-card">
<div class="payslip-month">May 2026</div>
<div class="payslip-amount">$4,200.00</div>
<div class="payslip-net">Net pay after deductions</div>
<div class="payslip-breakdown">
<div class="payslip-item">
<div class="payslip-item-label">Gross</div>
<div class="payslip-item-val">$5,000</div>
</div>
<div class="payslip-item">
<div class="payslip-item-label">Tax</div>
<div class="payslip-item-val">-$620</div>
</div>
<div class="payslip-item">
<div class="payslip-item-label">Benefits</div>
<div class="payslip-item-val">-$180</div>
</div>
</div>
<button class="btn-download">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Download PDF
</button>
</div>
</div>
</div>
</div>
<!-- ANNOUNCEMENTS -->
<div class="card-header-row" style="margin-bottom:12px;padding:0;">
<span style="font-size:16px;font-weight:600;color:#111827;">Announcements</span>
</div>
<div class="announce-card">
<div class="announce-item">
<div class="announce-badge">Company</div>
<div class="announce-title">Q2 Performance Reviews Starting May 15</div>
<div class="announce-body">Self-assessments open May 10. Please complete your self-review by May 18 and peer reviews by May 20.</div>
<div class="announce-time">2 days ago</div>
</div>
<div class="announce-item">
<div class="announce-badge">Policy</div>
<div class="announce-title">Updated Remote Work Policy Effective June 1</div>
<div class="announce-body">Employees may work remotely up to 3 days per week with manager approval. Full details in the HR handbook.</div>
<div class="announce-time">May 7, 2026</div>
</div>
<div class="announce-item">
<div class="announce-badge">Benefits</div>
<div class="announce-title">Open Enrollment for Health Benefits — Closes May 31</div>
<div class="announce-body">Annual open enrollment is now open. Review your options and make changes in the benefits portal before the deadline.</div>
<div class="announce-time">May 1, 2026</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/19-my-leave.html
+261
View File
@@ -0,0 +1,261 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Leave — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #10B981; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.topnav-name { font-size: 14px; font-weight: 500; color: #374151; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #10B981; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 700; }
.btn-primary { padding: 9px 18px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-primary svg { width: 16px; height: 16px; }
/* BALANCE CARDS */
.balance-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.balance-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 20px; }
.bc-type { font-size: 12px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.bc-available { font-size: 32px; font-weight: 800; color: #111827; margin-bottom: 2px; }
.bc-sub { font-size: 13px; color: #9CA3AF; margin-bottom: 12px; }
.bc-bar { height: 6px; background: #F3F4F6; border-radius: 3px; overflow: hidden; }
.bc-fill { height: 100%; border-radius: 3px; }
/* REQUEST FORM */
.request-form-card { background: #FFFFFF; border-radius: 10px; border: 1.5px solid #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); margin-bottom: 24px; overflow: hidden; }
.form-card-header { padding: 16px 20px; background: #EEF2FF; border-bottom: 1px solid #C7D2FE; display: flex; align-items: center; justify-content: space-between; }
.form-card-title { font-size: 15px; font-weight: 600; color: #4F46E5; }
.form-close { color: #9CA3AF; cursor: pointer; }
.request-form { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group {}
.form-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
width: 100%; padding: 9px 13px; border: 1.5px solid #E5E7EB; border-radius: 6px;
font-size: 14px; font-family: 'Inter', sans-serif; color: #111827;
background: #FFFFFF; outline: none; appearance: none;
transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }
.form-textarea { min-height: 70px; resize: vertical; }
.col-span-2 { grid-column: 1 / -1; }
.days-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: #EEF2FF; color: #4F46E5; border-radius: 6px; font-size: 14px; font-weight: 600; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.btn-cancel { padding: 9px 18px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; cursor: pointer; }
.btn-submit { padding: 9px 20px; background: #4F46E5; color: #FFF; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-submit:hover { background: #4338CA; }
/* HISTORY TABLE */
.table-card { background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; }
.table-card-header { padding: 16px 20px; border-bottom: 1px solid #F3F4F6; }
.table-card-title { font-size: 15px; font-weight: 600; color: #111827; }
table { width: 100%; border-collapse: collapse; }
thead { background: #F9FAFB; border-bottom: 1px solid #E5E7EB; }
th { padding: 11px 16px; font-size: 12px; font-weight: 600; color: #6B7280; text-align: left; text-transform: uppercase; letter-spacing: 0.4px; }
tbody tr { border-bottom: 1px solid #F3F4F6; transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: #FAFAFA; }
td { padding: 13px 16px; font-size: 14px; color: #374151; vertical-align: middle; }
.badge { padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-blue { background: #EFF6FF; color: #3B82F6; }
.badge-orange { background: #FFF7ED; color: #EA580C; }
.badge-purple { background: #F5F3FF; color: #7C3AED; }
.badge-green { background: #ECFDF5; color: #059669; }
.badge-yellow { background: #FFFBEB; color: #D97706; }
.badge-red { background: #FEF2F2; color: #DC2626; }
.reason-text { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #9CA3AF; }
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="18-employee-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>My Dashboard</a>
<a href="19-my-leave.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>My Leave</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>My Attendance</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>My Payslips</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="06-employee-profile.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>My Profile</a>
<a href="20-org-chart.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">JD</div><div><div class="user-name">John Davis</div><div class="user-role">Software Engineer</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<span class="topnav-name">Employee Portal</span>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">2</span></div>
<div class="topnav-avatar">JD</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div class="page-title">My Leave</div>
<button class="btn-primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Leave Request
</button>
</div>
<!-- BALANCE CARDS -->
<div class="balance-cards">
<div class="balance-card">
<div class="bc-type">Annual Leave</div>
<div class="bc-available">14</div>
<div class="bc-sub">days remaining of 20</div>
<div class="bc-bar"><div class="bc-fill" style="width:70%;background:#4F46E5;"></div></div>
<div style="font-size:11px;color:#9CA3AF;margin-top:6px;">6 days used · 0 pending</div>
</div>
<div class="balance-card">
<div class="bc-type">Sick Leave</div>
<div class="bc-available">8</div>
<div class="bc-sub">days remaining of 10</div>
<div class="bc-bar"><div class="bc-fill" style="width:80%;background:#F59E0B;"></div></div>
<div style="font-size:11px;color:#9CA3AF;margin-top:6px;">2 days used · 0 pending</div>
</div>
<div class="balance-card">
<div class="bc-type">Casual Leave</div>
<div class="bc-available">3</div>
<div class="bc-sub">days remaining of 5</div>
<div class="bc-bar"><div class="bc-fill" style="width:60%;background:#10B981;"></div></div>
<div style="font-size:11px;color:#9CA3AF;margin-top:6px;">2 days used · 0 pending</div>
</div>
</div>
<!-- NEW LEAVE REQUEST FORM (shown open) -->
<div class="request-form-card">
<div class="form-card-header">
<span class="form-card-title">New Leave Request</span>
<svg class="form-close" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</div>
<div class="request-form">
<div class="form-group">
<label class="form-label">Leave Type <span style="color:#EF4444;">*</span></label>
<select class="form-select">
<option selected>Annual Leave</option>
<option>Sick Leave</option>
<option>Casual Leave</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Days</label>
<div class="days-badge">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
3 days
</div>
</div>
<div class="form-group">
<label class="form-label">From Date <span style="color:#EF4444;">*</span></label>
<input class="form-input" type="date" value="2026-05-26">
</div>
<div class="form-group">
<label class="form-label">To Date <span style="color:#EF4444;">*</span></label>
<input class="form-input" type="date" value="2026-05-28">
</div>
<div class="form-group col-span-2">
<label class="form-label">Reason <span style="color:#EF4444;">*</span></label>
<textarea class="form-textarea" placeholder="Please describe the reason for your leave request...">Family event and personal commitments over the long weekend.</textarea>
</div>
<div class="form-actions">
<button class="btn-cancel">Cancel</button>
<button class="btn-submit">Submit Request</button>
</div>
</div>
</div>
<!-- LEAVE HISTORY -->
<div class="table-card">
<div class="table-card-header">
<div class="table-card-title">Leave History</div>
</div>
<table>
<thead>
<tr>
<th>Leave Type</th>
<th>From</th>
<th>To</th>
<th>Days</th>
<th>Status</th>
<th>Reason</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="badge badge-purple">Casual</span></td>
<td>May 26</td>
<td>May 28</td>
<td>3</td>
<td><span class="badge badge-yellow">Pending</span></td>
<td><span class="reason-text">Family event and personal commitments</span></td>
</tr>
<tr>
<td><span class="badge badge-blue">Annual</span></td>
<td>Apr 7</td>
<td>Apr 11</td>
<td>5</td>
<td><span class="badge badge-green">Approved</span></td>
<td><span class="reason-text">Spring vacation — Hawaii</span></td>
</tr>
<tr>
<td><span class="badge badge-orange">Sick</span></td>
<td>Mar 22</td>
<td>Mar 22</td>
<td>1</td>
<td><span class="badge badge-green">Approved</span></td>
<td><span class="reason-text">Severe headache and fever</span></td>
</tr>
<tr>
<td><span class="badge badge-blue">Annual</span></td>
<td>Feb 14</td>
<td>Feb 14</td>
<td>1</td>
<td><span class="badge badge-green">Approved</span></td>
<td><span class="reason-text">Anniversary celebration</span></td>
</tr>
<tr>
<td><span class="badge badge-orange">Sick</span></td>
<td>Jan 9</td>
<td>Jan 10</td>
<td>2</td>
<td><span class="badge badge-green">Approved</span></td>
<td><span class="reason-text">Flu — doctor's certificate attached</span></td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</body>
</html>
designs/20-org-chart.html
+351
View File
@@ -0,0 +1,351 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Org Chart — HR Portal</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; display: flex; min-height: 100vh; }
.sidebar { width: 240px; min-height: 100vh; background: #FFFFFF; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; }
.sidebar-logo { padding: 20px 20px 16px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; border-bottom: 1px solid #F3F4F6; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; margin: 1px 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #6B7280; text-decoration: none; cursor: pointer; }
.nav-item:hover { background: #F9FAFB; color: #111827; }
.nav-item.active { background: #EEF2FF; color: #4F46E5; font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge { margin-left: auto; background: #F59E0B; color: #FFF; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; }
.sidebar-footer { padding: 16px; border-top: 1px solid #F3F4F6; }
.user-row { display: flex; align-items: center; gap: 10px; padding: 8px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 600; color: #111827; }
.user-role { font-size: 11px; color: #9CA3AF; }
.logout-btn { width: 100%; margin-top: 8px; padding: 7px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: transparent; color: #6B7280; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
.topnav { height: 64px; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: #9CA3AF; text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: #D1D5DB; }
.breadcrumb span { color: #111827; font-weight: 500; }
.topnav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #E5E7EB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.icon-btn svg { width: 18px; height: 18px; color: #6B7280; }
.notif-badge { position: absolute; top: -4px; right: -4px; background: #EF4444; color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; }
.topnav-avatar { width: 36px; height: 36px; border-radius: 50%; background: #4F46E5; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; cursor: pointer; }
.content { padding: 28px; overflow-x: auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.page-title { font-size: 22px; font-weight: 700; }
.btn-outline { padding: 8px 16px; border: 1.5px solid #E5E7EB; border-radius: 6px; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; }
/* ORG CHART */
.org-chart { display: flex; flex-direction: column; align-items: center; min-width: 900px; }
/* PERSON CARD */
.person-card {
background: #FFFFFF; border-radius: 10px; border: 1px solid #E5E7EB;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding: 14px 16px; width: 150px; text-align: center;
cursor: pointer; transition: all 0.2s;
position: relative;
}
.person-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.14); border-color: #C7D2FE; transform: translateY(-1px); }
.person-card.ceo { width: 180px; border-color: #4F46E5; }
.person-avatar {
width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 700; color: #FFF;
margin: 0 auto 8px;
}
.person-card.ceo .person-avatar { width: 56px; height: 56px; font-size: 18px; }
.person-name { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 2px; }
.person-title { font-size: 11px; color: #9CA3AF; line-height: 1.4; }
.person-card.ceo .person-name { font-size: 14px; }
/* CONNECTOR LINES */
.connector-down {
width: 2px; background: #E5E7EB; height: 32px; margin: 0 auto;
}
.connector-horizontal {
display: flex; align-items: flex-start; position: relative;
}
.connector-horizontal::before {
content: ''; position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 2px; height: 32px; background: #E5E7EB;
}
/* LEVEL WRAPPER */
.level { display: flex; gap: 0; align-items: flex-start; position: relative; }
.level::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: #E5E7EB;
}
.level-item {
display: flex; flex-direction: column; align-items: center;
padding: 0 16px; flex: 1;
}
.level-connector-up {
width: 2px; height: 32px; background: #E5E7EB; margin-bottom: 0;
}
/* SUBLEVEL */
.sublevel { display: flex; gap: 8px; margin-top: 0; align-items: flex-start; }
.sublevel-item { display: flex; flex-direction: column; align-items: center; }
.sublevel-connector { width: 2px; height: 20px; background: #E5E7EB; }
.sublevel-h-connector { height: 2px; background: #E5E7EB; width: 100%; position: absolute; top: 20px; }
/* CLEANER APPROACH */
.org-wrapper {
display: flex; flex-direction: column; align-items: center;
gap: 0;
}
/* CEO */
.ceo-row { display: flex; flex-direction: column; align-items: center; }
.vert-line { width: 2px; height: 32px; background: #D1D5DB; }
.horiz-line { height: 2px; background: #D1D5DB; }
/* DEPT HEADS ROW */
.dept-row {
display: flex; align-items: flex-start; gap: 0; position: relative;
margin-top: 0;
}
.dept-col { display: flex; flex-direction: column; align-items: center; padding: 0 20px; }
.dept-col-top { width: 2px; height: 32px; background: #D1D5DB; }
.dept-col-connector { position: relative; width: 100%; }
/* TEAM MEMBERS */
.team-row { display: flex; gap: 10px; position: relative; margin-top: 16px; }
.team-member { display: flex; flex-direction: column; align-items: center; }
.team-member-connector { width: 2px; height: 20px; background: #D1D5DB; }
.person-card-sm {
background: #FFFFFF; border-radius: 8px; border: 1px solid #E5E7EB;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
padding: 10px 12px; width: 120px; text-align: center;
cursor: pointer; transition: all 0.15s;
}
.person-card-sm:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: #C7D2FE; }
.avatar-sm { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #FFF; margin: 0 auto 6px; }
.name-sm { font-size: 12px; font-weight: 600; color: #111827; margin-bottom: 1px; }
.title-sm { font-size: 10px; color: #9CA3AF; line-height: 1.3; }
/* DEPT ROW HORIZONTAL CONNECTOR */
.dept-horiz { display: flex; align-items: center; width: 100%; position: relative; }
.dept-horiz::before {
content: ''; position: absolute; top: 32px; left: 20%; right: 20%;
height: 2px; background: #D1D5DB;
}
</style>
</head>
<body>
<aside class="sidebar">
<div class="sidebar-logo"><div class="logo-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>HR Portal</div>
<nav class="sidebar-nav">
<a href="04-admin-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>Dashboard</a>
<a href="05-employee-directory.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Employees</a>
<a href="08-department-management.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>Departments</a>
<a href="09-leave-requests.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Leave Management<span class="nav-badge">7</span></a>
<a href="11-attendance.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Attendance</a>
<a href="12-payroll-dashboard.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>Payroll</a>
<a href="13-recruitment.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>Recruitment</a>
<a href="14-expense-claims.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Expense Claims</a>
<a href="15-performance-reviews.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Performance</a>
<a href="16-reports.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>Reports</a>
<a href="20-org-chart.html" class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="1" width="6" height="5" rx="1"/><rect x="1" y="14" width="6" height="5" rx="1"/><rect x="17" y="14" width="6" height="5" rx="1"/><path d="M4 14v-4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4"/><line x1="12" y1="6" x2="12" y2="9"/></svg>Org Chart</a>
<a href="#" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Announcements</a>
<a href="17-settings.html" class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M12 2v2M12 20v2M2 12h2M20 12h2M17.66 17.66l-1.41-1.41M6.34 17.66l1.41-1.41"/></svg>Settings</a>
</nav>
<div class="sidebar-footer">
<div class="user-row"><div class="user-avatar">SC</div><div><div class="user-name">Sarah Chen</div><div class="user-role">HR Administrator</div></div></div>
<button class="logout-btn">Sign Out</button>
</div>
</aside>
<div class="main-wrapper">
<header class="topnav">
<div class="breadcrumb">
<a href="04-admin-dashboard.html">Home</a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
<span>Organization Chart</span>
</div>
<div class="topnav-actions">
<div class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/></svg><span class="notif-badge">3</span></div>
<div class="topnav-avatar">SC</div>
</div>
</header>
<main class="content">
<div class="page-header">
<div>
<div class="page-title">Organization Chart</div>
<div style="font-size:13px;color:#9CA3AF;margin-top:3px;">TechFlow Inc. &nbsp;·&nbsp; 248 employees</div>
</div>
<div style="display:flex;gap:8px;">
<button class="btn-outline">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
Export PDF
</button>
<button class="btn-outline">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
Search People
</button>
</div>
</div>
<!-- ORG CHART -->
<div style="background:#FFFFFF;border-radius:12px;border:1px solid #E5E7EB;padding:40px;overflow-x:auto;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
<div class="org-wrapper">
<!-- CEO -->
<div class="ceo-row">
<div class="person-card ceo">
<div class="person-avatar" style="background:#111827;">RP</div>
<div class="person-name">Robert Park</div>
<div class="person-title">Chief Executive Officer</div>
</div>
<div class="vert-line"></div>
</div>
<!-- HORIZONTAL CONNECTOR -->
<div style="display:flex;width:820px;height:2px;background:linear-gradient(to right, transparent 12.5%, #D1D5DB 12.5%, #D1D5DB 87.5%, transparent 87.5%);"></div>
<!-- DEPT HEADS ROW -->
<div style="display:flex;width:820px;">
<!-- Engineering -->
<div class="dept-col" style="flex:1;">
<div class="dept-col-top"></div>
<div class="person-card">
<div class="person-avatar" style="background:#4F46E5;">MR</div>
<div class="person-name">Michael Rodriguez</div>
<div class="person-title">VP Engineering</div>
</div>
<div class="vert-line" style="height:20px;"></div>
<div style="display:flex;height:2px;background:linear-gradient(to right,transparent 25%,#D1D5DB 25%,#D1D5DB 75%,transparent 75%);width:260px;"></div>
<div style="display:flex;gap:10px;margin-top:0;">
<div class="team-member">
<div class="vert-line" style="height:16px;"></div>
<div class="person-card-sm">
<div class="avatar-sm" style="background:#6366F1;">JK</div>
<div class="name-sm">James Kim</div>
<div class="title-sm">Frontend Dev</div>
</div>
</div>
<div class="team-member">
<div class="vert-line" style="height:16px;"></div>
<div class="person-card-sm">
<div class="avatar-sm" style="background:#8B5CF6;">NW</div>
<div class="name-sm">Noah Williams</div>
<div class="title-sm">DevOps Engineer</div>
</div>
</div>
</div>
</div>
<!-- HR -->
<div class="dept-col" style="flex:1;">
<div class="dept-col-top"></div>
<div class="person-card">
<div class="person-avatar" style="background:#10B981;">SC</div>
<div class="person-name">Sarah Chen</div>
<div class="person-title">HR Director</div>
</div>
<div class="vert-line" style="height:20px;"></div>
<div style="display:flex;height:2px;background:#D1D5DB;width:140px;margin:0 auto;"></div>
<div style="display:flex;gap:10px;margin-top:0;justify-content:center;">
<div class="team-member">
<div class="vert-line" style="height:16px;"></div>
<div class="person-card-sm">
<div class="avatar-sm" style="background:#34D399;">LM</div>
<div class="name-sm">Lily Martin</div>
<div class="title-sm">HR Specialist</div>
</div>
</div>
</div>
</div>
<!-- Finance -->
<div class="dept-col" style="flex:1;">
<div class="dept-col-top"></div>
<div class="person-card">
<div class="person-avatar" style="background:#F59E0B;">PP</div>
<div class="person-name">Priya Patel</div>
<div class="person-title">Finance Director</div>
</div>
<div class="vert-line" style="height:20px;"></div>
<div style="display:flex;height:2px;background:#D1D5DB;width:140px;margin:0 auto;"></div>
<div style="display:flex;gap:10px;margin-top:0;justify-content:center;">
<div class="team-member">
<div class="vert-line" style="height:16px;"></div>
<div class="person-card-sm">
<div class="avatar-sm" style="background:#FBBF24;">FA</div>
<div class="name-sm">Fatima Al-Rashid</div>
<div class="title-sm">Financial Analyst</div>
</div>
</div>
</div>
</div>
<!-- Operations -->
<div class="dept-col" style="flex:1;">
<div class="dept-col-top"></div>
<div class="person-card">
<div class="person-avatar" style="background:#3B82F6;">RS</div>
<div class="person-name">Ravi Shankar</div>
<div class="person-title">Operations Lead</div>
</div>
<div class="vert-line" style="height:20px;"></div>
<div style="display:flex;height:2px;background:linear-gradient(to right,transparent 25%,#D1D5DB 25%,#D1D5DB 75%,transparent 75%);width:260px;"></div>
<div style="display:flex;gap:10px;margin-top:0;">
<div class="team-member">
<div class="vert-line" style="height:16px;"></div>
<div class="person-card-sm">
<div class="avatar-sm" style="background:#60A5FA;">LO</div>
<div class="name-sm">Lucas Oliveira</div>
<div class="title-sm">Ops Specialist</div>
</div>
</div>
<div class="team-member">
<div class="vert-line" style="height:16px;"></div>
<div class="person-card-sm">
<div class="avatar-sm" style="background:#2563EB;">TH</div>
<div class="name-sm">Tom Huang</div>
<div class="title-sm">Ops Analyst</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LEGEND -->
<div style="margin-top:32px;padding-top:20px;border-top:1px solid #F3F4F6;display:flex;gap:24px;justify-content:center;">
<div style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6B7280;">
<div style="width:32px;height:2px;background:#D1D5DB;"></div>
Reports to
</div>
<div style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6B7280;">
<div style="width:12px;height:12px;border-radius:50%;background:#111827;"></div>
C-Suite
</div>
<div style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6B7280;">
<div style="width:12px;height:12px;border-radius:50%;background:#4F46E5;"></div>
Department Head
</div>
<div style="display:flex;align-items:center;gap:8px;font-size:12px;color:#6B7280;">
<div style="width:12px;height:12px;border-radius:50%;background:#6366F1;"></div>
Team Member
</div>
</div>
</div>
</main>
</div>
</body>
</html>
designs/index.html
+596
View File
@@ -0,0 +1,596 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HR Portal v5 — Design Mockups</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #FAFAFA; color: #111827; min-height: 100vh; }
header {
background: #FFFFFF; border-bottom: 1px solid #E5E7EB;
padding: 0 48px;
display: flex; align-items: center; justify-content: space-between;
height: 64px; position: sticky; top: 0; z-index: 10;
}
.header-logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #111827; }
.logo-icon { width: 32px; height: 32px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 16px; height: 16px; }
.header-badge { background: #EEF2FF; color: #4F46E5; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.hero {
background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
padding: 60px 48px; color: #FFFFFF; text-align: center;
}
.hero-title { font-size: 40px; font-weight: 800; margin-bottom: 12px; letter-spacing: -1px; }
.hero-sub { font-size: 18px; color: rgba(255,255,255,0.8); max-width: 560px; margin: 0 auto 28px; line-height: 1.6; }
.hero-stats { display: flex; justify-content: center; gap: 40px; }
.hero-stat-num { font-size: 28px; font-weight: 700; }
.hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.main { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.section { margin-bottom: 48px; }
.section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid #E5E7EB; }
.section-num { width: 32px; height: 32px; border-radius: 8px; background: #4F46E5; color: #FFF; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.section-title { font-size: 20px; font-weight: 700; color: #111827; }
.section-count { background: #F3F4F6; color: #6B7280; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 10px; margin-left: 4px; }
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cards-grid.three { grid-template-columns: repeat(3, 1fr); }
.cards-grid.two { grid-template-columns: repeat(2, 1fr); }
.mockup-card {
background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
overflow: hidden; text-decoration: none; color: inherit;
transition: all 0.2s; display: block;
}
.mockup-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-3px); border-color: #C7D2FE; }
.card-preview {
height: 140px; display: flex; align-items: center; justify-content: center;
font-size: 32px; font-weight: 800; color: rgba(255,255,255,0.9);
position: relative; overflow: hidden;
flex-direction: column; gap: 8px;
}
.card-preview-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
.card-preview-icon svg { width: 22px; height: 22px; }
.card-preview-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
.card-preview-num { font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; color: rgba(255,255,255,0.7); position: absolute; top: 10px; left: 10px; }
/* MOCK SIDEBAR IN PREVIEW */
.preview-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: rgba(255,255,255,0.15); border-right: 1px solid rgba(255,255,255,0.15); }
.preview-topbar { position: absolute; top: 0; right: 0; left: 30%; height: 20%; background: rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.15); }
.preview-content { position: absolute; top: 20%; right: 0; bottom: 0; left: 30%; padding: 8px; }
.preview-row { height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; margin-bottom: 5px; }
.preview-row.short { width: 60%; }
.preview-row.shorter { width: 40%; }
.preview-card-row { display: flex; gap: 4px; margin-bottom: 5px; }
.preview-mini-card { flex: 1; height: 22px; background: rgba(255,255,255,0.2); border-radius: 3px; }
.preview-table-row { height: 5px; background: rgba(255,255,255,0.15); border-radius: 2px; margin-bottom: 3px; }
.card-info { padding: 14px 16px; }
.card-num { font-size: 11px; font-weight: 700; color: #9CA3AF; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.card-name { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 3px; }
.card-desc { font-size: 12px; color: #9CA3AF; line-height: 1.4; }
.card-tag { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.tag-admin { background: #EEF2FF; color: #4F46E5; }
.tag-employee { background: #ECFDF5; color: #10B981; }
.tag-public { background: #F5F3FF; color: #7C3AED; }
footer {
background: #111827; padding: 32px 48px; text-align: center;
color: #9CA3AF; font-size: 14px; margin-top: 24px;
}
</style>
</head>
<body>
<header>
<div class="header-logo">
<div class="logo-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
</svg>
</div>
HR Portal v5
</div>
<div class="header-badge">Design Mockups</div>
</header>
<div class="hero">
<div class="hero-title">HR Portal v5 — Design Mockups</div>
<div class="hero-sub">Pixel-perfect HTML/CSS mockups for all 20 screens of the HR management system. Click any card to preview.</div>
<div class="hero-stats">
<div>
<div class="hero-stat-num">20</div>
<div class="hero-stat-label">Design Screens</div>
</div>
<div>
<div class="hero-stat-num">3</div>
<div class="hero-stat-label">Page Sections</div>
</div>
<div>
<div class="hero-stat-num">100%</div>
<div class="hero-stat-label">Self-contained HTML/CSS</div>
</div>
</div>
</div>
<div class="main">
<!-- PUBLIC PAGES -->
<div class="section">
<div class="section-header">
<div class="section-num" style="background:#7C3AED;">P</div>
<div>
<div class="section-title">Public Pages <span class="section-count">3 screens</span></div>
</div>
</div>
<div class="cards-grid three">
<a href="01-landing.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#7C3AED);">
<div class="card-preview-num">01</div>
<div class="preview-content" style="top:0;left:0;right:0;">
<div style="padding:8px;border-bottom:1px solid rgba(255,255,255,0.2);display:flex;justify-content:space-between;align-items:center;"><div style="width:40px;height:6px;background:rgba(255,255,255,0.4);border-radius:3px;"></div><div style="width:50px;height:10px;background:rgba(255,255,255,0.25);border-radius:3px;"></div></div>
<div style="padding:12px 8px;">
<div style="width:70%;height:12px;background:rgba(255,255,255,0.4);border-radius:3px;margin-bottom:6px;"></div>
<div style="width:50%;height:8px;background:rgba(255,255,255,0.25);border-radius:3px;margin-bottom:12px;"></div>
<div style="display:flex;gap:6px;"><div style="width:50px;height:14px;background:rgba(255,255,255,0.4);border-radius:3px;"></div><div style="width:40px;height:14px;background:rgba(255,255,255,0.2);border-radius:3px;"></div></div>
</div>
<div style="display:flex;gap:6px;padding:0 8px;"><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div><div style="flex:1;height:50px;background:rgba(255,255,255,0.15);border-radius:6px;"></div></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 01</div>
<div class="card-name">Landing Page</div>
<div class="card-desc">Public marketing page with hero, features, stats, testimonials</div>
<span class="card-tag tag-public">Public</span>
</div>
</a>
<a href="02-login.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#6366F1,#4F46E5);">
<div class="card-preview-num">02</div>
<div style="width:90px;background:rgba(255,255,255,0.2);border-radius:8px;padding:10px;text-align:center;">
<div style="width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.3);margin:0 auto 6px;"></div>
<div style="width:60px;height:5px;background:rgba(255,255,255,0.4);border-radius:3px;margin:0 auto 8px;"></div>
<div style="height:16px;background:rgba(255,255,255,0.2);border-radius:3px;margin-bottom:5px;"></div>
<div style="height:16px;background:rgba(255,255,255,0.2);border-radius:3px;margin-bottom:8px;"></div>
<div style="height:16px;background:rgba(255,255,255,0.5);border-radius:3px;"></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 02</div>
<div class="card-name">Login Page</div>
<div class="card-desc">Employee and admin sign-in with Google SSO option</div>
<span class="card-tag tag-public">Public</span>
</div>
</a>
<a href="03-register.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#7C3AED,#6366F1);">
<div class="card-preview-num">03</div>
<div style="width:100px;background:rgba(255,255,255,0.15);border-radius:8px;padding:10px;">
<div style="display:flex;justify-content:space-between;margin-bottom:8px;">
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(0,0,0,0.5);">1</div>
<div style="flex:1;height:2px;background:rgba(255,255,255,0.4);margin:9px 4px;"></div>
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:rgba(255,255,255,0.7);">2</div>
<div style="flex:1;height:2px;background:rgba(255,255,255,0.2);margin:9px 4px;"></div>
<div style="width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:9px;color:rgba(255,255,255,0.5);">3</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;">
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
<div style="height:12px;background:rgba(255,255,255,0.2);border-radius:2px;"></div>
</div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 03</div>
<div class="card-name">Company Registration</div>
<div class="card-desc">Multi-step company setup with admin account creation</div>
<span class="card-tag tag-public">Public</span>
</div>
</a>
</div>
</div>
<!-- ADMIN PAGES -->
<div class="section">
<div class="section-header">
<div class="section-num">A</div>
<div>
<div class="section-title">Admin Pages <span class="section-count">15 screens</span></div>
</div>
</div>
<div class="cards-grid">
<a href="04-admin-dashboard.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#6366F1);">
<div class="card-preview-num">04</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div class="preview-card-row"><div class="preview-mini-card"></div><div class="preview-mini-card"></div><div class="preview-mini-card"></div><div class="preview-mini-card"></div></div>
<div class="preview-card-row"><div class="preview-mini-card" style="height:35px;"></div><div class="preview-mini-card" style="height:35px;"></div></div>
<div class="preview-card-row"><div class="preview-mini-card" style="height:25px;flex:3;"></div><div class="preview-mini-card" style="height:25px;flex:2;"></div></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 04</div>
<div class="card-name">Admin Dashboard</div>
<div class="card-desc">Stats, pending approvals, activity feed, announcements</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="05-employee-directory.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#3B82F6,#4F46E5);">
<div class="card-preview-num">05</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="height:6px;background:rgba(255,255,255,0.3);border-radius:3px;margin-bottom:5px;width:70%;"></div>
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 05</div>
<div class="card-name">Employee Directory</div>
<div class="card-desc">Filterable table of all employees with search and actions</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="06-employee-profile.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#06B6D4,#3B82F6);">
<div class="card-preview-num">06</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="display:flex;gap:4px;margin-bottom:5px;"><div style="width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,0.4);"></div><div style="flex:1;"><div style="height:5px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:3px;"></div><div style="height:4px;background:rgba(255,255,255,0.2);border-radius:2px;width:70%;"></div></div></div>
<div style="display:flex;gap:3px;margin-bottom:4px;"><div style="flex:1;height:4px;background:rgba(255,255,255,0.3);border-radius:2px;"></div><div style="flex:1;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="flex:1;height:4px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
<div class="preview-card-row"><div class="preview-mini-card" style="height:28px;"></div><div class="preview-mini-card" style="height:28px;"></div></div>
<div class="preview-card-row"><div class="preview-mini-card" style="height:12px;"></div><div class="preview-mini-card" style="height:12px;"></div><div class="preview-mini-card" style="height:12px;"></div></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 06</div>
<div class="card-name">Employee Profile</div>
<div class="card-desc">Detailed profile with tabs: overview, leave, attendance, payslips</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="07-add-employee.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#10B981,#059669);">
<div class="card-preview-num">07</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="margin-bottom:4px;background:rgba(255,255,255,0.15);border-radius:4px;padding:5px;">
<div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
</div>
<div style="background:rgba(255,255,255,0.15);border-radius:4px;padding:5px;">
<div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.2);border-radius:2px;"></div></div>
</div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 07</div>
<div class="card-name">Add Employee</div>
<div class="card-desc">Multi-section form for personal info, employment, compensation</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="08-department-management.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#F59E0B,#EF4444);">
<div class="card-preview-num">08</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;">
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
<div style="height:35px;background:rgba(255,255,255,0.25);border-radius:4px;"></div>
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
<div style="height:35px;background:rgba(255,255,255,0.2);border-radius:4px;"></div>
</div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 08</div>
<div class="card-name">Department Management</div>
<div class="card-desc">Department cards with heads, employee counts, edit/delete</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="09-leave-requests.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#EF4444,#EC4899);">
<div class="card-preview-num">09</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="display:flex;gap:3px;margin-bottom:5px;"><div style="height:4px;background:rgba(255,255,255,0.5);border-radius:2px;width:20px;"></div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;flex:1;"></div></div>
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 09</div>
<div class="card-name">Leave Requests</div>
<div class="card-desc">Tabbed leave request management with approve/reject actions</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="10-leave-types.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#7C3AED,#EC4899);">
<div class="card-preview-num">10</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 10</div>
<div class="card-name">Leave Types</div>
<div class="card-desc">Configure leave policies, days/year, carry forward, toggles</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="11-attendance.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#0EA5E9,#06B6D4);">
<div class="card-preview-num">11</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div class="preview-card-row" style="margin-bottom:5px;"><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div></div>
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 11</div>
<div class="card-name">Attendance Log</div>
<div class="card-desc">Daily attendance with check-in/out times, status badges</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="12-payroll-dashboard.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#059669,#10B981);">
<div class="card-preview-num">12</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="background:rgba(255,255,255,0.15);border-radius:4px;padding:6px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;"><div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:3px;width:60px;"></div><div style="height:3px;background:rgba(255,255,255,0.2);border-radius:2px;width:40px;"></div></div><div style="width:40px;height:14px;background:rgba(255,255,255,0.4);border-radius:3px;"></div></div>
<div class="preview-card-row"><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div><div class="preview-mini-card" style="height:14px;"></div></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 12</div>
<div class="card-name">Payroll Dashboard</div>
<div class="card-desc">Monthly payroll status, salary structures, history</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="13-recruitment.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#D97706,#F59E0B);">
<div class="card-preview-num">13</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div class="preview-card-row" style="margin-bottom:5px;"><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div><div class="preview-mini-card" style="height:22px;"></div></div>
<div style="display:flex;gap:3px;"><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.15);border-radius:3px;"></div><div style="flex:1;min-height:30px;background:rgba(255,255,255,0.2);border-radius:3px;"></div></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 13</div>
<div class="card-name">Recruitment</div>
<div class="card-desc">Job listings with Kanban pipeline for applicant stages</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="14-expense-claims.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#8B5CF6,#7C3AED);">
<div class="card-preview-num">14</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div class="preview-table-row" style="background:rgba(255,255,255,0.3);"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 14</div>
<div class="card-name">Expense Claims</div>
<div class="card-desc">Expense submissions with category badges and receipt links</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="15-performance-reviews.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#4F46E5,#9333EA);">
<div class="card-preview-num">15</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:6px;margin-bottom:5px;"><div style="height:4px;background:rgba(255,255,255,0.4);border-radius:2px;margin-bottom:4px;"></div><div style="height:4px;background:rgba(255,255,255,0.25);border-radius:2px;margin-bottom:6px;width:70%;"></div><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;"></div></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
<div class="preview-table-row"></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 15</div>
<div class="card-name">Performance Reviews</div>
<div class="card-desc">Active review cycle with progress bar and history table</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="16-reports.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#1D4ED8,#4F46E5);">
<div class="card-preview-num">16</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;">
<div style="height:28px;background:rgba(255,255,255,0.2);border-radius:3px;"></div>
<div style="height:28px;background:rgba(255,255,255,0.2);border-radius:3px;"></div>
<div style="height:28px;background:rgba(255,255,255,0.15);border-radius:3px;"></div>
<div style="height:28px;background:rgba(255,255,255,0.15);border-radius:3px;"></div>
</div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 16</div>
<div class="card-name">Reports & Analytics</div>
<div class="card-desc">6 CSS-based charts: line, bar, donut, horizontal bars</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
<a href="17-settings.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#374151,#6B7280);">
<div class="card-preview-num">17</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content" style="display:flex;gap:4px;">
<div style="width:28%;background:rgba(255,255,255,0.1);border-radius:3px;"></div>
<div style="flex:1;"><div style="height:4px;background:rgba(255,255,255,0.3);border-radius:2px;margin-bottom:4px;"></div><div style="height:3px;background:rgba(255,255,255,0.15);border-radius:2px;margin-bottom:6px;width:70%;"></div><div style="height:22px;background:rgba(255,255,255,0.15);border-radius:3px;margin-bottom:4px;"></div><div style="height:18px;background:rgba(255,255,255,0.15);border-radius:3px;"></div></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 17</div>
<div class="card-name">Settings</div>
<div class="card-desc">Company profile, logo upload, work hours config, sub-nav</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
</div>
</div>
<!-- EMPLOYEE PAGES -->
<div class="section">
<div class="section-header">
<div class="section-num" style="background:#10B981;">E</div>
<div>
<div class="section-title">Employee Pages <span class="section-count">3 screens</span></div>
</div>
</div>
<div class="cards-grid three">
<a href="18-employee-dashboard.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#059669,#10B981);">
<div class="card-preview-num">18</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:5px;margin-bottom:4px;display:flex;justify-content:space-between;"><div style="height:5px;background:rgba(255,255,255,0.4);border-radius:2px;width:60%;"></div><div style="height:12px;background:rgba(255,255,255,0.3);border-radius:3px;width:30%;"></div></div>
<div class="preview-card-row"><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div><div class="preview-mini-card" style="height:16px;"></div></div>
<div class="preview-card-row"><div class="preview-mini-card" style="height:25px;"></div><div class="preview-mini-card" style="height:25px;"></div></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 18</div>
<div class="card-name">Employee Dashboard</div>
<div class="card-desc">Personal dashboard: quick actions, leave balance, payslip, announcements</div>
<span class="card-tag tag-employee">Employee</span>
</div>
</a>
<a href="19-my-leave.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#2DD4BF,#059669);">
<div class="card-preview-num">19</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content">
<div class="preview-card-row" style="margin-bottom:4px;"><div class="preview-mini-card" style="height:20px;"></div><div class="preview-mini-card" style="height:20px;"></div><div class="preview-mini-card" style="height:20px;"></div></div>
<div style="background:rgba(255,255,255,0.2);border-radius:4px;padding:5px;margin-bottom:4px;"><div style="display:grid;grid-template-columns:1fr 1fr;gap:3px;"><div style="height:10px;background:rgba(255,255,255,0.3);border-radius:2px;"></div><div style="height:10px;background:rgba(255,255,255,0.3);border-radius:2px;"></div></div></div>
<div class="preview-table-row"></div><div class="preview-table-row"></div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 19</div>
<div class="card-name">My Leave</div>
<div class="card-desc">Leave balances, inline request form, and leave history</div>
<span class="card-tag tag-employee">Employee</span>
</div>
</a>
<a href="20-org-chart.html" class="mockup-card">
<div class="card-preview" style="background:linear-gradient(135deg,#6366F1,#8B5CF6);">
<div class="card-preview-num">20</div>
<div class="preview-sidebar"></div>
<div class="preview-topbar"></div>
<div class="preview-content" style="display:flex;flex-direction:column;align-items:center;padding-top:4px;">
<div style="width:40px;height:18px;background:rgba(255,255,255,0.35);border-radius:4px;margin-bottom:4px;"></div>
<div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div>
<div style="display:flex;gap:6px;align-items:flex-start;">
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
<div style="display:flex;flex-direction:column;align-items:center;"><div style="width:2px;height:8px;background:rgba(255,255,255,0.3);"></div><div style="width:30px;height:16px;background:rgba(255,255,255,0.3);border-radius:3px;"></div></div>
</div>
</div>
</div>
<div class="card-info">
<div class="card-num">Screen 20</div>
<div class="card-name">Org Chart</div>
<div class="card-desc">CSS-based org tree with CEO, department heads, and team members</div>
<span class="card-tag tag-admin">Admin</span>
</div>
</a>
</div>
</div>
</div>
<footer>
<strong style="color:#FFF;">HR Portal v5</strong> — Design Mockup Gallery &nbsp;·&nbsp; 21 files total &nbsp;·&nbsp; All designs self-contained HTML/CSS &nbsp;·&nbsp; May 2026
</footer>
</body>
</html>
playwright.config.ts
+21
View File
@@ -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
+315
View File
@@ -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);
});