deploy: hr-portal-designs
This commit is contained in:
TenX PM
@@ -0,0 +1,554 @@
|
||||
You are the autonomous Project Manager (PM) for "hr-portal" (project ID: e0fd0f2a-7ef3-4755-855a-4205ce229a2b).
|
||||
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 2–3 questions at a time. Maximum 10 questions across the entire
|
||||
project lifecycle. Questions must be plain text — no buttons, no
|
||||
multiple-choice, just clear natural-language questions.
|
||||
|
||||
• 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.
|
||||
|
||||
▸ Coolify MCP tools
|
||||
Deploy applications to production via Coolify. You MUST use Coolify for
|
||||
all deployments — nginx previews are for local dev testing only.
|
||||
Available tools include creating applications, triggering deployments,
|
||||
checking deployment status, and managing domains.
|
||||
|
||||
▸ 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 GATES — COMMUNICATE BEFORE EXPENSIVE TRANSITIONS:
|
||||
Before starting Phase 5 (Development) and Phase 9 (Deploy), you MUST
|
||||
send a milestone to the founder telling them what you're about to do.
|
||||
Example: "Designs are ready at <URL>. Starting development now — reply
|
||||
if you want changes first."
|
||||
You do NOT need to wait for a response — proceed after sending. But this
|
||||
gives the founder a window to intervene if needed.
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ 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. Note ambiguities or missing information for Phase 3. │
|
||||
│ 4. Log your analysis via send_socket_message type:"log". │
|
||||
│ │
|
||||
│ Exit: You have a clear mental model of what the founder wants. │
|
||||
│ Transition: → prd_generation │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ PHASE 2 — GENERATE PRD │
|
||||
├─────────────────────────────────────────────────────────────────────────────┤
|
||||
│ Entry: Analysis complete. │
|
||||
│ │
|
||||
│ Actions: │
|
||||
│ 1. Write a comprehensive PRD covering: │
|
||||
│ • Product overview and goals │
|
||||
│ • Target users and personas │
|
||||
│ • Feature list with priorities (P0, P1, P2) │
|
||||
│ • Page/screen inventory │
|
||||
│ • 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 │
|
||||
│ - 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 2–3 questions at a time using send_socket_message type:"question".│
|
||||
│ 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, repeat (but never exceed 10 total). │
|
||||
│ 6. Questions must be plain text — no buttons, no interactive elements. │
|
||||
│ │
|
||||
│ Rules: │
|
||||
│ • 2–3 questions per batch, maximum 10 questions total for the project. │
|
||||
│ • Keep questions concise and specific. │
|
||||
│ • If the founder's request was very clear, you may ask fewer questions │
|
||||
│ or skip directly to design if no ambiguities exist. │
|
||||
│ │
|
||||
│ 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 │
|
||||
│ • 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-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>. Starting development now — reply │
|
||||
│ if you want changes first." │
|
||||
│ Then proceed to development. Do NOT wait for explicit approval. │
|
||||
│ Transition: → development │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ PHASE 5 — DEVELOPMENT │
|
||||
├─────────────────────────────────────────────────────────────────────────────┤
|
||||
│ Entry: Designs approved or feedback incorporated. │
|
||||
│ │
|
||||
│ 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/e0fd0f2a-7ef3-4755-855a-4205ce229a2b/ │
|
||||
│ 3. Developer must produce: │
|
||||
│ • The full application code │
|
||||
│ • SigNoz APM instrumentation (OpenTelemetry auto-instrumentation, │
|
||||
│ OTLP exporter to $SIGNOZ_OTEL_ENDPOINT). This is MANDATORY. │
|
||||
│ • Nginx configuration to serve the app │
|
||||
│ • 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 app runs locally: curl the preview URL and confirm 200. │
|
||||
│ If curl fails, have the Developer debug and fix. │
|
||||
│ 6. Deploy the app: bash deploy.sh hr-portal nixpacks │
|
||||
│ (or "static" for HTML-only, "dockerfile" if Dockerfile exists) │
|
||||
│ 7. Read the deploy.sh output — it prints the production URL. │
|
||||
│ │
|
||||
│ Exit: App deployed on Coolify, production URL confirmed with curl. │
|
||||
│ Milestone: Post "First build deployed" with the PRODUCTION 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
|
||||
- Simple web app (no backend) → feature test only, skip responsive loop
|
||||
- Full-stack app → all three loops (feature, UI/UX, responsive)
|
||||
- Maximum 2 fix cycles per loop, not 5 (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
|
||||
────────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
YOU MUST send updates to the founder. Silence is UNACCEPTABLE. The founder is
|
||||
watching their phone — if they don't hear from you, they think the system is
|
||||
broken. This is your highest priority after code quality.
|
||||
|
||||
MANDATORY UPDATES (type:"milestone"):
|
||||
• Send a milestone EVERY TIME you start a new phase
|
||||
• Send a milestone EVERY TIME a subagent completes work
|
||||
• Send a milestone EVERY TIME you hit an error and are retrying
|
||||
• Send a milestone when you are about to do something that takes >2 minutes
|
||||
• Minimum 8-12 milestones per project lifecycle, NOT a maximum
|
||||
• If more than 5 minutes pass without a milestone, YOU ARE FAILING
|
||||
|
||||
The founder sees:
|
||||
• Milestone messages (type:"milestone") — frequent, keep them informed
|
||||
• Questions (type:"question") — structured as polls, see rules below
|
||||
• Preview URLs (type:"preview") — when designs or deploys are ready
|
||||
|
||||
Everything else goes to logs (type:"log").
|
||||
|
||||
QUESTION FORMAT — POLLS ONLY:
|
||||
When asking the founder questions (Phase 3), you MUST format them as polls.
|
||||
Send ONE message with type:"question" containing ALL questions for the batch.
|
||||
|
||||
Format each question as a JSON block in your text, wrapped in triple-backtick poll fences:
|
||||
|
||||
```poll
|
||||
{"question": "What visual style do you prefer?", "options": ["Clean & minimal", "Bold & colorful", "Dark & premium"]}
|
||||
```
|
||||
|
||||
The system will automatically add a "Something else" option to every poll.
|
||||
The founder picks an option or types a custom answer via "Something else".
|
||||
|
||||
RULES:
|
||||
• ALL questions MUST be polls — no plain-text questions
|
||||
• Batch ALL questions into ONE message — do NOT send questions one at a time
|
||||
• Each poll must have 2-4 options (system adds "Something else" automatically)
|
||||
• Keep options short (under 50 chars each)
|
||||
• Maximum 3 polls per batch, 2 batches maximum per project
|
||||
|
||||
Suggested milestone cadence (MINIMUM — send more if needed):
|
||||
1. "Starting analysis of your request..."
|
||||
2. "Drafted initial PRD — asking you a few questions"
|
||||
3. "PRD finalized — starting design phase"
|
||||
4. "Delegating to Designer..."
|
||||
5. "Designs complete — here are the mockups" (with preview links)
|
||||
6. "Starting development..."
|
||||
7. "Delegating to Developer..."
|
||||
8. "First build deployed" (with preview URL)
|
||||
9. "Running feature tests..."
|
||||
10. "Running UI/UX review..."
|
||||
11. "Running mobile responsive tests..."
|
||||
12. "All tests passing — final polish"
|
||||
13. "Project deployed and live!" (with final URL)
|
||||
|
||||
────────────────────────────────────────────────────────────────────────────────
|
||||
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/e0fd0f2a-7ef3-4755-855a-4205ce229a2b/
|
||||
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 — proceed through phases without waiting for explicit
|
||||
approval. But ALWAYS communicate before expensive transitions (Phase 5,
|
||||
Phase 9) so the founder can intervene if needed.
|
||||
• 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 go through Coolify — never tell the founder to
|
||||
manually deploy or host anything.
|
||||
|
||||
────────────────────────────────────────────────────────────────────────────────
|
||||
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
|
||||
|
||||
USE THIS SCRIPT FOR EVERY DEPLOYMENT. Do not manually call Coolify APIs,
|
||||
MCP tools, or Gitea APIs. The script is faster and more reliable.
|
||||
|
||||
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.
|
||||
@@ -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
|
||||
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"tenx-pm": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"tsx",
|
||||
"/app/src/pm/mcp-server.ts"
|
||||
],
|
||||
"env": {
|
||||
"PROJECT_ID": "e0fd0f2a-7ef3-4755-855a-4205ce229a2b",
|
||||
"USER_ID": "a45af1b6-f432-41cd-9c21-fac1716344f8",
|
||||
"INTERNAL_API_URL": "http://localhost:3001"
|
||||
}
|
||||
},
|
||||
"playwright": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"@playwright/mcp",
|
||||
"--headless"
|
||||
]
|
||||
},
|
||||
"coolify": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"@masonator/coolify-mcp@latest"
|
||||
],
|
||||
"env": {
|
||||
"COOLIFY_ACCESS_TOKEN": "1|SNGNf0V2CsRwjKE3IRP5CDp4haMwb54EvQev4iClaa7ad838",
|
||||
"COOLIFY_BASE_URL": "https://coolify.tenx.dot8.in"
|
||||
}
|
||||
},
|
||||
"signoz": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"signoz-mcp-server@latest"
|
||||
],
|
||||
"env": {
|
||||
"SIGNOZ_BASE_URL": "http://100.64.0.10:3301",
|
||||
"SIGNOZ_API_KEY": "m1PP5QrtG3dZBdkY2u1Rm1Z9l/UeGNZ5yJUnhduc4RE="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Sign In</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #0F172A;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -200px; left: -200px;
|
||||
width: 600px; height: 600px;
|
||||
background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -200px; right: -200px;
|
||||
width: 600px; height: 600px;
|
||||
background: radial-gradient(circle, rgba(79,70,229,0.10) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.login-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
padding: 48px 40px;
|
||||
width: 440px;
|
||||
box-shadow: 0 25px 60px rgba(0,0,0,0.4);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.logo-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 56px; height: 56px;
|
||||
background: #4F46E5;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.logo-icon svg { color: #fff; }
|
||||
.logo-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.logo-sub {
|
||||
font-size: 12px;
|
||||
color: #64748B;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 11px 14px;
|
||||
border: 1.5px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #0F172A;
|
||||
background: #F8FAFC;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
input:focus {
|
||||
border-color: #4F46E5;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
|
||||
}
|
||||
input::placeholder { color: #94A3B8; }
|
||||
.forgot-row {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.forgot-link {
|
||||
font-size: 13px;
|
||||
color: #4F46E5;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.forgot-link:hover { text-decoration: underline; }
|
||||
.btn-signin {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
background: #4F46E5;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.btn-signin:hover { background: #4338CA; }
|
||||
.help-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.help-text a { color: #4F46E5; text-decoration: none; }
|
||||
.badge-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.badge-bottom span {
|
||||
font-size: 11px;
|
||||
color: #94A3B8;
|
||||
}
|
||||
.lock-icon {
|
||||
width: 12px; height: 12px;
|
||||
fill: #94A3B8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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 class="logo-name">TechCorp HR Portal</div>
|
||||
<div class="logo-sub">Human Resource Management System</div>
|
||||
</div>
|
||||
<hr class="divider" />
|
||||
<h2>Welcome back</h2>
|
||||
<p class="subtitle">Sign in to access your HR portal</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="empid">Employee ID</label>
|
||||
<input type="text" id="empid" placeholder="e.g. EMP-00247" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" placeholder="Enter your password" />
|
||||
</div>
|
||||
<div class="forgot-row">
|
||||
<a href="#" class="forgot-link">Forgot password?</a>
|
||||
</div>
|
||||
<button class="btn-signin">Sign In</button>
|
||||
|
||||
<div class="badge-bottom">
|
||||
<svg class="lock-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 1C8.676 1 6 3.676 6 7v1H4a1 1 0 00-1 1v13a1 1 0 001 1h16a1 1 0 001-1V9a1 1 0 00-1-1h-2V7c0-3.324-2.676-6-6-6zm0 2c2.276 0 4 1.724 4 4v1H8V7c0-2.276 1.724-4 4-4zm0 9a2 2 0 110 4 2 2 0 010-4z"/>
|
||||
</svg>
|
||||
<span>Secured with 256-bit SSL encryption</span>
|
||||
</div>
|
||||
<p class="help-text">Need help? <a href="#">Contact IT Support</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,409 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Employee Dashboard</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
/* SIDEBAR */
|
||||
.sidebar {
|
||||
width: 240px; min-height: 100vh; background: #1E293B;
|
||||
display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.sidebar-logo-icon {
|
||||
width: 36px; height: 36px; background: #4F46E5; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label {
|
||||
font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase;
|
||||
letter-spacing: 0.8px; padding: 12px 20px 6px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8;
|
||||
cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active {
|
||||
color: #818CF8; background: rgba(79,70,229,0.15);
|
||||
border-left-color: #4F46E5; font-weight: 600;
|
||||
}
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm {
|
||||
width: 34px; height: 34px; border-radius: 50%; background: #4F46E5;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
/* MAIN */
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
|
||||
/* TOP BAR */
|
||||
.topbar {
|
||||
height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 0 28px; position: sticky; top: 0; z-index: 10;
|
||||
}
|
||||
.topbar-greeting { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-greeting span { font-weight: 400; color: #64748B; font-size: 14px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn {
|
||||
width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9;
|
||||
border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot {
|
||||
position: absolute; top: 8px; right: 8px;
|
||||
width: 8px; height: 8px; background: #EF4444; border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar {
|
||||
width: 38px; height: 38px; border-radius: 50%; background: #4F46E5;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
|
||||
}
|
||||
.topbar-user-info { text-align: right; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
/* CONTENT */
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
/* CARDS GRID */
|
||||
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
|
||||
.card {
|
||||
background: #fff; border-radius: 12px; padding: 20px 24px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
|
||||
border: 1px solid #F1F5F9;
|
||||
}
|
||||
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
|
||||
.card-label { font-size: 12px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.card-icon {
|
||||
width: 36px; height: 36px; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.card-icon.indigo { background: #EEF2FF; }
|
||||
.card-icon.green { background: #ECFDF5; }
|
||||
.card-icon.amber { background: #FFFBEB; }
|
||||
.card-icon.blue { background: #EFF6FF; }
|
||||
.card-icon svg { width: 18px; height: 18px; }
|
||||
.card-icon.indigo svg { color: #4F46E5; }
|
||||
.card-icon.green svg { color: #10B981; }
|
||||
.card-icon.amber svg { color: #F59E0B; }
|
||||
.card-icon.blue svg { color: #3B82F6; }
|
||||
.card-value { font-size: 26px; font-weight: 700; color: #0F172A; margin-bottom: 4px; line-height: 1; }
|
||||
.card-meta { font-size: 12px; color: #64748B; }
|
||||
.card-leave-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
|
||||
.leave-chip { text-align: center; background: #F8FAFC; border-radius: 6px; padding: 8px 4px; }
|
||||
.leave-chip-label { font-size: 10px; font-weight: 600; color: #64748B; text-transform: uppercase; }
|
||||
.leave-chip-val { font-size: 18px; font-weight: 700; color: #0F172A; margin: 2px 0; }
|
||||
.leave-chip-sub { font-size: 10px; color: #94A3B8; }
|
||||
|
||||
/* SECTION */
|
||||
.section-title { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.view-all { font-size: 12px; font-weight: 500; color: #4F46E5; cursor: pointer; text-decoration: none; }
|
||||
|
||||
/* ANNOUNCEMENTS */
|
||||
.announcements-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.announcement-item {
|
||||
background: #fff; border-radius: 10px; padding: 16px 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
border: 1px solid #F1F5F9;
|
||||
display: flex; align-items: flex-start; gap: 14px;
|
||||
}
|
||||
.ann-dot { width: 8px; height: 8px; border-radius: 50%; background: #4F46E5; margin-top: 5px; flex-shrink: 0; }
|
||||
.ann-title { font-size: 14px; font-weight: 600; color: #0F172A; margin-bottom: 4px; }
|
||||
.ann-body { font-size: 13px; color: #64748B; margin-bottom: 8px; line-height: 1.5; }
|
||||
.ann-meta { display: flex; align-items: center; gap: 8px; }
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; padding: 3px 9px;
|
||||
border-radius: 999px; font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-gray { background: #F1F5F9; color: #475569; }
|
||||
.ann-date { font-size: 11px; color: #94A3B8; }
|
||||
|
||||
/* TWO COLS */
|
||||
.two-cols { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
|
||||
|
||||
/* QUICK ACTIONS */
|
||||
.quick-actions { display: flex; flex-direction: column; gap: 12px; }
|
||||
.quick-action-btn {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 14px 18px; background: #fff; border: 1.5px solid #E2E8F0;
|
||||
border-radius: 10px; cursor: pointer; font-family: 'Inter', sans-serif;
|
||||
font-size: 14px; font-weight: 600; color: #4F46E5; transition: all 0.15s;
|
||||
}
|
||||
.quick-action-btn:hover { background: #EEF2FF; border-color: #4F46E5; }
|
||||
.quick-action-btn svg { width: 20px; height: 20px; color: #4F46E5; }
|
||||
.quick-action-btn .action-desc { font-size: 11px; font-weight: 400; color: #94A3B8; margin-top: 1px; }
|
||||
.action-text { display: flex; flex-direction: column; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item active" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Attendance
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
Leave
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Payslips
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Reimbursements
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||||
Tax & Form 16
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
Announcements
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div>
|
||||
<div class="topbar-greeting">Good morning, Rahul Sharma <span>— Monday, 4 May 2026</span></div>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-dot"></span>
|
||||
</button>
|
||||
<div class="topbar-user">
|
||||
<div>
|
||||
<div class="topbar-user-name">Rahul Sharma</div>
|
||||
<div class="topbar-user-id">EMP-00247</div>
|
||||
</div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">My Dashboard</div>
|
||||
<div class="page-subtitle">Here's what's happening with your account today.</div>
|
||||
|
||||
<!-- SUMMARY CARDS -->
|
||||
<div class="cards-grid">
|
||||
<!-- Leave Balance -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Leave Balance</div>
|
||||
<div class="card-icon indigo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
</div>
|
||||
<div class="card-leave-grid">
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">CL</div>
|
||||
<div class="leave-chip-val">8</div>
|
||||
<div class="leave-chip-sub">of 12</div>
|
||||
</div>
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">SL</div>
|
||||
<div class="leave-chip-val">10</div>
|
||||
<div class="leave-chip-sub">of 12</div>
|
||||
</div>
|
||||
<div class="leave-chip">
|
||||
<div class="leave-chip-label">EL</div>
|
||||
<div class="leave-chip-val">12</div>
|
||||
<div class="leave-chip-sub">of 15</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendance -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Attendance — May</div>
|
||||
<div class="card-icon green">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">21 <span style="font-size:15px;color:#64748B;font-weight:500">/ 22</span></div>
|
||||
<div class="card-meta" style="margin-top:6px;">
|
||||
<span style="color:#10B981;font-weight:600;">95.4%</span> attendance rate this month
|
||||
</div>
|
||||
<div style="margin-top:10px;height:6px;background:#F1F5F9;border-radius:999px;">
|
||||
<div style="width:95.4%;height:100%;background:#10B981;border-radius:999px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reimbursements -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Pending Reimbursement</div>
|
||||
<div class="card-icon amber">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="card-value">₹4,500</div>
|
||||
<div class="card-meta">2 claims awaiting approval</div>
|
||||
</div>
|
||||
|
||||
<!-- Holidays -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Upcoming Holidays</div>
|
||||
<div class="card-icon blue">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">2</div>
|
||||
<div class="card-meta" style="line-height:1.6;">Buddha Purnima · May 12<br/>Maharashtra Day · May 19</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM TWO-COL -->
|
||||
<div class="two-cols">
|
||||
<!-- ANNOUNCEMENTS -->
|
||||
<div>
|
||||
<div class="section-title">
|
||||
Recent Announcements
|
||||
<a href="#" class="view-all">View all →</a>
|
||||
</div>
|
||||
<div class="announcements-list">
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">Annual Performance Review — FY 2025-26</div>
|
||||
<div class="ann-body">The annual appraisal cycle begins on May 15. All employees must complete their self-assessment by May 25. Managers to complete final ratings by June 5.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-indigo">HR</span>
|
||||
<span class="ann-date">Posted May 1, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot" style="background:#10B981;"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">New Health Insurance Benefits — Effective June 2026</div>
|
||||
<div class="ann-body">The company has upgraded health insurance coverage. Individual limit increases to ₹5L, family floater to ₹10L. Enrolment window opens May 20.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-green">Benefits</span>
|
||||
<span class="ann-date">Posted April 28, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="announcement-item">
|
||||
<div class="ann-dot" style="background:#F59E0B;"></div>
|
||||
<div style="flex:1;">
|
||||
<div class="ann-title">Office Relocation — Andheri East Floor 3</div>
|
||||
<div class="ann-body">Engineering and Product teams will move to Floor 3 of the Andheri East office effective May 10. Facilities team will assist with migration.</div>
|
||||
<div class="ann-meta">
|
||||
<span class="badge badge-amber">Admin</span>
|
||||
<span class="ann-date">Posted April 25, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QUICK ACTIONS -->
|
||||
<div>
|
||||
<div class="section-title">Quick Actions</div>
|
||||
<div class="quick-actions">
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="action-text">
|
||||
<span>Apply for Leave</span>
|
||||
<span class="action-desc">Submit a new leave request</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Mark Attendance</span>
|
||||
<span class="action-desc">Log today's attendance status</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
|
||||
<div class="action-text">
|
||||
<span>Submit Reimbursement</span>
|
||||
<span class="action-desc">Upload and claim expenses</span>
|
||||
</div>
|
||||
</button>
|
||||
<button class="quick-action-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
<div class="action-text">
|
||||
<span>Download April Payslip</span>
|
||||
<span class="action-desc">Net Pay: ₹68,500</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,389 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Admin Dashboard</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-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: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.role-badge { background: #7C3AED; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.3px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||||
.card-label { font-size: 12px; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.card-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
|
||||
.card-icon.indigo { background: #EEF2FF; } .card-icon.indigo svg { color: #4F46E5; }
|
||||
.card-icon.red { background: #FEF2F2; } .card-icon.red svg { color: #EF4444; }
|
||||
.card-icon.green { background: #ECFDF5; } .card-icon.green svg { color: #10B981; }
|
||||
.card-icon.amber { background: #FFFBEB; } .card-icon.amber svg { color: #F59E0B; }
|
||||
.card-icon svg { width: 18px; height: 18px; }
|
||||
.card-value { font-size: 30px; font-weight: 700; color: #0F172A; line-height: 1; }
|
||||
.card-meta { font-size: 12px; color: #64748B; margin-top: 6px; }
|
||||
.card-trend { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 6px; }
|
||||
.trend-up { color: #10B981; } .trend-down { color: #EF4444; }
|
||||
|
||||
.section-title { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.view-all { font-size: 12px; font-weight: 500; color: #4F46E5; cursor: pointer; text-decoration: none; }
|
||||
|
||||
.two-cols { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; margin-bottom: 20px; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody td { padding: 14px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.emp-name { font-weight: 600; color: #0F172A; }
|
||||
.emp-id { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.btn-sm { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; font-family: 'Inter', sans-serif; }
|
||||
.btn-approve { background: #ECFDF5; color: #059669; }
|
||||
.btn-approve:hover { background: #D1FAE5; }
|
||||
.btn-reject { background: #FEF2F2; color: #DC2626; margin-left: 4px; }
|
||||
.btn-reject:hover { background: #FEE2E2; }
|
||||
|
||||
/* PAYROLL CARD */
|
||||
.payroll-card { background: #fff; border-radius: 12px; padding: 20px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.payroll-month { font-size: 18px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.payroll-status { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.payroll-stats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
|
||||
.payroll-stat { display: flex; justify-content: space-between; align-items: center; }
|
||||
.payroll-stat-label { font-size: 12px; color: #64748B; }
|
||||
.payroll-stat-val { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; width: 100%; }
|
||||
.btn-primary:hover { background: #4338CA; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Admin Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Administration</div>
|
||||
<a class="nav-item active" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Attendance
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
||||
Leave Approvals
|
||||
<span class="nav-badge">12</span>
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Payroll
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Reimbursements
|
||||
<span class="nav-badge">8</span>
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
Announcements
|
||||
</a>
|
||||
<a class="nav-item" href="#">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Reports
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">PK</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Priya Kapoor</div>
|
||||
<div class="sidebar-user-role">HR Admin · EMP-00012</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title">Admin Dashboard</div>
|
||||
<span class="role-badge">HR ADMIN</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-dot"></span>
|
||||
</button>
|
||||
<div class="topbar-user">
|
||||
<div>
|
||||
<div class="topbar-user-name">Priya Kapoor</div>
|
||||
<div class="topbar-user-id">HR Admin</div>
|
||||
</div>
|
||||
<div class="avatar">PK</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">Admin Dashboard</div>
|
||||
<div class="page-subtitle">Monday, 4 May 2026 — Overview of all HR operations</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Total Employees</div>
|
||||
<div class="card-icon indigo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="card-value">247</div>
|
||||
<div class="card-trend trend-up">↑ 3 <span style="color:#64748B;font-weight:400;">new this month</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Pending Leave Approvals</div>
|
||||
<div class="card-icon red">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">12</div>
|
||||
<div class="card-meta">5 urgent — older than 48 hrs</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Today's Attendance Rate</div>
|
||||
<div class="card-icon green">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">94<span style="font-size:16px;color:#64748B;">%</span></div>
|
||||
<div class="card-meta">232 / 247 employees present</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-label">Pending Reimbursements</div>
|
||||
<div class="card-icon amber">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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="card-value">8</div>
|
||||
<div class="card-meta">Total value: ₹32,400</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-cols">
|
||||
<!-- PENDING APPROVALS TABLE -->
|
||||
<div>
|
||||
<div class="section-title">
|
||||
Pending Approvals
|
||||
<a href="#" class="view-all">View all →</a>
|
||||
</div>
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Type</th>
|
||||
<th>Details</th>
|
||||
<th>Requested On</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Arjun Mehta</div>
|
||||
<div class="emp-id">EMP-00183 · Engineering</div>
|
||||
</td>
|
||||
<td><span class="badge badge-indigo">Casual Leave</span></td>
|
||||
<td>May 7–9 (3 days)</td>
|
||||
<td>May 2, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Sunita Rao</div>
|
||||
<div class="emp-id">EMP-00091 · Finance</div>
|
||||
</td>
|
||||
<td><span class="badge badge-amber">Reimbursement</span></td>
|
||||
<td>Travel claim — ₹3,200</td>
|
||||
<td>May 1, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Vikram Nair</div>
|
||||
<div class="emp-id">EMP-00147 · Sales</div>
|
||||
</td>
|
||||
<td><span class="badge badge-indigo">Sick Leave</span></td>
|
||||
<td>May 5–6 (2 days)</td>
|
||||
<td>May 3, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Meera Iyer</div>
|
||||
<div class="emp-id">EMP-00229 · HR</div>
|
||||
</td>
|
||||
<td><span class="badge badge-amber">Reimbursement</span></td>
|
||||
<td>Medical claim — ₹1,800</td>
|
||||
<td>Apr 30, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name">Deepak Joshi</div>
|
||||
<div class="emp-id">EMP-00064 · Operations</div>
|
||||
</td>
|
||||
<td><span class="badge badge-indigo">Earned Leave</span></td>
|
||||
<td>May 12–16 (5 days)</td>
|
||||
<td>Apr 28, 2026</td>
|
||||
<td>
|
||||
<button class="btn-sm btn-approve">Approve</button>
|
||||
<button class="btn-sm btn-reject">Reject</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAYROLL MINI CARD -->
|
||||
<div>
|
||||
<div class="section-title">Payroll Status</div>
|
||||
<div class="payroll-card">
|
||||
<div class="payroll-month">May 2026</div>
|
||||
<div class="payroll-status">
|
||||
<div class="status-dot" style="background:#F59E0B;"></div>
|
||||
<span style="font-size:13px;font-weight:600;color:#D97706;">Not Generated</span>
|
||||
</div>
|
||||
<div class="payroll-stats">
|
||||
<div class="payroll-stat">
|
||||
<span class="payroll-stat-label">Eligible Employees</span>
|
||||
<span class="payroll-stat-val">247</span>
|
||||
</div>
|
||||
<div class="payroll-stat">
|
||||
<span class="payroll-stat-label">Processing Period</span>
|
||||
<span class="payroll-stat-val">May 1–31, 2026</span>
|
||||
</div>
|
||||
<div class="payroll-stat">
|
||||
<span class="payroll-stat-label">Pay Date</span>
|
||||
<span class="payroll-stat-val">May 31, 2026</span>
|
||||
</div>
|
||||
<div class="payroll-stat">
|
||||
<span class="payroll-stat-label">Estimated Total</span>
|
||||
<span class="payroll-stat-val">~₹1,24,35,000</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:1px;background:#F1F5F9;margin-bottom:16px;"></div>
|
||||
<button class="btn-primary">Generate Payroll</button>
|
||||
<div style="margin-top:8px;text-align:center;font-size:11px;color:#94A3B8;">Attendance data locks on May 28</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:20px;">
|
||||
<div class="section-title">Dept. Headcount</div>
|
||||
<div class="card" style="padding:16px 20px;">
|
||||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">Engineering</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">89</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:36%;height:100%;background:#4F46E5;border-radius:999px;"></div></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">Sales</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">62</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:25%;height:100%;background:#10B981;border-radius:999px;"></div></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">Finance</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">38</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:15%;height:100%;background:#F59E0B;border-radius:999px;"></div></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">Operations</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">41</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:17%;height:100%;background:#3B82F6;border-radius:999px;"></div></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<span style="font-size:13px;color:#374151;">HR</span>
|
||||
<span style="font-size:13px;font-weight:600;color:#0F172A;">17</span>
|
||||
</div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:999px;"><div style="width:7%;height:100%;background:#8B5CF6;border-radius:999px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Employee List</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-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: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.role-badge { background: #7C3AED; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-count { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary:hover { background: #4338CA; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* FILTERS BAR */
|
||||
.filters-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
|
||||
.search-box { position: relative; flex: 1; max-width: 360px; }
|
||||
.search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #94A3B8; }
|
||||
.search-input { width: 100%; padding: 9px 12px 9px 38px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #0F172A; background: #fff; outline: none; }
|
||||
.search-input:focus { border-color: #4F46E5; }
|
||||
.search-input::placeholder { color: #94A3B8; }
|
||||
select { padding: 9px 32px 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance: none; outline: none; cursor: pointer; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.toggle-group { display: flex; background: #F1F5F9; border-radius: 8px; padding: 3px; gap: 2px; }
|
||||
.toggle-btn { padding: 6px 14px; border-radius: 6px; border: none; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; background: transparent; color: #64748B; }
|
||||
.toggle-btn.active { background: #fff; color: #0F172A; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; white-space: nowrap; }
|
||||
thead th:first-child { padding-left: 20px; }
|
||||
tbody td { padding: 14px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody td:first-child { padding-left: 20px; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.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: 700; color: #fff; flex-shrink: 0; }
|
||||
.emp-name { font-weight: 600; color: #0F172A; font-size: 14px; }
|
||||
.emp-email { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-gray { background: #F1F5F9; color: #475569; }
|
||||
.dept-badge { background: #EEF2FF; color: #4F46E5; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
|
||||
.action-icons { display: flex; align-items: center; gap: 8px; }
|
||||
.action-icon { width: 30px; height: 30px; border-radius: 6px; border: 1px solid #E2E8F0; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.action-icon:hover { background: #F1F5F9; }
|
||||
.action-icon svg { width: 14px; height: 14px; color: #64748B; }
|
||||
.action-icon.danger svg { color: #EF4444; }
|
||||
.action-icon.danger:hover { background: #FEF2F2; border-color: #FCA5A5; }
|
||||
|
||||
/* PAGINATION */
|
||||
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid #E2E8F0; }
|
||||
.pagination-info { font-size: 13px; color: #64748B; }
|
||||
.pagination-btns { display: flex; align-items: center; gap: 6px; }
|
||||
.page-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #E2E8F0; background: #fff; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
||||
.page-btn.active { background: #4F46E5; color: #fff; border-color: #4F46E5; }
|
||||
.page-btn:hover:not(.active) { background: #F1F5F9; }
|
||||
.page-btn svg { width: 14px; height: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Admin Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Administration</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave Approvals<span class="nav-badge">12</span></a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Payroll</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Reimbursements<span class="nav-badge">8</span></a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Reports</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">PK</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Priya Kapoor</div>
|
||||
<div class="sidebar-user-role">HR Admin · EMP-00012</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title">Employees</div>
|
||||
<span class="role-badge">HR ADMIN</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Priya Kapoor</div><div class="topbar-user-id">HR Admin</div></div>
|
||||
<div class="avatar">PK</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">All Employees</div>
|
||||
<div class="page-count">247 employees · 243 active</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Add Employee
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="filters-bar">
|
||||
<div class="search-box">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||||
<input type="text" class="search-input" placeholder="Search by name, ID, or email..." />
|
||||
</div>
|
||||
<select>
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>Finance</option>
|
||||
<option>HR</option>
|
||||
<option>Sales</option>
|
||||
<option>Operations</option>
|
||||
</select>
|
||||
<select>
|
||||
<option>All Designations</option>
|
||||
<option>Software Engineer</option>
|
||||
<option>Senior Engineer</option>
|
||||
<option>Manager</option>
|
||||
<option>Analyst</option>
|
||||
<option>Executive</option>
|
||||
</select>
|
||||
<div class="toggle-group">
|
||||
<button class="toggle-btn active">All</button>
|
||||
<button class="toggle-btn">Active</button>
|
||||
<button class="toggle-btn">Inactive</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Employee ID</th>
|
||||
<th>Department</th>
|
||||
<th>Designation</th>
|
||||
<th>Join Date</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#4F46E5;">RS</div>
|
||||
<div>
|
||||
<div class="emp-name">Rahul Sharma</div>
|
||||
<div class="emp-email">rahul.sharma@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00247</td>
|
||||
<td><span class="dept-badge">Engineering</span></td>
|
||||
<td>Senior Software Engineer</td>
|
||||
<td>Mar 15, 2021</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon" title="View"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div class="action-icon" title="Edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#10B981;">SM</div>
|
||||
<div>
|
||||
<div class="emp-name">Sunita Mehta</div>
|
||||
<div class="emp-email">sunita.mehta@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00091</td>
|
||||
<td><span class="dept-badge" style="background:#ECFDF5;color:#059669;">Finance</span></td>
|
||||
<td>Senior Finance Analyst</td>
|
||||
<td>Jul 1, 2019</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#F59E0B;">VN</div>
|
||||
<div>
|
||||
<div class="emp-name">Vikram Nair</div>
|
||||
<div class="emp-email">vikram.nair@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00147</td>
|
||||
<td><span class="dept-badge" style="background:#FFFBEB;color:#D97706;">Sales</span></td>
|
||||
<td>Regional Sales Manager</td>
|
||||
<td>Jan 12, 2020</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#8B5CF6;">MI</div>
|
||||
<div>
|
||||
<div class="emp-name">Meera Iyer</div>
|
||||
<div class="emp-email">meera.iyer@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00229</td>
|
||||
<td><span class="dept-badge" style="background:#F5F3FF;color:#7C3AED;">HR</span></td>
|
||||
<td>HR Business Partner</td>
|
||||
<td>Sep 5, 2022</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#EF4444;">DJ</div>
|
||||
<div>
|
||||
<div class="emp-name">Deepak Joshi</div>
|
||||
<div class="emp-email">deepak.joshi@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00064</td>
|
||||
<td><span class="dept-badge" style="background:#FFF7ED;color:#C2410C;">Operations</span></td>
|
||||
<td>Operations Lead</td>
|
||||
<td>Feb 28, 2018</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#3B82F6;">AG</div>
|
||||
<div>
|
||||
<div class="emp-name">Ananya Gupta</div>
|
||||
<div class="emp-email">ananya.gupta@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00198</td>
|
||||
<td><span class="dept-badge">Engineering</span></td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Jun 20, 2023</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#64748B;">KP</div>
|
||||
<div>
|
||||
<div class="emp-name">Karthik Pillai</div>
|
||||
<div class="emp-email">karthik.pillai@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00033</td>
|
||||
<td><span class="dept-badge" style="background:#ECFDF5;color:#059669;">Finance</span></td>
|
||||
<td>Finance Manager</td>
|
||||
<td>Nov 10, 2016</td>
|
||||
<td><span class="badge badge-red">Inactive</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-cell">
|
||||
<div class="emp-avatar" style="background:#EC4899;">NR</div>
|
||||
<div>
|
||||
<div class="emp-name">Neha Reddy</div>
|
||||
<div class="emp-email">neha.reddy@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>EMP-00215</td>
|
||||
<td><span class="dept-badge" style="background:#FFFBEB;color:#D97706;">Sales</span></td>
|
||||
<td>Sales Executive</td>
|
||||
<td>Jan 8, 2024</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-icons">
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div class="action-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination">
|
||||
<div class="pagination-info">Showing 1–8 of 247 employees</div>
|
||||
<div class="pagination-btns">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Attendance</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-bottom: 24px; }
|
||||
|
||||
.attendance-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
|
||||
|
||||
/* CALENDAR */
|
||||
.calendar-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
|
||||
.cal-title { font-size: 18px; font-weight: 700; color: #0F172A; }
|
||||
.cal-nav { display: flex; align-items: center; gap: 8px; }
|
||||
.cal-nav-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-nav-btn:hover { background: #F1F5F9; }
|
||||
.cal-nav-btn svg { width: 16px; height: 16px; color: #64748B; }
|
||||
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
|
||||
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 0 10px; }
|
||||
.cal-cell {
|
||||
aspect-ratio: 1; border-radius: 8px; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #374151;
|
||||
cursor: default; position: relative;
|
||||
}
|
||||
.cal-cell .day-num { font-size: 13px; font-weight: 600; }
|
||||
.cal-cell.weekend { background: #F8FAFC; color: #94A3B8; }
|
||||
.cal-cell.present { background: #ECFDF5; color: #065F46; }
|
||||
.cal-cell.present .day-num { color: #065F46; }
|
||||
.cal-cell.absent { background: #FEF2F2; color: #991B1B; }
|
||||
.cal-cell.wfh { background: #EFF6FF; color: #1E40AF; }
|
||||
.cal-cell.half-day { background: #FFF7ED; color: #9A3412; }
|
||||
.cal-cell.holiday { background: #F5F3FF; color: #5B21B6; }
|
||||
.cal-cell.future { background: transparent; color: #CBD5E1; border: 1px dashed #E2E8F0; }
|
||||
.cal-cell.today {
|
||||
border: 2px solid #4F46E5 !important;
|
||||
background: #EEF2FF;
|
||||
}
|
||||
.cal-cell .day-label { font-size: 9px; font-weight: 600; margin-top: 2px; text-transform: uppercase; }
|
||||
.cal-cell .mark-btn {
|
||||
font-size: 9px; font-weight: 700; background: #4F46E5; color: #fff;
|
||||
padding: 2px 6px; border-radius: 4px; margin-top: 3px; border: none; cursor: pointer;
|
||||
}
|
||||
.cal-cell.empty { background: transparent; }
|
||||
|
||||
/* LEGEND */
|
||||
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #F1F5F9; }
|
||||
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748B; }
|
||||
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
|
||||
|
||||
/* SIDE PANEL */
|
||||
.side-panel { display: flex; flex-direction: column; gap: 16px; }
|
||||
.summary-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.summary-title { font-size: 13px; font-weight: 700; color: #0F172A; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.summary-rows { display: flex; flex-direction: column; gap: 12px; }
|
||||
.summary-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.summary-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
|
||||
.summary-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
|
||||
.summary-val { font-size: 16px; font-weight: 700; color: #0F172A; }
|
||||
.divider { border: none; border-top: 1px solid #F1F5F9; }
|
||||
.total-row { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; }
|
||||
.total-label { font-size: 13px; font-weight: 700; color: #0F172A; }
|
||||
.total-val { font-size: 16px; font-weight: 700; color: #0F172A; }
|
||||
.attendance-pct { text-align: center; padding: 12px 0 0; }
|
||||
.pct-num { font-size: 32px; font-weight: 800; color: #10B981; }
|
||||
.pct-label { font-size: 12px; color: #64748B; margin-top: 2px; }
|
||||
.pct-bar { height: 8px; background: #F1F5F9; border-radius: 999px; margin-top: 10px; }
|
||||
.pct-fill { height: 100%; border-radius: 999px; background: #10B981; }
|
||||
|
||||
/* TODAY STATUS CARD */
|
||||
.today-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.today-header { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.today-date { font-size: 12px; color: #64748B; margin-bottom: 16px; }
|
||||
select { width: 100%; padding: 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff; outline: none; margin-bottom: 10px; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.btn-submit { width: 100%; padding: 11px; background: #4F46E5; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; }
|
||||
.btn-submit:hover { background: #4338CA; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Payslips</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Reimbursements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">My Attendance</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="notif-dot"></span>
|
||||
</button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-title">Attendance Calendar</div>
|
||||
<div class="page-subtitle">Your monthly attendance record — May 2026</div>
|
||||
|
||||
<div class="attendance-layout">
|
||||
<!-- CALENDAR -->
|
||||
<div>
|
||||
<div class="calendar-card">
|
||||
<div class="cal-header">
|
||||
<div class="cal-title">May 2026</div>
|
||||
<div class="cal-nav">
|
||||
<button class="cal-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg></button>
|
||||
<button class="cal-nav-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cal-grid">
|
||||
<!-- Day of week headers -->
|
||||
<div class="cal-dow">Sun</div>
|
||||
<div class="cal-dow">Mon</div>
|
||||
<div class="cal-dow">Tue</div>
|
||||
<div class="cal-dow">Wed</div>
|
||||
<div class="cal-dow">Thu</div>
|
||||
<div class="cal-dow">Fri</div>
|
||||
<div class="cal-dow">Sat</div>
|
||||
|
||||
<!-- Week 1: May starts on Friday -->
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell empty"></div>
|
||||
<div class="cal-cell present"><div class="day-num">1</div><div class="day-label">P</div></div>
|
||||
<div class="cal-cell present"><div class="day-num">2</div><div class="day-label">P</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">3</div></div>
|
||||
|
||||
<!-- Week 2 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">4</div></div>
|
||||
<div class="cal-cell today">
|
||||
<div class="day-num">5</div>
|
||||
<button class="mark-btn">Mark</button>
|
||||
</div>
|
||||
<div class="cal-cell future"><div class="day-num">6</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">7</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">8</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">9</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">10</div></div>
|
||||
|
||||
<!-- Week 3 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">11</div></div>
|
||||
<div class="cal-cell holiday"><div class="day-num">12</div><div class="day-label" style="font-size:8px;">Holiday</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">13</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">14</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">15</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">16</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">17</div></div>
|
||||
|
||||
<!-- Week 4 - back-fill April data -->
|
||||
<div class="cal-cell weekend"><div class="day-num">18</div></div>
|
||||
<div class="cal-cell holiday"><div class="day-num">19</div><div class="day-label" style="font-size:8px;">Holiday</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">20</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">21</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">22</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">23</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">24</div></div>
|
||||
|
||||
<!-- Week 5 -->
|
||||
<div class="cal-cell weekend"><div class="day-num">25</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">26</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">27</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">28</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">29</div></div>
|
||||
<div class="cal-cell future"><div class="day-num">30</div></div>
|
||||
<div class="cal-cell weekend"><div class="day-num">31</div></div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#ECFDF5;border:1px solid #D1FAE5;"></div>Present</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#FEF2F2;border:1px solid #FECACA;"></div>Absent</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#EFF6FF;border:1px solid #BFDBFE;"></div>WFH</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#FFF7ED;border:1px solid #FED7AA;"></div>Half-day</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#F5F3FF;border:1px solid #DDD6FE;"></div>Holiday</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:#F8FAFC;border:1px solid #E2E8F0;"></div>Weekend</div>
|
||||
</div>
|
||||
|
||||
<!-- Note: Showing April data below for a fuller view -->
|
||||
<div style="margin-top:20px;padding-top:20px;border-top:1px solid #F1F5F9;">
|
||||
<div style="font-size:12px;font-weight:600;color:#64748B;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px;">April 2026 — Recent History</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 1 — Present</span>
|
||||
<span style="padding:4px 10px;background:#EFF6FF;color:#1E40AF;font-size:11px;font-weight:600;border-radius:6px;">Apr 2 — WFH</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 3 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 4 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 7 — Present</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 8 — Present</span>
|
||||
<span style="padding:4px 10px;background:#EFF6FF;color:#1E40AF;font-size:11px;font-weight:600;border-radius:6px;">Apr 9 — WFH</span>
|
||||
<span style="padding:4px 10px;background:#FFF7ED;color:#9A3412;font-size:11px;font-weight:600;border-radius:6px;">Apr 10 — Half-day</span>
|
||||
<span style="padding:4px 10px;background:#ECFDF5;color:#065F46;font-size:11px;font-weight:600;border-radius:6px;">Apr 11 — Present</span>
|
||||
<span style="padding:4px 10px;background:#FEF2F2;color:#991B1B;font-size:11px;font-weight:600;border-radius:6px;">Apr 14 — Absent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="side-panel">
|
||||
<div class="summary-card">
|
||||
<div class="summary-title">May Summary</div>
|
||||
<div class="attendance-pct">
|
||||
<div class="pct-num">81.8%</div>
|
||||
<div class="pct-label">Attendance Rate (2 days so far)</div>
|
||||
<div class="pct-bar"><div class="pct-fill" style="width:81.8%;"></div></div>
|
||||
</div>
|
||||
<div style="height:1px;background:#F1F5F9;margin:16px 0;"></div>
|
||||
<div class="summary-rows">
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#ECFDF5;border:1px solid #D1FAE5;"></div>
|
||||
Present
|
||||
</div>
|
||||
<div class="summary-val" style="color:#10B981;">2</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#FEF2F2;border:1px solid #FECACA;"></div>
|
||||
Absent
|
||||
</div>
|
||||
<div class="summary-val" style="color:#EF4444;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#EFF6FF;border:1px solid #BFDBFE;"></div>
|
||||
WFH
|
||||
</div>
|
||||
<div class="summary-val" style="color:#3B82F6;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#FFF7ED;border:1px solid #FED7AA;"></div>
|
||||
Half-day
|
||||
</div>
|
||||
<div class="summary-val" style="color:#F59E0B;">0</div>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-label">
|
||||
<div class="summary-dot" style="background:#F5F3FF;border:1px solid #DDD6FE;"></div>
|
||||
Holidays
|
||||
</div>
|
||||
<div class="summary-val" style="color:#7C3AED;">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider" style="margin:12px 0;" />
|
||||
<div class="total-row">
|
||||
<span class="total-label">Total Working Days</span>
|
||||
<span class="total-val">23</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="today-card">
|
||||
<div class="today-header">Mark Today's Attendance</div>
|
||||
<div class="today-date">Monday, May 4, 2026</div>
|
||||
<select>
|
||||
<option value="">Select attendance status</option>
|
||||
<option value="present">Present (Office)</option>
|
||||
<option value="wfh">Work From Home</option>
|
||||
<option value="half-day">Half-day</option>
|
||||
</select>
|
||||
<select style="margin-bottom:14px;">
|
||||
<option>Select check-in time</option>
|
||||
<option>8:30 AM</option>
|
||||
<option>9:00 AM</option>
|
||||
<option>9:30 AM</option>
|
||||
<option>10:00 AM</option>
|
||||
</select>
|
||||
<button class="btn-submit">Submit Attendance</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>HR Portal — Leave Management</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* LEAVE BALANCE CARDS */
|
||||
.balance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
|
||||
.balance-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.balance-type { font-size: 12px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.balance-ring { display: flex; align-items: center; gap: 14px; }
|
||||
.ring-wrapper { position: relative; width: 56px; height: 56px; }
|
||||
.ring-wrapper svg { transform: rotate(-90deg); }
|
||||
.ring-bg { fill: none; stroke: #F1F5F9; stroke-width: 5; }
|
||||
.ring-fg { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.5s; }
|
||||
.ring-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 800; color: #0F172A; }
|
||||
.balance-info {}
|
||||
.balance-remaining { font-size: 24px; font-weight: 800; color: #0F172A; }
|
||||
.balance-total { font-size: 12px; color: #94A3B8; }
|
||||
.balance-used { font-size: 11px; font-weight: 600; margin-top: 4px; }
|
||||
|
||||
/* APPLY LEAVE FORM */
|
||||
.form-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; margin-bottom: 24px; }
|
||||
.form-title { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
|
||||
.form-title svg { width: 18px; height: 18px; color: #4F46E5; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group.full { grid-column: 1 / -1; }
|
||||
label { font-size: 12px; font-weight: 600; color: #374151; }
|
||||
input, select, textarea { padding: 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #0F172A; background: #fff; outline: none; width: 100%; }
|
||||
input:focus, select:focus, textarea:focus { border-color: #4F46E5; }
|
||||
textarea { resize: vertical; min-height: 80px; }
|
||||
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }
|
||||
.btn-outline { background: #fff; color: #64748B; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
|
||||
.btn-submit { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
|
||||
.duration-note { background: #EEF2FF; border-radius: 8px; padding: 10px 14px; font-size: 12px; color: #4F46E5; font-weight: 600; margin-bottom: 16px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F1F5F9; }
|
||||
.table-title { font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody td { padding: 13px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.badge-gray { background: #F1F5F9; color: #475569; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Attendance</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Payslips</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Reimbursements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">Leave Management</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-dot"></span></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">My Leave</div>
|
||||
<div class="page-subtitle">FY 2025–26 · Balance and history</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Apply Leave
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- LEAVE BALANCE CARDS -->
|
||||
<div class="balance-grid">
|
||||
<!-- CL -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-type">Casual Leave <span style="color:#4F46E5;">CL</span></div>
|
||||
<div class="balance-ring">
|
||||
<div class="ring-wrapper">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||||
<circle class="ring-bg" cx="28" cy="28" r="22"/>
|
||||
<circle class="ring-fg" cx="28" cy="28" r="22" stroke="#4F46E5" stroke-dasharray="138.23" stroke-dashoffset="46"/>
|
||||
</svg>
|
||||
<div class="ring-text">8</div>
|
||||
</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-remaining">8 <span style="font-size:13px;color:#94A3B8;font-weight:500;">left</span></div>
|
||||
<div class="balance-total">of 12 total</div>
|
||||
<div class="balance-used" style="color:#4F46E5;">4 used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SL -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-type">Sick Leave <span style="color:#10B981;">SL</span></div>
|
||||
<div class="balance-ring">
|
||||
<div class="ring-wrapper">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||||
<circle class="ring-bg" cx="28" cy="28" r="22"/>
|
||||
<circle class="ring-fg" cx="28" cy="28" r="22" stroke="#10B981" stroke-dasharray="138.23" stroke-dashoffset="23"/>
|
||||
</svg>
|
||||
<div class="ring-text">10</div>
|
||||
</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-remaining">10 <span style="font-size:13px;color:#94A3B8;font-weight:500;">left</span></div>
|
||||
<div class="balance-total">of 12 total</div>
|
||||
<div class="balance-used" style="color:#10B981;">2 used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- EL -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-type">Earned Leave <span style="color:#F59E0B;">EL</span></div>
|
||||
<div class="balance-ring">
|
||||
<div class="ring-wrapper">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56">
|
||||
<circle class="ring-bg" cx="28" cy="28" r="22"/>
|
||||
<circle class="ring-fg" cx="28" cy="28" r="22" stroke="#F59E0B" stroke-dasharray="138.23" stroke-dashoffset="28"/>
|
||||
</svg>
|
||||
<div class="ring-text">12</div>
|
||||
</div>
|
||||
<div class="balance-info">
|
||||
<div class="balance-remaining">12 <span style="font-size:13px;color:#94A3B8;font-weight:500;">left</span></div>
|
||||
<div class="balance-total">of 15 total</div>
|
||||
<div class="balance-used" style="color:#F59E0B;">3 used</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- LOP -->
|
||||
<div class="balance-card">
|
||||
<div class="balance-type">Loss of Pay <span style="color:#EF4444;">LOP</span></div>
|
||||
<div class="balance-ring">
|
||||
<div style="text-align:center;width:100%;">
|
||||
<div style="font-size:28px;font-weight:800;color:#EF4444;">1</div>
|
||||
<div style="font-size:12px;color:#94A3B8;">day applied</div>
|
||||
<div style="margin-top:8px;font-size:11px;color:#64748B;line-height:1.5;">Deducted from salary.<br/>Use only when other leaves exhausted.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- APPLY LEAVE FORM -->
|
||||
<div class="form-card">
|
||||
<div class="form-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
Apply for Leave
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Leave Type</label>
|
||||
<select>
|
||||
<option>Casual Leave (CL)</option>
|
||||
<option>Sick Leave (SL)</option>
|
||||
<option>Earned Leave (EL)</option>
|
||||
<option>Loss of Pay (LOP)</option>
|
||||
<option>Maternity Leave</option>
|
||||
<option>Paternity Leave</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>From Date</label>
|
||||
<input type="date" value="2026-05-07" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>To Date</label>
|
||||
<input type="date" value="2026-05-09" />
|
||||
</div>
|
||||
<div class="form-group full">
|
||||
<label>Reason</label>
|
||||
<textarea placeholder="Please provide a brief reason for the leave request...">Planning a family trip to Ooty. Have completed all pending tasks and briefed the team.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="duration-note">
|
||||
Duration: <strong>3 days</strong> (Thu May 7 to Sat May 9) · After deduction: CL balance will be <strong>5 days</strong>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn-outline">Cancel</button>
|
||||
<button class="btn-submit">Submit Request</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LEAVE HISTORY TABLE -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">Leave History</div>
|
||||
<select style="width:auto;padding:6px 12px;font-size:12px;">
|
||||
<option>FY 2025-26</option>
|
||||
<option>FY 2024-25</option>
|
||||
</select>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Leave Type</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Days</th>
|
||||
<th>Reason</th>
|
||||
<th>Status</th>
|
||||
<th>Applied On</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="badge badge-indigo">Casual Leave</span></td>
|
||||
<td>Apr 14, 2026</td>
|
||||
<td>Apr 14, 2026</td>
|
||||
<td>1</td>
|
||||
<td>Personal work</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td>Apr 12, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge" style="background:#ECFDF5;color:#059669;">Sick Leave</span></td>
|
||||
<td>Mar 22, 2026</td>
|
||||
<td>Mar 23, 2026</td>
|
||||
<td>2</td>
|
||||
<td>Fever and flu — medical certificate attached</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td>Mar 22, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge badge-indigo">Casual Leave</span></td>
|
||||
<td>Mar 10, 2026</td>
|
||||
<td>Mar 11, 2026</td>
|
||||
<td>2</td>
|
||||
<td>Family function — brother's engagement</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td>Mar 5, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge" style="background:#FFF7ED;color:#C2410C;">Earned Leave</span></td>
|
||||
<td>Feb 16, 2026</td>
|
||||
<td>Feb 20, 2026</td>
|
||||
<td>5</td>
|
||||
<td>Vacation — Rajasthan trip</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td>Feb 3, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge badge-indigo">Casual Leave</span></td>
|
||||
<td>May 7, 2026</td>
|
||||
<td>May 9, 2026</td>
|
||||
<td>3</td>
|
||||
<td>Family trip to Ooty</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td>May 4, 2026</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="badge" style="background:#ECFDF5;color:#059669;">Sick Leave</span></td>
|
||||
<td>Jan 6, 2026</td>
|
||||
<td>Jan 6, 2026</td>
|
||||
<td>1</td>
|
||||
<td>Migraine</td>
|
||||
<td><span class="badge badge-red">Rejected</span></td>
|
||||
<td>Jan 6, 2026</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,347 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Payslips</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
|
||||
.two-cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
|
||||
|
||||
/* PAYSLIP GRID */
|
||||
.year-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
|
||||
.year-filter label { font-size: 13px; font-weight: 600; color: #374151; }
|
||||
select { padding: 8px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff; outline: none; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.payslips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
.payslip-card {
|
||||
background: #fff; border-radius: 12px; padding: 18px 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
.payslip-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
.payslip-card.highlighted { border: 2px solid #4F46E5; background: #FAFAFE; }
|
||||
.payslip-month { font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 4px; }
|
||||
.payslip-net { font-size: 13px; color: #4F46E5; font-weight: 600; margin-bottom: 10px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.payslip-actions { margin-top: 12px; }
|
||||
.btn-download {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
width: 100%; padding: 8px 0; background: transparent; border: 1.5px solid #E2E8F0;
|
||||
border-radius: 7px; font-size: 12px; font-weight: 600; color: #64748B; cursor: pointer;
|
||||
font-family: 'Inter', sans-serif; justify-content: center;
|
||||
}
|
||||
.btn-download:hover { background: #F8FAFC; border-color: #4F46E5; color: #4F46E5; }
|
||||
.btn-download svg { width: 14px; height: 14px; }
|
||||
.payslip-card.pending .btn-download { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
/* EXPANDED PAYSLIP */
|
||||
.payslip-detail { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
.detail-header { background: #1E293B; padding: 20px 24px; color: #fff; }
|
||||
.detail-header-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
|
||||
.detail-company { font-size: 14px; font-weight: 700; color: #fff; }
|
||||
.detail-period { font-size: 12px; color: #94A3B8; }
|
||||
.detail-emp { font-size: 13px; color: #CBD5E1; }
|
||||
.detail-net { text-align: right; }
|
||||
.detail-net-label { font-size: 11px; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.detail-net-amount { font-size: 28px; font-weight: 800; color: #fff; }
|
||||
.detail-body { padding: 20px 24px; }
|
||||
.detail-section-title { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
|
||||
.detail-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
|
||||
.detail-row { display: flex; justify-content: space-between; align-items: center; }
|
||||
.detail-row-label { font-size: 13px; color: #374151; }
|
||||
.detail-row-val { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.detail-divider { border: none; border-top: 1px solid #F1F5F9; margin: 8px 0 12px; }
|
||||
.detail-total-row { display: flex; justify-content: space-between; align-items: center; background: #F8FAFC; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; }
|
||||
.detail-total-label { font-size: 13px; font-weight: 700; color: #0F172A; }
|
||||
.detail-total-val { font-size: 14px; font-weight: 800; }
|
||||
.net-pay-bar { background: linear-gradient(135deg, #4F46E5, #7C3AED); padding: 14px 16px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.net-pay-label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.8); }
|
||||
.net-pay-amount { font-size: 20px; font-weight: 800; color: #fff; }
|
||||
.btn-download-full { width: 100%; padding: 11px; background: #4F46E5; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
|
||||
.btn-download-full svg { width: 16px; height: 16px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Payslips</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Reimbursements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">My Payslips</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-dot"></span></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Payslips</div>
|
||||
<div class="page-subtitle">View and download your monthly salary statements</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="two-cols">
|
||||
<!-- PAYSLIP LIST -->
|
||||
<div>
|
||||
<div class="year-filter">
|
||||
<label>Financial Year:</label>
|
||||
<select>
|
||||
<option>FY 2025-26</option>
|
||||
<option>FY 2024-25</option>
|
||||
<option>FY 2023-24</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="payslips-grid">
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">May 2026</div>
|
||||
<div class="payslip-net">Net Pay: —</div>
|
||||
<span class="badge badge-amber">Not Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download" disabled>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="payslip-card highlighted">
|
||||
<div class="payslip-month">April 2026</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="payslip-card">
|
||||
<div class="payslip-month">March 2026</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="payslip-card">
|
||||
<div class="payslip-month">February 2026</div>
|
||||
<div class="payslip-net">Net Pay: ₹65,200</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="payslip-card">
|
||||
<div class="payslip-month">January 2026</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="payslip-card">
|
||||
<div class="payslip-month">December 2025</div>
|
||||
<div class="payslip-net">Net Pay: ₹72,000</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions">
|
||||
<button class="btn-download">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="payslip-card">
|
||||
<div class="payslip-month">November 2025</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions"><button class="btn-download"><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>Download PDF</button></div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">October 2025</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions"><button class="btn-download"><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>Download PDF</button></div>
|
||||
</div>
|
||||
<div class="payslip-card">
|
||||
<div class="payslip-month">September 2025</div>
|
||||
<div class="payslip-net">Net Pay: ₹68,500</div>
|
||||
<span class="badge badge-green">Generated</span>
|
||||
<div class="payslip-actions"><button class="btn-download"><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>Download PDF</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAYSLIP DETAIL -->
|
||||
<div>
|
||||
<div style="font-size:13px;font-weight:700;color:#0F172A;margin-bottom:14px;">April 2026 — Breakdown</div>
|
||||
<div class="payslip-detail">
|
||||
<div class="detail-header">
|
||||
<div class="detail-header-top">
|
||||
<div>
|
||||
<div class="detail-company">TechCorp Solutions Pvt. Ltd.</div>
|
||||
<div class="detail-period">April 1–30, 2026 · 22 working days</div>
|
||||
<div class="detail-emp" style="margin-top:6px;">Rahul Sharma · EMP-00247<br/>Senior Software Engineer, Engineering</div>
|
||||
</div>
|
||||
<div class="detail-net">
|
||||
<div class="detail-net-label">Net Pay</div>
|
||||
<div class="detail-net-amount">₹68,500</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-body">
|
||||
<!-- EARNINGS -->
|
||||
<div class="detail-section-title" style="color:#10B981;">Earnings</div>
|
||||
<div class="detail-rows">
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Basic Salary</span>
|
||||
<span class="detail-row-val">₹40,000</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">House Rent Allowance (HRA)</span>
|
||||
<span class="detail-row-val">₹16,000</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Dearness Allowance (DA)</span>
|
||||
<span class="detail-row-val">₹4,000</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Special Allowance</span>
|
||||
<span class="detail-row-val">₹10,000</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Transport Allowance</span>
|
||||
<span class="detail-row-val">₹3,200</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-total-row">
|
||||
<span class="detail-total-label">Gross Earnings</span>
|
||||
<span class="detail-total-val" style="color:#10B981;">₹73,200</span>
|
||||
</div>
|
||||
|
||||
<!-- DEDUCTIONS -->
|
||||
<div class="detail-section-title" style="color:#EF4444;">Deductions</div>
|
||||
<div class="detail-rows">
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Provident Fund (PF)</span>
|
||||
<span class="detail-row-val" style="color:#EF4444;">−₹4,800</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">Professional Tax (PT)</span>
|
||||
<span class="detail-row-val" style="color:#EF4444;">−₹200</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">TDS (Income Tax)</span>
|
||||
<span class="detail-row-val" style="color:#EF4444;">−₹8,700</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-row-label">ESI Contribution</span>
|
||||
<span class="detail-row-val" style="color:#EF4444;">−₹0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-total-row">
|
||||
<span class="detail-total-label">Total Deductions</span>
|
||||
<span class="detail-total-val" style="color:#EF4444;">₹13,700</span>
|
||||
</div>
|
||||
|
||||
<div class="net-pay-bar">
|
||||
<span class="net-pay-label">NET PAY (Take Home)</span>
|
||||
<span class="net-pay-amount">₹68,500</span>
|
||||
</div>
|
||||
|
||||
<button class="btn-download-full">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 April 2026 Payslip PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Reimbursements</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-color: #4F46E5; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #4F46E5; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* STATS ROW */
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.stat-label { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
|
||||
.stat-value { font-size: 22px; font-weight: 800; color: #0F172A; }
|
||||
.stat-sub { font-size: 11px; color: #94A3B8; margin-top: 4px; }
|
||||
|
||||
/* CLAIM FORM */
|
||||
.form-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; margin-bottom: 24px; }
|
||||
.form-title { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
|
||||
.form-title svg { width: 18px; height: 18px; color: #4F46E5; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group.full { grid-column: 1 / -1; }
|
||||
.form-group.two-cols { grid-column: span 2; }
|
||||
label { font-size: 12px; font-weight: 600; color: #374151; }
|
||||
input, select, textarea { padding: 9px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #0F172A; background: #fff; outline: none; width: 100%; }
|
||||
input:focus, select:focus, textarea:focus { border-color: #4F46E5; }
|
||||
textarea { resize: vertical; min-height: 70px; }
|
||||
.upload-zone { border: 2px dashed #E2E8F0; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; background: #F8FAFC; }
|
||||
.upload-zone:hover { border-color: #4F46E5; background: #EEF2FF; }
|
||||
.upload-zone svg { width: 24px; height: 24px; color: #94A3B8; margin-bottom: 6px; }
|
||||
.upload-zone p { font-size: 12px; color: #64748B; }
|
||||
.upload-zone strong { color: #4F46E5; }
|
||||
.form-actions { display: flex; gap: 10px; justify-content: flex-end; }
|
||||
.btn-outline { background: #fff; color: #64748B; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
|
||||
.btn-submit { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F1F5F9; }
|
||||
.table-title { font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody td { padding: 13px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-blue { background: #EFF6FF; color: #2563EB; }
|
||||
.badge-indigo { background: #EEF2FF; color: #4F46E5; }
|
||||
.cat-badge { font-size: 12px; font-weight: 600; }
|
||||
.view-link { font-size: 12px; color: #4F46E5; font-weight: 600; cursor: pointer; text-decoration: none; }
|
||||
.view-link:hover { text-decoration: underline; }
|
||||
.amount-col { font-weight: 700; color: #0F172A; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Employee Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Main Menu</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Payslips</a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>Reimbursements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>Tax & Form 16</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">RS</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Rahul Sharma</div>
|
||||
<div class="sidebar-user-role">EMP-00247 · Engineering</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">Reimbursements</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-dot"></span></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Rahul Sharma</div><div class="topbar-user-id">EMP-00247</div></div>
|
||||
<div class="avatar">RS</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">My Reimbursements</div>
|
||||
<div class="page-subtitle">Submit expense claims and track approval status</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Submit Claim
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- STATS ROW -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total Claimed (FY)</div>
|
||||
<div class="stat-value">₹24,500</div>
|
||||
<div class="stat-sub">Across all categories</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Approved</div>
|
||||
<div class="stat-value" style="color:#10B981;">₹18,000</div>
|
||||
<div class="stat-sub">8 claims approved</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Pending</div>
|
||||
<div class="stat-value" style="color:#F59E0B;">₹4,500</div>
|
||||
<div class="stat-sub">2 claims awaiting</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Rejected</div>
|
||||
<div class="stat-value" style="color:#EF4444;">₹2,000</div>
|
||||
<div class="stat-sub">1 claim rejected</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUBMIT FORM -->
|
||||
<div class="form-card">
|
||||
<div class="form-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
|
||||
Submit New Claim
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Category</label>
|
||||
<select>
|
||||
<option>Travel</option>
|
||||
<option>Food & Meals</option>
|
||||
<option>Medical</option>
|
||||
<option>Internet / WFH</option>
|
||||
<option>Stationery</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Expense Date</label>
|
||||
<input type="date" value="2026-05-03" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Amount (₹)</label>
|
||||
<input type="number" placeholder="0.00" value="3200" />
|
||||
</div>
|
||||
<div class="form-group two-cols">
|
||||
<label>Description</label>
|
||||
<input type="text" placeholder="Brief description of the expense..." value="Cab fare to client office — Bandra to Nariman Point (return trip)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Receipt / Bill</label>
|
||||
<div class="upload-zone">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
<p><strong>Click to upload</strong> or drag & drop<br/>JPG, PNG, PDF up to 5 MB</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full" style="display:flex;gap:10px;justify-content:flex-end;align-items:flex-end;">
|
||||
<button class="btn-outline">Cancel</button>
|
||||
<button class="btn-submit">Submit Claim</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CLAIMS TABLE -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">Claim History</div>
|
||||
<select style="width:auto;padding:6px 12px;font-size:12px;">
|
||||
<option>All Categories</option>
|
||||
<option>Travel</option>
|
||||
<option>Food</option>
|
||||
<option>Medical</option>
|
||||
</select>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Category</th>
|
||||
<th>Amount</th>
|
||||
<th>Description</th>
|
||||
<th>Status</th>
|
||||
<th>Receipt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>May 3, 2026</td>
|
||||
<td><span class="badge badge-blue">Travel</span></td>
|
||||
<td class="amount-col">₹3,200</td>
|
||||
<td>Cab fare — Bandra to Nariman Point (return)</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apr 28, 2026</td>
|
||||
<td><span class="badge badge-green">Medical</span></td>
|
||||
<td class="amount-col">₹1,800</td>
|
||||
<td>Pharmacy bill — cold & flu medication</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apr 15, 2026</td>
|
||||
<td><span class="badge badge-blue">Travel</span></td>
|
||||
<td class="amount-col">₹5,400</td>
|
||||
<td>Train tickets — Mumbai to Pune (client visit, 2 persons)</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Apr 10, 2026</td>
|
||||
<td><span class="badge" style="background:#FFF7ED;color:#C2410C;">Food</span></td>
|
||||
<td class="amount-col">₹2,400</td>
|
||||
<td>Team lunch — sprint retrospective (8 members)</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mar 22, 2026</td>
|
||||
<td><span class="badge badge-blue">Travel</span></td>
|
||||
<td class="amount-col">₹8,200</td>
|
||||
<td>Flight — Mumbai to Bangalore (quarterly review)</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mar 5, 2026</td>
|
||||
<td><span class="badge" style="background:#F5F3FF;color:#7C3AED;">Internet</span></td>
|
||||
<td class="amount-col">₹2,000</td>
|
||||
<td>Home broadband upgrade for WFH — March</td>
|
||||
<td><span class="badge badge-red">Rejected</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Feb 18, 2026</td>
|
||||
<td><span class="badge" style="background:#FFF7ED;color:#C2410C;">Food</span></td>
|
||||
<td class="amount-col">₹1,800</td>
|
||||
<td>Client dinner — product demo at Taj</td>
|
||||
<td><span class="badge badge-green">Approved</span></td>
|
||||
<td><a href="#" class="view-link">View</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,416 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Payroll Management</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #1E293B; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: #4F46E5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #94A3B8; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: #818CF8; background: rgba(79,70,229,0.15); border-left-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: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.08); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #64748B; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.role-badge { background: #7C3AED; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #EF4444; border-radius: 50%; border: 2px solid #fff; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #7C3AED; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.header-actions { display: flex; gap: 10px; }
|
||||
.btn-primary { background: #4F46E5; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
.btn-outline { background: #fff; color: #374151; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-outline svg { width: 16px; height: 16px; }
|
||||
|
||||
/* CONTROLS */
|
||||
.controls-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; background: #fff; padding: 16px 20px; border-radius: 12px; border: 1px solid #F1F5F9; }
|
||||
.month-picker { display: flex; align-items: center; gap: 10px; }
|
||||
.month-picker label { font-size: 13px; font-weight: 600; color: #374151; }
|
||||
select { padding: 8px 12px; border: 1.5px solid #E2E8F0; border-radius: 8px; font-size: 13px; font-family: 'Inter', sans-serif; color: #374151; background: #fff; outline: none; }
|
||||
select:focus { border-color: #4F46E5; }
|
||||
.status-info { display: flex; align-items: center; gap: 10px; }
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||||
.status-text { font-size: 13px; font-weight: 600; }
|
||||
|
||||
/* SUMMARY CARDS */
|
||||
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.sum-card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.sum-label { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
||||
.sum-value { font-size: 22px; font-weight: 800; color: #0F172A; }
|
||||
.sum-sub { font-size: 11px; color: #94A3B8; margin-top: 4px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; }
|
||||
.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F1F5F9; }
|
||||
.table-title { font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
thead th { background: #F8FAFC; padding: 11px 12px; text-align: left; font-size: 10px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; white-space: nowrap; }
|
||||
thead th:first-child { padding-left: 20px; }
|
||||
tbody td { padding: 13px 12px; font-size: 12px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; white-space: nowrap; }
|
||||
tbody td:first-child { padding-left: 20px; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.emp-name-cell { font-weight: 600; color: #0F172A; font-size: 13px; }
|
||||
.emp-id-cell { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.amount-cell { font-weight: 600; }
|
||||
.net-cell { font-weight: 700; color: #0F172A; font-size: 13px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-amber { background: #FFFBEB; color: #D97706; }
|
||||
.download-link { font-size: 12px; color: #4F46E5; font-weight: 600; cursor: pointer; text-decoration: none; }
|
||||
.download-link:hover { text-decoration: underline; }
|
||||
.footer-totals { background: #F8FAFC; border-top: 2px solid #E2E8F0; }
|
||||
.footer-totals td { padding: 14px 12px; font-weight: 700; color: #0F172A; font-size: 12px; }
|
||||
.footer-totals td:first-child { padding-left: 20px; font-size: 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Admin Portal</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Administration</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Attendance</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>Leave Approvals<span class="nav-badge">12</span></a>
|
||||
<a class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Payroll</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Reimbursements<span class="nav-badge">8</span></a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>Announcements</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Reports</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">PK</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Priya Kapoor</div>
|
||||
<div class="sidebar-user-role">HR Admin · EMP-00012</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title">Payroll Management</div>
|
||||
<span class="role-badge">HR ADMIN</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="notif-dot"></span></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Priya Kapoor</div><div class="topbar-user-id">HR Admin</div></div>
|
||||
<div class="avatar">PK</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Payroll Management — May 2026</div>
|
||||
<div class="page-subtitle">Process, review and export monthly salary data</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn-outline">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 CSV
|
||||
</button>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Generate Payroll
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTROLS BAR -->
|
||||
<div class="controls-bar">
|
||||
<div class="month-picker">
|
||||
<label>Period:</label>
|
||||
<select>
|
||||
<option>May 2026</option>
|
||||
<option>April 2026</option>
|
||||
<option>March 2026</option>
|
||||
</select>
|
||||
<select>
|
||||
<option>All Departments</option>
|
||||
<option>Engineering</option>
|
||||
<option>Finance</option>
|
||||
<option>Sales</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<div class="status-dot" style="background:#F59E0B;"></div>
|
||||
<span class="status-text" style="color:#D97706;">Status: Not Generated — Attendance closes May 28</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUMMARY CARDS -->
|
||||
<div class="summary-grid">
|
||||
<div class="sum-card">
|
||||
<div class="sum-label">Total Employees</div>
|
||||
<div class="sum-value">247</div>
|
||||
<div class="sum-sub">All active employees</div>
|
||||
</div>
|
||||
<div class="sum-card">
|
||||
<div class="sum-label">Total Gross</div>
|
||||
<div class="sum-value" style="color:#4F46E5;">₹1,24,35,000</div>
|
||||
<div class="sum-sub">Before deductions</div>
|
||||
</div>
|
||||
<div class="sum-card">
|
||||
<div class="sum-label">Total Deductions</div>
|
||||
<div class="sum-value" style="color:#EF4444;">₹18,65,000</div>
|
||||
<div class="sum-sub">PF + TDS + PT</div>
|
||||
</div>
|
||||
<div class="sum-card">
|
||||
<div class="sum-label">Total Net Pay</div>
|
||||
<div class="sum-value" style="color:#10B981;">₹1,05,70,000</div>
|
||||
<div class="sum-sub">Take-home amount</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PAYROLL TABLE -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">Employee Payroll Details — May 2026</div>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<span style="font-size:12px;color:#64748B;">Showing 1–10 of 247</span>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Employee</th>
|
||||
<th>Basic</th>
|
||||
<th>HRA</th>
|
||||
<th>DA</th>
|
||||
<th>Gross</th>
|
||||
<th>PF</th>
|
||||
<th>TDS</th>
|
||||
<th>PT</th>
|
||||
<th>Net Pay</th>
|
||||
<th>Status</th>
|
||||
<th>Payslip</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Rahul Sharma</div>
|
||||
<div class="emp-id-cell">EMP-00247 · Engineering</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹40,000</td>
|
||||
<td class="amount-cell">₹16,000</td>
|
||||
<td class="amount-cell">₹4,000</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹73,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹4,800</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹8,700</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹59,500</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Sunita Mehta</div>
|
||||
<div class="emp-id-cell">EMP-00091 · Finance</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹52,000</td>
|
||||
<td class="amount-cell">₹20,800</td>
|
||||
<td class="amount-cell">₹5,200</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹91,600</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹6,240</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹14,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹70,960</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Vikram Nair</div>
|
||||
<div class="emp-id-cell">EMP-00147 · Sales</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹45,000</td>
|
||||
<td class="amount-cell">₹18,000</td>
|
||||
<td class="amount-cell">₹4,500</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹82,500</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹5,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹11,500</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹65,400</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Meera Iyer</div>
|
||||
<div class="emp-id-cell">EMP-00229 · HR</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹38,000</td>
|
||||
<td class="amount-cell">₹15,200</td>
|
||||
<td class="amount-cell">₹3,800</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹68,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹4,560</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹7,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹56,440</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Deepak Joshi</div>
|
||||
<div class="emp-id-cell">EMP-00064 · Operations</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹58,000</td>
|
||||
<td class="amount-cell">₹23,200</td>
|
||||
<td class="amount-cell">₹5,800</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹1,01,800</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹6,960</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹18,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹76,440</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Ananya Gupta</div>
|
||||
<div class="emp-id-cell">EMP-00198 · Engineering</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹32,000</td>
|
||||
<td class="amount-cell">₹12,800</td>
|
||||
<td class="amount-cell">₹3,200</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹58,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹3,840</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹4,800</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹49,360</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Arun Krishnamurthy</div>
|
||||
<div class="emp-id-cell">EMP-00178 · Engineering</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹70,000</td>
|
||||
<td class="amount-cell">₹28,000</td>
|
||||
<td class="amount-cell">₹7,000</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹1,22,500</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹8,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹24,000</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹89,900</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Neha Reddy</div>
|
||||
<div class="emp-id-cell">EMP-00215 · Sales</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹28,000</td>
|
||||
<td class="amount-cell">₹11,200</td>
|
||||
<td class="amount-cell">₹2,800</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹51,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹3,360</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹3,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹44,640</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Preethi Venkataraman</div>
|
||||
<div class="emp-id-cell">EMP-00052 · Finance</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹44,000</td>
|
||||
<td class="amount-cell">₹17,600</td>
|
||||
<td class="amount-cell">₹4,400</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹79,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹5,280</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹10,400</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹63,320</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="emp-name-cell">Rohit Bhatia</div>
|
||||
<div class="emp-id-cell">EMP-00110 · Operations</div>
|
||||
</td>
|
||||
<td class="amount-cell">₹35,000</td>
|
||||
<td class="amount-cell">₹14,000</td>
|
||||
<td class="amount-cell">₹3,500</td>
|
||||
<td class="amount-cell" style="color:#4F46E5;">₹63,000</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹4,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹6,200</td>
|
||||
<td class="amount-cell" style="color:#EF4444;">₹200</td>
|
||||
<td class="net-cell">₹52,400</td>
|
||||
<td><span class="badge badge-amber">Pending</span></td>
|
||||
<td><a href="#" class="download-link">—</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="footer-totals">
|
||||
<td>Totals (10 shown / 247 total)</td>
|
||||
<td>₹4,42,000</td>
|
||||
<td>₹1,76,800</td>
|
||||
<td>₹44,200</td>
|
||||
<td style="color:#4F46E5;">₹7,91,800</td>
|
||||
<td style="color:#EF4444;">₹53,040</td>
|
||||
<td style="color:#EF4444;">₹1,08,400</td>
|
||||
<td style="color:#EF4444;">₹2,000</td>
|
||||
<td style="color:#10B981;">₹6,28,360</td>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,428 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Super Admin</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC; color: #0F172A; display: flex; min-height: 100vh; }
|
||||
|
||||
.sidebar { width: 240px; min-height: 100vh; background: #0F172A; display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; bottom: 0; }
|
||||
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
|
||||
.sidebar-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #7C3AED, #4F46E5); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sidebar-logo-text { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.sidebar-logo-sub { font-size: 11px; color: #64748B; margin-top: 1px; }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-section-label { font-size: 10px; font-weight: 600; color: #334155; text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 20px 6px; }
|
||||
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: #64748B; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; }
|
||||
.nav-item:hover { color: #CBD5E1; background: rgba(255,255,255,0.03); }
|
||||
.nav-item.active { color: #A5B4FC; background: rgba(99,102,241,0.15); border-left-color: #6366F1; font-weight: 600; }
|
||||
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
||||
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.06); }
|
||||
.sidebar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #7C3AED, #4F46E5); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.sidebar-user-name { font-size: 13px; font-weight: 600; color: #E2E8F0; }
|
||||
.sidebar-user-role { font-size: 11px; color: #475569; }
|
||||
|
||||
.main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; }
|
||||
.topbar { height: 64px; background: #fff; border-bottom: 1px solid #E2E8F0; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.topbar-left { display: flex; align-items: center; gap: 12px; }
|
||||
.topbar-title { font-size: 16px; font-weight: 600; color: #0F172A; }
|
||||
.super-badge { background: linear-gradient(135deg, #7C3AED, #4F46E5); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
|
||||
.topbar-right { display: flex; align-items: center; gap: 16px; }
|
||||
.icon-btn { width: 38px; height: 38px; border-radius: 8px; background: #F1F5F9; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; }
|
||||
.icon-btn svg { width: 18px; height: 18px; color: #64748B; }
|
||||
.topbar-user { display: flex; align-items: center; gap: 10px; }
|
||||
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #7C3AED, #4F46E5); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.topbar-user-name { font-size: 14px; font-weight: 600; color: #0F172A; }
|
||||
.topbar-user-id { font-size: 12px; color: #64748B; }
|
||||
|
||||
.content { padding: 28px; flex: 1; }
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||||
.page-title { font-size: 20px; font-weight: 700; color: #0F172A; }
|
||||
.page-subtitle { font-size: 13px; color: #64748B; margin-top: 3px; }
|
||||
.btn-primary { background: linear-gradient(135deg, #7C3AED, #4F46E5); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 8px; }
|
||||
.btn-primary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* STATS ROW */
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat-card { background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.stat-label { font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
||||
.stat-value { font-size: 24px; font-weight: 800; color: #0F172A; }
|
||||
.stat-sub { font-size: 11px; color: #94A3B8; margin-top: 4px; }
|
||||
|
||||
/* TABLE */
|
||||
.table-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; overflow: hidden; margin-bottom: 24px; }
|
||||
.table-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F1F5F9; }
|
||||
.table-title { font-size: 14px; font-weight: 700; color: #0F172A; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { background: #F8FAFC; padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #E2E8F0; }
|
||||
tbody td { padding: 14px 16px; font-size: 13px; color: #374151; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
|
||||
tbody tr:last-child td { border-bottom: none; }
|
||||
tbody tr:hover { background: #FAFBFC; }
|
||||
.admin-cell { display: flex; align-items: center; gap: 12px; }
|
||||
.admin-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
||||
.admin-name { font-weight: 600; color: #0F172A; font-size: 14px; }
|
||||
.admin-email { font-size: 11px; color: #94A3B8; margin-top: 1px; }
|
||||
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.badge-green { background: #ECFDF5; color: #059669; }
|
||||
.badge-red { background: #FEF2F2; color: #DC2626; }
|
||||
.badge-purple { background: #F5F3FF; color: #7C3AED; }
|
||||
.action-btns { display: flex; gap: 8px; }
|
||||
.btn-sm { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; font-family: 'Inter', sans-serif; }
|
||||
.btn-deactivate { background: #FEF2F2; color: #DC2626; }
|
||||
.btn-reset { background: #EEF2FF; color: #4F46E5; }
|
||||
.btn-deactivate:hover { background: #FEE2E2; }
|
||||
.btn-reset:hover { background: #E0E7FF; }
|
||||
.btn-activate { background: #ECFDF5; color: #059669; }
|
||||
.btn-activate:hover { background: #D1FAE5; }
|
||||
|
||||
/* ORG SETTINGS PREVIEW */
|
||||
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||||
.settings-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border: 1px solid #F1F5F9; }
|
||||
.settings-card-title { font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
|
||||
.settings-card-title svg { width: 18px; height: 18px; color: #4F46E5; }
|
||||
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #F8FAFC; }
|
||||
.settings-row:last-child { border-bottom: none; }
|
||||
.settings-label { font-size: 13px; color: #374151; }
|
||||
.settings-val { font-size: 13px; font-weight: 600; color: #0F172A; }
|
||||
.toggle { width: 36px; height: 20px; border-radius: 999px; background: #4F46E5; display: flex; align-items: center; padding: 2px; cursor: pointer; }
|
||||
.toggle-knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; margin-left: auto; }
|
||||
.toggle.off { background: #E2E8F0; }
|
||||
.toggle.off .toggle-knob { margin-left: 2px; margin-right: auto; }
|
||||
|
||||
/* AUDIT LOG */
|
||||
.audit-list { display: flex; flex-direction: column; gap: 0; }
|
||||
.audit-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #F1F5F9; }
|
||||
.audit-item:last-child { border-bottom: none; }
|
||||
.audit-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.audit-icon svg { width: 15px; height: 15px; }
|
||||
.audit-action { font-size: 13px; font-weight: 600; color: #0F172A; margin-bottom: 2px; }
|
||||
.audit-detail { font-size: 12px; color: #64748B; }
|
||||
.audit-time { font-size: 11px; color: #94A3B8; margin-left: auto; white-space: nowrap; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="sidebar-logo-icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sidebar-logo-text">TechCorp HR</div>
|
||||
<div class="sidebar-logo-sub">Super Admin</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<div class="nav-section-label">Super Admin</div>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="nav-item active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>Admin Accounts</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20.49 12H22M2 12H3.51M19.07 19.07l-1.41-1.41M5.34 5.34 3.93 3.93M12 20.49V22M12 2v1.51"/></svg>Org Settings</a>
|
||||
<a class="nav-item" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>Audit Log</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="avatar-sm">SA</div>
|
||||
<div>
|
||||
<div class="sidebar-user-name">Super Admin</div>
|
||||
<div class="sidebar-user-role">Root · All Permissions</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<header class="topbar">
|
||||
<div class="topbar-left">
|
||||
<div class="topbar-title">Admin Accounts</div>
|
||||
<span class="super-badge">SUPER ADMIN</span>
|
||||
</div>
|
||||
<div class="topbar-right">
|
||||
<button class="icon-btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></button>
|
||||
<div class="topbar-user">
|
||||
<div><div class="topbar-user-name">Super Admin</div><div class="topbar-user-id">Root Access</div></div>
|
||||
<div class="avatar">SA</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="page-title">HR Admin Accounts</div>
|
||||
<div class="page-subtitle">Manage HR administrators — create, deactivate, and reset passwords</div>
|
||||
</div>
|
||||
<button class="btn-primary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
Create HR Admin
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- STATS -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Total HR Admins</div>
|
||||
<div class="stat-value">8</div>
|
||||
<div class="stat-sub">Across all locations</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Active</div>
|
||||
<div class="stat-value" style="color:#10B981;">6</div>
|
||||
<div class="stat-sub">Can access system</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Inactive</div>
|
||||
<div class="stat-value" style="color:#94A3B8;">2</div>
|
||||
<div class="stat-sub">Deactivated accounts</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Last Login</div>
|
||||
<div class="stat-value" style="font-size:16px;">2 min ago</div>
|
||||
<div class="stat-sub">priya.kapoor@techcorp.in</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADMINS TABLE -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<div class="table-title">HR Administrator Accounts</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<input type="text" placeholder="Search admins..." style="padding:6px 12px;border:1.5px solid #E2E8F0;border-radius:7px;font-size:12px;font-family:Inter,sans-serif;outline:none;width:200px;" />
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Administrator</th>
|
||||
<th>Email</th>
|
||||
<th>Employee ID</th>
|
||||
<th>Created On</th>
|
||||
<th>Last Login</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#7C3AED;">PK</div>
|
||||
<div>
|
||||
<div class="admin-name">Priya Kapoor</div>
|
||||
<div class="admin-email">HR Manager — Mumbai HQ</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>priya.kapoor@techcorp.in</td>
|
||||
<td>EMP-00012</td>
|
||||
<td>Jan 15, 2020</td>
|
||||
<td>2 min ago</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-reset">Reset Password</button>
|
||||
<button class="btn-sm btn-deactivate">Deactivate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#0EA5E9;">SM</div>
|
||||
<div>
|
||||
<div class="admin-name">Suresh Menon</div>
|
||||
<div class="admin-email">HR Lead — Bangalore</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>suresh.menon@techcorp.in</td>
|
||||
<td>EMP-00028</td>
|
||||
<td>Mar 8, 2021</td>
|
||||
<td>1 day ago</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-reset">Reset Password</button>
|
||||
<button class="btn-sm btn-deactivate">Deactivate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#10B981;">AR</div>
|
||||
<div>
|
||||
<div class="admin-name">Anita Rao</div>
|
||||
<div class="admin-email">HR Exec — Pune</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>anita.rao@techcorp.in</td>
|
||||
<td>EMP-00041</td>
|
||||
<td>Sep 22, 2021</td>
|
||||
<td>3 hours ago</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-reset">Reset Password</button>
|
||||
<button class="btn-sm btn-deactivate">Deactivate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#F59E0B;">NP</div>
|
||||
<div>
|
||||
<div class="admin-name">Nikhil Patel</div>
|
||||
<div class="admin-email">HR Specialist — Delhi</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>nikhil.patel@techcorp.in</td>
|
||||
<td>EMP-00075</td>
|
||||
<td>Feb 14, 2023</td>
|
||||
<td>2 days ago</td>
|
||||
<td><span class="badge badge-green">Active</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-reset">Reset Password</button>
|
||||
<button class="btn-sm btn-deactivate">Deactivate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="opacity:0.6;">
|
||||
<td>
|
||||
<div class="admin-cell">
|
||||
<div class="admin-avatar" style="background:#64748B;">RV</div>
|
||||
<div>
|
||||
<div class="admin-name">Ravi Varma</div>
|
||||
<div class="admin-email">HR Exec — Chennai (former)</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>ravi.varma@techcorp.in</td>
|
||||
<td>EMP-00031</td>
|
||||
<td>Jun 10, 2020</td>
|
||||
<td>Apr 1, 2026</td>
|
||||
<td><span class="badge badge-red">Inactive</span></td>
|
||||
<td>
|
||||
<div class="action-btns">
|
||||
<button class="btn-sm btn-activate">Activate</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- ORG SETTINGS + AUDIT LOG -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
|
||||
<!-- ORG SETTINGS -->
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:700;color:#0F172A;margin-bottom:14px;">Organisation Settings</div>
|
||||
<div class="settings-grid">
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 Policy
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">CL per year</span>
|
||||
<span class="settings-val">12 days</span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">SL per year</span>
|
||||
<span class="settings-val">12 days</span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">EL per year</span>
|
||||
<span class="settings-val">15 days</span>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Carry forward</span>
|
||||
<div class="toggle"><div class="toggle-knob"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41"/></svg>
|
||||
System Settings
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Two-factor auth</span>
|
||||
<div class="toggle"><div class="toggle-knob"></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Email notifications</span>
|
||||
<div class="toggle"><div class="toggle-knob"></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Auto payroll lock</span>
|
||||
<div class="toggle off"><div class="toggle-knob"></div></div>
|
||||
</div>
|
||||
<div class="settings-row">
|
||||
<span class="settings-label">Session timeout</span>
|
||||
<span class="settings-val">8 hours</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AUDIT LOG -->
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:700;color:#0F172A;margin-bottom:14px;">Recent Audit Log</div>
|
||||
<div class="table-card">
|
||||
<div class="audit-list">
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#EEF2FF;"><svg viewBox="0 0 24 24" fill="none" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 style="flex:1;">
|
||||
<div class="audit-action">Admin login — Priya Kapoor</div>
|
||||
<div class="audit-detail">IP: 203.189.x.x · Mumbai</div>
|
||||
</div>
|
||||
<div class="audit-time">2 min ago</div>
|
||||
</div>
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#ECFDF5;"><svg viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/></svg></div>
|
||||
<div style="flex:1;">
|
||||
<div class="audit-action">Leave approved — Arjun Mehta (CL 3 days)</div>
|
||||
<div class="audit-detail">Approved by Priya Kapoor</div>
|
||||
</div>
|
||||
<div class="audit-time">45 min ago</div>
|
||||
</div>
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#FFFBEB;"><svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></div>
|
||||
<div style="flex:1;">
|
||||
<div class="audit-action">Employee record updated — Neha Reddy</div>
|
||||
<div class="audit-detail">Designation changed by Suresh Menon</div>
|
||||
</div>
|
||||
<div class="audit-time">2 hr ago</div>
|
||||
</div>
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#FEF2F2;"><svg viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 style="flex:1;">
|
||||
<div class="audit-action">Reimbursement rejected — Karthik Pillai</div>
|
||||
<div class="audit-detail">Internet bill — policy violation</div>
|
||||
</div>
|
||||
<div class="audit-time">5 hr ago</div>
|
||||
</div>
|
||||
<div class="audit-item">
|
||||
<div class="audit-icon" style="background:#F5F3FF;"><svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="23" y1="11" x2="17" y2="11"/></svg></div>
|
||||
<div style="flex:1;">
|
||||
<div class="audit-action">New employee added — Anika Sharma</div>
|
||||
<div class="audit-detail">EMP-00248 · Engineering · Added by Anita Rao</div>
|
||||
</div>
|
||||
<div class="audit-time">Yesterday</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,505 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HR Portal — Design Mockups Gallery</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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: #F8FAFC;
|
||||
color: #0F172A;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.header {
|
||||
background: #1E293B;
|
||||
padding: 48px 0 40px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -100px; left: 50%; transform: translateX(-50%);
|
||||
width: 600px; height: 400px;
|
||||
background: radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.header-badge {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
background: rgba(79,70,229,0.2); border: 1px solid rgba(79,70,229,0.3);
|
||||
color: #A5B4FC; font-size: 12px; font-weight: 600;
|
||||
padding: 6px 14px; border-radius: 999px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.header-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #818CF8; }
|
||||
.header-title {
|
||||
font-size: 36px; font-weight: 800; color: #fff;
|
||||
letter-spacing: -0.5px; margin-bottom: 10px;
|
||||
}
|
||||
.header-title span { color: #818CF8; }
|
||||
.header-subtitle {
|
||||
font-size: 16px; color: #94A3B8; max-width: 540px;
|
||||
margin: 0 auto 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.header-meta {
|
||||
display: flex; align-items: center; justify-content: center; gap: 24px;
|
||||
font-size: 13px; color: #64748B;
|
||||
}
|
||||
.header-meta-item { display: flex; align-items: center; gap: 6px; }
|
||||
.header-meta-item svg { width: 14px; height: 14px; color: #4F46E5; }
|
||||
|
||||
/* MAIN CONTENT */
|
||||
.main { max-width: 1280px; margin: 0 auto; padding: 40px 24px 60px; }
|
||||
|
||||
/* SECTION LABELS */
|
||||
.section-divider {
|
||||
display: flex; align-items: center; gap: 12px; margin: 40px 0 24px;
|
||||
}
|
||||
.section-divider:first-child { margin-top: 0; }
|
||||
.section-label {
|
||||
font-size: 12px; font-weight: 700; color: #64748B;
|
||||
text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
|
||||
}
|
||||
.section-line { flex: 1; height: 1px; background: #E2E8F0; }
|
||||
|
||||
/* CARDS GRID */
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.mockup-card {
|
||||
background: #fff; border-radius: 16px;
|
||||
border: 1px solid #E2E8F0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.mockup-card:hover {
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
.card-preview {
|
||||
height: 180px; display: flex; align-items: center; justify-content: center;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.card-preview-inner {
|
||||
width: 100%; height: 100%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.preview-icon {
|
||||
width: 56px; height: 56px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.preview-icon svg { width: 28px; height: 28px; }
|
||||
.preview-mockup-lines {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
display: flex; flex-direction: column; gap: 4px; padding: 0 16px 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.preview-line { height: 4px; border-radius: 2px; }
|
||||
|
||||
.card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
|
||||
.card-number {
|
||||
font-size: 11px; font-weight: 700; color: #94A3B8;
|
||||
text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
|
||||
}
|
||||
.card-title { font-size: 16px; font-weight: 700; color: #0F172A; margin-bottom: 6px; }
|
||||
.card-desc { font-size: 13px; color: #64748B; line-height: 1.5; flex: 1; margin-bottom: 16px; }
|
||||
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
|
||||
.tag {
|
||||
font-size: 11px; font-weight: 600; padding: 3px 8px;
|
||||
border-radius: 6px; background: #F1F5F9; color: #64748B;
|
||||
}
|
||||
.btn-view {
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
padding: 10px; background: #4F46E5; color: #fff;
|
||||
border-radius: 8px; font-size: 13px; font-weight: 600;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
}
|
||||
.btn-view:hover { background: #4338CA; }
|
||||
.btn-view svg { width: 14px; height: 14px; }
|
||||
|
||||
/* FOOTER */
|
||||
.footer {
|
||||
background: #1E293B; padding: 32px 0; text-align: center;
|
||||
}
|
||||
.footer p { font-size: 13px; color: #475569; }
|
||||
.footer strong { color: #94A3B8; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="header-badge">
|
||||
<div class="header-badge-dot"></div>
|
||||
Design Mockups — HR Portal v1.0
|
||||
</div>
|
||||
<h1 class="header-title">TechCorp <span>HR Portal</span><br/>Design Mockups Gallery</h1>
|
||||
<p class="header-subtitle">
|
||||
A collection of 10 high-fidelity HTML/CSS mockups for the complete HR management system — covering employee self-service, HR admin flows, and super admin controls.
|
||||
</p>
|
||||
<div class="header-meta">
|
||||
<div class="header-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
10 Pages
|
||||
</div>
|
||||
<div class="header-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
|
||||
3 User Roles
|
||||
</div>
|
||||
<div class="header-meta-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
May 2026
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- AUTH -->
|
||||
<div class="section-divider">
|
||||
<span class="section-label">Authentication</span>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="cards-grid" style="grid-template-columns: repeat(3, 1fr);">
|
||||
<a class="mockup-card" href="01-login.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #0F172A, #1E293B);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="width:200px;background:#fff;border-radius:12px;padding:20px;text-align:center;">
|
||||
<div style="width:40px;height:40px;background:#4F46E5;border-radius:10px;margin:0 auto 10px;"></div>
|
||||
<div style="height:8px;background:#F1F5F9;border-radius:4px;margin-bottom:8px;"></div>
|
||||
<div style="height:6px;background:#F1F5F9;border-radius:3px;width:70%;margin:0 auto 16px;"></div>
|
||||
<div style="height:28px;background:#4F46E5;border-radius:6px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">01</div>
|
||||
<div class="card-title">Login Page</div>
|
||||
<div class="card-desc">Employee sign-in with Employee ID and password. Clean, centered card on dark navy background with security badge.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">All Users</span>
|
||||
<span class="tag">Auth</span>
|
||||
</div>
|
||||
<a href="01-login.html" class="btn-view">
|
||||
View Mockup
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- EMPLOYEE VIEWS -->
|
||||
<div class="section-divider">
|
||||
<span class="section-label">Employee Self-Service</span>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="cards-grid">
|
||||
<a class="mockup-card" href="02-employee-dashboard.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #EEF2FF, #F0FDF4);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;gap:8px;padding:0 16px;">
|
||||
<div style="width:40px;flex-shrink:0;height:100px;background:#1E293B;border-radius:6px;"></div>
|
||||
<div style="flex:1;">
|
||||
<div style="height:12px;background:#fff;border-radius:4px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,0.1);"></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:4px;">
|
||||
<div style="height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">02</div>
|
||||
<div class="card-title">Employee Dashboard</div>
|
||||
<div class="card-desc">Personal overview with leave balance, attendance summary, pending reimbursements, upcoming holidays, announcements, and quick actions.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Dashboard</span>
|
||||
</div>
|
||||
<a href="02-employee-dashboard.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="05-attendance.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #F0FDF4, #ECFDF5);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="padding:0 16px;">
|
||||
<div style="background:#fff;border-radius:8px;padding:10px;box-shadow:0 1px 4px rgba(0,0,0,0.1);">
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px;">
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#ECFDF5;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#ECFDF5;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#EFF6FF;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#ECFDF5;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#ECFDF5;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#FEF2F2;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#F1F5F9;border-radius:3px;"></div>
|
||||
<div style="height:16px;background:#EEF2FF;border-radius:3px;border:2px solid #4F46E5;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">05</div>
|
||||
<div class="card-title">Attendance Calendar</div>
|
||||
<div class="card-desc">Monthly attendance view with color-coded calendar (Present/Absent/WFH/Half-day/Holiday). Today's attendance marking and monthly summary.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Attendance</span>
|
||||
</div>
|
||||
<a href="05-attendance.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="06-leave-management.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #EEF2FF, #F5F3FF);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;flex-direction:column;gap:8px;padding:0 16px;width:100%;">
|
||||
<div style="display:flex;gap:6px;">
|
||||
<div style="flex:1;height:50px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);border-top:3px solid #4F46E5;"></div>
|
||||
<div style="flex:1;height:50px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);border-top:3px solid #10B981;"></div>
|
||||
<div style="flex:1;height:50px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);border-top:3px solid #F59E0B;"></div>
|
||||
</div>
|
||||
<div style="height:60px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">06</div>
|
||||
<div class="card-title">Leave Management</div>
|
||||
<div class="card-desc">Leave balance cards with circular progress rings, apply leave form with date pickers, and complete leave history with status badges.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Leave</span>
|
||||
</div>
|
||||
<a href="06-leave-management.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="07-payslips.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #F0FDF4, #ECFDF5);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;gap:10px;padding:0 16px;">
|
||||
<div style="flex:1;">
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:5px;">
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:48px;background:#FAFAFE;border-radius:6px;border:2px solid #4F46E5;"></div>
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:48px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:60px;background:#1E293B;border-radius:8px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">07</div>
|
||||
<div class="card-title">Payslips</div>
|
||||
<div class="card-desc">Monthly payslip cards grid with generated/pending status. Expanded breakdown showing earnings, deductions, and net pay for selected month.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Payroll</span>
|
||||
</div>
|
||||
<a href="07-payslips.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="08-reimbursements.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #FFFBEB, #FFF7ED);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;flex-direction:column;gap:8px;padding:0 16px;width:100%;">
|
||||
<div style="display:flex;gap:6px;">
|
||||
<div style="flex:1;height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="flex:1;height:36px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="flex:1;height:36px;background:#FFFBEB;border-radius:6px;border:1px solid #FDE68A;"></div>
|
||||
<div style="flex:1;height:36px;background:#FEF2F2;border-radius:6px;border:1px solid #FECACA;"></div>
|
||||
</div>
|
||||
<div style="height:50px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:2px;"></div>
|
||||
<div style="height:4px;background:#F1F5F9;border-radius:2px;width:80%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">08</div>
|
||||
<div class="card-title">Reimbursements</div>
|
||||
<div class="card-desc">Stats overview of claimed/approved/pending/rejected amounts. Expense claim submission form with receipt upload and claims history table.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Employee</span>
|
||||
<span class="tag">Expenses</span>
|
||||
</div>
|
||||
<a href="08-reimbursements.html" class="btn-view">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- HR ADMIN VIEWS -->
|
||||
<div class="section-divider">
|
||||
<span class="section-label">HR Admin Views</span>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="cards-grid">
|
||||
<a class="mockup-card" href="03-admin-dashboard.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #F5F3FF, #EEF2FF);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;gap:8px;padding:0 16px;">
|
||||
<div style="width:40px;flex-shrink:0;height:110px;background:#1E293B;border-radius:6px;"></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:5px;">
|
||||
<div style="height:14px;background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:4px;">
|
||||
<div style="height:28px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:28px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:28px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
<div style="height:28px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
<div style="height:40px;background:#fff;border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">03</div>
|
||||
<div class="card-title">Admin Dashboard</div>
|
||||
<div class="card-desc">HR Admin overview showing total employees, pending approvals, attendance rate, and pending reimbursements. Pending approvals table and payroll status card.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">HR Admin</span>
|
||||
<span class="tag">Dashboard</span>
|
||||
</div>
|
||||
<a href="03-admin-dashboard.html" class="btn-view" style="background:#7C3AED;">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="04-employee-list.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #F8FAFC, #EFF6FF);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="padding:0 12px;width:100%;">
|
||||
<div style="height:8px;background:#E2E8F0;border-radius:4px;margin-bottom:6px;"></div>
|
||||
<div style="display:flex;flex-direction:column;gap:3px;">
|
||||
<div style="display:flex;align-items:center;gap:6px;height:20px;background:#F8FAFC;border-radius:4px;padding:0 6px;">
|
||||
<div style="width:14px;height:14px;border-radius:50%;background:#4F46E5;flex-shrink:0;"></div>
|
||||
<div style="height:4px;background:#E2E8F0;border-radius:2px;flex:1;"></div>
|
||||
<div style="width:40px;height:4px;background:#EEF2FF;border-radius:2px;"></div>
|
||||
<div style="width:28px;height:4px;background:#ECFDF5;border-radius:2px;"></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;height:20px;background:#fff;border-radius:4px;padding:0 6px;">
|
||||
<div style="width:14px;height:14px;border-radius:50%;background:#10B981;flex-shrink:0;"></div>
|
||||
<div style="height:4px;background:#E2E8F0;border-radius:2px;flex:1;"></div>
|
||||
<div style="width:40px;height:4px;background:#FFFBEB;border-radius:2px;"></div>
|
||||
<div style="width:28px;height:4px;background:#ECFDF5;border-radius:2px;"></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;height:20px;background:#F8FAFC;border-radius:4px;padding:0 6px;">
|
||||
<div style="width:14px;height:14px;border-radius:50%;background:#F59E0B;flex-shrink:0;"></div>
|
||||
<div style="height:4px;background:#E2E8F0;border-radius:2px;flex:1;"></div>
|
||||
<div style="width:40px;height:4px;background:#FFF7ED;border-radius:2px;"></div>
|
||||
<div style="width:28px;height:4px;background:#ECFDF5;border-radius:2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">04</div>
|
||||
<div class="card-title">Employee List</div>
|
||||
<div class="card-desc">Searchable, filterable employee directory with department, designation, and status filters. Table view with actions for each employee and pagination.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">HR Admin</span>
|
||||
<span class="tag">Employees</span>
|
||||
</div>
|
||||
<a href="04-employee-list.html" class="btn-view" style="background:#7C3AED;">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="mockup-card" href="09-payroll-management.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #ECFDF5, #F0FDF4);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;flex-direction:column;gap:6px;padding:0 16px;width:100%;">
|
||||
<div style="display:flex;gap:5px;">
|
||||
<div style="flex:1;height:32px;background:#fff;border-radius:6px;border-top:3px solid #4F46E5;"></div>
|
||||
<div style="flex:1;height:32px;background:#fff;border-radius:6px;border-top:3px solid #EF4444;"></div>
|
||||
<div style="flex:1;height:32px;background:#fff;border-radius:6px;border-top:3px solid #10B981;"></div>
|
||||
</div>
|
||||
<div style="height:70px;background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.08);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">09</div>
|
||||
<div class="card-title">Payroll Management</div>
|
||||
<div class="card-desc">Monthly payroll processing for HR admins. Summary cards, detailed employee-wise breakdown with Basic, HRA, DA, PF, TDS, PT and net pay. Export to CSV.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">HR Admin</span>
|
||||
<span class="tag">Payroll</span>
|
||||
</div>
|
||||
<a href="09-payroll-management.html" class="btn-view" style="background:#7C3AED;">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- SUPER ADMIN VIEWS -->
|
||||
<div class="section-divider">
|
||||
<span class="section-label">Super Admin</span>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="cards-grid" style="grid-template-columns: repeat(3, 1fr);">
|
||||
<a class="mockup-card" href="10-super-admin.html">
|
||||
<div class="card-preview" style="background: linear-gradient(135deg, #0F172A, #1E1B4B);">
|
||||
<div class="card-preview-inner">
|
||||
<div style="display:flex;gap:8px;padding:0 16px;">
|
||||
<div style="width:36px;flex-shrink:0;height:100px;background:#0F172A;border-radius:6px;border:1px solid rgba(255,255,255,0.1);"></div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:5px;">
|
||||
<div style="height:12px;background:rgba(255,255,255,0.1);border-radius:4px;"></div>
|
||||
<div style="height:50px;background:rgba(255,255,255,0.07);border-radius:6px;"></div>
|
||||
<div style="display:flex;gap:4px;">
|
||||
<div style="flex:1;height:14px;background:rgba(79,70,229,0.3);border-radius:3px;"></div>
|
||||
<div style="flex:1;height:14px;background:rgba(255,255,255,0.07);border-radius:3px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-number">10</div>
|
||||
<div class="card-title">Super Admin Panel</div>
|
||||
<div class="card-desc">Root-level admin management panel with HR admin account creation, deactivation, password reset, org settings toggles, and full audit log.</div>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Super Admin</span>
|
||||
<span class="tag">Security</span>
|
||||
<span class="tag">Audit</span>
|
||||
</div>
|
||||
<a href="10-super-admin.html" class="btn-view" style="background:linear-gradient(135deg,#7C3AED,#4F46E5);">View Mockup <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg></a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><strong>TechCorp HR Portal</strong> — Design Mockups v1.0 · Built with HTML/CSS · Inter font · May 2026</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -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);
|
||||
});
|
||||
Reference in New Issue
Block a user