REFACTOR components

README.md

@@ -71,9 +71,22 @@ components/
 - **Data Display**: Components like `IngredientTable.tsx` (receive data via props)
 - **Layout**: Components like `Sidebar.tsx` (navigation, structure)
 
-**Where to add new components**: Add to `/components/` with descriptive names
+**Where to add new components**:
+- **Global `/components/`**: ONLY for components reused across multiple pages (e.g., `Sidebar.tsx`, `DeleteConfirmModal.tsx`)
+- **Page-specific components**: Keep inside the page's own folder (e.g., `/app/dashboard/orders/OrderSummaryCard.tsx`)
+
+**⚠️ Important Rule**: If a component is only used by ONE specific page, it should live in that page's folder, NOT in the global `/components/` directory. This keeps the codebase organized and prevents component bloat.
+
 **Naming convention**: PascalCase, suffix with type (e.g., `UserModal.tsx`, `OrderTable.tsx`)
 
+**Example Structure**:
+```
+app/dashboard/orders/
+├── page.tsx                      # Main orders page
+├── OrderSummaryCard.tsx          # Page-specific component
+└── OrderFilters.tsx              # Page-specific component
+```
+
 ---
 
 ### `/lib` - Utilities & Shared Logic
@@ -660,13 +673,14 @@ export default function OrdersPage() {
 }
 ```
 
-**Step 4**: Create modal components in `/components/`
-- `AddOrderModal.tsx`
-- `ViewOrderModal.tsx`
-- `DeleteConfirmModal.tsx` (can reuse existing)
-
-**Step 5**: Create display component
+**Step 4**: Create page-specific components in `/app/dashboard/orders/`
+- `AddOrderModal.tsx` (orders-specific modal)
+- `ViewOrderModal.tsx` (orders-specific modal)
 - `OrderTable.tsx` (responsive table/card view)
+- Note: Only move to `/components/` if these will be reused across multiple pages
+
+**Step 5**: Reuse global components if applicable
+- `DeleteConfirmModal.tsx` (already exists in `/components/` - reusable across all pages)
 
 **Step 6**: Add navigation link in `Sidebar.tsx`
 ```typescript
@@ -933,7 +947,8 @@ When adding new code, ensure you follow these practices:
 **Code Organization**:
 - [ ] Page components orchestrate, display components render
 - [ ] API routes in `/app/api/[resource]/`
-- [ ] Shared components in `/components/`
+- [ ] Shared components in `/components/` (only if reused across multiple pages)
+- [ ] Page-specific components stay in the page's folder, NOT in global `/components/`
 - [ ] Utilities/types in `/lib/`
 
 ---

app/dashboard/ingredients/page.tsx

@@ -2,10 +2,10 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import Sidebar from '@/components/Sidebar';
-import IngredientTable, { Ingredient } from '@/components/IngredientTable';
-import AddIngredientModal from '@/components/AddIngredientModal';
-import ViewIngredientModal from '@/components/ViewIngredientModal';
 import DeleteConfirmModal from '@/components/DeleteConfirmModal';
+import IngredientTable, { Ingredient } from './IngredientTable';
+import AddIngredientModal from './AddIngredientModal';
+import ViewIngredientModal from './ViewIngredientModal';
 
 interface Category {
   _id: string;