Workflocity
Project Name: Workflocity (Modern SaaS EMS) Design Style: Clean, Enterprise-Grade, Minimalist (like Linear, Raycast, or Shadcn/UI). Use a crisp font (Inter or Geist), high contrast text, and subtle borders. Primary Color: Indigo/Violet. Device: Desktop Web & Mobile Responsive. Scope of Work: Create a high-fidelity UI/UX design for a comprehensive Employee Management System (EMS). The design must include specific user flows, interaction states (hover, active, disabled), and minute details (modals, slide-overs, empty states). 1. Marketing Website (Long Scroll - 13-15 Sections): Header: Sticky nav with Product, Solutions, Pricing, "Login", "Get Started" CTA. Hero Section: High-converting H1, subtext, email capture, and a hero image showing the Dashboard UI. Problem/Solution: 3-4 sections detailing the chaos of manual HR vs. the order of Workflocity. Features Grid: Bento-grid style layout covering Tasks, Attendance, Assets, and AI. Social Proof: Client logos and scrolling testimonials. Detailed Use Cases: Sections for "For HR," "For Developers," "For Managers." Footer: Sitemap, legal links, newsletter signup. 2. Authentication & Onboarding Flow: Screens: Login, Register, Forgot Password, Reset Password. Organization Logic: A split screen asking "Create Organization" or "Join Existing." Join Flow: Enter Org Code -> "Waiting for Approval" status screen (illustrated empty state). Create Flow: Org Name, Logo Upload, Domain setup. 3. Core Dashboard (Role-Based): Create distinct dashboard views for: Employee (My Tasks, Attendance Widget, Leave Balance), Manager (Team Activity, Approval Requests), and Admin (Org Health, Billing, User Management). 4. Advanced Task Management (The Core Feature): Project Views: Tabbed interface for Board (Kanban), Timeline (Gantt), Calendar, and List views. Template Logic: A "Create New Board" modal showcasing templates: Standard Project: Phases -> Milestones -> Tasks -> Subtasks. Agile/Sprint: Backlog column vs. Active Sprint column. Waterfall: Dependency-focused view. Sprint Mechanics: Design a specific screen for "Sprint Planning" showing a drag-and-drop interface to move items from "Backlog" to "Current Sprint." Include buttons for "Start Sprint" and "Close Sprint." Task Details: A slide-over panel for a single task showing: Title, Description (Rich Text), Subtasks (with checkboxes), Comments, Attachments, and History. 5. Attendance & Leave (Time Tracking): The Timer: A prominent, modern widget with a pulsating red/green dot indicating "Live Status." Shows Hours:Minutes:Seconds. Buttons for: Check-in, Check-out, Coffee Break. Attendance Views: Calendar view showing status (Present, Absent, Late, Half-day). Leave Management: "Apply for Leave" modal with date picker and reason. Manager Approval: A specific "Requests" tab showing a list of Leave/Attendance regularization requests with "Approve (Check)" and "Reject (X)" action buttons. 6. Asset Management: Table View: Columns for Asset Name, Serial No, Assigned To, Status (Active, Repair, Expired), and Renewal Date. Actions: Hover actions on rows to "Recover Asset," "Send for Repair," or "Renew License." Detail View: A card showing asset history (who held it previously). 7. Files & Smart Checklists: File Vault: A grid view (like Google Drive) with folders and file previews. Onboarding Checklists: A specialized UI where users see a list of required documents (e.g., "Upload ID", "Sign NDA"). Action: Each item has an "Upload" button. State: Progress bar at the top updates as items are marked "Completed" or "Verified." 8. AI Assistant ("Workflocity AI"): UI: A floating button (bottom right) that expands into a chat interface. Interaction: Show the user typing "Apply for sick leave tomorrow," and the AI returning a "Leave Application Card" ready for confirmation. Command Bar: A "CMDK" style command palette (Ctrl+K) showing quick actions like "Create Task," "Check In," "Search Files."