A comprehensive waste management administration system built with React and Vite. This web application provides administrators with tools to manage users, trucks, job orders, collection points, and schedules.
| Technology | Version |
|---|---|
| React | ^19.0.0 |
| Vite | ^6.1.0 |
| Material UI (MUI) | ^6.4.11 |
| MUI Icons | ^6.4.5 |
| MUI X Charts | ^7.28.0 |
| MUI X Date Pickers | ^8.3.0 |
| React Router DOM | ^7.6.0 |
| Axios | ^1.9.0 |
| Firebase | ^11.6.0 |
| Leaflet | ^1.9.4 |
| React Leaflet | ^5.0.0 |
| Framer Motion | ^12.4.4 |
| Emotion (React & Styled) | ^11.14.0 |
| date-fns | ^4.1.0 |
| jwt-decode | ^4.0.0 |
| Technology | Description |
|---|---|
| Spring Boot | Java-based REST API |
| Firebase Firestore | NoSQL Database |
| Firebase Auth | Authentication |
| Render | Backend Hosting |
| Tool | Version |
|---|---|
| ESLint | ^9.19.0 |
| Node.js | 18+ (recommended) |
| npm | 9+ |
- Dashboard - Overview with statistics and charts
- Users Management - CRUD operations for all user types with role-based filtering
- Trucks Management - Fleet tracking with automated status updates based on driver assignment
- Job Order Requests - Manage collection requests with trash weight and notes
- Collection Points - Interactive map with public dumpsites, private entities, and job orders
- Collection Schedule - Schedule management for waste collection
- Payment Management - Track and manage payments
- Node.js 18 or higher
- npm 9 or higher
- Git
-
Clone the repository
git clone https://github.com/MarckRamon/GrabTrash-Web.git cd GrabTrash-Web -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open in browser
http://localhost:5173
| Command | Description |
|---|---|
npm run dev |
Start development server with HMR |
npm run build |
Build for production |
npm run preview |
Preview production build locally |
npm run lint |
Run ESLint for code quality |
-
Install Firebase CLI
npm install -g firebase-tools
-
Login to Firebase
firebase login
-
Build the project
npm run build
-
Deploy to Firebase
firebase deploy --only hosting
The backend is hosted on Render at:
https://grabtrash-backend.onrender.com/api
Backend deployment is handled through Render's automatic deployment from the GitHub repository.
| Field | Value |
|---|---|
admin@gmail.com |
|
| Password | 123456 |
| Role | Admin |
| Field | Value |
|---|---|
michael12@gmail.com |
|
| Password | 123456 |
| Role | Driver |
| Field | Value |
|---|---|
grabtrash@gmail.com |
|
| Password | 123456 |
| Role | Customer |
| Field | Value |
|---|---|
miggyjunks@gmail.com |
|
| Password | 123456 |
| Role | Private Entity |
- Added role-based filtering in "Sort by" dropdown (Admin, Customers, Driver, Private Entity)
- Fixed 405 error when updating user locations
- Added Private Entity and Driver options to Edit User dialog
- Automated truck status based on driver assignment:
- In Use when driver is assigned
- Available when driver is removed
- Added fallback mechanism for driver removal
- Added Trash Weight column displaying weight in kg
- Added Notes column for user notes
- Fixed private entity red pins not displaying on map
- Now correctly fetches data from
/private-entitiesendpoint
- Updated website title to "GrabTrash"
- Updated favicon to GrabTrash logo
src/
├── api/
│ └── axios.js # Axios configuration and API helpers
├── components/
│ ├── AdminLayout.jsx # Main admin layout wrapper
│ ├── EditUserDialog.jsx # User edit modal
│ └── ...
├── CollectionPoints.jsx # Map with collection points
├── CollectionSchedule.jsx # Schedule management
├── Dashboard.jsx # Main dashboard
├── JobOrderRequest.jsx # Job orders table
├── Trucks.jsx # Trucks management
├── Users.jsx # Users management
├── firebase.js # Firebase configuration
└── main.jsx # App entry point
This project is private and proprietary.
- GrabTrash Development Team