Overview
MULTI-CONTRACTS is a CRM (Customer Relationship Management) system developed by Axalize Incorporated, specialized for managing contracts, customers, inventory, and business revenue. The system features a powerful Custom Dashboard, built on a ReactJS SPA architecture, integrating realtime chat via Pusher and utilizing Redux / Redux-Saga for state management, with Laravel on the backend.
- URL: app.multicontracts.com.sg
- Development Unit: Axalize Incorporated
- Product Type: CRM System – Multi-channel Contract Management
- Target Users: Enterprises, sales teams, managers
Related Service: This custom theme was developed using my Figma to WordPress service, ensuring pixel-perfect translation of design assets, clean Gutenberg editing backend, and sub-2s loading speed.
Technical Information
| Attribute | Details |
|---|---|
| Frontend | ReactJS (SPA) |
| State Management | Redux, Redux-Saga |
| Realtime | Pusher (WebSocket) |
| Data Visualization | ChartJS |
| API | RESTful API |
| Backend | Laravel (PHP) |
| HTTP Client | Axios |
| Styling | CSS3, SASS, Bootstrap |
| Version Control | Git |
| Design Tool | Figma |
Key Features
Dashboard & Reporting
| Feature | Description |
|---|---|
| Overview Dashboard | Displays KPIs, revenue, and key metrics on a single screen |
| Visual Charts | ChartJS – bar, line, pie, and area charts |
| Revenue Reports | Revenue statistics by time period, customer, and product |
| Inventory Reports | Track stock quantities, stock-in/stock-out |
| Filter & Export Data | Filter by time range, export reports |
Contract Management
| Feature | Description |
|---|---|
| Create & Manage Contracts | Full CRUD for contracts with detailed information |
| Multi-contracts | Supports managing multiple contracts within a single system |
| Status Tracking | Contract pipeline: Draft → Active → Completed → Expired |
| Contract History | Records all changes and updates to contracts |
| Contract Expiry Alerts | Automatic notifications when a contract is about to expire |
Customer Management
| Feature | Description |
|---|---|
| Customer Profiles | Store detailed customer information |
| Customer Classification | Group, tag, and classify by criteria |
| Transaction History | Track all purchase and contract history |
| Contract Linking | 1 customer – multiple contracts (1:N relationship) |
Realtime Chat
| Feature | Description |
|---|---|
| Realtime Messaging | Internal communication between members via Pusher WebSocket |
| Instant Notifications | Push notifications for new messages |
| Chat History | Store and search conversation history |
Inventory Management
| Feature | Description |
|---|---|
| Product Management | Product list, quantities, and prices |
| Stock In/Out | Record stock receipt and dispatch vouchers |
| Inventory Tracking | Low stock alerts, inventory reports |
| Contract Linking | Attach products to corresponding contracts |
Revenue Management
| Feature | Description |
|---|---|
| Revenue Tracking | Revenue statistics by day/week/month/year |
| Revenue Charts | Visualization using ChartJS |
| Performance Analysis | Compare revenue by period, by employee, by customer |
| Payment Management | Track outstanding debts, payments, and invoices |
System Architecture
┌──────────────────────────────────────────────────┐
│ Frontend (ReactJS) │
│ ┌───────────┐ ┌───────────┐ ┌────────────────┐ │
│ │ Redux │ │ Redux │ │ ChartJS │ │
│ │ Store │ │ Saga │ │ Dashboard │ │
│ └───────────┘ └───────────┘ └────────────────┘ │
│ ┌───────────────────────────────────────────┐ │
│ │ Axios HTTP Client │ │
│ └───────────────────────────────────────────┘ │
└──────────────────────┬───────────────────────────┘
│ RESTful API
┌──────────────────────▼───────────────────────────┐
│ Backend (Laravel) │
│ ┌───────────┐ ┌───────────┐ ┌────────────────┐ │
│ │ API │ │ Auth │ │ Pusher │ │
│ │ Routes │ │ System │ │ Broadcast │ │
│ └───────────┘ └───────────┘ └────────────────┘ │
│ ┌───────────────────────────────────────────┐ │
│ │ Database (MySQL) │ │
│ └───────────────────────────────────────────┘ │
└──────────────────────────────────────────────────┘
Role in the Project
| Role | Description |
|---|---|
| Position | Main Frontend Developer |
| Primary Responsibility | Lead all Frontend development |
| Specific Tasks | Convert Figma → Production UI, API integration, state management with Redux/Redux-Saga, Pusher realtime chat integration, ChartJS dashboard development, performance & UX optimization |
Tags
CRM · contracts · customer management · dashboard · realtime chat · ReactJS · Redux · Pusher · ChartJS · inventory · revenue · Laravel · SPA
