# 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