Axion - Unified HR/Payroll/Finance/Employee System

A comprehensive dashboard UI wireframe for a unified HR/Payroll/Finance/Employee system with scheduling and timecards. Built with React, TypeScript, and Tailwind CSS.

Features

Authentication & Security

• Login System: Secure authentication with role-based access
• Protected Routes: All pages require authentication
• Session Management: Persistent login sessions
• Demo Accounts: Pre-configured accounts for all roles

Role-Based Access

• Employee: Clock in/out, view timecards, schedule, documents, submit receipts
• Manager: All employee features plus team management, approvals, incident reports
• HR: Employee management, disciplinary actions, performance reviews, documents
• Payroll: Payroll runs, expenditures, invoices, OCR review, financial reports
• Admin: System settings, user management, automation workflows, audit logs

User Management

• Create Users: Add new employees/users with full details
• Edit Users: Update user information and roles
• Delete Users: Remove users from the system
• Role Assignment: Assign appropriate roles (Employee, Manager, HR, Payroll, Admin)
• Search & Filter: Quickly find users in the system

Database

• Mock Database: LocalStorage-based data persistence
• CRUD Operations: Full create, read, update, delete functionality
• Data Persistence: Data persists across browser sessions
• Easy Migration: Structure ready for backend API integration

Key Screens

1. Dashboard - Role-specific home screen with relevant metrics and quick actions
2. Clock In/Out - Large, intuitive time tracking interface
3. Timecards - Weekly/monthly views with approval status
4. Scheduling - Visual calendar for shifts with drag-and-drop support
5. Team Management - Manager views for team timecards and schedules
6. Receipts/Invoices - Upload with OCR processing and review queue
7. Disciplinary Actions - Incident reporting and HR review workflow
8. Employees - Comprehensive employee management and details
9. Payroll Runs - Payroll processing with preview and approval
10. OCR Review - Queue for reviewing OCR-extracted receipt data
11. System Settings - Configuration for users, API keys, automation, branding
12. Audit Logs - Complete audit trail with filtering and detail views

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist directory.

Project Structure

src/
├── components/
│   └── Layout/
│       ├── TopBar.tsx      # Top navigation bar
│       ├── Sidebar.tsx     # Role-filtered sidebar navigation
│       └── Layout.tsx      # Main layout wrapper
├── context/
│   └── UserContext.tsx     # User state and role management
├── pages/
│   ├── Dashboard.tsx       # Role-specific dashboard
│   ├── ClockInOut.tsx      # Time tracking interface
│   ├── Timecards.tsx       # Employee timecard view
│   ├── Schedule.tsx         # Employee schedule view
│   ├── TeamTimecards.tsx   # Manager team timecards
│   ├── TeamSchedules.tsx   # Manager team scheduling
│   ├── Receipts.tsx        # Receipt/invoice upload
│   ├── DisciplinaryActions.tsx  # Incident reports & HR review
│   ├── Employees.tsx       # Employee management
│   ├── PayrollRuns.tsx     # Payroll processing
│   ├── OCRReview.tsx       # OCR review queue
│   ├── SystemSettings.tsx  # Admin system settings
│   ├── AuditLogs.tsx       # Audit log viewer
│   └── Placeholder.tsx    # Placeholder for future pages
├── types.ts                # TypeScript type definitions
├── App.tsx                 # Main app with routing
└── main.tsx                # Application entry point

Login & Demo Accounts

The application includes a login screen with pre-configured demo accounts:

Role	Email	Password
Admin	admin@company.com	admin123
HR	hr@company.com	hr123
Payroll	payroll@company.com	payroll123
Manager	manager@company.com	manager123
Employee	employee@company.com	employee123

To test different roles, simply log out and log in with a different account.

User Management

Admin users can access the "User & Role Management" page from the sidebar to:

• Create new users
• Edit existing users
• Delete users
• Assign roles
• Search and filter users

All changes are persisted in localStorage and will remain after page refresh.

Technologies Used

• React 18 - UI library
• TypeScript - Type safety
• React Router - Navigation
• Tailwind CSS - Styling
• Vite - Build tool
• Lucide React - Icons
• date-fns - Date formatting

Notes

• This is a UI wireframe/prototype. Backend integration would be needed for full functionality.
• All data is currently mock/placeholder data.
• The OCR processing, n8n workflows, and other integrations are represented in the UI but not implemented.
• Role-based navigation automatically filters menu items based on user role.

License

MIT