A comprehensive, multi-locale inventory management frontend application built with modern web technologies. Part of the Wagtail ecosystem, this UI provides enterprise-grade features for managing inventory, procurement, sales, audit operations, and more.
The Inventory UI is a sophisticated Next.js 16-based application designed to serve as a complete inventory management system. It features:
- Multi-language Support: Built-in internationalization (i18n) supporting 6 languages: English, Spanish, French, Arabic, Kinyarwanda, and Swahili
- Authentication & Authorization: Secure auth flows with role-based access control
- Real-time Data Management: TanStack Query for efficient server state management
- Rich UI Components: Shadcn UI component library with customizable theming
- Advanced Features: Bulk operations, cycle counts, reservations, procurement, sales, audit trails, and comprehensive reporting
- Framework: Next.js 16 with TypeScript
- UI Library: React 19
- State Management: Zustand and TanStack Query
- Styling: Tailwind CSS with Shadcn UI
- Internationalization: next-intl
- Form Handling: React Hook Form with Zod schema validation
- Data Visualization: Recharts
- Testing: Vitest with React Testing Library
- Linting: ESLint 9
- Package Manager: Yarn 1.22.22
src/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── [locale]/ # Locale-specific routes
├── components/ # Reusable UI components
│ ├── ui/ # Shadcn UI components
│ ├── layout/ # Layout components
│ ├── data-table/ # Data table components
│ └── *.tsx # Feature components
├── features/ # Feature modules
│ ├── auth/ # Authentication flows
│ ├── dashboard/ # Dashboard pages
│ ├── inventory/ # Inventory management
│ ├── procurement/ # Procurement workflows
│ ├── sales/ # Sales management
│ ├── audit/ # Audit trails
│ ├── cycle-counts/ # Cycle counting features
│ ├── reservations/ # Reservation system
│ ├── reports/ # Reporting features
│ ├── settings/ # Settings pages
│ ├── bulk-operations/ # Bulk operation features
│ └── [other features]/
├── hooks/ # Custom React hooks
├── i18n/ # Internationalization setup
├── lib/ # Utilities and helpers
│ ├── api-client.ts # API communication
│ ├── auth-store.ts # Auth state management
│ └── [utilities]/
└── types/ # TypeScript type definitions
__tests__/ # Test files (mirrors src structure)
public/locales/ # Locale JSON files (ar, en, es, fr, rw, sw)
scripts/ # Build and utility scripts
- Authentication: Secure login, registration, and session management
- Dashboard: Overview and analytics
- Inventory Management: Track stock, locations, and movements
- Procurement: Manage purchase orders and suppliers
- Sales: Handle sales orders and fulfillment
- Cycle Counts: Perform physical inventory counts
- Reservations: Reserve items for orders
- Audit Trails: Complete activity logging
- Reports: Comprehensive reporting and analytics
- Settings: System configuration and preferences
- Bulk Operations: Perform batch operations efficiently
- Multi-language: Full i18n support with 6 languages
- Node.js 18+ (recommended 20+)
- Yarn 1.22.22+
- Git
# Clone the repository
git clone <repository-url>
cd the-inventory-ui
# Install dependencies using Yarn
yarn install# Start the development server
yarn dev
# The application will be available at http://localhost:3000The development server supports hot module reloading, so changes will automatically refresh in your browser.
# Build the application for production
yarn build
# Start the production server
yarn startyarn dev- Start development server with locale mergingyarn build- Build for productionyarn start- Start production serveryarn lint- Run ESLintyarn test- Run tests onceyarn test:watch- Run tests in watch modeyarn locale:merge- Merge all locale filesyarn locale:rebuild-en- Rebuild English localeyarn locale:parity- Check locale JSON parity
The application supports 6 languages out of the box:
- en - English
- es - Spanish
- fr - French
- ar - Arabic
- rw - Kinyarwanda
- sw - Swahili
Locale files are stored in public/locales/ and used via the next-intl library. Routes are automatically prefixed with the locale, e.g., /en/dashboard, /es/dashboard.
# Merge all locale features into main locale files
yarn locale:merge
# Rebuild English locale from scratch
yarn locale:rebuild-en
# Check parity between locale JSON files
yarn locale:parityThis project uses Vitest with React Testing Library for unit and component testing.
# Run tests once
yarn test
# Run tests in watch mode
yarn test:watch
# Run specific test file
yarn test __tests__/features/auth/login-page.test.tsxTests are located in __tests__/ directory, mirroring the src/ structure.
- Linting: ESLint 9 configuration for code style consistency
- TypeScript: Full type safety across the codebase
- Formatting: Tailwind CSS for consistent styling
# Run linter
yarn lintComponents are built using Shadcn UI with Tailwind CSS, providing a consistent and accessible design system.
TanStack Query (React Query) manages server state, caching, and synchronization with the backend API.
Zustand provides lightweight, scalable client-side state management for complex features.
React Hook Form combined with Zod provides type-safe, performant form handling.
Create a .env.local file in the project root for local environment variables:
NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
NEXT_PUBLIC_API_TIMEOUT=30000Contributions are welcome! Please ensure:
- Code follows the existing style and TypeScript conventions
- New features include tests
- Commit messages are clear and descriptive
- All tests pass (
yarn test) - Linting passes (
yarn lint)
This project is part of the Wagtail ecosystem. See LICENSE file for details.
- Next.js Documentation
- React Documentation
- Shadcn UI
- TanStack Query
- Tailwind CSS
- next-intl Documentation
For issues, questions, or contributions, please open a GitHub issue or submit a pull request.