{"id":50992981,"url":"https://github.com/nrbnayon/track-fleet-pro-web","last_synced_at":"2026-06-20T05:30:29.487Z","repository":{"id":331580166,"uuid":"1129604855","full_name":"nrbnayon/track-fleet-pro-web","owner":"nrbnayon","description":"A modern, full-featured fleet and parcel tracking management system built with Next.js 16, React 19, and TypeScript. Designed for logistics companies to manage drivers, track parcels in real-time, and handle seller operations with an intuitive dashboard interface.","archived":false,"fork":false,"pushed_at":"2026-02-23T03:40:30.000Z","size":4586,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-23T09:24:59.663Z","etag":null,"topics":["nextjs16","pwa-apps","saas-application","typescript","website"],"latest_commit_sha":null,"homepage":"https://track-fleet-pro-web.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nrbnayon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-07T10:20:56.000Z","updated_at":"2026-02-23T03:40:33.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/nrbnayon/track-fleet-pro-web","commit_stats":null,"previous_names":["nrbnayon/track-fleet-pro-web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nrbnayon/track-fleet-pro-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrbnayon%2Ftrack-fleet-pro-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrbnayon%2Ftrack-fleet-pro-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrbnayon%2Ftrack-fleet-pro-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrbnayon%2Ftrack-fleet-pro-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nrbnayon","download_url":"https://codeload.github.com/nrbnayon/track-fleet-pro-web/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nrbnayon%2Ftrack-fleet-pro-web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34558892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs16","pwa-apps","saas-application","typescript","website"],"created_at":"2026-06-20T05:30:28.505Z","updated_at":"2026-06-20T05:30:29.479Z","avatar_url":"https://github.com/nrbnayon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Track Fleet Pro - Web\n\nA modern, full-featured fleet and parcel tracking management system built with Next.js 16, React 19, and TypeScript. Designed for logistics companies to manage drivers, track parcels in real-time, and handle seller operations with an intuitive dashboard interface.\n\n## 🚀 Features\n\n### Core Features\n\n- **Real-Time Parcel Tracking**: Live GPS tracking for parcels with interactive maps (Leaflet)\n- **Multi-Role Dashboard**: Dedicated dashboards for Super Admins and Seller Admins\n- **Driver Management**: Comprehensive driver profile management and assignment\n- **Parcel Management**: Create, manage, and track parcel shipments\n- **Seller Management**: Manage seller accounts and operations (Super Admin only)\n- **Analytics \u0026 Reporting**: Detailed analytics with charts and export functionality (PDF/Excel)\n- **User Authentication**: Secure login, registration, and OTP verification\n- **Multi-Language Support**: Full internationalization (i18n) support\n- **Progressive Web App (PWA)**: Offline capability with service worker support\n\n### Advanced Features\n\n- **Role-Based Access Control (RBAC)**: Granular permission management\n- **Real-Time Notifications**: WebSocket-based notifications system\n- **Export Capabilities**: Export data to PDF and Excel formats\n- **Google Maps Integration**: Enhanced mapping and location features\n- **Responsive Design**: Fully responsive UI with mobile-first approach\n- **Dark/Light Theme Support**: Theme switching with persistence\n\n## 🛠️ Tech Stack\n\n### Frontend\n\n- **Framework**: Next.js 16.0.10\n- **UI Library**: React 19.2.1\n- **Language**: TypeScript\n- **Styling**: Tailwind CSS 4\n- **UI Components**: Radix UI\n- **Icons**: Hugeicons, Tabler Icons, Lucide React\n- **Forms**: React Hook Form with Zod validation\n\n### State Management \u0026 Data\n\n- **State Management**: Redux Toolkit with Redux hooks\n- **Maps**: Leaflet \u0026 React Leaflet with Google Maps API integration\n- **Charts**: Recharts\n\n### Utilities \u0026 Libraries\n\n- **Authentication**: jose (JWT handling)\n- **Export**: ExcelJS, jsPDF with AutoTable\n- **Notifications**: Sonner (Toast notifications)\n- **Motion**: Framer Motion animations\n- **Form Validation**: Zod with React Hook Form resolvers\n\n### Development Tools\n\n- **Linting**: ESLint\n- **PWA Support**: next-pwa with Workbox\n- **Node Version**: Requires Node.js with npm\n\n## 📋 Prerequisites\n\n- Node.js 18+ and npm 9+\n- Modern web browser with JavaScript enabled\n- Google Maps API key (for mapping features)\n\n## 🔧 Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd track-fleet-pro-web\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Configure environment variables**\n   Create a `.env.local` file in the root directory with required variables:\n\n   ```env\n   NEXT_PUBLIC_API_URL=\u003cyour-api-url\u003e\n   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=\u003cyour-google-maps-api-key\u003e\n   NEXT_PUBLIC_APP_URL=\u003cyour-app-url\u003e\n   ```\n\n4. **Run development server**\n\n   ```bash\n   npm run dev\n   ```\n\n   Open [http://localhost:3000](http://localhost:3000) in your browser\n\n## 📦 Available Scripts\n\n- **`npm run dev`** - Start development server with Webpack\n- **`npm run build`** - Build for production with optimization\n- **`npm start`** - Start production server\n- **`npm run lint`** - Run ESLint for code quality checks\n\n## 📁 Project Structure\n\n```\ntrack-fleet-pro-web/\n├── app/                          # Next.js app directory\n│   ├── (auth)/                   # Authentication pages\n│   │   ├── login/\n│   │   ├── signup/\n│   │   ├── forgot-password/\n│   │   ├── reset-password/\n│   │   ├── verify-otp/\n│   │   └── reset-success/\n│   ├── (landing)/                # Landing pages\n│   │   ├── track-parcel/\n│   │   ├── about-us/\n│   │   └── coverage/\n│   ├── (roles)/                  # Role-based layouts\n│   │   ├── seller-admin/         # Seller Admin dashboard\n│   │   ├── super-admin/          # Super Admin dashboard\n│   │   └── (shared)/             # Shared role components\n│   ├── api/                      # API routes\n│   │   └── translate/            # Translation API\n│   ├── layout.tsx                # Root layout\n│   ├── page.tsx                  # Home page\n│   └── globals.css               # Global styles\n├── components/                   # Reusable React components\n│   ├── Auth/                     # Authentication components\n│   ├── Common/                   # Common components\n│   ├── Landing/                  # Landing page components\n│   ├── Notifications/            # Notification components\n│   ├── SellerAdmin/              # Seller Admin specific components\n│   ├── SupperAdmin/              # Super Admin components\n│   ├── Sidebar/                  # Navigation sidebar\n│   ├── Shared/                   # Shared UI components\n│   └── ui/                       # Base UI components (Radix UI wrapped)\n├── context/                      # React Context providers\n│   └── LanguageContext.tsx       # Language/i18n context\n├── hooks/                        # Custom React hooks\n│   ├── usePermission.ts          # Role-based permission checks\n│   ├── useTranslate.ts           # Translation hook\n│   ├── useUser.ts                # User data hook\n│   ├── useLogout.ts              # Logout functionality\n│   └── use-mobile.ts             # Mobile detection\n├── lib/                          # Utility functions \u0026 helpers\n│   ├── utils.ts                  # Common utilities\n│   ├── formDataValidation.ts     # Form validation logic\n│   ├── exportUtils.ts            # Export to PDF/Excel utilities\n│   └── redux/                    # Redux store configuration\n├── public/                       # Static assets\n│   ├── icons/\n│   ├── images/\n│   ├── drivers/\n│   └── sw.js                     # Service worker\n├── types/                        # TypeScript type definitions\n│   ├── driver.ts\n│   ├── parcel.ts\n│   ├── seller.ts\n│   ├── notification.ts\n│   └── users.ts\n├── data/                         # Mock/sample data\n│   ├── allParcelsData.ts\n│   ├── allDriversData.ts\n│   ├── allSellersData.ts\n│   └── statsData.ts\n├── HowToLiveMapTrack/            # Live tracking implementation\n│   ├── _ParcelMapLiveTracking.tsx\n│   ├── _TrackParcelModal.tsx\n│   └── _serverwebsocket.js\n├── next.config.ts               # Next.js configuration\n├── tsconfig.json                # TypeScript configuration\n├── tailwind.config.ts           # Tailwind CSS configuration\n└── package.json                 # Dependencies \u0026 scripts\n```\n\n## 🔐 Authentication \u0026 Authorization\n\nThe application supports:\n\n- **Authentication Methods**: Email/Password with OTP verification\n- **Authorization**: Role-based access control (RBAC) with routes\n  - **Super Admin**: Full system access, manage all entities\n  - **Seller Admin**: Manage own seller operations, drivers, and parcels\n  - **Customer**: Track parcels and view coverage\n\n## 🗺️ Real-Time Features\n\n### Live Parcel Tracking\n\n- WebSocket connection for real-time parcel position updates\n- Interactive maps using Leaflet/Google Maps\n- Route visualization and ETA calculations\n\n### WebSocket Server\n\n- Located in `HowToLiveMapTrack/_serverwebsocket.js`\n- Handles live location streaming for tracked parcels\n\n## 🌐 Internationalization (i18n)\n\nMulti-language support with:\n\n- Language context management (`LanguageContext.tsx`)\n- `useTranslate` hook for easy text translation\n- API endpoint for dynamic translations (`/api/translate`)\n- Persistent language preference\n\n## 📊 Dashboard Features\n\n### Super Admin Dashboard\n\n- System-wide analytics and statistics\n- Seller management and performance metrics\n- Driver management and assignment\n- Parcel tracking and statistics\n- Revenue and operational insights\n\n### Seller Admin Dashboard\n\n- Company-specific analytics\n- Driver management\n- Parcel management and tracking\n- Performance metrics\n- Customer communications\n\n## 📁 Data Export\n\nExport capabilities for:\n\n- **PDF Reports**: Using jsPDF with formatted tables\n- **Excel Files**: Using ExcelJS for complex spreadsheets\n- Includes drivers, parcels, sellers, and custom analytics\n\n## 🎨 UI/UX\n\n- **Component Library**: Custom Radix UI wrapper components\n- **Animations**: Framer Motion for smooth interactions\n- **Icons**: Multiple icon libraries (Hugeicons, Tabler, Lucide)\n- **Responsive**: Mobile-first responsive design\n- **Dark Mode**: Full dark/light theme support with next-themes\n\n## 📱 PWA Support\n\nThe application includes Progressive Web App features:\n\n- Service Worker for offline functionality\n- App manifest for installability\n- Next PWA configuration for caching strategies\n- Workbox for advanced cache management\n\n## 🔍 Code Quality\n\n- **Linting**: ESLint configuration for code standards\n- **TypeScript**: Full type safety throughout the application\n- **Validation**: Zod schema validation for forms and API responses\n\n## 🚀 Deployment\n\n### Build for Production\n\n```bash\nnpm run build\nnpm start\n```\n\n### Environment Configuration\n\nEnsure all required environment variables are set in production:\n\n```env\nNEXT_PUBLIC_API_URL=\u003cproduction-api-url\u003e\nNEXT_PUBLIC_GOOGLE_MAPS_API_KEY=\u003cproduction-api-key\u003e\nNEXT_PUBLIC_APP_URL=\u003cproduction-app-url\u003e\n```\n\n### Supported Platforms\n\n- Vercel (recommended for Next.js)\n- Docker containers\n- Traditional Node.js hosting\n- Static hosting with API proxy\n\n## 🤝 Contributing\n\n1. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n2. Commit changes (`git commit -m 'Add AmazingFeature'`)\n3. Push to branch (`git push origin feature/AmazingFeature`)\n4. Open a Pull Request\n\n## 📄 License\n\nThis project is proprietary and confidential. Unauthorized copying or distribution is prohibited.\n\n## 📞 Support\n\nFor issues, questions, or support:\n\n- Create an issue in the repository\n- Contact the development team\n- Check documentation in project files\n\n## 🔗 Related Resources\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [React Documentation](https://react.dev)\n- [Tailwind CSS](https://tailwindcss.com)\n- [Radix UI](https://www.radix-ui.com)\n- [Redux Toolkit](https://redux-toolkit.js.org)\n\n---\n\n**Version**: 1.0.0  \n**Last Updated**: January 2026  \n**Maintained By**: Track Fleet Pro Team\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnrbnayon%2Ftrack-fleet-pro-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnrbnayon%2Ftrack-fleet-pro-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnrbnayon%2Ftrack-fleet-pro-web/lists"}