This application is a modern inventory and business management system built with React and Supabase. It is designed to help organizations efficiently manage their inventory, suppliers, customers, transactions, and business operations in one centralized platform.
The system provides a secure authentication and role-based access control system, ensuring that only authorized users can access specific features. New users must receive administrator approval before accessing the platform, adding an extra layer of security and control.
| Layer | Technology |
|---|---|
| Frontend | React 18 + React Router v6 |
| Backend | Supabase (PostgreSQL + REST) |
| Charts | Recharts |
| Styling | CSS Modules (zero-config) |
| State | React Context + Custom Hooks |
src/
├── App.js # Root app with routing
├── index.js # Entry point
│
├── context/
│ ├── SupabaseContext.js # Supabase client + connect/disconnect
│ └── ToastContext.js # Global toast notifications
│
├── hooks/
│ ├── useItems.js # Items CRUD hook
│ ├── useCategories.js # Categories CRUD hook
│ ├── useSuppliers.js # Suppliers CRUD hook
│ └── useTransactions.js # Transactions + adjustStock hook
│
├── services/
│ ├── itemsService.js # Supabase queries for items
│ ├── categoriesService.js # Supabase queries for categories
│ ├── suppliersService.js # Supabase queries for suppliers
│ └── transactionsService.js # Supabase queries + adjustStock logic
│
├── components/
│ ├── layout/
│ │ ├── Layout.js # App shell
│ │ ├── Sidebar.js # Navigation sidebar
│ │ └── Topbar.js # Page header
│ │
│ ├── ui/
│ │ ├── Button.js # Reusable button (primary/secondary/ghost/danger)
│ │ ├── Badge.js # Status badges
│ │ ├── Modal.js # Dialog with overlay
│ │ ├── FormField.js # Input / Select / Textarea wrappers
│ │ ├── StatCard.js # KPI stat card
│ │ ├── EmptyState.js # Empty list placeholder
│ │ ├── Spinner.js # Loading indicator
│ │ └── Toast.js # Toast notification container
│ │
│ └── inventory/
│ ├── ItemForm.js # Add/Edit item form
│ └── AdjustStockModal.js # Stock adjustment modal
│
├── pages/
│ ├── SetupPage.js # Supabase connection screen
│ ├── DashboardPage.js # Overview + charts
│ ├── InventoryPage.js # Full inventory CRUD
│ ├── ReportsPage.js # Analytics + Recharts
│ ├── CategoriesPage.js # Category management
│ ├── SuppliersPage.js # Supplier management
│ └── TransactionsPage.js # Stock movement log
│
├── lib/
│ ├── utils.js # formatCurrency, getStockStatus, etc.
│ └── constants.js # SQL schema, transaction types
│
└── styles/
└── globals.css # CSS variables + reset
npm install- Create a project at supabase.com
- Go to SQL Editor and run the schema from the app's setup screen (or copy from
src/lib/constants.js) - Copy your Project URL and anon/public key from Settings → API
npm startThe app opens at http://localhost:3000. Enter your Supabase credentials on the setup screen to connect.
| Feature | Description |
|---|---|
| Dashboard | Stats overview, low-stock alerts, activity feed, stock health donut chart |
| Inventory | Full CRUD, search, filter by category/status, inline stock adjustments |
| Reports | Bar/Pie/Horizontal-bar charts (Recharts), KPI cards, reorder list |
| Categories | Manage categories with item counts and total values |
| Suppliers | Full CRUD with contact, email, phone |
| Transactions | Full audit log of every stock movement with filters |
| Stock Alerts | Badge counter in sidebar, alert banner on dashboard |
| Persistence | Supabase credentials saved to localStorage — stays connected on refresh |
categories (id, name, created_at)
suppliers (id, name, contact, email, phone, created_at)
items (id, name, sku, description, category_id, supplier_id,
quantity, min_quantity, reorder_qty, unit_price, location,
created_at, updated_at)
transactions (id, item_id, type[in|out|adjust], quantity, note, created_at)- Add a new page: Create
src/pages/MyPage.js+MyPage.module.css, add a route inApp.js, and a nav entry inSidebar.js - Add a new API call: Add the query to the relevant
src/services/*.jsfile, then expose it through the corresponding hook insrc/hooks/ - Change the color scheme: Edit CSS variables in
src/styles/globals.css