CoreControl/app/dashboard/sites/[siteId]/SitePage.tsx

"use client"
import Sidebar from "@/components/Sidebar"
import useSite from "@/hooks/useSite"
import { useEffect, useState } from "react"
import { EditModeToggle } from "@/components/EditModeToggle"
import AddNetwork from "@/components/dialogues/AddNetwork"
import { Plus, Pencil } from "lucide-react"
import EditNetwork from "@/components/dialogues/EditNetwork"

interface SitesPageProps {
  username: string
  name: string
  siteId: string
}

export default function SitesPage({ username, name, siteId }: SitesPageProps) {
  const { site, loadSite, setSiteId } = useSite()
  const [isEditMode, setIsEditMode] = useState(false)

  useEffect(() => {
    if (siteId) {
      setSiteId(siteId)
    }
  }, [siteId, setSiteId])

  return (
    <Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Ressources", "Sites", site.name]}>
      <main>
        <div className="flex flex-col gap-4">
          <div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl">
            <div className="flex-1">
                <div className="w-full flex justify-between items-center">
                    <h1 className="text-2xl font-bold w-1/2">Site - {site.name}</h1>
                    <div className="w-1/2 flex justify-end">
                        <EditModeToggle onToggle={setIsEditMode} />
                    </div>
                </div>
              <p className="text-sm opacity-70">Description: {site.description || "No description"}</p>
            </div>
          </div>
          <div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl">
            <div className="flex-1">
            <div className="flex justify-between items-center">
              <h1 className="text-2xl font-bold">Networks</h1>
              {isEditMode ? (
                <button className="btn btn-primary btn-sm px-2" onClick={() => document.getElementById('add_network')?.showModal()}>
                  <Plus className="w-5 h-5" />
                  </button>
              ) : null}
            </div>
              <p className="text-sm opacity-70">
                <div className="overflow-x-auto">
                    <table className="table">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Network Name</th>
                            <th>IPv4 Subnet</th>
                            <th>IPv6 Subnet</th>
                            <th>Gateway</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {site.networks?.map((network, index) => (
                            <tr key={index}>
                                <th>{index + 1}</th>
                                <td>{network.name}</td>
                                <td>{network.ipv4Subnet}</td>
                                <td>{network.ipv6Subnet}</td>
                                <td>{network.gateway}</td>
                                <td>
                                    <button className="btn btn-primary btn-sm" onClick={() => document.getElementById('edit_network')?.showModal()}>
                                        <Pencil className="w-5 h-5" />
                                    </button>
                                    <EditNetwork siteId={site.id} network={network} />
                                </td>
                            </tr>
                        ))}
                        </tbody>
                    </table>
                </div>
              </p>
            </div>
          </div>
          <AddNetwork siteId={site.id} />
        </div>
      </main>
    </Sidebar>
  )
}