152 lines
5.3 KiB
Markdown
152 lines
5.3 KiB
Markdown
# 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:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Open your browser to `http://localhost:5173`
|
|
|
|
### Building for Production
|
|
|
|
```bash
|
|
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
|
|
|