From 23ac8610321f38a0cf7b18b111c2b74f6cde6024 Mon Sep 17 00:00:00 2001
From: CelaniDe <celanide@gmail.com>
Date: Thu, 12 Feb 2026 21:13:15 +0100
Subject: [PATCH] REFACTOR components

---
 README.md                                     | 31 ++++++++++++++-----
 .../ingredients}/AddIngredientModal.tsx       |  0
 .../ingredients}/IngredientTable.tsx          |  0
 .../ingredients}/ViewIngredientModal.tsx      |  0
 app/dashboard/ingredients/page.tsx            |  6 ++--
 5 files changed, 26 insertions(+), 11 deletions(-)
 rename {components => app/dashboard/ingredients}/AddIngredientModal.tsx (100%)
 rename {components => app/dashboard/ingredients}/IngredientTable.tsx (100%)
 rename {components => app/dashboard/ingredients}/ViewIngredientModal.tsx (100%)

diff --git a/README.md b/README.md
index 5b91956..5e0c3ff 100644
--- a/README.md
+++ b/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/`
 
 ---
diff --git a/components/AddIngredientModal.tsx b/app/dashboard/ingredients/AddIngredientModal.tsx
similarity index 100%
rename from components/AddIngredientModal.tsx
rename to app/dashboard/ingredients/AddIngredientModal.tsx
diff --git a/components/IngredientTable.tsx b/app/dashboard/ingredients/IngredientTable.tsx
similarity index 100%
rename from components/IngredientTable.tsx
rename to app/dashboard/ingredients/IngredientTable.tsx
diff --git a/components/ViewIngredientModal.tsx b/app/dashboard/ingredients/ViewIngredientModal.tsx
similarity index 100%
rename from components/ViewIngredientModal.tsx
rename to app/dashboard/ingredients/ViewIngredientModal.tsx
diff --git a/app/dashboard/ingredients/page.tsx b/app/dashboard/ingredients/page.tsx
index 0c29dff..fb1ed96 100644
--- a/app/dashboard/ingredients/page.tsx
+++ b/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;