A modern, real-time mobile device distribution dashboard with AI-powered analytics. Built with React, TypeScript, and Tailwind CSS.
- Real-time overview of distribution operations
- Key performance metrics and statistics
- Interactive sales trend charts with Recharts
- Inventory status visualization with pie charts
- Recent activity feed
- System alerts and notifications
- Performance metrics tracking
- Track mobile device inventory in real-time
- Stock level monitoring with visual indicators
- Low stock and out-of-stock alerts
- Product search and filtering by:
- Name or SKU
- Category
- Stock status
- Edit inventory items (stock, price, minimum levels)
- Total inventory value calculation
- AI-powered sales analytics
- Performance metrics visualization
- Trend analysis
- Custom reporting
- Order tracking and management
- Status monitoring (pending, delivered, etc.)
- Customer information
- Revenue tracking
- Responsive mobile-first design
- Real-time data updates with Socket.IO
- Dark mode support (via Tailwind)
- Secure authentication system
- Modern UI with Lucide icons
- Frontend Framework: React 18.2.0
- Type Safety: TypeScript
- Build Tool: Vite 4.1.0
- Styling: Tailwind CSS 3.2.0
- Routing: React Router DOM 6.8.0
- Charts: Recharts 2.5.0
- Icons: Lucide React 0.263.0
- Real-time: Socket.IO Client 4.7.0
- Date Handling: date-fns 2.29.0
mobile-ai-inventory/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Header.jsx
│ │ ├── Layout.jsx
│ │ ├── LoadingSpinner.jsx
│ │ ├── MobileNav.jsx
│ │ └── Sidebar.jsx
│ ├── contexts/ # React context providers
│ │ ├── AuthContext.jsx
│ │ └── DataContext.jsx
│ ├── pages/ # Main application pages
│ │ ├── Analytics.jsx
│ │ ├── Dashboard.jsx
│ │ ├── Inventory.jsx
│ │ ├── Login.jsx
│ │ ├── Orders.jsx
│ │ └── Settings.jsx
│ ├── App.tsx # Main app component
│ ├── main.tsx # Application entry point
│ └── index.css # Global styles
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json
- Node.js 16.x or higher
- npm or pnpm
- Clone the repository:
git clone https://github.com/spence709/mobile-ai-inventory.git
cd mobile-ai-inventory- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locally
The main dashboard provides a comprehensive overview with:
- Total inventory count and trends
- Active orders tracking
- Revenue metrics
- Low stock alerts
- Interactive charts for sales trends and inventory status
- Recent activity feed
- System health alerts
Advanced inventory control features:
- Card-based product display
- Real-time stock level indicators
- Color-coded status badges (In Stock, Low Stock, Out of Stock)
- Quick edit functionality for stock levels, prices, and minimum thresholds
- Search by product name or SKU
- Filter by category and stock status
- Visual stock level progress bars
Manages application data including:
- Inventory items
- Orders
- Analytics data
- Real-time updates
- CRUD operations for inventory
Handles user authentication and authorization
The project uses Tailwind CSS. Customize the theme in tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
primary: { /* your colors */ },
success: { /* your colors */ },
warning: { /* your colors */ },
error: { /* your colors */ }
}
}
}
}Update the DataContext to connect to your backend API or database.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
Project Link: https://github.com/spence709/mobile-ai-inventory