From feda8a9477cbe89fd45751fd14f8f5265d3bd616 Mon Sep 17 00:00:00 2001
From: Patrick <patrick@perlbach24.de>
Date: Thu, 4 Jun 2026 23:31:32 +0200
Subject: [PATCH] =?UTF-8?q?Revert=20"Refactor:=20Shares-Funktionen=20in=20?=
 =?UTF-8?q?Datasets-Seite=20zusammengef=C3=BChrt"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 55a6c38e0242cc63e13898ecfbac67c8fac72311.
---
 frontend/app/datasets/page.tsx | 925 +++++++++++++++------------------
 frontend/app/shares/page.tsx   | 515 +++++++++++++++++-
 frontend/components/Header.tsx |   8 +-
 3 files changed, 935 insertions(+), 513 deletions(-)

diff --git a/frontend/app/datasets/page.tsx b/frontend/app/datasets/page.tsx
index e3b9da2..0a12f24 100644
--- a/frontend/app/datasets/page.tsx
+++ b/frontend/app/datasets/page.tsx
@@ -1,26 +1,21 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { useRouter } from "next/navigation"
-import { api, Dataset, Pool } from "@/lib/api"
+import { api, Dataset, SambaShare, NfsShare, Pool } from "@/lib/api"
 import { Header } from "@/components/Header"
 import { Button } from "@/components/ui/button"
 import { Dialog } from "@/components/ui/dialog"
-import { Plus, Trash2, RefreshCw, ChevronRight, ChevronDown, MoreVertical, Camera, AlertCircle } from "lucide-react"
+import { Plus, Trash2, RefreshCw, ChevronRight, ChevronDown, MoreVertical, Camera } from "lucide-react"
 import { Snapshot } from "@/lib/api"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import CreateSambaDialog from "@/components/shares/CreateSambaDialog"
-import CreateNfsDialog from "@/components/shares/CreateNfsDialog"
-import DeleteConfirmDialog from "@/components/shares/DeleteConfirmDialog"
 
 export default function DatasetsPage() {
-  const router = useRouter()
   const [tab, setTab] = useState<"datasets" | "shares">("datasets")
-
-  // ── Datasets state ──────────────────────────────────────────────────────────
   const [datasets, setDatasets] = useState<Dataset[]>([])
   const [pools, setPools] = useState<Pool[]>([])
+  const [sambaShares, setSambaShares] = useState<SambaShare[]>([])
+  const [nfsShares, setNfsShares] = useState<NfsShare[]>([])
   const [loading, setLoading] = useState(true)
   const [expandedDatasets, setExpandedDatasets] = useState<Set<string>>(new Set())
   const [poolTabs, setPoolTabs] = useState<Map<string, string>>(new Map())
@@ -32,46 +27,39 @@ export default function DatasetsPage() {
   const [cloneTarget, setCloneTarget] = useState<Snapshot | null>(null)
   const [cloneValue, setCloneValue] = useState("")
 
-  // Dataset dialogs
+  // Dialogs
   const [showCreateDataset, setShowCreateDataset] = useState(false)
+  const [showCreateSambaShare, setShowCreateSambaShare] = useState(false)
+  const [showCreateNfsShare, setShowCreateNfsShare] = useState(false)
   const [deleteDataset, setDeleteDataset] = useState<string | null>(null)
-  const [newDatasetName, setNewDatasetName] = useState("")
+  const [deleteSambaShare, setDeleteSambaShare] = useState<string | null>(null)
+  const [deleteNfsShare, setDeleteNfsShare] = useState<string | null>(null)
 
-  // ── Shares state (from shares/page.tsx) ─────────────────────────────────────
-  const [sharesTab, setSharesTab] = useState<"samba" | "nfs" | "config">("samba")
-  const [sambaShares, setSambaShares] = useState<any[]>([])
-  const [nfsShares, setNfsShares] = useState<any[]>([])
-  const [sambaConfig, setSambaConfig] = useState<any[]>([])
-  const [sharesLoading, setSharesLoading] = useState(false)
-  const [sharesError, setSharesError] = useState<string | null>(null)
-  const [showSambaDialog, setShowSambaDialog] = useState(false)
-  const [showNfsDialog, setShowNfsDialog] = useState(false)
-  const [deleteConfirm, setDeleteConfirm] = useState<{ type: "samba" | "nfs"; name: string } | null>(null)
-  const [deleting, setDeleting] = useState(false)
-  const [editMode, setEditMode] = useState(false)
-  const [rawConfigText, setRawConfigText] = useState("")
-  const [saving, setSaving] = useState(false)
-  const [macosEnabled, setMacosEnabled] = useState(false)
-  const [editingShare, setEditingShare] = useState<any | null>(null)
+  // Form states
+  const [newDatasetName, setNewDatasetName] = useState("")
+  const [newSambaName, setNewSambaName] = useState("")
+  const [newSambaPath, setNewSambaPath] = useState("")
+  const [newSambaComment, setNewSambaComment] = useState("")
+  const [newNfsPath, setNewNfsPath] = useState("")
+  const [newNfsClients, setNewNfsClients] = useState("")
+  const [newNfsOptions, setNewNfsOptions] = useState("ro,sync,no_subtree_check")
 
   useEffect(() => {
-    const token = localStorage.getItem("access_token")
-    if (!token) {
-      router.push("/login")
-      return
-    }
     loadData()
-  }, [router])
+  }, [])
 
-  // ── Load datasets + pools ───────────────────────────────────────────────────
   const loadData = async () => {
     setLoading(true)
     try {
-      const [ds, poolData] = await Promise.all([
+      const [ds, samba, nfs, poolData] = await Promise.all([
         api.getDatasets(),
+        api.getSambaShares(),
+        api.getNfsShares(),
         api.getPools().catch(() => []),
       ])
       setDatasets(ds)
+      setSambaShares(samba)
+      setNfsShares(nfs)
       setPools(Array.isArray(poolData) ? poolData : [])
     } catch (err) {
       console.error("Failed to load data:", err)
@@ -80,46 +68,6 @@ export default function DatasetsPage() {
     }
   }
 
-  // ── Load shares ─────────────────────────────────────────────────────────────
-  const loadShares = async () => {
-    try {
-      setSharesLoading(true)
-      setSharesError(null)
-
-      const [samba, nfs, config] = await Promise.all([
-        api.getSambaShares().catch(() => []),
-        api.getNfsShares().catch(() => []),
-        api.getSambaConfig().catch(() => ({ parameters: [] })),
-      ])
-
-      setSambaShares(samba)
-      setNfsShares(nfs)
-      const params: { key: string; value: string }[] = config.parameters || []
-      setSambaConfig(params)
-      const raw = params.map((p) => `${p.key} = ${p.value}`).join("\n")
-      setRawConfigText(raw)
-      const hasMacOS = ["fruit:encoding", "fruit:metadata", "fruit:zero_file_id", "fruit:nfs_aces"].every(
-        (k) => params.some((p) => p.key === k)
-      )
-      setMacosEnabled(hasMacOS)
-    } catch (err) {
-      setSharesError(err instanceof Error ? err.message : "Failed to load shares")
-    } finally {
-      setSharesLoading(false)
-    }
-  }
-
-  // Lazy-load shares when the tab is first activated
-  const [sharesLoaded, setSharesLoaded] = useState(false)
-  const handleSharesTab = () => {
-    setTab("shares")
-    if (!sharesLoaded) {
-      setSharesLoaded(true)
-      loadShares()
-    }
-  }
-
-  // ── Snapshot helpers ────────────────────────────────────────────────────────
   const loadPoolSnapshots = async (poolName: string) => {
     setLoadingSnaps((s) => new Set(s).add(poolName))
     try {
@@ -171,10 +119,10 @@ export default function DatasetsPage() {
     setCloneTarget(null)
   }
 
-  // ── Dataset CRUD ─────────────────────────────────────────────────────────────
   const handleCreateDataset = async () => {
     if (!newDatasetName.trim()) return
     try {
+      // Create dataset via API
       await api.createDataset(newDatasetName, {})
       setNewDatasetName("")
       setShowCreateDataset(false)
@@ -194,118 +142,62 @@ export default function DatasetsPage() {
     }
   }
 
-  // ── Share CRUD ───────────────────────────────────────────────────────────────
-  const handleDeleteSamba = async (name: string) => {
+  const handleCreateSambaShare = async () => {
+    if (!newSambaName.trim() || !newSambaPath.trim()) return
+    try {
+      await api.createSambaShare({
+        name: newSambaName,
+        path: newSambaPath,
+        comment: newSambaComment || undefined,
+      })
+      setNewSambaName("")
+      setNewSambaPath("")
+      setNewSambaComment("")
+      setShowCreateSambaShare(false)
+      loadData()
+    } catch (err) {
+      console.error("Failed to create Samba share:", err)
+    }
+  }
+
+  const handleDeleteSambaShare = async (name: string) => {
     try {
-      setDeleting(true)
       await api.deleteSambaShare(name)
-      setSambaShares(sambaShares.filter((s) => s.name !== name))
-      setDeleteConfirm(null)
+      setDeleteSambaShare(null)
+      loadData()
     } catch (err) {
-      setSharesError(err instanceof Error ? err.message : "Failed to delete share")
-    } finally {
-      setDeleting(false)
+      console.error("Failed to delete Samba share:", err)
     }
   }
 
-  const handleDeleteNfs = async (path: string) => {
+  const handleCreateNfsShare = async () => {
+    if (!newNfsPath.trim() || !newNfsClients.trim()) return
+    try {
+      await api.createNfsShare({
+        path: newNfsPath,
+        clients: newNfsClients,
+        options: newNfsOptions || undefined,
+      })
+      setNewNfsPath("")
+      setNewNfsClients("")
+      setNewNfsOptions("ro,sync,no_subtree_check")
+      setShowCreateNfsShare(false)
+      loadData()
+    } catch (err) {
+      console.error("Failed to create NFS share:", err)
+    }
+  }
+
+  const handleDeleteNfsShare = async (path: string) => {
     try {
-      setDeleting(true)
       await api.deleteNfsShare(path)
-      setNfsShares(nfsShares.filter((s) => s.path !== path))
-      setDeleteConfirm(null)
+      setDeleteNfsShare(null)
+      loadData()
     } catch (err) {
-      setSharesError(err instanceof Error ? err.message : "Failed to delete share")
-    } finally {
-      setDeleting(false)
+      console.error("Failed to delete NFS share:", err)
     }
   }
 
-  const handleSambaCreated = (newShare: any) => {
-    setSambaShares([...sambaShares, newShare])
-    setShowSambaDialog(false)
-  }
-
-  const handleNfsCreated = (newShare: any) => {
-    setNfsShares([...nfsShares, newShare])
-    setShowNfsDialog(false)
-  }
-
-  const handleSaveShare = async () => {
-    if (!editingShare) return
-    try {
-      setSaving(true)
-      await api.updateSambaShare(editingShare.oldName, {
-        name: editingShare.name,
-        path: editingShare.path,
-        comment: editingShare.comment,
-      })
-      setSambaShares(sambaShares.map((s) =>
-        s.name === editingShare.oldName
-          ? { name: editingShare.name, path: editingShare.path, comment: editingShare.comment, ...s }
-          : s
-      ))
-      setEditingShare(null)
-      setSharesError(null)
-    } catch (err) {
-      setSharesError(err instanceof Error ? err.message : "Failed to save share")
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const MACOS_PARAMS: { [key: string]: string } = {
-    "fruit:encoding": "native",
-    "fruit:metadata": "stream",
-    "fruit:zero_file_id": "yes",
-    "fruit:nfs_aces": "no",
-  }
-  const MACOS_KEYS = Object.keys(MACOS_PARAMS)
-
-  const handleSaveRaw = async () => {
-    try {
-      setSaving(true)
-      const parsed: { [key: string]: string } = {}
-      rawConfigText.split("\n").forEach((line) => {
-        const eq = line.indexOf("=")
-        if (eq === -1) return
-        const key = line.slice(0, eq).trim()
-        const value = line.slice(eq + 1).trim()
-        if (key) parsed[key] = value
-      })
-      await api.setSambaConfig(parsed)
-      await loadShares()
-      setEditMode(false)
-      setSharesError(null)
-    } catch (err) {
-      setSharesError(err instanceof Error ? err.message : "Failed to save configuration")
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const handleToggleMacOS = async (enable: boolean) => {
-    try {
-      setSaving(true)
-      const current = sambaConfig.reduce((acc, p) => { acc[p.key] = p.value; return acc }, {} as { [key: string]: string })
-      if (enable) {
-        await api.setSambaConfig({ ...current, ...MACOS_PARAMS } as { [key: string]: string })
-      } else {
-        const filtered: { [key: string]: string } = {}
-        Object.entries(current).forEach(([k, v]) => { if (!MACOS_KEYS.includes(k)) filtered[k] = v as string })
-        await api.setSambaConfig(filtered)
-      }
-      setMacosEnabled(enable)
-      await loadShares()
-      setSharesError(null)
-    } catch (err) {
-      setSharesError(err instanceof Error ? err.message : "Failed to update macOS settings")
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  // ── Dataset tree helpers ─────────────────────────────────────────────────────
   const formatBytes = (bytes: number) => {
     if (bytes === 0) return "0 B"
     const k = 1024
@@ -314,13 +206,82 @@ export default function DatasetsPage() {
     return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i]
   }
 
-  const getTopLevelDatasets = (): Dataset[] => datasets.filter((ds) => ds.name.split("/").length === 1)
+  const getDatasetDepth = (name: string): number => {
+    return name.split("/").length - 1
+  }
+
+  const getTopLevelDatasets = (): Dataset[] => {
+    return datasets.filter((ds) => ds.name.split("/").length === 1)
+  }
+
 
   const getChildDatasets = (parent: string): Dataset[] => {
     const prefix = parent + "/"
     return datasets.filter((ds) => ds.name.startsWith(prefix) && ds.name !== parent)
   }
 
+  const toggleExpand = (name: string) => {
+    const newExpanded = new Set(expandedDatasets)
+    if (newExpanded.has(name)) {
+      newExpanded.delete(name)
+    } else {
+      newExpanded.add(name)
+    }
+    setExpandedDatasets(newExpanded)
+  }
+
+  const renderDatasetTree = (parent?: string): React.ReactNode[] => {
+    const items: React.ReactNode[] = []
+    const datasetList = parent ? getChildDatasets(parent) : getTopLevelDatasets()
+
+    datasetList.forEach((ds) => {
+      const children = getChildDatasets(ds.name)
+      const isExpanded = expandedDatasets.has(ds.name)
+      const depth = getDatasetDepth(ds.name)
+
+      items.push(
+        <tr key={ds.name} className="border-b border-border hover:bg-muted/50">
+          <td className="px-4 py-3 font-mono text-xs" style={{ paddingLeft: `${depth * 24 + 16}px` }}>
+            <div className="flex items-center gap-2">
+              {children.length > 0 && (
+                <button
+                  onClick={() => toggleExpand(ds.name)}
+                  className="p-0 hover:bg-muted rounded"
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="w-4 h-4" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4" />
+                  )}
+                </button>
+              )}
+              {children.length === 0 && <div className="w-4" />}
+              <span>{ds.name.split("/").pop()}</span>
+            </div>
+          </td>
+          <td className="px-4 py-3">{ds.type}</td>
+          <td className="px-4 py-3">{formatBytes(ds.used || 0)}</td>
+          <td className="px-4 py-3 text-xs">{ds.mountpoint || "—"}</td>
+          <td className="px-4 py-3">{ds.compression || "off"}</td>
+          <td className="px-4 py-3">
+            <button
+              onClick={() => setDeleteDataset(ds.name)}
+              className="text-destructive hover:underline"
+            >
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </td>
+        </tr>
+      )
+
+      if (isExpanded && children.length > 0) {
+        items.push(...renderDatasetTree(ds.name))
+      }
+    })
+
+    return items
+  }
+
   if (loading) {
     return <div className="p-8">Loading...</div>
   }
@@ -330,13 +291,13 @@ export default function DatasetsPage() {
       <Header />
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="flex items-center justify-between mb-6">
-          <h1 className="text-3xl font-bold">Datasets &amp; Shares</h1>
-          <Button onClick={tab === "datasets" ? loadData : loadShares} variant="outline" size="sm">
+          <h1 className="text-3xl font-bold">Datasets & Shares</h1>
+          <Button onClick={loadData} variant="outline" size="sm">
             <RefreshCw className="w-4 h-4" />
           </Button>
         </div>
 
-        {/* Top-level Tab Navigation */}
+        {/* Tab Navigation */}
         <div className="flex gap-2 mb-6 border-b border-border">
           <button
             onClick={() => setTab("datasets")}
@@ -349,18 +310,18 @@ export default function DatasetsPage() {
             Datasets
           </button>
           <button
-            onClick={handleSharesTab}
+            onClick={() => setTab("shares")}
             className={`px-4 py-2 font-medium transition-colors ${
               tab === "shares"
                 ? "text-foreground border-b-2 border-primary"
                 : "text-muted-foreground hover:text-foreground"
             }`}
           >
-            Shares &amp; Config
+            Shares (Samba & NFS)
           </button>
         </div>
 
-        {/* ── DATASETS TAB ────────────────────────────────────────────────────── */}
+        {/* Datasets Tab */}
         {tab === "datasets" && (
           <div className="space-y-6">
             <div className="mb-4">
@@ -377,6 +338,7 @@ export default function DatasetsPage() {
 
               return (
                 <Card key={pool.name}>
+                  {/* Pool Header */}
                   <CardHeader className="pb-2">
                     <div className="flex items-center justify-between mb-4">
                       <div className="flex items-center gap-3">
@@ -391,6 +353,7 @@ export default function DatasetsPage() {
                       </button>
                     </div>
 
+                    {/* Pool Stats Grid */}
                     <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-4">
                       <div>
                         <p className="text-xs text-muted-foreground">Size</p>
@@ -414,6 +377,7 @@ export default function DatasetsPage() {
                       </div>
                     </div>
 
+                    {/* Usage Bar */}
                     {(() => {
                       const pct = poolInfo?.size ? (poolInfo.alloc / poolInfo.size) * 100 : 0
                       return (
@@ -430,6 +394,7 @@ export default function DatasetsPage() {
                     })()}
                   </CardHeader>
 
+                  {/* Tabs */}
                   <CardContent>
                     <div className="border-b border-border mb-4">
                       <div className="flex gap-4">
@@ -466,6 +431,7 @@ export default function DatasetsPage() {
                       </div>
                     </div>
 
+                    {/* File Systems Tab */}
                     {currentPoolTab === "filesystems" && (
                       <div className="overflow-x-auto">
                         <table className="w-full text-sm">
@@ -505,6 +471,7 @@ export default function DatasetsPage() {
                       </div>
                     )}
 
+                    {/* Snapshots Tab */}
                     {currentPoolTab === "snapshots" && (() => {
                       const snaps = poolSnapshots.get(pool.name) || []
                       const isLoading = loadingSnaps.has(pool.name)
@@ -528,6 +495,7 @@ export default function DatasetsPage() {
                           ) : snaps.length === 0 ? (
                             <div className="text-center py-6 text-muted-foreground text-xs">No snapshots</div>
                           ) : (() => {
+                            // Group snapshots by dataset
                             const groups = new Map<string, Snapshot[]>()
                             snaps.forEach((s) => {
                               const ds = s.dataset || s.name.split("@")[0]
@@ -552,6 +520,7 @@ export default function DatasetsPage() {
                                     {Array.from(groups.entries()).map(([ds, dsSnaps]) => {
                                       const isGroupExpanded = expandedDatasets.has(`${expandKey}-${ds}`)
                                       return [
+                                        // Group header row
                                         <tr
                                           key={`group-${ds}`}
                                           className="border-b border-border bg-muted/20 hover:bg-muted/40 cursor-pointer select-none"
@@ -571,6 +540,7 @@ export default function DatasetsPage() {
                                           </td>
                                           <td />
                                         </tr>,
+                                        // Snapshot rows (expanded)
                                         ...(isGroupExpanded ? dsSnaps.map((snap) => (
                                           <tr key={snap.name} className="border-b border-border/40 hover:bg-muted/30">
                                             <td className="px-3 py-1.5 font-mono pl-8">{snap.name.split("@")[1]}</td>
@@ -601,6 +571,7 @@ export default function DatasetsPage() {
                       )
                     })()}
 
+                    {/* Status Tab */}
                     {currentPoolTab === "status" && (
                       <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                         <div>
@@ -628,313 +599,110 @@ export default function DatasetsPage() {
           </div>
         )}
 
-        {/* ── SHARES & CONFIG TAB ─────────────────────────────────────────────── */}
+        {/* Shares Tab */}
         {tab === "shares" && (
           <div>
-            {sharesError && (
-              <Card className="mb-6 border-red-200 bg-red-50">
-                <CardContent className="flex items-center gap-3 pt-6">
-                  <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
-                  <div>
-                    <p className="font-medium text-red-900">Error</p>
-                    <p className="text-sm text-red-800">{sharesError}</p>
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-
-            {/* Sub-tab navigation */}
-            <div className="border-b border-border mb-6">
-              <div className="flex gap-4">
-                <button
-                  onClick={() => setSharesTab("samba")}
-                  className={`px-4 py-2 font-medium transition-colors ${
-                    sharesTab === "samba"
-                      ? "border-b-2 border-primary text-primary"
-                      : "text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  SMB/Samba
-                </button>
-                <button
-                  onClick={() => setSharesTab("nfs")}
-                  className={`px-4 py-2 font-medium transition-colors ${
-                    sharesTab === "nfs"
-                      ? "border-b-2 border-primary text-primary"
-                      : "text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  NFS
-                </button>
-                <button
-                  onClick={() => setSharesTab("config")}
-                  className={`px-4 py-2 font-medium transition-colors ${
-                    sharesTab === "config"
-                      ? "border-b-2 border-primary text-primary"
-                      : "text-muted-foreground hover:text-foreground"
-                  }`}
-                >
-                  Samba Config
-                </button>
+            <div className="mb-8">
+              <h2 className="text-xl font-bold mb-4">Samba Shares</h2>
+              <div className="mb-4">
+                <Button onClick={() => setShowCreateSambaShare(true)} size="sm">
+                  <Plus className="w-4 h-4 mr-2" />
+                  Create Samba Share
+                </Button>
               </div>
+
+              <div className="border border-border rounded-lg overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted border-b border-border">
+                    <tr>
+                      <th className="px-4 py-3 text-left font-medium">Name</th>
+                      <th className="px-4 py-3 text-left font-medium">Path</th>
+                      <th className="px-4 py-3 text-left font-medium">Comment</th>
+                      <th className="px-4 py-3 text-left font-medium">Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sambaShares.map((share) => (
+                      <tr key={share.name} className="border-b border-border hover:bg-muted/50">
+                        <td className="px-4 py-3 font-mono text-xs">{share.name}</td>
+                        <td className="px-4 py-3 text-xs">{share.path}</td>
+                        <td className="px-4 py-3 text-xs">{share.comment || "—"}</td>
+                        <td className="px-4 py-3">
+                          <button
+                            onClick={() => setDeleteSambaShare(share.name)}
+                            className="text-destructive hover:underline"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              {sambaShares.length === 0 && (
+                <div className="text-center py-4 text-muted-foreground text-sm">
+                  No Samba shares
+                </div>
+              )}
             </div>
 
-            {/* SAMBA SUB-TAB */}
-            {sharesTab === "samba" && (
-              <Card>
-                <CardHeader>
-                  <div className="flex items-center justify-between">
-                    <CardTitle>Samba Shares</CardTitle>
-                    <Button size="sm" onClick={() => setShowSambaDialog(true)}>
-                      <Plus className="w-4 h-4 mr-2" />
-                      New Share
-                    </Button>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  {sharesLoading ? (
-                    <p className="text-muted-foreground text-center py-12">Loading…</p>
-                  ) : sambaShares.length === 0 ? (
-                    <p className="text-muted-foreground text-center py-12">
-                      No Samba shares configured. Create one to get started.
-                    </p>
-                  ) : (
-                    <div className="overflow-x-auto">
-                      <table className="w-full text-sm">
-                        <thead className="border-b border-border bg-muted/30">
-                          <tr>
-                            <th className="text-left py-3 px-4 font-medium">Name</th>
-                            <th className="text-left py-3 px-4 font-medium">Path</th>
-                            <th className="text-left py-3 px-4 font-medium">Users</th>
-                            <th className="text-left py-3 px-4 font-medium">Perms</th>
-                            <th className="text-left py-3 px-4 font-medium">Comment</th>
-                            <th className="text-right py-3 px-4 font-medium">Actions</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {sambaShares.map((share) => {
-                            const isEditing = editingShare?.oldName === share.name
-                            return (
-                              <tr key={share.name} className="border-b border-border/50 hover:bg-muted/30">
-                                <td className="py-3 px-4 text-xs">
-                                  {isEditing ? (
-                                    <input
-                                      type="text"
-                                      value={editingShare.name}
-                                      onChange={(e) => setEditingShare({ ...editingShare, name: e.target.value })}
-                                      className="px-2 py-1 rounded border border-border bg-background text-xs font-mono w-full"
-                                      disabled={saving}
-                                    />
-                                  ) : (
-                                    <span className="font-mono">{share.name}</span>
-                                  )}
-                                </td>
-                                <td className="py-3 px-4 text-xs">
-                                  {isEditing ? (
-                                    <input
-                                      type="text"
-                                      value={editingShare.path}
-                                      onChange={(e) => setEditingShare({ ...editingShare, path: e.target.value })}
-                                      className="px-2 py-1 rounded border border-border bg-background text-xs font-mono w-full"
-                                      disabled={saving}
-                                    />
-                                  ) : (
-                                    <span className="font-mono">{share.path}</span>
-                                  )}
-                                </td>
-                                <td className="py-3 px-4 text-xs">{share.valid_users || "—"}</td>
-                                <td className="py-3 px-4 text-xs">
-                                  <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
-                                    {share.read_only ? "RO" : "RW"}
-                                  </span>
-                                </td>
-                                <td className="py-3 px-4 text-xs">
-                                  {isEditing ? (
-                                    <input
-                                      type="text"
-                                      value={editingShare.comment || ""}
-                                      onChange={(e) => setEditingShare({ ...editingShare, comment: e.target.value })}
-                                      className="px-2 py-1 rounded border border-border bg-background text-xs w-full"
-                                      disabled={saving}
-                                      placeholder="Optional comment"
-                                    />
-                                  ) : (
-                                    share.comment || "—"
-                                  )}
-                                </td>
-                                <td className="py-3 px-4 text-right space-x-2">
-                                  {isEditing ? (
-                                    <>
-                                      <button
-                                        onClick={handleSaveShare}
-                                        className="text-green-600 hover:text-green-700 transition-colors text-xs font-medium"
-                                        disabled={saving}
-                                      >
-                                        Save
-                                      </button>
-                                      <button
-                                        onClick={() => setEditingShare(null)}
-                                        className="text-gray-600 hover:text-gray-700 transition-colors text-xs font-medium"
-                                        disabled={saving}
-                                      >
-                                        Cancel
-                                      </button>
-                                    </>
-                                  ) : (
-                                    <>
-                                      <button
-                                        onClick={() => setEditingShare({ ...share, oldName: share.name })}
-                                        className="text-blue-600 hover:text-blue-700 transition-colors"
-                                      >
-                                        Edit
-                                      </button>
-                                      <button
-                                        onClick={() => setDeleteConfirm({ type: "samba", name: share.name })}
-                                        className="text-red-600 hover:text-red-700 transition-colors"
-                                      >
-                                        <Trash2 className="w-4 h-4 inline" />
-                                      </button>
-                                    </>
-                                  )}
-                                </td>
-                              </tr>
-                            )
-                          })}
-                        </tbody>
-                      </table>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            )}
-
-            {/* NFS SUB-TAB */}
-            {sharesTab === "nfs" && (
-              <Card>
-                <CardHeader>
-                  <div className="flex items-center justify-between">
-                    <CardTitle>NFS Shares</CardTitle>
-                    <Button size="sm" onClick={() => setShowNfsDialog(true)}>
-                      <Plus className="w-4 h-4 mr-2" />
-                      New Share
-                    </Button>
-                  </div>
-                </CardHeader>
-                <CardContent>
-                  {sharesLoading ? (
-                    <p className="text-muted-foreground text-center py-12">Loading…</p>
-                  ) : nfsShares.length === 0 ? (
-                    <p className="text-muted-foreground text-center py-12">
-                      No NFS shares configured. Create one to get started.
-                    </p>
-                  ) : (
-                    <div className="overflow-x-auto">
-                      <table className="w-full text-sm">
-                        <thead className="border-b border-border bg-muted/30">
-                          <tr>
-                            <th className="text-left py-3 px-4 font-medium">Path</th>
-                            <th className="text-left py-3 px-4 font-medium">Clients</th>
-                            <th className="text-left py-3 px-4 font-medium">Options</th>
-                            <th className="text-right py-3 px-4 font-medium">Actions</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {nfsShares.map((share) => (
-                            <tr key={share.path} className="border-b border-border/50 hover:bg-muted/30">
-                              <td className="py-3 px-4 font-mono text-xs">{share.path}</td>
-                              <td className="py-3 px-4 text-xs">{share.clients}</td>
-                              <td className="py-3 px-4 font-mono text-xs">{share.options || "—"}</td>
-                              <td className="py-3 px-4 text-right">
-                                <button
-                                  onClick={() => setDeleteConfirm({ type: "nfs", name: share.path })}
-                                  className="text-red-600 hover:text-red-700 transition-colors"
-                                >
-                                  <Trash2 className="w-4 h-4 inline" />
-                                </button>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                  )}
-                </CardContent>
-              </Card>
-            )}
-
-            {/* SAMBA CONFIG SUB-TAB */}
-            {sharesTab === "config" && (
-              <div className="space-y-4">
-                <Card>
-                  <CardContent className="py-5">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <p className="font-medium">Global MacOS Shares</p>
-                        <p className="text-sm text-muted-foreground mt-0.5">Optimize all shares for MacOS</p>
-                        {macosEnabled && (
-                          <div className="mt-2 flex flex-wrap gap-2">
-                            {Object.entries(MACOS_PARAMS).map(([k, v]) => (
-                              <span key={k} className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
-                                {k} = {v}
-                              </span>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                      <button
-                        role="switch"
-                        aria-checked={macosEnabled}
-                        disabled={saving}
-                        onClick={() => handleToggleMacOS(!macosEnabled)}
-                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${macosEnabled ? "bg-red-500" : "bg-muted-foreground/30"} disabled:opacity-50`}
-                      >
-                        <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${macosEnabled ? "translate-x-6" : "translate-x-1"}`} />
-                      </button>
-                    </div>
-                  </CardContent>
-                </Card>
-
-                <Card>
-                  <CardHeader>
-                    <div className="flex items-center justify-between">
-                      <CardTitle>Advanced</CardTitle>
-                      {!editMode ? (
-                        <Button size="sm" onClick={() => setEditMode(true)} variant="outline">
-                          Edit
-                        </Button>
-                      ) : (
-                        <div className="flex gap-2">
-                          <Button size="sm" onClick={handleSaveRaw} disabled={saving}>
-                            {saving ? "Saving..." : "Apply"}
-                          </Button>
-                          <Button size="sm" onClick={() => setEditMode(false)} variant="outline" disabled={saving}>
-                            Cancel
-                          </Button>
-                        </div>
-                      )}
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <textarea
-                      readOnly={!editMode}
-                      value={rawConfigText}
-                      onChange={(e) => setRawConfigText(e.target.value)}
-                      rows={20}
-                      spellCheck={false}
-                      className={`w-full font-mono text-xs rounded border px-3 py-2 bg-background resize-y focus:outline-none focus:ring-2 focus:ring-ring ${editMode ? "border-border" : "border-transparent text-muted-foreground"}`}
-                    />
-                  </CardContent>
-                </Card>
+            <div>
+              <h2 className="text-xl font-bold mb-4">NFS Shares</h2>
+              <div className="mb-4">
+                <Button onClick={() => setShowCreateNfsShare(true)} size="sm">
+                  <Plus className="w-4 h-4 mr-2" />
+                  Create NFS Share
+                </Button>
               </div>
-            )}
+
+              <div className="border border-border rounded-lg overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted border-b border-border">
+                    <tr>
+                      <th className="px-4 py-3 text-left font-medium">Path</th>
+                      <th className="px-4 py-3 text-left font-medium">Clients</th>
+                      <th className="px-4 py-3 text-left font-medium">Options</th>
+                      <th className="px-4 py-3 text-left font-medium">Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {nfsShares.map((share) => (
+                      <tr key={share.path} className="border-b border-border hover:bg-muted/50">
+                        <td className="px-4 py-3 text-xs font-mono">{share.path}</td>
+                        <td className="px-4 py-3 text-xs">{share.clients}</td>
+                        <td className="px-4 py-3 text-xs">{share.options || "—"}</td>
+                        <td className="px-4 py-3">
+                          <button
+                            onClick={() => setDeleteNfsShare(share.path)}
+                            className="text-destructive hover:underline"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              {nfsShares.length === 0 && (
+                <div className="text-center py-4 text-muted-foreground text-sm">
+                  No NFS shares
+                </div>
+              )}
+            </div>
           </div>
         )}
       </div>
 
-      {/* ── DIALOGS ──────────────────────────────────────────────────────────── */}
-
-      {/* Create Dataset */}
-      <Dialog open={showCreateDataset} onClose={() => setShowCreateDataset(false)} title="Create Dataset">
+      {/* Create Dataset Dialog */}
+      <Dialog
+        open={showCreateDataset}
+        onClose={() => setShowCreateDataset(false)}
+        title="Create Dataset"
+      >
         <input
           type="text"
           placeholder="dataset name (e.g., tank/data)"
@@ -943,19 +711,180 @@ export default function DatasetsPage() {
           className="w-full border border-input rounded px-3 py-2 mb-4 bg-background text-foreground"
         />
         <div className="flex gap-2">
-          <Button onClick={handleCreateDataset} className="flex-1">Create</Button>
-          <Button onClick={() => setShowCreateDataset(false)} variant="outline" className="flex-1">Cancel</Button>
+          <Button onClick={handleCreateDataset} className="flex-1">
+            Create
+          </Button>
+          <Button
+            onClick={() => setShowCreateDataset(false)}
+            variant="outline"
+            className="flex-1"
+          >
+            Cancel
+          </Button>
         </div>
       </Dialog>
 
-      {/* Delete Dataset */}
-      <Dialog open={!!deleteDataset} onClose={() => setDeleteDataset(null)} title="Delete Dataset">
+      {/* Delete Dataset Dialog */}
+      <Dialog
+        open={!!deleteDataset}
+        onClose={() => setDeleteDataset(null)}
+        title="Delete Dataset"
+      >
         <p className="mb-4 text-sm">
-          Are you sure you want to delete <span className="font-mono">{deleteDataset}</span>? This cannot be undone.
+          Are you sure you want to delete <span className="font-mono">{deleteDataset}</span>?
+          This cannot be undone.
         </p>
         <div className="flex gap-2">
-          <Button onClick={() => deleteDataset && handleDeleteDataset(deleteDataset)} variant="destructive" className="flex-1">Delete</Button>
-          <Button onClick={() => setDeleteDataset(null)} variant="outline" className="flex-1">Cancel</Button>
+          <Button
+            onClick={() => deleteDataset && handleDeleteDataset(deleteDataset)}
+            variant="destructive"
+            className="flex-1"
+          >
+            Delete
+          </Button>
+          <Button
+            onClick={() => setDeleteDataset(null)}
+            variant="outline"
+            className="flex-1"
+          >
+            Cancel
+          </Button>
+        </div>
+      </Dialog>
+
+      {/* Create Samba Share Dialog */}
+      <Dialog
+        open={showCreateSambaShare}
+        onClose={() => setShowCreateSambaShare(false)}
+        title="Create Samba Share"
+      >
+        <input
+          type="text"
+          placeholder="share name"
+          value={newSambaName}
+          onChange={(e) => setNewSambaName(e.target.value)}
+          className="w-full border border-input rounded px-3 py-2 mb-3 bg-background text-foreground text-sm"
+        />
+        <input
+          type="text"
+          placeholder="path (e.g., /mnt/tank/share)"
+          value={newSambaPath}
+          onChange={(e) => setNewSambaPath(e.target.value)}
+          className="w-full border border-input rounded px-3 py-2 mb-3 bg-background text-foreground text-sm"
+        />
+        <input
+          type="text"
+          placeholder="comment (optional)"
+          value={newSambaComment}
+          onChange={(e) => setNewSambaComment(e.target.value)}
+          className="w-full border border-input rounded px-3 py-2 mb-4 bg-background text-foreground text-sm"
+        />
+        <div className="flex gap-2">
+          <Button onClick={handleCreateSambaShare} className="flex-1">
+            Create
+          </Button>
+          <Button
+            onClick={() => setShowCreateSambaShare(false)}
+            variant="outline"
+            className="flex-1"
+          >
+            Cancel
+          </Button>
+        </div>
+      </Dialog>
+
+      {/* Delete Samba Share Dialog */}
+      <Dialog
+        open={!!deleteSambaShare}
+        onClose={() => setDeleteSambaShare(null)}
+        title="Delete Samba Share"
+      >
+        <p className="mb-4 text-sm">
+          Are you sure you want to delete <span className="font-mono">{deleteSambaShare}</span>?
+        </p>
+        <div className="flex gap-2">
+          <Button
+            onClick={() => deleteSambaShare && handleDeleteSambaShare(deleteSambaShare)}
+            variant="destructive"
+            className="flex-1"
+          >
+            Delete
+          </Button>
+          <Button
+            onClick={() => setDeleteSambaShare(null)}
+            variant="outline"
+            className="flex-1"
+          >
+            Cancel
+          </Button>
+        </div>
+      </Dialog>
+
+      {/* Create NFS Share Dialog */}
+      <Dialog
+        open={showCreateNfsShare}
+        onClose={() => setShowCreateNfsShare(false)}
+        title="Create NFS Share"
+      >
+        <input
+          type="text"
+          placeholder="path (e.g., /mnt/tank/share)"
+          value={newNfsPath}
+          onChange={(e) => setNewNfsPath(e.target.value)}
+          className="w-full border border-input rounded px-3 py-2 mb-3 bg-background text-foreground text-sm"
+        />
+        <input
+          type="text"
+          placeholder="clients (e.g., 192.168.1.0/24 or *)"
+          value={newNfsClients}
+          onChange={(e) => setNewNfsClients(e.target.value)}
+          className="w-full border border-input rounded px-3 py-2 mb-3 bg-background text-foreground text-sm"
+        />
+        <input
+          type="text"
+          placeholder="options"
+          value={newNfsOptions}
+          onChange={(e) => setNewNfsOptions(e.target.value)}
+          className="w-full border border-input rounded px-3 py-2 mb-4 bg-background text-foreground text-sm"
+        />
+        <div className="flex gap-2">
+          <Button onClick={handleCreateNfsShare} className="flex-1">
+            Create
+          </Button>
+          <Button
+            onClick={() => setShowCreateNfsShare(false)}
+            variant="outline"
+            className="flex-1"
+          >
+            Cancel
+          </Button>
+        </div>
+      </Dialog>
+
+      {/* Delete NFS Share Dialog */}
+      <Dialog
+        open={!!deleteNfsShare}
+        onClose={() => setDeleteNfsShare(null)}
+        title="Delete NFS Share"
+      >
+        <p className="mb-4 text-sm">
+          Are you sure you want to delete <span className="font-mono">{deleteNfsShare}</span>?
+        </p>
+        <div className="flex gap-2">
+          <Button
+            onClick={() => deleteNfsShare && handleDeleteNfsShare(deleteNfsShare)}
+            variant="destructive"
+            className="flex-1"
+          >
+            Delete
+          </Button>
+          <Button
+            onClick={() => setDeleteNfsShare(null)}
+            variant="outline"
+            className="flex-1"
+          >
+            Cancel
+          </Button>
         </div>
       </Dialog>
 
@@ -985,7 +914,7 @@ export default function DatasetsPage() {
         </>
       )}
 
-      {/* Rename Snapshot */}
+      {/* Rename Snapshot Dialog */}
       <Dialog open={!!renameTarget} onClose={() => setRenameTarget(null)} title="Rename Snapshot">
         <p className="text-sm text-muted-foreground mb-3">New name for <span className="font-mono">{renameTarget?.name.split("@")[1]}</span></p>
         <input
@@ -1001,7 +930,7 @@ export default function DatasetsPage() {
         </div>
       </Dialog>
 
-      {/* Clone Snapshot */}
+      {/* Clone Snapshot Dialog */}
       <Dialog open={!!cloneTarget} onClose={() => setCloneTarget(null)} title="Clone Snapshot">
         <p className="text-sm text-muted-foreground mb-3">Clone <span className="font-mono">{cloneTarget?.name.split("@")[1]}</span> to:</p>
         <input
@@ -1017,24 +946,6 @@ export default function DatasetsPage() {
           <Button onClick={() => setCloneTarget(null)} variant="outline" className="flex-1">Cancel</Button>
         </div>
       </Dialog>
-
-      {/* Shares dialogs */}
-      <CreateSambaDialog open={showSambaDialog} onOpenChange={setShowSambaDialog} onCreated={handleSambaCreated} />
-      <CreateNfsDialog open={showNfsDialog} onOpenChange={setShowNfsDialog} onCreated={handleNfsCreated} />
-      <DeleteConfirmDialog
-        open={!!deleteConfirm}
-        onOpenChange={(open) => !open && setDeleteConfirm(null)}
-        type={deleteConfirm?.type === "samba" ? "Samba Share" : "NFS Share"}
-        name={deleteConfirm?.name || ""}
-        onConfirm={() => {
-          if (deleteConfirm?.type === "samba") {
-            handleDeleteSamba(deleteConfirm.name)
-          } else if (deleteConfirm?.type === "nfs") {
-            handleDeleteNfs(deleteConfirm.name)
-          }
-        }}
-        loading={deleting}
-      />
     </div>
   )
 }
diff --git a/frontend/app/shares/page.tsx b/frontend/app/shares/page.tsx
index 31673f5..227da60 100644
--- a/frontend/app/shares/page.tsx
+++ b/frontend/app/shares/page.tsx
@@ -1,5 +1,516 @@
-import { redirect } from "next/navigation"
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { api } from "@/lib/api"
+import { Header } from "@/components/Header"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { RefreshCw, Plus, Trash2, AlertCircle } from "lucide-react"
+import CreateSambaDialog from "@/components/shares/CreateSambaDialog"
+import CreateNfsDialog from "@/components/shares/CreateNfsDialog"
+import DeleteConfirmDialog from "@/components/shares/DeleteConfirmDialog"
 
 export default function SharesPage() {
-  redirect("/datasets")
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState<"samba" | "nfs" | "config">("samba")
+  const [sambaShares, setSambaShares] = useState<any[]>([])
+  const [nfsShares, setNfsShares] = useState<any[]>([])
+  const [sambaConfig, setSambaConfig] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showSambaDialog, setShowSambaDialog] = useState(false)
+  const [showNfsDialog, setShowNfsDialog] = useState(false)
+  const [deleteConfirm, setDeleteConfirm] = useState<{ type: "samba" | "nfs"; name: string } | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [editMode, setEditMode] = useState(false)
+  const [rawConfigText, setRawConfigText] = useState("")
+  const [saving, setSaving] = useState(false)
+  const [macosEnabled, setMacosEnabled] = useState(false)
+  const [editingShare, setEditingShare] = useState<any | null>(null)
+
+  useEffect(() => {
+    const token = localStorage.getItem("access_token")
+    if (!token) {
+      router.push("/login")
+      return
+    }
+    loadShares()
+  }, [router])
+
+  const loadShares = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      const [samba, nfs, config] = await Promise.all([
+        api.getSambaShares().catch(() => []),
+        api.getNfsShares().catch(() => []),
+        api.getSambaConfig().catch(() => ({ parameters: [] })),
+      ])
+
+      setSambaShares(samba)
+      setNfsShares(nfs)
+      const params: { key: string; value: string }[] = config.parameters || []
+      setSambaConfig(params)
+      const raw = params.map((p) => `${p.key} = ${p.value}`).join("\n")
+      setRawConfigText(raw)
+      const hasMacOS = ["fruit:encoding", "fruit:metadata", "fruit:zero_file_id", "fruit:nfs_aces"].every(
+        (k) => params.some((p) => p.key === k)
+      )
+      setMacosEnabled(hasMacOS)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load shares")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDeleteSamba = async (name: string) => {
+    try {
+      setDeleting(true)
+      await api.deleteSambaShare(name)
+      setSambaShares(sambaShares.filter((s) => s.name !== name))
+      setDeleteConfirm(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete share")
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const handleDeleteNfs = async (path: string) => {
+    try {
+      setDeleting(true)
+      await api.deleteNfsShare(path)
+      setNfsShares(nfsShares.filter((s) => s.path !== path))
+      setDeleteConfirm(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete share")
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const handleSambaCreated = (newShare: any) => {
+    setSambaShares([...sambaShares, newShare])
+    setShowSambaDialog(false)
+  }
+
+  const handleSaveShare = async () => {
+    if (!editingShare) return
+    try {
+      setSaving(true)
+      await api.updateSambaShare(editingShare.oldName, {
+        name: editingShare.name,
+        path: editingShare.path,
+        comment: editingShare.comment
+      })
+      setSambaShares(sambaShares.map(s =>
+        s.name === editingShare.oldName
+          ? { name: editingShare.name, path: editingShare.path, comment: editingShare.comment, ...s }
+          : s
+      ))
+      setEditingShare(null)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save share")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleNfsCreated = (newShare: any) => {
+    setNfsShares([...nfsShares, newShare])
+    setShowNfsDialog(false)
+  }
+
+  const MACOS_PARAMS: { [key: string]: string } = {
+    "fruit:encoding": "native",
+    "fruit:metadata": "stream",
+    "fruit:zero_file_id": "yes",
+    "fruit:nfs_aces": "no",
+  }
+
+  const MACOS_KEYS = Object.keys(MACOS_PARAMS)
+
+  const handleSaveRaw = async () => {
+    try {
+      setSaving(true)
+      const parsed: { [key: string]: string } = {}
+      rawConfigText.split("\n").forEach((line) => {
+        const eq = line.indexOf("=")
+        if (eq === -1) return
+        const key = line.slice(0, eq).trim()
+        const value = line.slice(eq + 1).trim()
+        if (key) parsed[key] = value
+      })
+      await api.setSambaConfig(parsed)
+      await loadShares()
+      setEditMode(false)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save configuration")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleToggleMacOS = async (enable: boolean) => {
+    try {
+      setSaving(true)
+      const current = sambaConfig.reduce((acc, p) => { acc[p.key] = p.value; return acc }, {} as { [key: string]: string })
+      if (enable) {
+        await api.setSambaConfig({ ...current, ...MACOS_PARAMS } as { [key: string]: string })
+      } else {
+        const filtered: { [key: string]: string } = {}
+        Object.entries(current).forEach(([k, v]) => { if (!MACOS_KEYS.includes(k)) filtered[k] = v as string })
+        await api.setSambaConfig(filtered)
+      }
+      setMacosEnabled(enable)
+      await loadShares()
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update macOS settings")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold">File Sharing</h1>
+            <p className="text-muted-foreground mt-1">Manage Samba (SMB) and NFS network shares</p>
+          </div>
+          <Button onClick={loadShares} disabled={loading}>
+            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`} />
+            Refresh
+          </Button>
+        </div>
+
+        {error && (
+          <Card className="mb-6 border-red-200 bg-red-50">
+            <CardContent className="flex items-center gap-3 pt-6">
+              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0" />
+              <div>
+                <p className="font-medium text-red-900">Error</p>
+                <p className="text-sm text-red-800">{error}</p>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Tabs */}
+        <div className="border-b border-border mb-6">
+          <div className="flex gap-4">
+            <button
+              onClick={() => setActiveTab("samba")}
+              className={`px-4 py-2 font-medium transition-colors ${
+                activeTab === "samba"
+                  ? "border-b-2 border-primary text-primary"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              SMB/Samba
+            </button>
+            <button
+              onClick={() => setActiveTab("nfs")}
+              className={`px-4 py-2 font-medium transition-colors ${
+                activeTab === "nfs"
+                  ? "border-b-2 border-primary text-primary"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              NFS
+            </button>
+            <button
+              onClick={() => setActiveTab("config")}
+              className={`px-4 py-2 font-medium transition-colors ${
+                activeTab === "config"
+                  ? "border-b-2 border-primary text-primary"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              Samba Config
+            </button>
+          </div>
+        </div>
+
+        {/* SAMBA TAB */}
+        {activeTab === "samba" && (
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle>Samba Shares</CardTitle>
+                <Button size="sm" onClick={() => setShowSambaDialog(true)}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  New Share
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {sambaShares.length === 0 ? (
+                <p className="text-muted-foreground text-center py-12">
+                  No Samba shares configured. Create one to get started.
+                </p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="border-b border-border bg-muted/30">
+                      <tr>
+                        <th className="text-left py-3 px-4 font-medium">Name</th>
+                        <th className="text-left py-3 px-4 font-medium">Path</th>
+                        <th className="text-left py-3 px-4 font-medium">Users</th>
+                        <th className="text-left py-3 px-4 font-medium">Perms</th>
+                        <th className="text-left py-3 px-4 font-medium">Comment</th>
+                        <th className="text-right py-3 px-4 font-medium">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {sambaShares.map((share) => {
+                        const isEditing = editingShare?.oldName === share.name
+                        return (
+                          <tr key={share.name} className="border-b border-border/50 hover:bg-muted/30">
+                            <td className="py-3 px-4 text-xs">
+                              {isEditing ? (
+                                <input
+                                  type="text"
+                                  value={editingShare.name}
+                                  onChange={(e) => setEditingShare({ ...editingShare, name: e.target.value })}
+                                  className="px-2 py-1 rounded border border-border bg-background text-xs font-mono w-full"
+                                  disabled={saving}
+                                />
+                              ) : (
+                                <span className="font-mono">{share.name}</span>
+                              )}
+                            </td>
+                            <td className="py-3 px-4 text-xs">
+                              {isEditing ? (
+                                <input
+                                  type="text"
+                                  value={editingShare.path}
+                                  onChange={(e) => setEditingShare({ ...editingShare, path: e.target.value })}
+                                  className="px-2 py-1 rounded border border-border bg-background text-xs font-mono w-full"
+                                  disabled={saving}
+                                />
+                              ) : (
+                                <span className="font-mono">{share.path}</span>
+                              )}
+                            </td>
+                            <td className="py-3 px-4 text-xs">{share.valid_users || "—"}</td>
+                            <td className="py-3 px-4 text-xs">
+                              <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                                {share.read_only ? "RO" : "RW"}
+                              </span>
+                            </td>
+                            <td className="py-3 px-4 text-xs">
+                              {isEditing ? (
+                                <input
+                                  type="text"
+                                  value={editingShare.comment || ""}
+                                  onChange={(e) => setEditingShare({ ...editingShare, comment: e.target.value })}
+                                  className="px-2 py-1 rounded border border-border bg-background text-xs w-full"
+                                  disabled={saving}
+                                  placeholder="Optional comment"
+                                />
+                              ) : (
+                                share.comment || "—"
+                              )}
+                            </td>
+                            <td className="py-3 px-4 text-right space-x-2">
+                              {isEditing ? (
+                                <>
+                                  <button
+                                    onClick={handleSaveShare}
+                                    className="text-green-600 hover:text-green-700 transition-colors text-xs font-medium"
+                                    disabled={saving}
+                                    title="Save"
+                                  >
+                                    Save
+                                  </button>
+                                  <button
+                                    onClick={() => setEditingShare(null)}
+                                    className="text-gray-600 hover:text-gray-700 transition-colors text-xs font-medium"
+                                    disabled={saving}
+                                    title="Cancel"
+                                  >
+                                    Cancel
+                                  </button>
+                                </>
+                              ) : (
+                                <>
+                                  <button
+                                    onClick={() => setEditingShare({ ...share, oldName: share.name })}
+                                    className="text-blue-600 hover:text-blue-700 transition-colors"
+                                    title="Edit"
+                                  >
+                                    Edit
+                                  </button>
+                                  <button
+                                    onClick={() => setDeleteConfirm({ type: "samba", name: share.name })}
+                                    className="text-red-600 hover:text-red-700 transition-colors"
+                                    title="Delete"
+                                  >
+                                    <Trash2 className="w-4 h-4 inline" />
+                                  </button>
+                                </>
+                              )}
+                            </td>
+                          </tr>
+                        )
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* NFS TAB */}
+        {activeTab === "nfs" && (
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle>NFS Shares</CardTitle>
+                <Button size="sm" onClick={() => setShowNfsDialog(true)}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  New Share
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {nfsShares.length === 0 ? (
+                <p className="text-muted-foreground text-center py-12">
+                  No NFS shares configured. Create one to get started.
+                </p>
+              ) : (
+                <div className="overflow-x-auto">
+                  <table className="w-full text-sm">
+                    <thead className="border-b border-border bg-muted/30">
+                      <tr>
+                        <th className="text-left py-3 px-4 font-medium">Path</th>
+                        <th className="text-left py-3 px-4 font-medium">Clients</th>
+                        <th className="text-left py-3 px-4 font-medium">Options</th>
+                        <th className="text-right py-3 px-4 font-medium">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {nfsShares.map((share) => (
+                        <tr key={share.path} className="border-b border-border/50 hover:bg-muted/30">
+                          <td className="py-3 px-4 font-mono text-xs">{share.path}</td>
+                          <td className="py-3 px-4 text-xs">{share.clients}</td>
+                          <td className="py-3 px-4 text-xs font-mono text-xs">{share.options || "—"}</td>
+                          <td className="py-3 px-4 text-right space-x-2">
+                            <button
+                              onClick={() => setDeleteConfirm({ type: "nfs", name: share.path })}
+                              className="text-red-600 hover:text-red-700 transition-colors"
+                              title="Delete"
+                            >
+                              <Trash2 className="w-4 h-4 inline" />
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* SAMBA CONFIG TAB */}
+        {activeTab === "config" && (
+          <div className="space-y-4">
+            {/* MacOS Toggle */}
+            <Card>
+              <CardContent className="py-5">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="font-medium">Global MacOS Shares</p>
+                    <p className="text-sm text-muted-foreground mt-0.5">Optimize all shares for MacOS</p>
+                    {macosEnabled && (
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        {Object.entries(MACOS_PARAMS).map(([k, v]) => (
+                          <span key={k} className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
+                            {k} = {v}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    role="switch"
+                    aria-checked={macosEnabled}
+                    disabled={saving}
+                    onClick={() => handleToggleMacOS(!macosEnabled)}
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none ${macosEnabled ? "bg-red-500" : "bg-muted-foreground/30"} disabled:opacity-50`}
+                  >
+                    <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${macosEnabled ? "translate-x-6" : "translate-x-1"}`} />
+                  </button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Advanced raw config */}
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>Advanced</CardTitle>
+                  {!editMode ? (
+                    <Button size="sm" onClick={() => setEditMode(true)} variant="outline">
+                      Edit
+                    </Button>
+                  ) : (
+                    <div className="flex gap-2">
+                      <Button size="sm" onClick={handleSaveRaw} disabled={saving}>
+                        {saving ? "Saving..." : "Apply"}
+                      </Button>
+                      <Button size="sm" onClick={() => setEditMode(false)} variant="outline" disabled={saving}>
+                        Cancel
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent>
+                <textarea
+                  readOnly={!editMode}
+                  value={rawConfigText}
+                  onChange={(e) => setRawConfigText(e.target.value)}
+                  rows={20}
+                  spellCheck={false}
+                  className={`w-full font-mono text-xs rounded border px-3 py-2 bg-background resize-y focus:outline-none focus:ring-2 focus:ring-ring ${editMode ? "border-border" : "border-transparent text-muted-foreground"}`}
+                />
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </main>
+
+      {/* Dialogs */}
+      <CreateSambaDialog open={showSambaDialog} onOpenChange={setShowSambaDialog} onCreated={handleSambaCreated} />
+      <CreateNfsDialog open={showNfsDialog} onOpenChange={setShowNfsDialog} onCreated={handleNfsCreated} />
+      <DeleteConfirmDialog
+        open={!!deleteConfirm}
+        onOpenChange={(open) => !open && setDeleteConfirm(null)}
+        type={deleteConfirm?.type === "samba" ? "Samba Share" : "NFS Share"}
+        name={deleteConfirm?.name || ""}
+        onConfirm={() => {
+          if (deleteConfirm?.type === "samba") {
+            handleDeleteSamba(deleteConfirm.name)
+          } else if (deleteConfirm?.type === "nfs") {
+            handleDeleteNfs(deleteConfirm.name)
+          }
+        }}
+        loading={deleting}
+      />
+    </div>
+  )
 }
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
index c79d715..0595b4f 100644
--- a/frontend/components/Header.tsx
+++ b/frontend/components/Header.tsx
@@ -85,9 +85,9 @@ export function Header() {
               Navigator
             </Link>
             <Link
-              href="/datasets"
+              href="/shares"
               className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                isActive("/datasets")
+                isActive("/shares")
                   ? "bg-accent text-accent-foreground"
                   : "text-muted-foreground hover:text-foreground"
               }`}
@@ -205,9 +205,9 @@ export function Header() {
               Files
             </Link>
             <Link
-              href="/datasets"
+              href="/shares"
               className={`block px-3 py-2 rounded-md text-sm font-medium ${
-                isActive("/datasets")
+                isActive("/shares")
                   ? "bg-accent text-accent-foreground"
                   : "text-muted-foreground hover:text-foreground"
               }`}