{"id":25538803,"url":"https://github.com/arnobt78/Stock-Inventory-Management-System--NextJS-FullStack","last_synced_at":"2025-12-30T20:16:31.788Z","repository":{"id":278368186,"uuid":"935385921","full_name":"arnobt78/Stock-Inventory-Managment--NextJS","owner":"arnobt78","description":"Stock Inventory is a ReactJS-based inventory management application designed to help you manage your product stock efficiently. This application includes features such as product listing, adding new products, editing existing products, and filtering products based on various criteria.","archived":false,"fork":false,"pushed_at":"2025-02-19T11:36:14.000Z","size":329,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-19T12:27:27.235Z","etag":null,"topics":["inventory-app","inventory-control","inventory-management-system","mongodb","next-themes","nextjs","prisma","react-dom","react-icons","reactjs","shadcn-ui","stock-inventory","tailwindcss","tanstack-table","typescript","zod","zustand"],"latest_commit_sha":null,"homepage":"","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/arnobt78.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}},"created_at":"2025-02-19T11:09:09.000Z","updated_at":"2025-02-19T11:36:18.000Z","dependencies_parsed_at":"2025-02-19T12:38:00.196Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Stock-Inventory-Managment--NextJS","commit_stats":null,"previous_names":["arnobt78/stock-inventory-managment--nextjs"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FStock-Inventory-Managment--NextJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FStock-Inventory-Managment--NextJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FStock-Inventory-Managment--NextJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FStock-Inventory-Managment--NextJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Stock-Inventory-Managment--NextJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239781115,"owners_count":19695962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["inventory-app","inventory-control","inventory-management-system","mongodb","next-themes","nextjs","prisma","react-dom","react-icons","reactjs","shadcn-ui","stock-inventory","tailwindcss","tanstack-table","typescript","zod","zustand"],"created_at":"2025-02-20T05:24:08.324Z","updated_at":"2025-12-30T20:16:31.782Z","avatar_url":"https://github.com/arnobt78.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stock Inventory Management System - Next.js, Prisma, MongoDB FullStack Project (including Business-Insights Dashboard)\n\n![Screenshot 2025-09-01 at 16 22 30](https://github.com/user-attachments/assets/98e1bde0-f655-4d51-865e-a53bf79b227d)\n![Screenshot 2025-09-01 at 16 22 53](https://github.com/user-attachments/assets/d3ce05ba-8b69-4cf2-a43c-c83440145168)\n![Screenshot 2025-09-01 at 16 26 05](https://github.com/user-attachments/assets/648495c3-5c84-45fa-acc7-3b6d81c6d1e8)\n![Screenshot 2025-09-01 at 16 26 33](https://github.com/user-attachments/assets/8e3843cf-b7f2-4616-a5b0-e4863a3713db)\n![Screenshot 2025-09-01 at 16 26 54](https://github.com/user-attachments/assets/c0119f93-e830-45ba-b6d7-6677fe8ec9d6)\n![Screenshot 2025-09-01 at 16 27 07](https://github.com/user-attachments/assets/74478903-6be5-48f5-b163-dda28957ba1d)\n![Screenshot 2025-09-01 at 16 27 22](https://github.com/user-attachments/assets/0aa8e751-5672-4486-bca1-fe240f0531d3)\n![Screenshot 2025-09-01 at 16 27 32](https://github.com/user-attachments/assets/28932e68-6e8d-4b0c-8706-a5ac3f050e1b)\n![Screenshot 2025-09-01 at 16 27 41](https://github.com/user-attachments/assets/0b4d86f9-39e0-435d-b14e-8385d377c262)\n![Screenshot 2025-09-01 at 16 27 56](https://github.com/user-attachments/assets/3ee2c580-e478-4c72-9d04-b180e78964d0)\n![Screenshot 2025-09-01 at 16 29 59](https://github.com/user-attachments/assets/3b94e1f9-3bba-4fe8-a736-c3d69e508bf3)\n![Screenshot 2025-09-01 at 16 30 16](https://github.com/user-attachments/assets/a071a03c-a095-48d9-8c02-b8a07fb64cf1)\n![Screenshot 2025-09-01 at 16 30 28](https://github.com/user-attachments/assets/0ede9db7-f390-4a4d-a7a5-6d681bd532b4)\n![Screenshot 2025-09-01 at 16 31 17](https://github.com/user-attachments/assets/8996a920-d398-4618-989c-71ebe42e059d)\n![Screenshot 2025-09-01 at 16 31 39](https://github.com/user-attachments/assets/24017eaf-4054-4334-b002-6c40103974ad)\n![Screenshot 2025-09-01 at 16 31 58](https://github.com/user-attachments/assets/7c476153-27b1-47c1-8601-ec027dadcb9c)\n\n---\n\nEfficiently manage your product inventory with Stockly—a modern, secure, and responsive inventory management web application built with Next.js, React, Prisma, and MongoDB.\n\n- **Live-Demo:** [https://stockly-inventory.vercel.app/](https://stockly-inventory.vercel.app/)\n\n---\n\n## Project Overview\n\nStockly is designed to help businesses and individuals efficiently manage their product inventory. It provides a robust, full-stack solution with secure authentication, CRUD operations, filtering, sorting, analytics dashboard, QR code generation, data export capabilities, and a beautiful UI powered by shadcn/ui and Tailwind CSS. The project is open source and intended for learning, extension, and real-world use.\n\n---\n\n## 🚀 Features\n\n### Core Functionality\n\n- **Product Management**: Complete CRUD operations for products with SKU tracking\n- **Category Management**: Organize products with custom categories\n- **Supplier Management**: Track and manage product suppliers\n- **Real-time Search**: Instant filtering by product name or SKU\n- **Advanced Filtering**: Filter by category, supplier, and status\n- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile\n- **Dark/Light Theme**: Toggle between themes with system preference detection\n\n### Advanced Features\n\n- **📊 Analytics Dashboard**: Comprehensive business insights with charts and metrics\n- **📈 Data Visualization**: Interactive charts showing inventory trends and statistics\n- **🔍 Advanced Search**: Enhanced search with multiple filter options\n- **📱 QR Code Generation**: Generate QR codes for products with click-to-view functionality\n- **📄 Data Export**: Export product data to CSV and Excel formats\n- **📚 API Documentation**: Built-in API documentation page with endpoint details\n- **🔧 API Status Monitor**: Real-time API health monitoring and status dashboard\n- **⚠️ Low Stock Alerts**: Visual alerts for products with low inventory\n- **📊 Performance Optimizations**: React memoization, lazy loading, and caching\n\n### Authentication \u0026 Security\n\n- **JWT Authentication**: Secure token-based authentication\n- **User Registration**: Secure account creation with password hashing\n- **Session Management**: Persistent login sessions with automatic token refresh\n- **Protected Routes**: Automatic redirection for unauthenticated users\n- **Password Security**: bcryptjs hashing for secure password storage\n\n### User Experience\n\n- **Loading States**: Visual feedback during all operations\n- **Toast Notifications**: Success/error messages for all user actions\n- **Form Validation**: Client-side validation with error handling\n- **Accessibility**: ARIA-compliant components for screen readers\n- **Keyboard Navigation**: Full keyboard accessibility support\n- **Consistent Navigation**: AppHeader displayed on all authenticated pages\n\n---\n\n## 🛠️ Technology Stack\n\n### Frontend\n\n- **Next.js 15.0.3**: React framework with App Router\n- **React 19**: Latest React with concurrent features\n- **TypeScript**: Type-safe development\n- **Tailwind CSS**: Utility-first CSS framework\n- **Shadcn/ui**: Modern component library\n- **Zustand**: Lightweight state management\n- **React Hook Form**: Form handling with validation\n- **React Table**: Advanced table functionality\n- **Recharts**: Data visualization and charting library\n- **QRCode**: QR code generation library\n- **Papaparse**: CSV parsing and generation\n- **XLSX**: Excel file generation\n\n### Backend\n\n- **Next.js API Routes**: Server-side API endpoints\n- **Prisma ORM**: Type-safe database operations\n- **MongoDB**: NoSQL database\n- **JWT**: JSON Web Token authentication\n- **bcryptjs**: Password hashing\n- **Axios**: HTTP client for API requests\n\n### Development Tools\n\n- **ESLint**: Code linting and formatting\n- **PostCSS**: CSS processing\n- **Autoprefixer**: CSS vendor prefixing\n- **TypeScript**: Static type checking\n\n---\n\n## 📁 Project Structure\n\n```bash\nstockly/\n├── app/                          # Next.js App Router\n│   ├── AppHeader/                # Application header component\n│   │   ├── AppHeader.tsx         # Main header with theme toggle\n│   │   └── ModeToggle.tsx       # Dark/light theme toggle\n│   ├── AppTable/                 # Main table component\n│   │   ├── AppTable.tsx          # Main table wrapper\n│   │   ├── dropdowns/            # Filter dropdowns\n│   │   │   ├── CategoryDropDown.tsx\n│   │   │   ├── StatusDropDown.tsx\n│   │   │   └── SupplierDropDown.tsx\n│   │   └── ProductDialog/        # Product management dialogs\n│   │       ├── AddProductDialog.tsx\n│   │       ├── AddCategoryDialog.tsx\n│   │       ├── AddSupplierDialog.tsx\n│   │       └── _components/      # Dialog sub-components\n│   ├── Products/                 # Product-related components\n│   │   ├── ProductTable.tsx      # Main product table\n│   │   ├── columns.tsx           # Table column definitions\n│   │   ├── ProductsDropDown.tsx  # Product action dropdown\n│   │   └── PaginationSelection.tsx\n│   ├── analytics/                # Analytics dashboard\n│   │   └── page.tsx              # Analytics page with charts\n│   ├── api-docs/                 # API documentation\n│   │   └── page.tsx              # API docs page\n│   ├── api-status/               # API status monitoring\n│   │   └── page.tsx              # API status page\n│   ├── login/                    # Authentication pages\n│   │   └── page.tsx\n│   ├── register/\n│   │   └── page.tsx\n│   ├── logout/\n│   │   └── page.tsx\n│   ├── authContext.tsx           # Authentication context\n│   ├── useProductStore.ts        # Zustand store for state management\n│   ├── types.ts                  # TypeScript type definitions\n│   ├── layout.tsx                # Root layout\n│   ├── page.tsx                  # Main page\n│   └── Home.tsx                  # Home component\n├── components/                   # Reusable UI components\n│   ├── ui/                       # Shadcn/ui components\n│   │   ├── button.tsx\n│   │   ├── dialog.tsx\n│   │   ├── input.tsx\n│   │   ├── table.tsx\n│   │   ├── toast.tsx\n│   │   ├── qr-code.tsx           # QR code component\n│   │   ├── qr-code-hover.tsx     # QR code hover component\n│   │   ├── analytics-card.tsx    # Analytics metrics card\n│   │   ├── chart-card.tsx        # Chart wrapper component\n│   │   ├── advanced-search.tsx  # Advanced search component\n│   │   ├── forecasting-card.tsx  # Forecasting insights card\n│   │   └── progress.tsx          # Progress bar component\n│   ├── GlobalLoading.tsx         # Global loading component\n│   ├── Loading.tsx               # Loading spinner\n│   └── Skeleton.tsx              # Skeleton loading\n├── pages/                        # API routes\n│   └── api/\n│       ├── auth/                 # Authentication endpoints\n│       │   ├── login.ts\n│       │   ├── register.ts\n│       │   ├── logout.ts\n│       │   └── session.ts\n│       ├── products/             # Product management\n│       │   └── index.ts\n│       ├── categories/           # Category management\n│       │   └── index.ts\n│       └── suppliers/            # Supplier management\n│           └── index.ts\n├── prisma/                       # Database schema and client\n│   ├── schema.prisma             # Database schema\n│   ├── client.ts                 # Prisma client\n│   ├── product.ts                # Product operations\n│   ├── category.ts               # Category operations\n│   └── supplier.ts               # Supplier operations\n├── utils/                        # Utility functions\n│   ├── auth.ts                   # Authentication utilities\n│   └── axiosInstance.ts          # Axios configuration\n├── hooks/                        # Custom React hooks\n│   └── use-toast.ts              # Toast hook\n├── middleware/                   # Next.js middleware\n│   └── authMiddleware.ts         # Authentication middleware\n├── middleware.ts                 # Route protection middleware\n└── public/                       # Static assets\n    ├── favicon.ico\n    └── ...                       # Other static files\n```\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- **Node.js**: Version 18 or higher\n- **npm** or **yarn**: Package manager\n- **MongoDB**: Database (local or cloud instance)\n- **Git**: Version control\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/your-username/stockly.git\n   cd stockly\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Environment Setup**\n\n   Create a `.env` file in the root directory:\n\n   ```env\n   # Database Configuration\n   # DATABASE_URL=\"mongodb://localhost:27017/stockly\"\n   # or for MongoDB Atlas:\n   DATABASE_URL=\"mongodb+srv://username:password@cluster.mongodb.net/stockly?retryWrites=true\u0026w=majority\"\n\n   # JWT Configuration\n   JWT_SECRET=\"your-super-secret-jwt-key-here\"\n   # JWT_EXPIRES_IN=\"1h\"\n\n   # Application Configuration (Optional)\n   # NEXTAUTH_URL=\"http://localhost:3000\"\n   # NEXTAUTH_SECRET=\"your-nextauth-secret\"\n   ```\n\n4. **Database Setup**\n\n   ```bash\n   # Generate Prisma client\n   npx prisma generate\n\n   # Push schema to database\n   npx prisma db push\n\n   # (Optional) View database in Prisma Studio\n   npx prisma studio\n   ```\n\n5. **Run the development server**\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n6. **Open your browser**\n   Navigate to [http://localhost:3000](http://localhost:3000)\n\n---\n\n## 🔧 Environment Variables\n\n### Required Variables\n\n| Variable         | Description               | Example                             |\n| ---------------- | ------------------------- | ----------------------------------- |\n| `DATABASE_URL`   | MongoDB connection string | `mongodb://localhost:27017/stockly` |\n| `JWT_SECRET`     | Secret key for JWT tokens | `your-super-secret-jwt-key-here`    |\n| `JWT_EXPIRES_IN` | JWT token expiration time | `1h`                                |\n\n### Optional Variables\n\n| Variable          | Description        | Default                 |\n| ----------------- | ------------------ | ----------------------- |\n| `NEXTAUTH_URL`    | NextAuth.js URL    | `http://localhost:3000` |\n| `NEXTAUTH_SECRET` | NextAuth.js secret | Auto-generated          |\n\n### MongoDB Atlas Setup\n\n1. Create a MongoDB Atlas account\n2. Create a new cluster\n3. Get your connection string\n4. Replace `username`, `password`, and `cluster` with your values\n5. Add the connection string to your `.env` file\n\n---\n\n## 📊 Database Schema\n\n### User Model\n\n```prisma\nmodel User {\n  id        String    @id @default(auto()) @map(\"_id\") @db.ObjectId\n  createdAt DateTime  @db.Date\n  email     String    @unique\n  name      String\n  password  String\n  updatedAt DateTime? @db.Date\n  username  String?   @unique\n}\n```\n\n### Product Model\n\n```prisma\nmodel Product {\n  id         String   @id @default(auto()) @map(\"_id\") @db.ObjectId\n  categoryId String   @db.ObjectId\n  createdAt  DateTime @db.Date\n  name       String\n  price      Float\n  quantity   BigInt\n  sku        String   @unique\n  status     String\n  supplierId String   @db.ObjectId\n  userId     String   @db.ObjectId\n}\n```\n\n### Category Model\n\n```prisma\nmodel Category {\n  id     String @id @default(auto()) @map(\"_id\") @db.ObjectId\n  name   String\n  userId String @db.ObjectId\n}\n```\n\n### Supplier Model\n\n```prisma\nmodel Supplier {\n  id     String @id @default(auto()) @map(\"_id\") @db.ObjectId\n  name   String\n  userId String @db.ObjectId\n}\n```\n\n---\n\n## 🔌 API Endpoints\n\n### Authentication Endpoints\n\n#### POST `/api/auth/register`\n\nRegister a new user account.\n\n```typescript\n// Request Body\n{\n  \"name\": \"John Doe\",\n  \"email\": \"john@example.com\",\n  \"password\": \"securepassword123\"\n}\n\n// Response\n{\n  \"success\": true,\n  \"message\": \"User registered successfully\"\n}\n```\n\n#### POST `/api/auth/login`\n\nAuthenticate user and get JWT token.\n\n```typescript\n// Request Body\n{\n  \"email\": \"john@example.com\",\n  \"password\": \"securepassword123\"\n}\n\n// Response\n{\n  \"success\": true,\n  \"token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",\n  \"user\": {\n    \"id\": \"507f1f77bcf86cd799439011\",\n    \"name\": \"John Doe\",\n    \"email\": \"john@example.com\"\n  }\n}\n```\n\n#### POST `/api/auth/logout`\n\nLogout user and invalidate session.\n\n```typescript\n// Response\n{\n  \"success\": true,\n  \"message\": \"Logged out successfully\"\n}\n```\n\n#### GET `/api/auth/session`\n\nGet current user session information.\n\n```typescript\n// Response\n{\n  \"user\": {\n    \"id\": \"507f1f77bcf86cd799439011\",\n    \"name\": \"John Doe\",\n    \"email\": \"john@example.com\",\n    \"createdAt\": \"2024-01-01T00:00:00.000Z\",\n    \"updatedAt\": \"2024-01-01T00:00:00.000Z\"\n  }\n}\n```\n\n### Product Management Endpoints\n\n#### GET `/api/products`\n\nGet all products for the authenticated user.\n\n```typescript\n// Response\n[\n  {\n    id: \"507f1f77bcf86cd799439011\",\n    name: \"Laptop\",\n    sku: \"LAP001\",\n    price: 999.99,\n    quantity: 10,\n    status: \"Available\",\n    category: \"Electronics\",\n    supplier: \"TechCorp\",\n    createdAt: \"2024-01-01T00:00:00.000Z\",\n  },\n];\n```\n\n#### POST `/api/products`\n\nCreate a new product.\n\n```typescript\n// Request Body\n{\n  \"name\": \"Laptop\",\n  \"sku\": \"LAP001\",\n  \"price\": 999.99,\n  \"quantity\": 10,\n  \"status\": \"Available\",\n  \"categoryId\": \"507f1f77bcf86cd799439011\",\n  \"supplierId\": \"507f1f77bcf86cd799439012\"\n}\n\n// Response\n{\n  \"id\": \"507f1f77bcf86cd799439013\",\n  \"name\": \"Laptop\",\n  \"sku\": \"LAP001\",\n  \"price\": 999.99,\n  \"quantity\": 10,\n  \"status\": \"Available\",\n  \"category\": \"Electronics\",\n  \"supplier\": \"TechCorp\",\n  \"createdAt\": \"2024-01-01T00:00:00.000Z\"\n}\n```\n\n#### PUT `/api/products`\n\nUpdate an existing product.\n\n```typescript\n// Request Body\n{\n  \"id\": \"507f1f77bcf86cd799439013\",\n  \"name\": \"Updated Laptop\",\n  \"sku\": \"LAP001\",\n  \"price\": 1099.99,\n  \"quantity\": 15,\n  \"status\": \"Available\",\n  \"categoryId\": \"507f1f77bcf86cd799439011\",\n  \"supplierId\": \"507f1f77bcf86cd799439012\"\n}\n```\n\n#### DELETE `/api/products`\n\nDelete a product.\n\n```typescript\n// Request Body\n{\n  \"id\": \"507f1f77bcf86cd799439013\"\n}\n\n// Response\n204 No Content\n```\n\n### Category Management Endpoints\n\n#### GET `/api/categories`\n\nGet all categories for the authenticated user.\n\n#### POST `/api/categories`\n\nCreate a new category.\n\n#### PUT `/api/categories`\n\nUpdate an existing category.\n\n#### DELETE `/api/categories`\n\nDelete a category.\n\n### Supplier Management Endpoints\n\n#### GET `/api/suppliers`\n\nGet all suppliers for the authenticated user.\n\n#### POST `/api/suppliers`\n\nCreate a new supplier.\n\n#### PUT `/api/suppliers`\n\nUpdate an existing supplier.\n\n#### DELETE `/api/suppliers`\n\nDelete a supplier.\n\n---\n\n## 🎨 Component Architecture\n\n### State Management with Zustand\n\nThe application uses Zustand for state management, providing a simple and efficient way to manage global state.\n\n```typescript\n// Example: Product Store\ninterface ProductState {\n  allProducts: Product[];\n  categories: Category[];\n  suppliers: Supplier[];\n  isLoading: boolean;\n  loadProducts: () =\u003e Promise\u003cvoid\u003e;\n  addProduct: (product: Product) =\u003e Promise\u003c{ success: boolean }\u003e;\n  updateProduct: (product: Product) =\u003e Promise\u003c{ success: boolean }\u003e;\n  deleteProduct: (id: string) =\u003e Promise\u003c{ success: boolean }\u003e;\n}\n\nexport const useProductStore = create\u003cProductState\u003e((set) =\u003e ({\n  allProducts: [],\n  categories: [],\n  suppliers: [],\n  isLoading: false,\n\n  loadProducts: async () =\u003e {\n    set({ isLoading: true });\n    try {\n      const response = await axiosInstance.get(\"/products\");\n      set({ allProducts: response.data || [] });\n    } catch (error) {\n      console.error(\"Error loading products:\", error);\n    } finally {\n      set({ isLoading: false });\n    }\n  },\n  // ... other methods\n}));\n```\n\n### Authentication Context\n\nThe authentication context provides user state and authentication methods throughout the application.\n\n```typescript\n// Example: Auth Context Usage\nconst { isLoggedIn, user, login, logout } = useAuth();\n\n// Protected route example\nuseEffect(() =\u003e {\n  if (!isLoggedIn) {\n    router.push(\"/login\");\n  }\n}, [isLoggedIn, router]);\n```\n\n### Reusable Components\n\n#### Dialog Components\n\nAll dialogs follow a consistent pattern with proper accessibility attributes:\n\n```typescript\n// Example: Product Dialog\n\u003cDialog open={open} onOpenChange={setOpen}\u003e\n  \u003cDialogContent aria-describedby=\"product-dialog-description\"\u003e\n    \u003cDialogHeader\u003e\n      \u003cDialogTitle\u003eAdd Product\u003c/DialogTitle\u003e\n    \u003c/DialogHeader\u003e\n    \u003cDialogDescription id=\"product-dialog-description\"\u003e\n      Fill in the product details below.\n    \u003c/DialogDescription\u003e\n    {/* Form content */}\n  \u003c/DialogContent\u003e\n\u003c/Dialog\u003e\n```\n\n#### Table Components\n\nThe product table uses React Table for advanced functionality:\n\n```typescript\n// Example: Table Column Definition\nconst columns: ColumnDef\u003cProduct\u003e[] = [\n  {\n    accessorKey: \"name\",\n    header: \"Product Name\",\n    cell: ({ row }) =\u003e \u003cdiv\u003e{row.getValue(\"name\")}\u003c/div\u003e,\n  },\n  {\n    accessorKey: \"sku\",\n    header: \"SKU\",\n  },\n  // ... other columns\n];\n```\n\n#### QR Code Component\n\nQR code generation with click-to-view functionality:\n\n```typescript\n// Example: QR Code Usage\n\u003cQRCodeHover\n  value={`Product: ${product.name}\\nSKU: ${product.sku}\\nPrice: $${product.price}`}\n  title=\"View QR Code\"\n/\u003e\n```\n\n#### Analytics Components\n\nReusable analytics cards and charts:\n\n```typescript\n// Example: Analytics Card\n\u003cAnalyticsCard\n  title=\"Total Products\"\n  value={totalProducts}\n  description=\"Total products in inventory\"\n  icon={\u003cPackage className=\"h-4 w-4\" /\u003e}\n/\u003e\n```\n\n---\n\n## 🔒 Security Features\n\n### JWT Authentication\n\n- Secure token-based authentication\n- Automatic token refresh\n- Protected API routes\n- Session management\n\n### Password Security\n\n- bcryptjs hashing for passwords\n- Secure password validation\n- No plain text password storage\n\n### API Security\n\n- Request validation\n- Error handling without sensitive data exposure\n- CORS protection\n- Rate limiting (can be implemented)\n\n### Data Validation\n\n- Client-side form validation\n- Server-side data validation\n- TypeScript type safety\n- Prisma schema validation\n\n---\n\n## 🎯 Key Features Implementation\n\n### Real-time Search\n\nThe search functionality filters products instantly as users type:\n\n```typescript\n// Search implementation in ProductTable.tsx\nconst filteredData = useMemo(() =\u003e {\n  return data.filter((product) =\u003e {\n    const searchMatch = searchTerm\n      ? product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n        product.sku.toLowerCase().includes(searchTerm.toLowerCase())\n      : true;\n\n    return searchMatch \u0026\u0026 categoryFilter \u0026\u0026 supplierFilter \u0026\u0026 statusFilter;\n  });\n}, [data, searchTerm, categoryFilter, supplierFilter, statusFilter]);\n```\n\n### Toast Notifications\n\nConsistent user feedback with toast notifications:\n\n```typescript\n// Example: Success toast\ntoast({\n  title: \"Success!\",\n  description: \"Product created successfully.\",\n  variant: \"default\",\n});\n\n// Example: Error toast\ntoast({\n  title: \"Error\",\n  description: \"Failed to create product. Please try again.\",\n  variant: \"destructive\",\n});\n```\n\n### Loading States\n\nVisual feedback during async operations:\n\n```typescript\n// Example: Button loading state\n\u003cButton disabled={isLoading}\u003e\n  {isLoading ? \"Creating...\" : \"Create Product\"}\n\u003c/Button\u003e\n```\n\n### Theme Toggle\n\nDark/light theme with system preference detection:\n\n```typescript\n// Theme toggle implementation\nconst { theme, setTheme } = useTheme();\n\nconst toggleTheme = () =\u003e {\n  setTheme(theme === \"dark\" ? \"light\" : \"dark\");\n};\n```\n\n### Data Export\n\nCSV and Excel export functionality:\n\n```typescript\n// Example: Export to CSV\nconst exportToCSV = () =\u003e {\n  const csv = Papa.unparse(filteredProducts);\n  const blob = new Blob([csv], { type: \"text/csv;charset=utf-8;\" });\n  const link = document.createElement(\"a\");\n  const url = URL.createObjectURL(blob);\n  link.setAttribute(\"href\", url);\n  link.setAttribute(\"download\", \"products.csv\");\n  link.style.visibility = \"hidden\";\n  document.body.appendChild(link);\n  link.click();\n  document.body.removeChild(link);\n};\n```\n\n### Analytics Dashboard\n\nComprehensive business insights with charts:\n\n```typescript\n// Example: Analytics implementation\nconst analyticsData = useMemo(() =\u003e {\n  return {\n    totalProducts: products.length,\n    totalValue: products.reduce(\n      (sum, p) =\u003e sum + p.price * Number(p.quantity),\n      0\n    ),\n    lowStockItems: products.filter((p) =\u003e Number(p.quantity) \u003c 10).length,\n    categories: categoryStats,\n    monthlyTrends: monthlyData,\n  };\n}, [products]);\n```\n\n---\n\n## 🚀 Deployment\n\n### Vercel Deployment (Recommended)\n\n1. **Connect your GitHub repository to Vercel**\n2. **Set environment variables in Vercel dashboard**\n3. **Deploy automatically on push to main branch**\n\n### Environment Variables for Production\n\n```env\nDATABASE_URL=\"your-production-mongodb-url\"\nJWT_SECRET=\"your-production-jwt-secret\"\n```\n\n### Build Commands\n\n```bash\n# Build the application\nnpm run build\n\n# Start production server\nnpm start\n\n# Run linting\nnpm run lint\n```\n\n---\n\n## 🧪 Testing\n\n### Manual Testing Checklist\n\n- [ ] User registration and login\n- [ ] Product CRUD operations\n- [ ] Category management\n- [ ] Supplier management\n- [ ] Search and filtering\n- [ ] Theme toggle\n- [ ] Responsive design\n- [ ] Form validation\n- [ ] Error handling\n- [ ] Loading states\n- [ ] Analytics dashboard\n- [ ] QR code generation\n- [ ] Data export (CSV/Excel)\n- [ ] API documentation page\n- [ ] API status monitoring\n\n### Automated Testing (Future Enhancement)\n\n```bash\n# Install testing dependencies\nnpm install --save-dev jest @testing-library/react @testing-library/jest-dom\n\n# Run tests\nnpm test\n\n# Run tests with coverage\nnpm test -- --coverage\n```\n\n---\n\n## 🔧 Customization\n\n### Adding New Features\n\n1. **Create new API endpoints** in `pages/api/`\n2. **Add new Prisma models** in `schema.prisma`\n3. **Create new components** in `components/`\n4. **Update state management** in `useProductStore.ts`\n5. **Add new routes** in `app/`\n\n### Styling Customization\n\nThe application uses Tailwind CSS with custom design tokens:\n\n```typescript\n// tailwind.config.ts\nexport default {\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        // ... other custom colors\n      },\n    },\n  },\n};\n```\n\n### Component Customization\n\nAll UI components are built with Shadcn/ui and can be customized:\n\n```bash\n# Add new Shadcn/ui components\nnpx shadcn@latest add [component-name]\n```\n\n---\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n#### Database Connection Issues\n\n```bash\n# Check database connection\nnpx prisma db pull\n\n# Reset database (development only)\nnpx prisma db push --force-reset\n```\n\n#### Build Errors\n\n```bash\n# Clear Next.js cache\nrm -rf .next\n\n# Reinstall dependencies\nrm -rf node_modules package-lock.json\nnpm install\n```\n\n#### Authentication Issues\n\n- Check JWT_SECRET environment variable\n- Verify database connection\n- Check user credentials in database\n\n#### Performance Issues\n\n- Enable Next.js production mode\n- Optimize images and assets\n- Use proper caching strategies\n\n#### QR Code Issues\n\n- Ensure QR code library is properly installed\n- Check for hydration mismatches in development\n- Verify client-side rendering for dynamic content\n\n---\n\n## 📚 Learning Resources\n\n### Next.js\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [App Router Guide](https://nextjs.org/docs/app)\n- [API Routes](https://nextjs.org/docs/api-routes/introduction)\n\n### React\n\n- [React Documentation](https://react.dev/)\n- [React Hooks](https://react.dev/reference/react)\n- [React Patterns](https://reactpatterns.com/)\n\n### Prisma\n\n- [Prisma Documentation](https://www.prisma.io/docs)\n- [Prisma with MongoDB](https://www.prisma.io/docs/concepts/database-connectors/mongodb)\n- [Prisma Client](https://www.prisma.io/docs/concepts/components/prisma-client)\n\n### Zustand\n\n- [Zustand Documentation](https://github.com/pmndrs/zustand)\n- [Zustand Best Practices](https://github.com/pmndrs/zustand#best-practices)\n\n### Tailwind CSS\n\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n- [Tailwind CSS Components](https://tailwindui.com/)\n\n### Data Visualization\n\n- [Recharts Documentation](https://recharts.org/)\n- [Chart.js](https://www.chartjs.org/)\n\n### QR Code Generation\n\n- [QRCode Library](https://github.com/zpao/qrcode.react)\n\n---\n\n## 🤝 Contributing\n\n### Development Workflow\n\n1. **Fork the repository**\n2. **Create a feature branch**\n\n   ```bash\n   git checkout -b feature/your-feature-name\n   ```\n\n3. **Make your changes**\n4. **Test thoroughly**\n5. **Commit your changes**\n\n   ```bash\n   git commit -m \"feat: add new feature\"\n   ```\n\n6. **Push to your fork**\n\n   ```bash\n   git push origin feature/your-feature-name\n   ```\n\n7. **Create a pull request**\n\n### Code Style Guidelines\n\n- Use TypeScript for type safety\n- Follow ESLint rules\n- Write meaningful commit messages\n- Add comments for complex logic\n- Test your changes\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- **Next.js Team** for the amazing framework\n- **Vercel** for hosting and deployment\n- **Prisma Team** for the excellent ORM\n- **Shadcn/ui** for the beautiful components\n- **Tailwind CSS** for the utility-first CSS framework\n- **Recharts** for the data visualization library\n\n---\n\n## 📞 Support\n\nIf you encounter any issues or have questions:\n\n1. **Check the troubleshooting section**\n2. **Search existing issues**\n3. **Create a new issue** with detailed information\n4. **Contact the maintainer**\n\n---\n\n## 🎯 Roadmap\n\n### Planned Features\n\n- [ ] User roles and permissions\n- [ ] Advanced reporting and analytics\n- [ ] Bulk import/export functionality\n- [ ] Email notifications\n- [ ] Mobile app\n- [ ] API rate limiting\n- [ ] Advanced search filters\n- [ ] Product images\n- [ ] Inventory alerts\n- [ ] Audit logs\n- [ ] Real-time notifications\n- [ ] Advanced forecasting algorithms\n- [ ] Multi-language support\n- [ ] Advanced user preferences\n\n### Performance Improvements\n\n- [ ] Database indexing optimization\n- [ ] Caching strategies\n- [ ] Code splitting\n- [ ] Image optimization\n- [ ] Bundle size optimization\n- [ ] Server-side rendering improvements\n- [ ] Progressive Web App (PWA) features\n\n---\n\n## 📊 Project Statistics\n\n- **Lines of Code**: ~8,000+\n- **Components**: 30+\n- **API Endpoints**: 12+\n- **Database Models**: 4\n- **Dependencies**: 40+\n- **Pages**: 8+\n- **Features**: 20+\n\n---\n\n## 🏆 Features Summary\n\n| Feature                   | Status      | Description                            |\n| ------------------------- | ----------- | -------------------------------------- |\n| User Authentication       | ✅ Complete | JWT-based auth with registration/login |\n| Product Management        | ✅ Complete | Full CRUD with search and filtering    |\n| Category Management       | ✅ Complete | Create, edit, delete categories        |\n| Supplier Management       | ✅ Complete | Manage product suppliers               |\n| Responsive Design         | ✅ Complete | Mobile-first design                    |\n| Dark/Light Theme          | ✅ Complete | Theme toggle with system preference    |\n| Real-time Search          | ✅ Complete | Instant product filtering              |\n| Toast Notifications       | ✅ Complete | User feedback system                   |\n| Loading States            | ✅ Complete | Visual feedback during operations      |\n| Form Validation           | ✅ Complete | Client and server-side validation      |\n| Accessibility             | ✅ Complete | ARIA-compliant components              |\n| TypeScript                | ✅ Complete | Full type safety                       |\n| Database Integration      | ✅ Complete | MongoDB with Prisma ORM                |\n| API Security              | ✅ Complete | Protected routes and validation        |\n| Analytics Dashboard       | ✅ Complete | Business insights with charts          |\n| QR Code Generation        | ✅ Complete | Product QR codes with click-to-view    |\n| Data Export               | ✅ Complete | CSV and Excel export functionality     |\n| API Documentation         | ✅ Complete | Built-in API docs page                 |\n| API Status Monitor        | ✅ Complete | Real-time API health monitoring        |\n| Performance Optimizations | ✅ Complete | React memoization and caching          |\n| Low Stock Alerts          | ✅ Complete | Visual alerts for low inventory        |\n| Advanced Search           | ✅ Complete | Enhanced search with multiple filters  |\n\n---\n\n## 🎉 Happy Coding! 🎉\n\nFeel free to use this project repository and extend this project further!\n\nIf you have any questions or want to share your work, reach out via GitHub or my portfolio at [https://arnob-mahmud.vercel.app/](https://arnob-mahmud.vercel.app/).\n\n**Enjoy building and learning!** 🚀\n\nThank you! 😊\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FStock-Inventory-Management-System--NextJS-FullStack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2FStock-Inventory-Management-System--NextJS-FullStack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FStock-Inventory-Management-System--NextJS-FullStack/lists"}