feat: add functionality for managing deleted products, including restoration and permanent deletion

backend/src/products/products.controller.ts

@@ -186,6 +186,18 @@ export class ProductsController {
     return this.productsService.update(id, body);
   }
 
+  @Roles('admin')
+  @Get('deleted')
+  findDeleted() {
+    return this.productsService.findDeleted();
+  }
+
+  @Roles('admin')
+  @Delete(':id/permanent')
+  permanentDelete(@Param('id', ParseIntPipe) id: number) {
+    return this.productsService.permanentDelete(id);
+  }
+
   @Roles('admin')
   @Delete(':id')
   remove(@Param('id', ParseIntPipe) id: number) {

backend/src/products/products.service.ts

@@ -127,19 +127,8 @@ export class ProductsService {
       });
 
       if (existing && existing.id !== id) {
-        if (!existing.isActive) {
+        // Om en annan produkt har samma namn, returnera ett tydligt fel
-          return this.prisma.product.update({
+        throw new Error('Det finns redan en annan produkt med detta namn. Välj ett unikt namn.');
-            where: { id: existing.id },
-            data: {
-              isActive: true,
-              deletedAt: null,
-              name,
-              canonicalName: name,
-            },
-          });
-        }
-
-        return existing;
       }
 
       updateData.name = name;
@@ -186,6 +175,13 @@ export class ProductsService {
     });
   }
 
+  async findDeleted() {
+    return this.prisma.product.findMany({
+      where: { isActive: false },
+      orderBy: { deletedAt: 'desc' },
+    });
+  }
+
   async remove(id: number) {
     await this.findOne(id);
 
@@ -198,6 +194,17 @@ export class ProductsService {
     });
   }
 
+  async permanentDelete(id: number) {
+    const product = await this.prisma.product.findUnique({ where: { id } });
+    if (!product) {
+      throw new NotFoundException(`Product with id ${id} not found`);
+    }
+    // Ta bort beroenden först
+    await this.prisma.productTag.deleteMany({ where: { productId: id } });
+    await this.prisma.userProduct.deleteMany({ where: { productId: id } });
+    return this.prisma.product.delete({ where: { id } });
+  }
+
   async restore(id: number) {
     const product = await this.findOne(id);
 

frontend/app/admin/products/DeletedProductsView.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+type DeletedProduct = {
+  id: number;
+  name: string;
+  normalizedName: string;
+  canonicalName?: string | null;
+  category?: string | null;
+  brand?: string | null;
+  deletedAt?: string | null;
+};
+
+export default function DeletedProductsView() {
+  const [products, setProducts] = useState<DeletedProduct[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [pendingId, setPendingId] = useState<number | null>(null);
+  const [search, setSearch] = useState('');
+
+  const fetchDeleted = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    fetch('/api/admin/deleted-products')
+      .then((r) => r.json())
+      .then((data) => {
+        if (Array.isArray(data)) setProducts(data);
+        else setError('Kunde inte ladda raderade produkter.');
+      })
+      .catch(() => setError('Nätverksfel. Försök igen.'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => { fetchDeleted(); }, [fetchDeleted]);
+
+  const handleRestore = async (id: number) => {
+    if (!confirm('Återställ produkten?')) return;
+    setPendingId(id);
+    try {
+      const res = await fetch(`/api/admin/deleted-products/${id}`, { method: 'POST' });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        setError(d?.error ?? 'Kunde inte återställa produkten.');
+      } else {
+        setProducts((prev) => prev.filter((p) => p.id !== id));
+      }
+    } catch {
+      setError('Nätverksfel. Försök igen.');
+    } finally {
+      setPendingId(null);
+    }
+  };
+
+  const handlePermanentDelete = async (id: number, name: string) => {
+    if (!confirm(`Radera "${name}" permanent? Detta kan inte ångras.`)) return;
+    setPendingId(id);
+    try {
+      const res = await fetch(`/api/admin/deleted-products/${id}`, { method: 'DELETE' });
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}));
+        setError(d?.error ?? 'Kunde inte radera produkten permanent.');
+      } else {
+        setProducts((prev) => prev.filter((p) => p.id !== id));
+      }
+    } catch {
+      setError('Nätverksfel. Försök igen.');
+    } finally {
+      setPendingId(null);
+    }
+  };
+
+  const filtered = products.filter((p) =>
+    p.name.toLowerCase().includes(search.toLowerCase()) ||
+    (p.canonicalName ?? '').toLowerCase().includes(search.toLowerCase())
+  );
+
+  if (loading) return <p style={{ color: '#888' }}>Laddar raderade produkter...</p>;
+
+  return (
+    <div>
+      <p style={{ color: '#555', marginBottom: '1rem' }}>
+        Här visas produkter som mjukraderats. Du kan återställa dem eller radera dem permanent.
+      </p>
+
+      {error && (
+        <div style={{ color: '#c00', background: '#fff0f0', border: '1px solid #fcc', borderRadius: 6, padding: '0.5rem 1rem', marginBottom: '1rem' }}>
+          {error}
+        </div>
+      )}
+
+      <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', alignItems: 'center' }}>
+        <input
+          type="text"
+          placeholder="Sök på namn..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          style={{ padding: '0.4rem 0.75rem', borderRadius: 6, border: '1px solid #ccc', fontSize: '0.9rem', minWidth: 220 }}
+        />
+        <span style={{ color: '#888', fontSize: '0.85rem' }}>
+          {filtered.length} av {products.length} produkter
+        </span>
+        <button
+          onClick={fetchDeleted}
+          style={{ marginLeft: 'auto', padding: '0.35rem 0.75rem', borderRadius: 6, border: '1px solid #ccc', background: '#f8f8f8', cursor: 'pointer', fontSize: '0.85rem' }}
+        >
+          Uppdatera
+        </button>
+      </div>
+
+      {filtered.length === 0 ? (
+        <p style={{ color: '#888', fontStyle: 'italic' }}>Inga raderade produkter hittades.</p>
+      ) : (
+        <div style={{ overflowX: 'auto' }}>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9rem' }}>
+            <thead>
+              <tr style={{ background: '#f2f2f2', textAlign: 'left' }}>
+                <th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>ID</th>
+                <th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Namn</th>
+                <th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Canonical name</th>
+                <th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Kategori</th>
+                <th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Raderades</th>
+                <th style={{ padding: '0.5rem 0.75rem', borderBottom: '2px solid #ddd' }}>Åtgärder</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((p) => (
+                <tr key={p.id} style={{ borderBottom: '1px solid #eee' }}>
+                  <td style={{ padding: '0.5rem 0.75rem', color: '#888' }}>{p.id}</td>
+                  <td style={{ padding: '0.5rem 0.75rem', fontWeight: 500 }}>{p.name}</td>
+                  <td style={{ padding: '0.5rem 0.75rem', color: '#666' }}>{p.canonicalName || '–'}</td>
+                  <td style={{ padding: '0.5rem 0.75rem', color: '#666' }}>{p.category || '–'}</td>
+                  <td style={{ padding: '0.5rem 0.75rem', color: '#999', fontSize: '0.8rem' }}>
+                    {p.deletedAt ? new Date(p.deletedAt).toLocaleDateString('sv-SE') : '–'}
+                  </td>
+                  <td style={{ padding: '0.5rem 0.75rem' }}>
+                    <div style={{ display: 'flex', gap: '0.4rem' }}>
+                      <button
+                        disabled={pendingId === p.id}
+                        onClick={() => handleRestore(p.id)}
+                        style={{
+                          padding: '0.25rem 0.6rem',
+                          borderRadius: 5,
+                          border: '1px solid #3a7d44',
+                          background: '#eafaf1',
+                          color: '#276032',
+                          cursor: pendingId === p.id ? 'not-allowed' : 'pointer',
+                          fontSize: '0.8rem',
+                          fontWeight: 500,
+                        }}
+                      >
+                        Återställ
+                      </button>
+                      <button
+                        disabled={pendingId === p.id}
+                        onClick={() => handlePermanentDelete(p.id, p.name)}
+                        style={{
+                          padding: '0.25rem 0.6rem',
+                          borderRadius: 5,
+                          border: '1px solid #c00',
+                          background: '#fff0f0',
+                          color: '#c00',
+                          cursor: pendingId === p.id ? 'not-allowed' : 'pointer',
+                          fontSize: '0.8rem',
+                          fontWeight: 500,
+                        }}
+                      >
+                        Radera permanent
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/app/api/admin/deleted-products/[id]/route.ts

@@ -0,0 +1,29 @@
+import { withAuth } from '../../../../../../lib/with-auth';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
+
+export const POST = withAuth(async (_req, session, context) => {
+  const { id } = await context.params;
+  const productId = Number(id);
+  if (!productId) return Response.json({ error: 'Ogiltigt id' }, { status: 400 });
+
+  const res = await fetch(`${API_BASE}/api/products/${productId}/restore`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${session.accessToken}` },
+  });
+  const data = await res.json().catch(() => ({}));
+  return Response.json(data, { status: res.status });
+});
+
+export const DELETE = withAuth(async (_req, session, context) => {
+  const { id } = await context.params;
+  const productId = Number(id);
+  if (!productId) return Response.json({ error: 'Ogiltigt id' }, { status: 400 });
+
+  const res = await fetch(`${API_BASE}/api/products/${productId}/permanent`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${session.accessToken}` },
+  });
+  const data = await res.json().catch(() => ({}));
+  return Response.json(data, { status: res.status });
+});

frontend/app/api/admin/deleted-products/route.ts

@@ -0,0 +1,11 @@
+import { withAuth } from '../../../../lib/with-auth';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
+
+export const GET = withAuth(async (_req, session) => {
+  const res = await fetch(`${API_BASE}/api/products/deleted`, {
+    headers: { Authorization: `Bearer ${session.accessToken}` },
+  });
+  const data = await res.json().catch(() => ([]));
+  return Response.json(data, { status: res.status });
+});

frontend/app/profil/tabs/DatabsTab.tsx

@@ -1,18 +1,71 @@
+'use client';
+
+import { useState } from 'react';
 import MergePreviewForm from '../../admin/products/MergePreviewForm';
 import AdminProductList from '../../admin/products/AdminProductList';
 import ExpandableCreateProductSection from '../../admin/products/ExpandableCreateProductSection';
 import ResetProductsButton from '../../admin/products/ResetProductsButton';
+import DeletedProductsView from '../../admin/products/DeletedProductsView';
+
+const subTabs = [
+  { id: 'varor', label: '📦 Varor' },
+  { id: 'skapa-merge', label: '➕ Skapa / Slå ihop' },
+  { id: 'papperskorg', label: '🗑️ Papperskorg' },
+] as const;
+
+type SubTabId = typeof subTabs[number]['id'];
+
+const tabStyle = (active: boolean): React.CSSProperties => ({
+  padding: '0.4rem 1rem',
+  border: 'none',
+  borderBottom: active ? '2.5px solid #333' : '2.5px solid transparent',
+  background: 'none',
+  cursor: 'pointer',
+  fontWeight: active ? 600 : 400,
+  color: active ? '#111' : '#666',
+  fontSize: '0.95rem',
+  transition: 'color 0.15s, border-color 0.15s',
+});
+
+export default function DatabsTab() {
+  const [activeSubTab, setActiveSubTab] = useState<SubTabId>('varor');
 
-export default async function DatabsTab() {
   return (
     <div>
-      <p style={{ color: '#555', marginBottom: '1.5rem' }}>
+      {/* Undertabbar */}
-        Granska och standardisera produktnamn, slå ihop dubbletter och hantera kategorier.
+      <div style={{ display: 'flex', gap: '0.25rem', borderBottom: '1px solid #ddd', marginBottom: '1.5rem' }}>
-      </p>
+        {subTabs.map((tab) => (
-      <ExpandableCreateProductSection />
+          <button
-      <ResetProductsButton />
+            key={tab.id}
-      <MergePreviewForm />
+            style={tabStyle(activeSubTab === tab.id)}
-      <AdminProductList />
+            onClick={() => setActiveSubTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {activeSubTab === 'varor' && (
+        <div>
+          <p style={{ color: '#555', marginBottom: '1rem' }}>
+            Granska och standardisera produktnamn samt hantera kategorier.
+          </p>
+          <AdminProductList />
+        </div>
+      )}
+
+      {activeSubTab === 'skapa-merge' && (
+        <div>
+          <p style={{ color: '#555', marginBottom: '1rem' }}>
+            Skapa ny produkt, återställ produktdatabas eller slå ihop dubbletter.
+          </p>
+          <ExpandableCreateProductSection />
+          <ResetProductsButton />
+          <MergePreviewForm />
+        </div>
+      )}
+
+      {activeSubTab === 'papperskorg' && <DeletedProductsView />}
     </div>
   );
 }

frontend/lib/error-handler.ts

@@ -8,7 +8,11 @@ export async function parseErrorResponse(response: Response): Promise<string> {
     const data = await response.json();
     
     // Om backend skickade ett felmeddelande
-    if (data.message) {
+    if (typeof data.message === 'string') {
+      // Produktnamns-dubblett
+      if (data.message.includes('Det finns redan en annan produkt med detta namn')) {
+        return 'Det finns redan en annan produkt med detta namn. Välj ett unikt namn.';
+      }
       return data.message;
     }
     if (data.error) {
@@ -43,3 +47,8 @@ export async function parseErrorResponse(response: Response): Promise<string> {
 
   return defaultMessages[status] || `Fel (${status}). Försök igen senare.`;
 }
+
+// Prisma unique constraint: email
+if (typeof data.message === 'string' && data.message.includes('User_email_key')) {
+  return 'E-postadressen används redan av en annan användare.';
+}