From 96d64f4b6f4d16f2cf18b8b8eb8f897bfaeb3bfe Mon Sep 17 00:00:00 2001 From: TenX PM Date: Mon, 4 May 2026 15:56:20 +0000 Subject: [PATCH] deploy: hr-portal-designs --- .claude/CLAUDE.md | 554 ++++++++++++++++++++++++++ .claude/skills/ui-ux-pro-max/skill.md | 427 ++++++++++++++++++++ .mcp-config.json | 45 +++ deploy.sh | 185 +++++++++ designs/01-login.html | 208 ++++++++++ designs/02-employee-dashboard.html | 409 +++++++++++++++++++ designs/03-admin-dashboard.html | 389 ++++++++++++++++++ designs/04-employee-list.html | 398 ++++++++++++++++++ designs/05-attendance.html | 347 ++++++++++++++++ designs/06-leave-management.html | 346 ++++++++++++++++ designs/07-payslips.html | 347 ++++++++++++++++ designs/08-reimbursements.html | 310 ++++++++++++++ designs/09-payroll-management.html | 416 +++++++++++++++++++ designs/10-super-admin.html | 428 ++++++++++++++++++++ designs/index.html | 505 +++++++++++++++++++++++ visual-test-runner.js | 315 +++++++++++++++ 16 files changed, 5629 insertions(+) create mode 100644 .claude/CLAUDE.md create mode 100644 .claude/skills/ui-ux-pro-max/skill.md create mode 100644 .mcp-config.json create mode 100755 deploy.sh create mode 100644 designs/01-login.html create mode 100644 designs/02-employee-dashboard.html create mode 100644 designs/03-admin-dashboard.html create mode 100644 designs/04-employee-list.html create mode 100644 designs/05-attendance.html create mode 100644 designs/06-leave-management.html create mode 100644 designs/07-payslips.html create mode 100644 designs/08-reimbursements.html create mode 100644 designs/09-payroll-management.html create mode 100644 designs/10-super-admin.html create mode 100644 designs/index.html create mode 100644 visual-test-runner.js diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md new file mode 100644 index 0000000..95c416a --- /dev/null +++ b/.claude/CLAUDE.md @@ -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 . 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 . 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 [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 -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 [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/) + +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 [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. \ No newline at end of file diff --git a/.claude/skills/ui-ux-pro-max/skill.md b/.claude/skills/ui-ux-pro-max/skill.md new file mode 100644 index 0000000..7cc8553 --- /dev/null +++ b/.claude/skills/ui-ux-pro-max/skill.md @@ -0,0 +1,427 @@ +# UI/UX Pro Max - Design Skill + +You are an expert UI/UX designer. Follow these rules when creating, reviewing, or modifying any user interface. Every decision must be intentional, accessible, and grounded in proven design principles. + +--- + +## 1. Color Theory & Accessibility + +### Contrast Requirements +- **WCAG AA (minimum):** 4.5:1 for normal text, 3:1 for large text (18px+ or 14px+ bold) +- **WCAG AAA (enhanced):** 7:1 for normal text, 4.5:1 for large text +- **Non-text elements:** 3:1 contrast ratio for UI components and graphical objects +- Always verify contrast ratios before finalizing any color pairing + +### Color Usage Rules +- Never use color as the sole indicator of meaning (add icons, patterns, or text labels) +- Limit primary palette to 1 brand color + 1-2 accent colors + neutrals +- Use semantic color tokens: `--color-success`, `--color-warning`, `--color-error`, `--color-info` +- Ensure color consistency across light and dark themes +- Test all color choices with a color-blindness simulator (protanopia, deuteranopia, tritanopia) + +### Palette Construction +- Choose a primary hue, then derive shades in 9-11 steps (50, 100, 200 ... 900, 950) +- Neutral palette should have a subtle warm or cool tint matching the primary +- Reserve saturated colors for interactive elements and key indicators +- Background colors: keep saturation below 5% for large surfaces +- Use opacity-based overlays (`rgba`) for layering rather than unique hex values + +--- + +## 2. Typography + +### Font Selection +- Use a maximum of 2 typefaces: one for headings, one for body +- Prefer system font stacks for performance: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` +- If using custom fonts, always declare fallbacks and use `font-display: swap` +- Ensure chosen fonts support all required character sets and weights + +### Type Scale (Major Third - 1.25 ratio) +``` +--text-xs: 0.75rem (12px) +--text-sm: 0.875rem (14px) +--text-base: 1rem (16px) ← body default +--text-lg: 1.125rem (18px) +--text-xl: 1.25rem (20px) +--text-2xl: 1.5rem (24px) +--text-3xl: 1.875rem (30px) +--text-4xl: 2.25rem (36px) +--text-5xl: 3rem (48px) +``` + +### Line Height +- Body text: 1.5 - 1.6 (24-26px at 16px base) +- Headings: 1.1 - 1.3 +- Captions and labels: 1.4 +- Never go below 1.1 for any text + +### Letter Spacing +- Body text: 0 (default) +- Headings (large): -0.01em to -0.02em for tighter look +- All-caps labels: 0.05em to 0.1em +- Small text: +0.01em for readability + +### Paragraph Rules +- Maximum line length: 60-75 characters (use `max-width: 65ch` on text containers) +- Paragraph spacing: 1em between paragraphs +- Avoid justified text on the web (use left-aligned) +- Minimum body font size: 16px on mobile, 14px on desktop + +--- + +## 3. Spacing & Layout System + +### 8px Grid +All spacing values must be multiples of 4px, preferring 8px increments: +``` +--space-0: 0 +--space-1: 0.25rem (4px) +--space-2: 0.5rem (8px) +--space-3: 0.75rem (12px) +--space-4: 1rem (16px) +--space-5: 1.25rem (20px) +--space-6: 1.5rem (24px) +--space-8: 2rem (32px) +--space-10: 2.5rem (40px) +--space-12: 3rem (48px) +--space-16: 4rem (64px) +--space-20: 5rem (80px) +--space-24: 6rem (96px) +``` + +### Layout Principles +- Use CSS Grid for page-level layout, Flexbox for component-level alignment +- Define consistent container max-widths: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px) +- Apply horizontal padding to containers: 16px mobile, 24px tablet, 32px desktop +- Maintain consistent gutter widths within grids (16px or 24px) +- Content sections should have vertical rhythm using consistent spacing tokens + +### Whitespace +- More whitespace around higher-level groupings (sections > cards > inline elements) +- Padding inside containers: at least 16px +- Space between related items: 8-12px +- Space between unrelated groups: 24-48px +- Use `gap` property instead of margins on flex/grid children + +--- + +## 4. Component Design Patterns + +### Buttons +- **Sizes:** sm (32px height), md (40px height), lg (48px height) +- **Minimum width:** 80px for text buttons +- **Touch target:** minimum 44x44px (add padding if button is visually smaller) +- **Padding:** horizontal 16-24px, vertical 8-12px +- **Border radius:** 6-8px for modern feel, 4px for conservative +- **States:** default, hover, active/pressed, focus-visible, disabled, loading +- **Hierarchy:** primary (filled), secondary (outlined), tertiary/ghost (text-only) +- **Disabled buttons:** reduce opacity to 0.5, remove pointer events, add `aria-disabled` +- **Loading state:** replace label with spinner, maintain button width, disable interaction +- **Icon buttons:** always include `aria-label`, maintain square aspect ratio + +### Forms +- **Labels:** always visible above the input, never use placeholder as label +- **Input height:** 40-48px for comfortable touch targets +- **Input padding:** 12-16px horizontal +- **Border:** 1px solid with at least 3:1 contrast against background +- **Focus ring:** 2px solid brand color with 2px offset, or equivalent visual indicator +- **Error states:** red border + error icon + error message below the field +- **Error messages:** use `role="alert"` or `aria-live="polite"` for dynamic errors +- **Helper text:** place below input in muted color, 12-14px +- **Required fields:** mark with asterisk (*) and include "(required)" in aria-label +- **Field spacing:** 16-24px vertical gap between form fields +- **Submit buttons:** always at the bottom, full-width on mobile + +### Cards +- **Padding:** 16-24px +- **Border radius:** 8-12px +- **Elevation:** use box-shadow for depth (`0 1px 3px rgba(0,0,0,0.12)` for subtle) +- **Border:** optional 1px border for low-contrast backgrounds +- **Interactive cards:** add hover elevation change, cursor pointer, focus outline +- **Content order:** image/media > title > description > metadata > actions +- **Clickable cards:** wrap in `` or ` + +
+ + + + Secured with 256-bit SSL encryption +
+

Need help? Contact IT Support

+ + + diff --git a/designs/02-employee-dashboard.html b/designs/02-employee-dashboard.html new file mode 100644 index 0000000..2177a77 --- /dev/null +++ b/designs/02-employee-dashboard.html @@ -0,0 +1,409 @@ + + + + + + HR Portal — Employee Dashboard + + + + + + + + +
+
+
+
Good morning, Rahul Sharma — Monday, 4 May 2026
+
+
+ +
+
+
Rahul Sharma
+
EMP-00247
+
+
RS
+
+
+
+ +
+
My Dashboard
+
Here's what's happening with your account today.
+ + +
+ +
+
+
Leave Balance
+
+ +
+
+
+
+
CL
+
8
+
of 12
+
+
+
SL
+
10
+
of 12
+
+
+
EL
+
12
+
of 15
+
+
+
+ + +
+
+
Attendance — May
+
+ +
+
+
21 / 22
+
+ 95.4% attendance rate this month +
+
+
+
+
+ + +
+
+
Pending Reimbursement
+
+ +
+
+
₹4,500
+
2 claims awaiting approval
+
+ + +
+
+
Upcoming Holidays
+
+ +
+
+
2
+
Buddha Purnima · May 12
Maharashtra Day · May 19
+
+
+ + +
+ +
+
+ Recent Announcements + View all → +
+
+
+
+
+
Annual Performance Review — FY 2025-26
+
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.
+
+ HR + Posted May 1, 2026 +
+
+
+
+
+
+
New Health Insurance Benefits — Effective June 2026
+
The company has upgraded health insurance coverage. Individual limit increases to ₹5L, family floater to ₹10L. Enrolment window opens May 20.
+
+ Benefits + Posted April 28, 2026 +
+
+
+
+
+
+
Office Relocation — Andheri East Floor 3
+
Engineering and Product teams will move to Floor 3 of the Andheri East office effective May 10. Facilities team will assist with migration.
+
+ Admin + Posted April 25, 2026 +
+
+
+
+
+ + +
+
Quick Actions
+
+ + + + +
+
+
+
+
+ + diff --git a/designs/03-admin-dashboard.html b/designs/03-admin-dashboard.html new file mode 100644 index 0000000..c93a01c --- /dev/null +++ b/designs/03-admin-dashboard.html @@ -0,0 +1,389 @@ + + + + + + HR Portal — Admin Dashboard + + + + + + +
+
+
+
Admin Dashboard
+ HR ADMIN +
+
+ +
+
+
Priya Kapoor
+
HR Admin
+
+
PK
+
+
+
+ +
+
Admin Dashboard
+
Monday, 4 May 2026 — Overview of all HR operations
+ +
+
+
+
Total Employees
+
+ +
+
+
247
+
↑ 3 new this month
+
+
+
+
Pending Leave Approvals
+
+ +
+
+
12
+
5 urgent — older than 48 hrs
+
+
+
+
Today's Attendance Rate
+
+ +
+
+
94%
+
232 / 247 employees present
+
+
+
+
Pending Reimbursements
+
+ +
+
+
8
+
Total value: ₹32,400
+
+
+ +
+ +
+
+ Pending Approvals + View all → +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeTypeDetailsRequested OnActions
+
Arjun Mehta
+
EMP-00183 · Engineering
+ 		Casual LeaveMay 7–9 (3 days)May 2, 2026 + + +
+
Sunita Rao
+
EMP-00091 · Finance
+ 		ReimbursementTravel claim — ₹3,200May 1, 2026 + + +
+
Vikram Nair
+
EMP-00147 · Sales
+ 		Sick LeaveMay 5–6 (2 days)May 3, 2026 + + +
+
Meera Iyer
+
EMP-00229 · HR
+ 		ReimbursementMedical claim — ₹1,800Apr 30, 2026 + + +
+
Deepak Joshi
+
EMP-00064 · Operations
+ 		Earned LeaveMay 12–16 (5 days)Apr 28, 2026 + + +
+
+
+ + +
+
Payroll Status
+
+
May 2026
+
+
+ Not Generated +
+
+
+ Eligible Employees + 247 +
+
+ Processing Period + May 1–31, 2026 +
+
+ Pay Date + May 31, 2026 +
+
+ Estimated Total + ~₹1,24,35,000 +
+
+
+ +
Attendance data locks on May 28
+
+ +
+
Dept. Headcount
+
+
+
+ Engineering + 89 +
+
+
+ Sales + 62 +
+
+
+ Finance + 38 +
+
+
+ Operations + 41 +
+
+
+ HR + 17 +
+
+
+
+
+
+
+
+
+ + diff --git a/designs/04-employee-list.html b/designs/04-employee-list.html new file mode 100644 index 0000000..19f7af0 --- /dev/null +++ b/designs/04-employee-list.html @@ -0,0 +1,398 @@ + + + + + + HR Portal — Employee List + + + + + + +
+
+
+
Employees
+ HR ADMIN +
+
+ +
+
Priya Kapoor
HR Admin
+
PK
+
+
+
+ +
+
+
+
All Employees
+
247 employees · 243 active
+
+ +
+ +
+
+ + +
+ + +
+ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeEmployee IDDepartmentDesignationJoin DateStatusActions
+
+
RS
+
+
Rahul Sharma
+
rahul.sharma@techcorp.in
+
+
+ 		EMP-00247EngineeringSenior Software EngineerMar 15, 2021Active +
+
+
+
+
+
+
SM
+
+
Sunita Mehta
+
sunita.mehta@techcorp.in
+
+
+ 		EMP-00091FinanceSenior Finance AnalystJul 1, 2019Active +
+
+
+
+
+
+
VN
+
+
Vikram Nair
+
vikram.nair@techcorp.in
+
+
+ 		EMP-00147SalesRegional Sales ManagerJan 12, 2020Active +
+
+
+
+
+
+
MI
+
+
Meera Iyer
+
meera.iyer@techcorp.in
+
+
+ 		EMP-00229HRHR Business PartnerSep 5, 2022Active +
+
+
+
+
+
+
DJ
+
+
Deepak Joshi
+
deepak.joshi@techcorp.in
+
+
+ 		EMP-00064OperationsOperations LeadFeb 28, 2018Active +
+
+
+
+
+
+
AG
+
+
Ananya Gupta
+
ananya.gupta@techcorp.in
+
+
+ 		EMP-00198EngineeringSoftware EngineerJun 20, 2023Active +
+
+
+
+
+
+
KP
+
+
Karthik Pillai
+
karthik.pillai@techcorp.in
+
+
+ 		EMP-00033FinanceFinance ManagerNov 10, 2016Inactive +
+
+
+
+
+
+
NR
+
+
Neha Reddy
+
neha.reddy@techcorp.in
+
+
+ 		EMP-00215SalesSales ExecutiveJan 8, 2024Active +
+
+
+
+
+ +
+
+
+ + diff --git a/designs/05-attendance.html b/designs/05-attendance.html new file mode 100644 index 0000000..889e97b --- /dev/null +++ b/designs/05-attendance.html @@ -0,0 +1,347 @@ + + + + + + HR Portal — Attendance + + + + + + +
+
+
My Attendance
+
+ +
+
Rahul Sharma
EMP-00247
+
RS
+
+
+
+ +
+
Attendance Calendar
+
Your monthly attendance record — May 2026
+ +
+ +
+
+
+
May 2026
+
+ + +
+
+ +
+ +
Sun
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+ + +
+
+
+
+
1
P
+
2
P
+
3
+ + +
4
+
+
5
+ +
+
6
+
7
+
8
+
9
+
10
+ + +
11
+
12
Holiday
+
13
+
14
+
15
+
16
+
17
+ + +
18
+
19
Holiday
+
20
+
21
+
22
+
23
+
24
+ + +
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+ +
+
Present
+
Absent
+
WFH
+
Half-day
+
Holiday
+
Weekend
+
+ + +
+
April 2026 — Recent History
+
+ Apr 1 — Present + Apr 2 — WFH + Apr 3 — Present + Apr 4 — Present + Apr 7 — Present + Apr 8 — Present + Apr 9 — WFH + Apr 10 — Half-day + Apr 11 — Present + Apr 14 — Absent +
+
+
+
+ + +
+
+
May Summary
+
+
81.8%
+
Attendance Rate (2 days so far)
+
+
+
+
+
+
+
+ Present +
+
2
+
+
+
+
+ Absent +
+
0
+
+
+
+
+ WFH +
+
0
+
+
+
+
+ Half-day +
+
0
+
+
+
+
+ Holidays +
+
2
+
+
+
+
+ Total Working Days + 23 +
+
+ +
+
Mark Today's Attendance
+
Monday, May 4, 2026
+ + + +
+
+
+
+
+ + diff --git a/designs/06-leave-management.html b/designs/06-leave-management.html new file mode 100644 index 0000000..26fb0db --- /dev/null +++ b/designs/06-leave-management.html @@ -0,0 +1,346 @@ + + + + + + HR Portal — Leave Management + + + + + + +
+
+
Leave Management
+
+ +
+
Rahul Sharma
EMP-00247
+
RS
+
+
+
+ +
+
+
+
My Leave
+
FY 2025–26 · Balance and history
+
+ +
+ + +
+ +
+
Casual Leave CL
+
+
+ + + + +
8
+
+
+
8 left
+
of 12 total
+
4 used
+
+
+
+ +
+
Sick Leave SL
+
+
+ + + + +
10
+
+
+
10 left
+
of 12 total
+
2 used
+
+
+
+ +
+
Earned Leave EL
+
+
+ + + + +
12
+
+
+
12 left
+
of 15 total
+
3 used
+
+
+
+ +
+
Loss of Pay LOP
+
+
+
1
+
day applied
+
Deducted from salary.
Use only when other leaves exhausted.
+
+
+
+
+ + +
+
+ + Apply for Leave +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Duration: 3 days (Thu May 7 to Sat May 9) · After deduction: CL balance will be 5 days +
+
+ + +
+
+ + +
+
+
Leave History
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Leave TypeFromToDaysReasonStatusApplied On
Casual LeaveApr 14, 2026Apr 14, 20261Personal workApprovedApr 12, 2026
Sick LeaveMar 22, 2026Mar 23, 20262Fever and flu — medical certificate attachedApprovedMar 22, 2026
Casual LeaveMar 10, 2026Mar 11, 20262Family function — brother's engagementApprovedMar 5, 2026
Earned LeaveFeb 16, 2026Feb 20, 20265Vacation — Rajasthan tripApprovedFeb 3, 2026
Casual LeaveMay 7, 2026May 9, 20263Family trip to OotyPendingMay 4, 2026
Sick LeaveJan 6, 2026Jan 6, 20261MigraineRejectedJan 6, 2026
+
+
+
+ + diff --git a/designs/07-payslips.html b/designs/07-payslips.html new file mode 100644 index 0000000..208947c --- /dev/null +++ b/designs/07-payslips.html @@ -0,0 +1,347 @@ + + + + + + HR Portal — Payslips + + + + + + +
+
+
My Payslips
+
+ +
+
Rahul Sharma
EMP-00247
+
RS
+
+
+
+ +
+
+
+
Payslips
+
View and download your monthly salary statements
+
+
+ +
+ +
+
+ + +
+
+
+
May 2026
+
Net Pay: —
+ Not Generated +
+ +
+
+
+
April 2026
+
Net Pay: ₹68,500
+ Generated +
+ +
+
+
+
March 2026
+
Net Pay: ₹68,500
+ Generated +
+ +
+
+
+
February 2026
+
Net Pay: ₹65,200
+ Generated +
+ +
+
+
+
January 2026
+
Net Pay: ₹68,500
+ Generated +
+ +
+
+
+
December 2025
+
Net Pay: ₹72,000
+ Generated +
+ +
+
+
+
November 2025
+
Net Pay: ₹68,500
+ Generated +
+
+
+
October 2025
+
Net Pay: ₹68,500
+ Generated +
+
+
+
September 2025
+
Net Pay: ₹68,500
+ Generated +
+
+
+
+ + +
+
April 2026 — Breakdown
+
+
+
+
+
TechCorp Solutions Pvt. Ltd.
+
April 1–30, 2026 · 22 working days
+
Rahul Sharma · EMP-00247
Senior Software Engineer, Engineering
+
+
+
Net Pay
+
₹68,500
+
+
+
+
+ +
Earnings
+
+
+ Basic Salary + ₹40,000 +
+
+ House Rent Allowance (HRA) + ₹16,000 +
+
+ Dearness Allowance (DA) + ₹4,000 +
+
+ Special Allowance + ₹10,000 +
+
+ Transport Allowance + ₹3,200 +
+
+
+ Gross Earnings + ₹73,200 +
+ + +
Deductions
+
+
+ Provident Fund (PF) + −₹4,800 +
+
+ Professional Tax (PT) + −₹200 +
+
+ TDS (Income Tax) + −₹8,700 +
+
+ ESI Contribution + −₹0 +
+
+
+ Total Deductions + ₹13,700 +
+ +
+ NET PAY (Take Home) + ₹68,500 +
+ + +
+
+
+
+
+
+ + diff --git a/designs/08-reimbursements.html b/designs/08-reimbursements.html new file mode 100644 index 0000000..d937974 --- /dev/null +++ b/designs/08-reimbursements.html @@ -0,0 +1,310 @@ + + + + + + HR Portal — Reimbursements + + + + + + +
+
+
Reimbursements
+
+ +
+
Rahul Sharma
EMP-00247
+
RS
+
+
+
+ +
+
+
+
My Reimbursements
+
Submit expense claims and track approval status
+
+ +
+ + +
+
+
Total Claimed (FY)
+
₹24,500
+
Across all categories
+
+
+
Approved
+
₹18,000
+
8 claims approved
+
+
+
Pending
+
₹4,500
+
2 claims awaiting
+
+
+
Rejected
+
₹2,000
+
1 claim rejected
+
+
+ + +
+
+ + Submit New Claim +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +

Click to upload or drag & drop
JPG, PNG, PDF up to 5 MB

+
+
+
+ + +
+
+
+ + +
+
+
Claim History
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DateCategoryAmountDescriptionStatusReceipt
May 3, 2026Travel₹3,200Cab fare — Bandra to Nariman Point (return)PendingView
Apr 28, 2026Medical₹1,800Pharmacy bill — cold & flu medicationPendingView
Apr 15, 2026Travel₹5,400Train tickets — Mumbai to Pune (client visit, 2 persons)ApprovedView
Apr 10, 2026Food₹2,400Team lunch — sprint retrospective (8 members)ApprovedView
Mar 22, 2026Travel₹8,200Flight — Mumbai to Bangalore (quarterly review)ApprovedView
Mar 5, 2026Internet₹2,000Home broadband upgrade for WFH — MarchRejectedView
Feb 18, 2026Food₹1,800Client dinner — product demo at TajApprovedView
+
+
+
+ + diff --git a/designs/09-payroll-management.html b/designs/09-payroll-management.html new file mode 100644 index 0000000..53aa10e --- /dev/null +++ b/designs/09-payroll-management.html @@ -0,0 +1,416 @@ + + + + + + HR Portal — Payroll Management + + + + + + +
+
+
+
Payroll Management
+ HR ADMIN +
+
+ +
+
Priya Kapoor
HR Admin
+
PK
+
+
+
+ +
+
+
+
Payroll Management — May 2026
+
Process, review and export monthly salary data
+
+
+ + +
+
+ + +
+
+ + + +
+
+
+ Status: Not Generated — Attendance closes May 28 +
+
+ + +
+
+
Total Employees
+
247
+
All active employees
+
+
+
Total Gross
+
₹1,24,35,000
+
Before deductions
+
+
+
Total Deductions
+
₹18,65,000
+
PF + TDS + PT
+
+
+
Total Net Pay
+
₹1,05,70,000
+
Take-home amount
+
+
+ + +
+
+
Employee Payroll Details — May 2026
+
+ Showing 1–10 of 247 +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeBasicHRADAGrossPFTDSPTNet PayStatusPayslip
+
Rahul Sharma
+
EMP-00247 · Engineering
+ 		₹40,000₹16,000₹4,000₹73,200₹4,800₹8,700₹200₹59,500Pending—
+
Sunita Mehta
+
EMP-00091 · Finance
+ 		₹52,000₹20,800₹5,200₹91,600₹6,240₹14,200₹200₹70,960Pending—
+
Vikram Nair
+
EMP-00147 · Sales
+ 		₹45,000₹18,000₹4,500₹82,500₹5,400₹11,500₹200₹65,400Pending—
+
Meera Iyer
+
EMP-00229 · HR
+ 		₹38,000₹15,200₹3,800₹68,400₹4,560₹7,200₹200₹56,440Pending—
+
Deepak Joshi
+
EMP-00064 · Operations
+ 		₹58,000₹23,200₹5,800₹1,01,800₹6,960₹18,200₹200₹76,440Pending—
+
Ananya Gupta
+
EMP-00198 · Engineering
+ 		₹32,000₹12,800₹3,200₹58,200₹3,840₹4,800₹200₹49,360Pending—
+
Arun Krishnamurthy
+
EMP-00178 · Engineering
+ 		₹70,000₹28,000₹7,000₹1,22,500₹8,400₹24,000₹200₹89,900Pending—
+
Neha Reddy
+
EMP-00215 · Sales
+ 		₹28,000₹11,200₹2,800₹51,400₹3,360₹3,200₹200₹44,640Pending—
+
Preethi Venkataraman
+
EMP-00052 · Finance
+ 		₹44,000₹17,600₹4,400₹79,200₹5,280₹10,400₹200₹63,320Pending—
+
Rohit Bhatia
+
EMP-00110 · Operations
+ 		₹35,000₹14,000₹3,500₹63,000₹4,200₹6,200₹200₹52,400Pending—
Totals (10 shown / 247 total)₹4,42,000₹1,76,800₹44,200₹7,91,800₹53,040₹1,08,400₹2,000₹6,28,360
+
+
+
+ + diff --git a/designs/10-super-admin.html b/designs/10-super-admin.html new file mode 100644 index 0000000..5a162a8 --- /dev/null +++ b/designs/10-super-admin.html @@ -0,0 +1,428 @@ + + + + + + HR Portal — Super Admin + + + + + + +
+
+
+
Admin Accounts
+ SUPER ADMIN +
+
+ +
+
Super Admin
Root Access
+
SA
+
+
+
+ +
+
+
+
HR Admin Accounts
+
Manage HR administrators — create, deactivate, and reset passwords
+
+ +
+ + +
+
+
Total HR Admins
+
8
+
Across all locations
+
+
+
Active
+
6
+
Can access system
+
+
+
Inactive
+
2
+
Deactivated accounts
+
+
+
Last Login
+
2 min ago
+
priya.kapoor@techcorp.in
+
+
+ + +
+
+
HR Administrator Accounts
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AdministratorEmailEmployee IDCreated OnLast LoginStatusActions
+
+
PK
+
+
Priya Kapoor
+
HR Manager — Mumbai HQ
+
+
+ 		priya.kapoor@techcorp.inEMP-00012Jan 15, 20202 min agoActive +
+ + +
+
+
+
SM
+
+
Suresh Menon
+
HR Lead — Bangalore
+
+
+ 		suresh.menon@techcorp.inEMP-00028Mar 8, 20211 day agoActive +
+ + +
+
+
+
AR
+
+
Anita Rao
+
HR Exec — Pune
+
+
+ 		anita.rao@techcorp.inEMP-00041Sep 22, 20213 hours agoActive +
+ + +
+
+
+
NP
+
+
Nikhil Patel
+
HR Specialist — Delhi
+
+
+ 		nikhil.patel@techcorp.inEMP-00075Feb 14, 20232 days agoActive +
+ + +
+
+
+
RV
+
+
Ravi Varma
+
HR Exec — Chennai (former)
+
+
+ 		ravi.varma@techcorp.inEMP-00031Jun 10, 2020Apr 1, 2026Inactive +
+ +
+
+
+ + +
+ +
+
Organisation Settings
+
+
+
+ + Leave Policy +
+
+ CL per year + 12 days +
+
+ SL per year + 12 days +
+
+ EL per year + 15 days +
+
+ Carry forward +
+
+
+
+
+ + System Settings +
+
+ Two-factor auth +
+
+
+ Email notifications +
+
+
+ Auto payroll lock +
+
+
+ Session timeout + 8 hours +
+
+
+
+ + +
+
Recent Audit Log
+
+
+
+
+
+
Admin login — Priya Kapoor
+
IP: 203.189.x.x · Mumbai
+
+
2 min ago
+
+
+
+
+
Leave approved — Arjun Mehta (CL 3 days)
+
Approved by Priya Kapoor
+
+
45 min ago
+
+
+
+
+
Employee record updated — Neha Reddy
+
Designation changed by Suresh Menon
+
+
2 hr ago
+
+
+
+
+
Reimbursement rejected — Karthik Pillai
+
Internet bill — policy violation
+
+
5 hr ago
+
+
+
+
+
New employee added — Anika Sharma
+
EMP-00248 · Engineering · Added by Anita Rao
+
+
Yesterday
+
+
+
+
+
+
+
+ + diff --git a/designs/index.html b/designs/index.html new file mode 100644 index 0000000..cd026ca --- /dev/null +++ b/designs/index.html @@ -0,0 +1,505 @@ + + + + + + HR Portal — Design Mockups Gallery + + + + + +
+
+
+ Design Mockups — HR Portal v1.0 +
+

TechCorp HR Portal
Design Mockups Gallery

+

+ 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. +

+
+
+ + 10 Pages +
+
+ + 3 User Roles +
+
+ + May 2026 +
+
+
+ +
+ + +
+ Authentication +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
01
+
Login Page
+
Employee sign-in with Employee ID and password. Clean, centered card on dark navy background with security badge.
+
+ All Users + Auth +
+ + View Mockup + + +
+ +
+ + +
+ Employee Self-Service +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
02
+
Employee Dashboard
+
Personal overview with leave balance, attendance summary, pending reimbursements, upcoming holidays, announcements, and quick actions.
+
+ Employee + Dashboard +
+ View Mockup +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
05
+
Attendance Calendar
+
Monthly attendance view with color-coded calendar (Present/Absent/WFH/Half-day/Holiday). Today's attendance marking and monthly summary.
+
+ Employee + Attendance +
+ View Mockup +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
06
+
Leave Management
+
Leave balance cards with circular progress rings, apply leave form with date pickers, and complete leave history with status badges.
+
+ Employee + Leave +
+ View Mockup +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
07
+
Payslips
+
Monthly payslip cards grid with generated/pending status. Expanded breakdown showing earnings, deductions, and net pay for selected month.
+
+ Employee + Payroll +
+ View Mockup +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
08
+
Reimbursements
+
Stats overview of claimed/approved/pending/rejected amounts. Expense claim submission form with receipt upload and claims history table.
+
+ Employee + Expenses +
+ View Mockup +
+ +
+ + +
+ HR Admin Views +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
03
+
Admin Dashboard
+
HR Admin overview showing total employees, pending approvals, attendance rate, and pending reimbursements. Pending approvals table and payroll status card.
+
+ HR Admin + Dashboard +
+ View Mockup +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
04
+
Employee List
+
Searchable, filterable employee directory with department, designation, and status filters. Table view with actions for each employee and pagination.
+
+ HR Admin + Employees +
+ View Mockup +
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
09
+
Payroll Management
+
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.
+
+ HR Admin + Payroll +
+ View Mockup +
+ +
+ + +
+ Super Admin +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
10
+
Super Admin Panel
+
Root-level admin management panel with HR admin account creation, deactivation, password reset, org settings toggles, and full audit log.
+
+ Super Admin + Security + Audit +
+ View Mockup +
+ +
+ +
+ +
+

TechCorp HR Portal — Design Mockups v1.0 · Built with HTML/CSS · Inter font · May 2026

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