# XcodeFix HRMS — UI Redesign Functional Spec (v1)

Product: **XcodeFix HRMS** — a modern employee self-service HRMS.
First customer / sample tenant: **IT Enterprises Pvt Ltd** (Indian IT services company).
Reference: greytHR-style ESS portal (12 reference screenshots). We are redesigning ALL pages below with modern UI/UX. All data below is sample/demo data — use it exactly so the three options are comparable.

## Demo user
- Name: **Arvind Kumar**, Employee ID **ITE0042**
- Designation: Senior Software Engineer, Department: Engineering
- Location: Coimbatore, Shift: 10:00–19:00 (G3)
- Reporting to: Priya Raghavan (Engineering Manager)
- Avatar: use initials "AK" in a colored circle (no photos).
- Today (demo date): **Monday, 10 August 2026**, current time 18:35.

## Global shell (every page)
- Brand: "XcodeFix HRMS" logo (simple SVG mark + wordmark), tenant name "IT Enterprises".
- Primary navigation items (with SVG icons — inline Lucide/Heroicons-style, stroke 1.5–2, NO emoji):
  1. Home (index.html)
  2. Engage (engage.html)
  3. To Do (todo-review.html) — badge "3"
  4. Leave (leave-apply.html) — submenu: Leave Apply, Leave Balances, Leave Calendar, Holiday Calendar
  5. Attendance (attendance.html) — submenu: Attendance Info
  6. My Info (my-info.html)
  7. Document Center (documents.html)
  8. Helpdesk (helpdesk.html)
  9. Request Hub (#) and Workflow Delegates (#) — present but link to "#" (not built)
- Top bar: global search ("Search actions, people, pages… ⌘K"), Quick Links dropdown (trigger only), notification bell with dot, user avatar menu (name + designation).
- Footer (light, small): "XcodeFix HRMS v1.0 · Privacy Policy · Terms of Service".
- Active nav state must be correct per page. All 11 pages must cross-link correctly.

## Pages (11 files, exact filenames)

### 1. index.html — Home Dashboard
- Greeting header: "Good evening, Arvind" + motivational quote ("Live each day as if your life had just begun." — Goethe) + date.
- **Attendance / swipe card**: Mon 10 Aug 2026 · Shift S008 (G3) 10:00–19:00 · live clock 18:35:01 · status "Signed in at 09:52" · buttons: Sign Out (primary), View Swipes (link).
- **To-Review card**: 3 pending — 2 leave approvals (Rahul S., Meena K.), 1 attendance regularization (Vikram T.) with mini avatars + "Review all" link.
- **Performance card**: "Goals updated — Q2 review due 21 Aug" + progress ring 68%.
- **Track card**: counters — Resignations 01, Confirmations 02.
- **Upcoming holidays**: 15 Aug Sat Independence Day · 02 Oct Fri Gandhi Jayanthi · 19 Oct Mon Ayudha Pooja · 08 Nov Sun Deepavali.
- **Quick Access**: Payslip (Jul 2026), Tax sheet, YTD summary links.
- **POI card**: "Proof of Investments opens 01 Sep 2026" info note.
- **Hiring card**: "2 referrals in progress — UI Designer, DevOps Engineer".
- **Leave snapshot**: Privilege 02 · Sick 09 · Comp-Off 0 with "Apply leave" button.

### 2. my-info.html — Employee Information
- Section sub-nav (tabs or secondary nav): Personal · Accounts & Statutory · Family · **Employment & Job** (active) · Assets.
- Profile header: avatar AK, name, ITE0042, designation, dept, location, joined 14 Mar 2022, buttons: View Timeline (primary), Resign (danger-subtle).
- "Jump to: Current Position | Previous Employment" anchors.
- **Current Position** card: Department Engineering · Department Head Suresh Menon · Designation Senior Software Engineer · Holiday List General · Location Coimbatore · Reporting To Priya Raghavan · Shift 10:00–19:00 (G3) · Employment Type Full-time · Probation Confirmed 14 Sep 2022.
- **Previous Employment** card/timeline: "Cognify Labs — Software Engineer — Jun 2019 · Feb 2022, Chennai".

### 3. attendance.html — Attendance Info
- KPI cards: Avg Work Hrs **09:19** (−2% from Jul) · Avg Actual Work Hrs **07:36** (−5% from Jul) · Penalty Days **0** · On-time Arrival **92%**; "+3 insights" link; "My Regularizations" button; grid/list view toggle.
- **Month calendar (August 2026)** with Prev/Next: statuses per day — P (present, green), O (weekly off, gray), holiday (15 Aug, accent), today 10 Aug highlighted; each day shows shift code G3. Weekends (Sat/Sun) are O. Days 3–7 P, 10 today.
- **Day-detail side panel** for Mon 10: Shift S008(G3) 10:00–19:00; metrics table: First In 09:52 · Last Out — · Late In 0m · Early Out — · Total Work Hrs 08:43 · Break Hrs 00:47 · Actual Work Hrs 07:56 · Shortfall — · Excess —; Status: Present (auto); Session details: Session 1 10:00–14:30 (In 09:52), Session 2 15:00–19:00 (In 15:04).

### 4. leave-apply.html — Leave Apply
- Page tabs: **Apply** (active) · Pending (2) · History.
- Type selector: Leave · Restricted Holiday · Leave Cancel · Comp Off Grant.
- Info note (dismissible): "Leave is earned by an employee and granted by the employer to take time off work…"
- Form: Leave type* (select: Privilege, Sick, Loss of Pay, Comp-Off, Paternity, Sabbatical) · From date* + Session 1/2 · To date* + Session 1/2 · Applying to (Priya Raghavan, prefilled chip) · CC to (add chip) · Contact details · Reason (textarea) · Attach file (pdf, xls, doc, png… helper text) · Submit + Reset.
- **Live balance panel**: selected type balance (Privilege 02), "Applying for: 2 days", projected balance 0, mini policy notes.

### 5. leave-balances.html — Leave Balances
- Header: year select 2026 · Export icon-button · Apply Leave button.
- Balance cards (grid): Privilege Leave — granted 2, balance 02, 0 of 2 consumed · Sick Leave — granted 11, balance 09, 2 of 11 consumed · Comp-Off — 0/0 · Loss of Pay — 0 · Paternity — 0 · Sabbatical — 0 · PL Carry-Forward — granted 14.5, balance 12.5, 2 of 14.5 consumed.
- Each card: consumed progress bar, "View details" link, subtle leave-type icon.

### 6. leave-calendar.html — Leave Calendar
- Filter: "Me / My Team / Department" segmented control + search employee + filter icon + export.
- Month calendar August 2026 (Prev/Next): 15 Aug dot = Restricted/General holiday legend, 25–26 Aug badges "1" (team on leave), today highlighted.
- **Leave transactions panel**: when "My Team": rows — Rahul S. · 2 days · 25–26 Aug · Privilege · Pending; Me: empty state "No leave transactions" with SVG illustration.
- Legend: Team on Leave · Restricted Holiday · General Holiday.

### 7. holiday-calendar.html — Holiday Calendar
- Year select 2026. 12 month cards (Jan–Dec grid):
  - Jan: 01 New Year, 15 Pongal, 26 Republic Day · Feb: none · Mar: 21 Id-Ul-Fitr (Ramzan) · Apr: 14 Tamil New Year · May: 01 May Day · Jun: none · Jul: none · Aug: 15 Independence Day · Sep: none · Oct: 02 Gandhi Jayanthi, 19 Ayudha Pooja, 20 Vijaya Dashami (Restricted) · Nov: 08 Deepavali · Dec: 25 Christmas.
  - Mark restricted holidays with distinct chip ("RH"). Empty months: subtle "No holidays".

### 8. helpdesk.html — Helpdesk
- Tabs: **Active** (2) · Closed (5). "New Request" primary button.
- Ticket list (cards or table): #HD-1042 · IT · "VPN access not working from home" · High · Open · updated 2h ago · assignee IT Support; #HD-1039 · Payroll · "Payslip PF number correction" · Medium · In Progress · updated 1d ago.
- Closed tab exists but static is fine (Active visible).
- **New Request modal** (opens via JS): Category (IT / Payroll / HR / Facilities / Finance) · Subject* · Description* · Attach file helper · CC to add · Priority select (High red dot / Medium amber / Low green) · Submit + Cancel. Include close ×, ESC/overlay close.

### 9. engage.html — Engage (social feed)
- Composer card: avatar + "Share something with IT Enterprises…" + Create Post button.
- Left filter rail: Activities (All Activities / Posts), search, Groups, Location, Department collapsibles.
- Sort: "Newest first".
- Feed posts:
  1. Group: Events · 2 days ago · "Happy Birthday Sneha Iyer, have a great year ahead! 🎂-style but use SVG/illustration" — birthday card style with reactions (12) + comments (4).
  2. Group: Announcements · 3 days ago · HR Team: "Hybrid work policy v2 goes live 1 Sep. Read the updated policy in Document Center." with link chip + 28 reactions.
  3. Group: Kudos · 5 days ago · Priya Raghavan → Arvind Kumar: "Kudos for the flawless release of Client Portal 3.0!" with badge styling + 31 reactions.
- Reaction/Comment buttons on each card.

### 10. todo-review.html — To Do / Review
- Secondary nav (grouped): ATTENDANCE: Attendance Regularization (active, 1) · CUSTOM WORKFLOWS: Request Hub · EMPINFO: Confirmation, Resignations, Helpdesk · LEAVE: Leave (2), Leave Cancel, Leave Comp Off, Restricted Holiday · LETTER: Letter Signature Approval.
- Tabs: Active · Closed. Date-range picker + search employee.
- Review list: Vikram T. · ITE0067 · Regularization for 06 Aug (missed swipe out) · requested 08 Aug · Approve / Reject buttons + view detail. Show also the 2 leave requests when "Leave" category is conceptually selected — fine to show only regularization list; keep one populated list + one empty-state example.
- Approve (success) and Reject (danger-outline) actions with confirmation styling.

### 11. documents.html — Document Center
- Hero/banner: "Everything in one place" + short copy + illustration (inline SVG, abstract shapes fine).
- Section "Documents": cards — My Documents (12 files) · Form 16 (2) · Company Policies (8) · Forms (5); each: icon + count + View all.
- Section "Requests": Letters card — Pending 0 · Closed 2 · "Request a letter" button (address proof, employment letter dropdown hint text ok).
- Recent documents table: Payslip_Jul2026.pdf · 01 Aug 2026 · Payroll; Form16_FY2025-26.pdf · 15 Jun 2026 · Tax; Hybrid-Work-Policy-v2.pdf · 05 Aug 2026 · Policy. Download icon-buttons.

## Hard requirements (all options)
- Static HTML + one shared `assets/styles.css` + one `assets/app.js` per option; vanilla JS only (tabs, modal, submenu toggle, live clock optional). Google Fonts via CDN allowed. All icons inline SVG.
- Semantic HTML, WCAG AA: text contrast ≥4.5:1, visible focus states, aria-labels on icon buttons, form labels visible (never placeholder-only), 44px touch targets, `cursor:pointer` on clickables.
- Responsive: 1440 / 1024 / 768 / 375. Sidebar collapses to drawer or top nav on mobile (hamburger). No horizontal scroll; tables/calendars scroll in their own container.
- Micro-interactions: 150–300ms ease transitions, hover/active states, `prefers-reduced-motion` respected.
- Numbers in tables use `font-variant-numeric: tabular-nums`.
- Every page complete and polished — no lorem ipsum, no dead-looking placeholders except designed empty states.