feat: PantryItem (Baslager) - tabell, backend-modul och frontend-sida

backend/prisma/migrations/20260415100000_add_pantry_item/migration.sql

@@ -0,0 +1,13 @@
+-- CreateTable
+CREATE TABLE `PantryItem` (
+    `id` INTEGER NOT NULL AUTO_INCREMENT,
+    `productId` INTEGER NOT NULL,
+    `createdAt` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
+    `updatedAt` DATETIME(3) NOT NULL,
+
+    UNIQUE INDEX `PantryItem_productId_key`(`productId`),
+    PRIMARY KEY (`id`)
+) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+
+-- AddForeignKey
+ALTER TABLE `PantryItem` ADD CONSTRAINT `PantryItem_productId_fkey` FOREIGN KEY (`productId`) REFERENCES `Product`(`id`) ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/schema.prisma

@@ -18,8 +18,9 @@ model Product {
   createdAt      DateTime        @default(now())
   updatedAt      DateTime        @updatedAt
 
-  inventoryItems InventoryItem[]
+  inventoryItems    InventoryItem[]
   recipeIngredients RecipeIngredient[]
+  pantryItems       PantryItem[]
 }
 
 model InventoryItem {
@@ -84,3 +85,11 @@ model RecipeIngredient {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 }
+
+model PantryItem {
+  id        Int      @id @default(autoincrement())
+  productId Int      @unique
+  product   Product  @relation(fields: [productId], references: [id], onDelete: Cascade)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

backend/src/app.module.ts

@@ -5,6 +5,7 @@ import { ProductsModule } from './products/products.module';
 import { InventoryModule } from './inventory/inventory.module';
 import { RecipesModule } from './recipes/recipes.module';
 import { QuickImportModule } from './quick-import/quick-import.module';
+import { PantryModule } from './pantry/pantry.module';
 
 
 @Module({
@@ -15,6 +16,7 @@ import { QuickImportModule } from './quick-import/quick-import.module';
     InventoryModule,
     RecipesModule,
     QuickImportModule,
+    PantryModule,
   ],
 })
 export class AppModule {}

backend/src/pantry/dto/create-pantry-item.dto.ts

@@ -0,0 +1,7 @@
+import { IsInt, IsPositive } from 'class-validator';
+
+export class CreatePantryItemDto {
+  @IsInt()
+  @IsPositive()
+  productId: number;
+}

backend/src/pantry/pantry.controller.ts

@@ -0,0 +1,23 @@
+import { Body, Controller, Delete, Get, Param, ParseIntPipe, Post } from '@nestjs/common';
+import { PantryService } from './pantry.service';
+import { CreatePantryItemDto } from './dto/create-pantry-item.dto';
+
+@Controller('pantry')
+export class PantryController {
+  constructor(private readonly pantryService: PantryService) {}
+
+  @Get()
+  findAll() {
+    return this.pantryService.findAll();
+  }
+
+  @Post()
+  create(@Body() body: CreatePantryItemDto) {
+    return this.pantryService.create(body);
+  }
+
+  @Delete(':id')
+  remove(@Param('id', ParseIntPipe) id: number) {
+    return this.pantryService.remove(id);
+  }
+}

backend/src/pantry/pantry.module.ts

@@ -0,0 +1,11 @@
+import { Module } from '@nestjs/common';
+import { PantryController } from './pantry.controller';
+import { PantryService } from './pantry.service';
+import { PrismaModule } from '../prisma/prisma.module';
+
+@Module({
+  controllers: [PantryController],
+  providers: [PantryService],
+  imports: [PrismaModule],
+})
+export class PantryModule {}

backend/src/pantry/pantry.service.ts

@@ -0,0 +1,44 @@
+import { Injectable, ConflictException, NotFoundException } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { CreatePantryItemDto } from './dto/create-pantry-item.dto';
+
+@Injectable()
+export class PantryService {
+  constructor(private readonly prisma: PrismaService) {}
+
+  findAll() {
+    return this.prisma.pantryItem.findMany({
+      include: {
+        product: true,
+      },
+      orderBy: {
+        product: { name: 'asc' },
+      },
+    });
+  }
+
+  async create(data: CreatePantryItemDto) {
+    const existing = await this.prisma.pantryItem.findUnique({
+      where: { productId: data.productId },
+    });
+
+    if (existing) {
+      throw new ConflictException('Produkten finns redan i baslagret');
+    }
+
+    return this.prisma.pantryItem.create({
+      data: { productId: data.productId },
+      include: { product: true },
+    });
+  }
+
+  async remove(id: number) {
+    const item = await this.prisma.pantryItem.findUnique({ where: { id } });
+
+    if (!item) {
+      throw new NotFoundException(`PantryItem med id ${id} hittades inte`);
+    }
+
+    return this.prisma.pantryItem.delete({ where: { id } });
+  }
+}

frontend/app/Navigation.tsx

@@ -59,6 +59,21 @@ export default function Navigation() {
       >
         📖 Recept
       </Link>
+      <Link
+        href="/baslager"
+        style={{
+          padding: '0.5rem 0.75rem',
+          background: '#fff',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          textDecoration: 'none',
+          color: '#0070f3',
+          fontSize: '0.9rem',
+          fontWeight: 500,
+        }}
+      >
+        🏪 Baslager
+      </Link>
       <Link
         href="/admin/products"
         style={{

frontend/app/baslager/AddToPantryForm.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import type { Product } from '../../features/inventory/types';
+import { addPantryItem } from './actions';
+
+type Props = {
+  products: Product[];
+  pantryProductIds: Set<number>;
+};
+
+export default function AddToPantryForm({ products, pantryProductIds }: Props) {
+  const [selectedId, setSelectedId] = useState('');
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  const available = products.filter((p) => !pantryProductIds.has(p.id));
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!selectedId) return;
+    setError(null);
+    startTransition(async () => {
+      try {
+        await addPantryItem(Number(selectedId));
+        setSelectedId('');
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Okänt fel');
+      }
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
+      <select
+        value={selectedId}
+        onChange={(e) => setSelectedId(e.target.value)}
+        required
+        style={{
+          flex: '1 1 220px',
+          padding: '0.6rem 0.75rem',
+          border: '1px solid #ddd',
+          borderRadius: '6px',
+          fontSize: '1rem',
+        }}
+      >
+        <option value="">Välj produkt…</option>
+        {available.map((p) => (
+          <option key={p.id} value={p.id}>
+            {p.canonicalName || p.name}
+          </option>
+        ))}
+      </select>
+      <button
+        type="submit"
+        disabled={isPending || !selectedId}
+        style={{
+          padding: '0.6rem 1.25rem',
+          background: '#0070f3',
+          color: '#fff',
+          border: 'none',
+          borderRadius: '6px',
+          fontWeight: 600,
+          cursor: isPending || !selectedId ? 'not-allowed' : 'pointer',
+          opacity: isPending || !selectedId ? 0.6 : 1,
+          fontSize: '1rem',
+        }}
+      >
+        {isPending ? 'Lägger till…' : 'Lägg till'}
+      </button>
+      {error && <span style={{ color: 'crimson', fontSize: '0.9rem' }}>{error}</span>}
+    </form>
+  );
+}

frontend/app/baslager/PantryList.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useTransition } from 'react';
+import { removePantryItem } from './actions';
+
+type PantryItem = {
+  id: number;
+  product: { id: number; name: string; canonicalName: string | null; category: string | null };
+};
+
+type Props = {
+  items: PantryItem[];
+};
+
+export default function PantryList({ items }: Props) {
+  const [isPending, startTransition] = useTransition();
+
+  function handleRemove(id: number, name: string) {
+    if (!confirm(`Ta bort "${name}" från baslagret?`)) return;
+    startTransition(async () => {
+      await removePantryItem(id);
+    });
+  }
+
+  if (items.length === 0) {
+    return (
+      <p style={{ color: '#888', fontStyle: 'italic' }}>
+        Baslagret är tomt. Lägg till produkter ovan.
+      </p>
+    );
+  }
+
+  // Gruppera per kategori
+  const grouped = items.reduce<Record<string, PantryItem[]>>((acc, item) => {
+    const cat = item.product.category || 'Övrigt';
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(item);
+    return acc;
+  }, {});
+
+  const sortedCategories = Object.keys(grouped).sort((a, b) => {
+    if (a === 'Övrigt') return 1;
+    if (b === 'Övrigt') return -1;
+    return a.localeCompare(b, 'sv');
+  });
+
+  return (
+    <div style={{ display: 'grid', gap: '1.5rem' }}>
+      {sortedCategories.map((category) => (
+        <section key={category}>
+          <h3 style={{ margin: '0 0 0.5rem', fontSize: '1rem', color: '#555', fontWeight: 600 }}>
+            {category}
+          </h3>
+          <div style={{ display: 'grid', gap: '0.4rem' }}>
+            {grouped[category].map((item) => {
+              const displayName = item.product.canonicalName || item.product.name;
+              return (
+                <div
+                  key={item.id}
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '0.6rem 0.75rem',
+                    border: '1px solid #eee',
+                    borderRadius: '6px',
+                    background: '#fafafa',
+                  }}
+                >
+                  <span>{displayName}</span>
+                  <button
+                    type="button"
+                    onClick={() => handleRemove(item.id, displayName)}
+                    disabled={isPending}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      color: '#c00',
+                      cursor: isPending ? 'not-allowed' : 'pointer',
+                      fontSize: '1.1rem',
+                      padding: '0.2rem 0.5rem',
+                      lineHeight: 1,
+                    }}
+                    title="Ta bort från baslagret"
+                  >
+                    ×
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}

frontend/app/baslager/actions.ts

@@ -0,0 +1,34 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { API_BASE } from '../../lib/api';
+
+export async function addPantryItem(productId: number) {
+  const res = await fetch(`${API_BASE}/api/pantry`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ productId }),
+    cache: 'no-store',
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Kunde inte lägga till i baslagret: ${text}`);
+  }
+
+  revalidatePath('/baslager');
+}
+
+export async function removePantryItem(id: number) {
+  const res = await fetch(`${API_BASE}/api/pantry/${id}`, {
+    method: 'DELETE',
+    cache: 'no-store',
+  });
+
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`Kunde inte ta bort från baslagret: ${text}`);
+  }
+
+  revalidatePath('/baslager');
+}

frontend/app/baslager/page.tsx

@@ -0,0 +1,44 @@
+import { fetchJson } from '../../lib/api';
+import type { Product } from '../../features/inventory/types';
+import Navigation from '../Navigation';
+import AddToPantryForm from './AddToPantryForm';
+import PantryList from './PantryList';
+
+type PantryItem = {
+  id: number;
+  productId: number;
+  createdAt: string;
+  updatedAt: string;
+  product: Product;
+};
+
+export default async function BaslagerPage() {
+  const [pantryItems, products] = await Promise.all([
+    fetchJson<PantryItem[]>('/api/pantry'),
+    fetchJson<Product[]>('/api/products'),
+  ]);
+
+  const pantryProductIds = new Set(pantryItems.map((i) => i.productId));
+
+  return (
+    <main style={{ padding: '1rem', maxWidth: '700px', margin: '0 auto' }}>
+      <Navigation />
+      <h1 style={{ marginBottom: '0.5rem' }}>Baslager</h1>
+      <p style={{ color: '#666', marginBottom: '1.5rem' }}>
+        Produkter du alltid räknar med att ha hemma.
+      </p>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>Lägg till produkt</h2>
+        <AddToPantryForm products={products} pantryProductIds={pantryProductIds} />
+      </section>
+
+      <section>
+        <h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>
+          {pantryItems.length} {pantryItems.length === 1 ? 'produkt' : 'produkter'} i baslagret
+        </h2>
+        <PantryList items={pantryItems} />
+      </section>
+    </main>
+  );
+}