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

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' }}>
-        Granska och standardisera produktnamn, slå ihop dubbletter och hantera kategorier.
-      </p>
-      <ExpandableCreateProductSection />
-      <ResetProductsButton />
-      <MergePreviewForm />
-      <AdminProductList />
+      {/* Undertabbar */}
+      <div style={{ display: 'flex', gap: '0.25rem', borderBottom: '1px solid #ddd', marginBottom: '1.5rem' }}>
+        {subTabs.map((tab) => (
+          <button
+            key={tab.id}
+            style={tabStyle(activeSubTab === tab.id)}
+            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>
   );
 }