celanide/IcostPro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rename products to ingredients

Browse Source
This commit is contained in:
CelaniDe 2026-02-11 21:25:53 +01:00
parent 75bafa619f
commit af49388593
9 changed files with 87 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/api/products/[id]/route.ts → app/api/ingredients/[id]/route.ts
View File

@ -13,7 +13,7 @@ export async function GET(
}
const db = await getDb();
const product = await db.collection('products').aggregate([
const ingredient = await db.collection('ingredients').aggregate([
{ $match: { _id: new ObjectId(id) } },
{
$lookup: {
@ -56,11 +56,11 @@ export async function GET(
},
]).next();
if (!product) {
return NextResponse.json({ error: 'Product not found' }, { status: 404 });
if (!ingredient) {
return NextResponse.json({ error: 'Ingredient not found' }, { status: 404 });
}
return NextResponse.json(product);
return NextResponse.json(ingredient);
}
export async function PUT(
@ -87,14 +87,14 @@ export async function PUT(
if (body.supplierId !== undefined) update.supplierId = new ObjectId(body.supplierId);
const db = await getDb();
const result = await db.collection('products').findOneAndUpdate(
const result = await db.collection('ingredients').findOneAndUpdate(
{ _id: new ObjectId(id) },
{ $set: update },
{ returnDocument: 'after' }
);
if (!result) {
return NextResponse.json({ error: 'Product not found' }, { status: 404 });
return NextResponse.json({ error: 'Ingredient not found' }, { status: 404 });
}
return NextResponse.json(result);
@ -111,10 +111,10 @@ export async function DELETE(
}
const db = await getDb();
const result = await db.collection('products').deleteOne({ _id: new ObjectId(id) });
const result = await db.collection('ingredients').deleteOne({ _id: new ObjectId(id) });
if (result.deletedCount === 0) {
return NextResponse.json({ error: 'Product not found' }, { status: 404 });
return NextResponse.json({ error: 'Ingredient not found' }, { status: 404 });
}
return NextResponse.json({ success: true });

6
app/api/products/route.ts → app/api/ingredients/route.ts
View File

@ -72,12 +72,12 @@ export async function GET(request: NextRequest) {
];
const [data, countResult] = await Promise.all([
db.collection('products')
db.collection('ingredients')
.aggregate(pipeline)
.skip((page - 1) * limit)
.limit(limit)
.toArray(),
db.collection('products')
db.collection('ingredients')
.countDocuments(matchStage),
]);
@ -113,7 +113,7 @@ export async function POST(request: Request) {
updatedAt: now,
};
const result = await db.collection('products').insertOne(doc);
const result = await db.collection('ingredients').insertOne(doc);
return NextResponse.json({ _id: result.insertedId, ...doc }, { status: 201 });
}

43
app/dashboard/products/page.tsx → app/dashboard/ingredients/page.tsx
View File

@ -2,7 +2,7 @@
import React, { useState, useEffect, useCallback } from 'react';
import Sidebar from '@/components/Sidebar';
import ProductTable, { Product } from '@/components/ProductTable';
import IngredientTable, { Ingredient } from '@/components/IngredientTable';
interface Category {
_id: string;
@ -15,16 +15,16 @@ interface Subcategory {
categoryId: string;
}
interface ProductsResponse {
data: Product[];
interface IngredientsResponse {
data: Ingredient[];
total: number;
page: number;
limit: number;
}
export default function ProductsPage() {
export default function IngredientsPage() {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const [products, setProducts] = useState<Product[]>([]);
const [ingredients, setIngredients] = useState<Ingredient[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
const [search, setSearch] = useState('');
@ -53,8 +53,8 @@ export default function ProductsPage() {
? allSubcategories.filter(s => s.categoryId === categoryId)
: allSubcategories;
// Fetch products
const fetchProducts = useCallback(async () => {
// Fetch ingredients
const fetchIngredients = useCallback(async () => {
setLoading(true);
const params = new URLSearchParams();
params.set('page', String(page));
@ -63,16 +63,16 @@ export default function ProductsPage() {
if (categoryId) params.set('categoryId', categoryId);
if (subcategoryId) params.set('subcategoryId', subcategoryId);
const res = await fetch(`/api/products?${params}`);
const data: ProductsResponse = await res.json();
setProducts(data.data);
const res = await fetch(`/api/ingredients?${params}`);
const data: IngredientsResponse = await res.json();
setIngredients(data.data);
setTotal(data.total);
setLoading(false);
}, [page, search, categoryId, subcategoryId]);
useEffect(() => {
fetchProducts();
}, [fetchProducts]);
fetchIngredients();
}, [fetchIngredients]);
// Reset page when filters change
useEffect(() => {
@ -136,13 +136,13 @@ export default function ProductsPage() {
<div className="p-4 sm:p-6 lg:p-8">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6 lg:mb-8">
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Product Management</h1>
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Ingredient Management</h1>
<div className="flex gap-2 sm:gap-3">
<button className="flex-1 sm:flex-none px-4 sm:px-5 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-700 font-medium hover:bg-gray-50 transition-colors text-sm sm:text-base">
Import
</button>
<button className="flex-1 sm:flex-none px-4 sm:px-5 py-2.5 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors text-sm sm:text-base whitespace-nowrap">
+ Create Product
+ Add Ingredient
</button>
</div>
</div>
@ -151,7 +151,7 @@ export default function ProductsPage() {
<div className="bg-white rounded-lg border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
<div className="flex flex-col sm:flex-row sm:flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 mb-4">
{/* Search */}
<form onSubmit={handleSearch} className="w-full sm:flex-1 sm:min-w-[250px]">
<form onSubmit={handleSearch} className="w-full sm:flex-1 sm:min-w-62.5">
<div className="relative">
<input
type="text"
@ -237,17 +237,17 @@ export default function ProductsPage() {
)}
</div>
{/* Product Table */}
{/* Ingredient Table */}
{loading ? (
<div className="bg-white rounded-lg border border-gray-200 p-12 text-center">
<p className="text-gray-500">Loading products...</p>
<p className="text-gray-500">Loading ingredients...</p>
</div>
) : products.length === 0 ? (
) : ingredients.length === 0 ? (
<div className="bg-white rounded-lg border border-gray-200 p-12 text-center">
<p className="text-gray-500">No products found.</p>
<p className="text-gray-500">No ingredients found.</p>
</div>
) : (
<ProductTable products={products} />
<IngredientTable ingredients={ingredients} />
)}
{/* Pagination */}
@ -268,7 +268,6 @@ export default function ProductsPage() {
</button>
{Array.from({ length: totalPages }, (_, i) => i + 1)
.filter(p => {
// Show first, last, current, and neighbors
if (p === 1 || p === totalPages) return true;
if (Math.abs(p - page) <= 1) return true;
return false;
@ -280,7 +279,7 @@ export default function ProductsPage() {
)}
<button
onClick={() => setPage(p)}
className={`px-2 sm:px-3 py-2 rounded-lg text-xs sm:text-sm min-w-[32px] sm:min-w-[36px] ${
className={`px-2 sm:px-3 py-2 rounded-lg text-xs sm:text-sm min-w-8 sm:min-w-9 ${
p === page
? 'bg-blue-600 text-white font-medium'
: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition-colors'

2
app/layout.tsx
View File

@ -14,7 +14,7 @@ const geistMono = Geist_Mono({
export const metadata: Metadata = {
title: "KitchenOS - Restaurant Inventory Management",
description: "Professional restaurant inventory and product management system",
description: "Professional restaurant inventory and ingredient management system",
};
export default function RootLayout({

2
app/page.tsx
View File

@ -1,5 +1,5 @@
import { redirect } from 'next/navigation';
export default function Home() {
redirect('/dashboard/products');
redirect('/dashboard/ingredients');
}

82
components/ProductTable.tsx → components/IngredientTable.tsx
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react';
export interface Product {
export interface Ingredient {
_id: string;
code: string;
name: string;
@ -17,28 +17,28 @@ export interface Product {
updatedAt: string;
}
interface ProductTableProps {
products: Product[];
interface IngredientTableProps {
ingredients: Ingredient[];
}
export default function ProductTable({ products }: ProductTableProps) {
const [selectedProducts, setSelectedProducts] = useState<Set<string>>(new Set());
export default function IngredientTable({ ingredients }: IngredientTableProps) {
const [selectedIngredients, setSelectedIngredients] = useState<Set<string>>(new Set());
const toggleProduct = (id: string) => {
const newSelected = new Set(selectedProducts);
const toggleIngredient = (id: string) => {
const newSelected = new Set(selectedIngredients);
if (newSelected.has(id)) {
newSelected.delete(id);
} else {
newSelected.add(id);
}
setSelectedProducts(newSelected);
setSelectedIngredients(newSelected);
};
const toggleAll = () => {
if (selectedProducts.size === products.length) {
setSelectedProducts(new Set());
if (selectedIngredients.size === ingredients.length) {
setSelectedIngredients(new Set());
} else {
setSelectedProducts(new Set(products.map(p => p._id)));
setSelectedIngredients(new Set(ingredients.map(i => i._id)));
}
};
@ -57,13 +57,13 @@ export default function ProductTable({ products }: ProductTableProps) {
<th className="px-4 lg:px-6 py-3 text-left">
<input
type="checkbox"
checked={selectedProducts.size === products.length && products.length > 0}
checked={selectedIngredients.size === ingredients.length && ingredients.length > 0}
onChange={toggleAll}
className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
</th>
<th className="px-4 lg:px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Product
Ingredient
</th>
<th className="hidden lg:table-cell px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
Category
@ -92,38 +92,38 @@ export default function ProductTable({ products }: ProductTableProps) {
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{products.map((product) => (
<tr key={product._id} className="hover:bg-gray-50 transition-colors">
{ingredients.map((ingredient) => (
<tr key={ingredient._id} className="hover:bg-gray-50 transition-colors">
<td className="px-4 lg:px-6 py-4">
<input
type="checkbox"
checked={selectedProducts.has(product._id)}
onChange={() => toggleProduct(product._id)}
checked={selectedIngredients.has(ingredient._id)}
onChange={() => toggleIngredient(ingredient._id)}
className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
/>
</td>
<td className="px-4 lg:px-6 py-4">
<div>
<p className="text-sm font-medium text-gray-900">{product.name}</p>
<p className="text-xs text-gray-500">ID: {product.code}</p>
<p className="text-sm font-medium text-gray-900">{ingredient.name}</p>
<p className="text-xs text-gray-500">ID: {ingredient.code}</p>
<p className="text-xs text-gray-500 lg:hidden mt-1">
{product.category} • {product.quantity} {product.unit}
{ingredient.category} • {ingredient.quantity} {ingredient.unit}
</p>
</div>
</td>
<td className="hidden lg:table-cell px-6 py-4 text-sm text-gray-700">{product.category}</td>
<td className="hidden xl:table-cell px-6 py-4 text-sm text-gray-700">{product.subcategory}</td>
<td className="hidden lg:table-cell px-6 py-4 text-sm text-gray-700">{ingredient.category}</td>
<td className="hidden xl:table-cell px-6 py-4 text-sm text-gray-700">{ingredient.subcategory}</td>
<td className="px-4 lg:px-6 py-4 text-sm text-gray-700">
{product.quantity} {product.unit}
{ingredient.quantity} {ingredient.unit}
</td>
<td className="hidden lg:table-cell px-6 py-4 text-sm text-gray-700">€{product.unitPrice.toFixed(2)}</td>
<td className="hidden xl:table-cell px-6 py-4 text-sm text-gray-700">{product.vat}%</td>
<td className="hidden lg:table-cell px-6 py-4 text-sm text-gray-700">€{ingredient.unitPrice.toFixed(2)}</td>
<td className="hidden xl:table-cell px-6 py-4 text-sm text-gray-700">{ingredient.vat}%</td>
<td className="px-4 lg:px-6 py-4 text-sm font-bold text-gray-900">
€{calculateNetPrice(product.unitPrice, product.vat).toFixed(2)}
€{calculateNetPrice(ingredient.unitPrice, ingredient.vat).toFixed(2)}
</td>
<td className="hidden lg:table-cell px-6 py-4">
<a href="#" className="text-sm text-blue-600 hover:text-blue-800 font-medium">
{product.supplier}
{ingredient.supplier}
</a>
</td>
<td className="px-4 lg:px-6 py-4">
@ -142,20 +142,20 @@ export default function ProductTable({ products }: ProductTableProps) {
{/* Mobile Card View */}
<div className="md:hidden space-y-4">
{products.map((product) => (
<div key={product._id} className="bg-white rounded-lg border border-gray-200 p-4">
{ingredients.map((ingredient) => (
<div key={ingredient._id} className="bg-white rounded-lg border border-gray-200 p-4">
<div className="flex items-start gap-3">
<input
type="checkbox"
checked={selectedProducts.has(product._id)}
onChange={() => toggleProduct(product._id)}
checked={selectedIngredients.has(ingredient._id)}
onChange={() => toggleIngredient(ingredient._id)}
className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 mt-1"
/>
<div className="flex-1">
<div className="flex items-start justify-between">
<div>
<h3 className="text-sm font-semibold text-gray-900">{product.name}</h3>
<p className="text-xs text-gray-500 mt-0.5">ID: {product.code}</p>
<h3 className="text-sm font-semibold text-gray-900">{ingredient.name}</h3>
<p className="text-xs text-gray-500 mt-0.5">ID: {ingredient.code}</p>
</div>
<button className="text-gray-400 hover:text-gray-600">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@ -167,28 +167,28 @@ export default function ProductTable({ products }: ProductTableProps) {
<div className="mt-3 grid grid-cols-2 gap-3">
<div>
<p className="text-xs text-gray-500">Category</p>
<p className="text-sm text-gray-900 mt-0.5">{product.category}</p>
<p className="text-sm text-gray-900 mt-0.5">{ingredient.category}</p>
</div>
<div>
<p className="text-xs text-gray-500">Subcategory</p>
<p className="text-sm text-gray-900 mt-0.5">{product.subcategory}</p>
<p className="text-sm text-gray-900 mt-0.5">{ingredient.subcategory}</p>
</div>
<div>
<p className="text-xs text-gray-500">Quantity</p>
<p className="text-sm text-gray-900 mt-0.5">{product.quantity} {product.unit}</p>
<p className="text-sm text-gray-900 mt-0.5">{ingredient.quantity} {ingredient.unit}</p>
</div>
<div>
<p className="text-xs text-gray-500">Unit Price</p>
<p className="text-sm text-gray-900 mt-0.5">€{product.unitPrice.toFixed(2)}</p>
<p className="text-sm text-gray-900 mt-0.5">€{ingredient.unitPrice.toFixed(2)}</p>
</div>
<div>
<p className="text-xs text-gray-500">VAT</p>
<p className="text-sm text-gray-900 mt-0.5">{product.vat}%</p>
<p className="text-sm text-gray-900 mt-0.5">{ingredient.vat}%</p>
</div>
<div>
<p className="text-xs text-gray-500">Net Price</p>
<p className="text-sm font-bold text-gray-900 mt-0.5">
€{calculateNetPrice(product.unitPrice, product.vat).toFixed(2)}
€{calculateNetPrice(ingredient.unitPrice, ingredient.vat).toFixed(2)}
</p>
</div>
</div>
@ -197,12 +197,12 @@ export default function ProductTable({ products }: ProductTableProps) {
<div>
<p className="text-xs text-gray-500">Supplier</p>
<a href="#" className="text-sm text-blue-600 hover:text-blue-800 font-medium">
{product.supplier}
{ingredient.supplier}
</a>
</div>
<div className="text-right">
<p className="text-xs text-gray-500">Updated</p>
<p className="text-xs text-gray-700 mt-0.5">{new Date(product.updatedAt).toLocaleDateString()}</p>
<p className="text-xs text-gray-700 mt-0.5">{new Date(ingredient.updatedAt).toLocaleDateString()}</p>
</div>
</div>
</div>

2
components/Sidebar.tsx
View File

@ -11,7 +11,7 @@ interface NavItem {
const navItems: NavItem[] = [
{ label: 'Dashboard', icon: '📊', href: '/dashboard' },
{ label: 'Products', icon: '📦', active: true, href: '/dashboard/products' },
{ label: 'Ingredients', icon: '📦', active: true, href: '/dashboard/ingredients' },
{ label: 'Categories', icon: '🏷️', href: '/dashboard/categories' },
{ label: 'Subcategories', icon: '🔖', href: '/dashboard/subcategories' },
{ label: 'Suppliers', icon: '🚚', href: '/dashboard/suppliers' },

4
lib/types.ts
View File

@ -22,7 +22,7 @@ export interface Supplier {
updatedAt: Date;
}
export interface ProductDoc {
export interface IngredientDoc {
_id: ObjectId;
code: string;
name: string;
@ -37,7 +37,7 @@ export interface ProductDoc {
updatedAt: Date;
}
export interface ProductWithRefs {
export interface IngredientWithRefs {
_id: string;
code: string;
name: string;

18
scripts/seed.ts
View File

@ -14,7 +14,7 @@ async function seed() {
db.collection('categories').deleteMany({}),
db.collection('subcategories').deleteMany({}),
db.collection('suppliers').deleteMany({}),
db.collection('products').deleteMany({}),
db.collection('ingredients').deleteMany({}),
]);
const now = new Date();
@ -71,10 +71,10 @@ async function seed() {
]);
console.log('Inserted 5 suppliers');
// Insert products
await db.collection('products').insertMany([
// Insert ingredients
await db.collection('ingredients').insertMany([
{
code: 'PRD-001',
code: 'ING-001',
name: 'Organic Butter',
categoryId: categoryIds.dairy,
subcategoryId: subcategoryIds.butterSpreads,
@ -87,7 +87,7 @@ async function seed() {
updatedAt: new Date('2026-02-10'),
},
{
code: 'PRD-002',
code: 'ING-002',
name: 'All-Purpose Flour',
categoryId: categoryIds.dryGoods,
subcategoryId: subcategoryIds.flours,
@ -100,7 +100,7 @@ async function seed() {
updatedAt: new Date('2026-02-09'),
},
{
code: 'PRD-003',
code: 'ING-003',
name: 'Atlantic Salmon Fillet',
categoryId: categoryIds.seafood,
subcategoryId: subcategoryIds.freshFish,
@ -113,7 +113,7 @@ async function seed() {
updatedAt: new Date('2026-02-11'),
},
{
code: 'PRD-004',
code: 'ING-004',
name: 'Madagascar Vanilla Extract',
categoryId: categoryIds.dryGoods,
subcategoryId: subcategoryIds.spicesExtracts,
@ -126,7 +126,7 @@ async function seed() {
updatedAt: new Date('2026-02-08'),
},
{
code: 'PRD-005',
code: 'ING-005',
name: 'Fresh Avocados',
categoryId: categoryIds.produce,
subcategoryId: subcategoryIds.fruits,
@ -139,7 +139,7 @@ async function seed() {
updatedAt: new Date('2026-02-11'),
},
]);
console.log('Inserted 5 products');
console.log('Inserted 5 ingredients');
console.log('Seeding complete!');
await client.close();