Pet Supply Inventory Management System with Real-time Chat
A modern, interactive inventory management system for pet supply stores featuring a real-time chat interface for querying products, checking stock levels, and receiving alerts.
Features
Chat Interface
- Real-time messaging system for inventory queries
- Natural language processing for product searches
- Automated responses with product information
- Stock level checking via chat commands
- Low stock alerts displayed in chat
- Command system for quick actions
Inventory Management
- Real-time inventory overview with statistics
- Product categorization (food, toys, accessories, healthcare, grooming)
- Stock level monitoring with visual indicators
- Filtering system (all products, low stock, out of stock)
- Sorting options (by name, stock level, category)
- Total inventory value calculation
Stock Alerts
- Automatic detection of low stock items
- Out-of-stock notifications
- Visual indicators (color-coded status)
- Alert severity levels (low, critical, out)
Tech Stack
- Framework: Next.js 14+ (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Date Handling: date-fns
- UUID Generation: uuid
- Real-time: Ready for Socket.io integration
Getting Started
Prerequisites
- Node.js 18+ installed
- npm or yarn package manager
Installation
- Clone or navigate to the project directory:
cd pet-supply-inventory-chat
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 in your browser
Chat Commands
The chat interface supports natural language queries and specific commands:
Product Search
search [product name] - Search for specific productsfind dog food - Find products matching keywords
Stock Checking
stock [product name] - Check stock levels for specific productsinventory cat litter - View inventory details
Alerts
low stock - View all products with low stockalert - Show current stock alerts
General
list all - Show all products in inventoryhelp - Display available commandscommands - Show command list
Example Queries
search dog food
stock flea treatment
low stock
list all
help
Project Structure
pet-supply-inventory-chat/
├── app/
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page with chat and inventory
├── components/
│ ├── ChatInterface.tsx # Chat component with message handling
│ └── InventoryPanel.tsx # Inventory overview panel
├── lib/
│ └── mockData.ts # Sample product data
├── types/
│ └── index.ts # TypeScript type definitions
├── public/ # Static assets
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── README.md # This file
Data Models
Product
interface Product {
id: string;
name: string;
category: 'food' | 'toys' | 'accessories' | 'healthcare' | 'grooming' | 'other';
stock: number;
minStock: number;
price: number;
supplier?: string;
lastUpdated: Date;
}
Chat Message
interface ChatMessage {
id: string;
userId: string;
userName: string;
content: string;
timestamp: Date;
type: 'text' | 'system' | 'alert' | 'query';
productQuery?: ProductQuery;
}
Stock Alert
interface StockAlert {
id: string;
product: Product;
message: string;
severity: 'low' | 'critical' | 'out';
timestamp: Date;
acknowledged: boolean;
}
Features in Detail
Chat Interface (ChatInterface.tsx)
- Real-time message display with auto-scroll
- Message type differentiation (user, system, alert, query)
- Natural language processing for commands
- Product search with fuzzy matching
- Stock level queries with detailed responses
- Low stock alert generation
- Help system with command list
- Keyboard shortcuts (Enter to send)
Inventory Panel (InventoryPanel.tsx)
- Product statistics overview
- Total inventory value calculation
- Low stock and out-of-stock counters
- Filtering by stock status
- Sorting by multiple criteria
- Visual stock level indicators
- Color-coded status badges
- Progress bars for stock levels
- Detailed product information cards
Sample Products
The system comes with 10 sample products including:
- Premium Dog Food
- Cat Litter Box
- Squeaky Dog Toy Set
- Flea & Tick Treatment
- Cat Food - Salmon Flavor
- Pet Grooming Brush (out of stock example)
- Retractable Dog Leash
- Bird Seed Mix
- Aquarium Water Conditioner
- Rabbit Hutch Bedding
Future Enhancements
Development Scripts
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run linter
npm run lint
Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributing
This is a demo project. Feel free to fork and modify for your needs.
License
MIT License - feel free to use this project for commercial or personal purposes.
Support
For issues or questions, please create an issue in the project repository.
Built with Next.js, TypeScript, and Tailwind CSS
