External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-18 16:07:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sites view styling

Browse Source
This commit is contained in:
headlesdev 2025-05-18 20:31:19 +02:00
parent d499c89023
commit 1f91402afd
1 changed files with 98 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
app/dashboard/sites/[siteId]/SitePage.tsx
View File

@ -4,7 +4,7 @@ import useSite from "@/hooks/useSite"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { EditModeToggle } from "@/components/EditModeToggle" import { EditModeToggle } from "@/components/EditModeToggle"
import AddNetwork from "@/components/dialogues/AddNetwork" import AddNetwork from "@/components/dialogues/AddNetwork"
import { Plus, Pencil, Trash } from "lucide-react" import { Plus, Pencil, Trash, Info, Building2, Network as NetworkIcon, Globe, Cpu } from "lucide-react"
import EditNetwork from "@/components/dialogues/EditNetwork" import EditNetwork from "@/components/dialogues/EditNetwork"
import DeleteNetwork from "@/components/dialogues/DeleteNetwork" import DeleteNetwork from "@/components/dialogues/DeleteNetwork"
@ -25,81 +25,114 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
}, [siteId, setSiteId]) }, [siteId, setSiteId])
return ( return (
<Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Ressources", "Sites", site.name]}> <Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Resources", "Sites", site.name]}>
<main> <main className="w-full">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4 w-full">
<div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl"> {/* Site Info Card */}
<div className="flex-1"> <div className="card bg-base-100 shadow-lg rounded-xl overflow-hidden border border-base-200 w-full">
<div className="w-full flex justify-between items-center"> <div className="card-body p-6">
<div className="w-full flex justify-between items-center mb-4">
<h1 className="text-2xl font-bold w-1/2">Site - {site.name}</h1> <h1 className="text-2xl font-bold w-1/2">Site - {site.name}</h1>
<div className="w-1/2 flex justify-end"> <div className="w-1/2 flex justify-end">
<EditModeToggle onToggle={setIsEditMode} /> <EditModeToggle onToggle={setIsEditMode} />
</div> </div>
</div> </div>
<p className="text-sm opacity-70">Description: {site.description || "No description"}</p>
<div className="bg-base-200 p-4 rounded-xl mb-2">
<h2 className="text-sm font-semibold mb-1 flex items-center gap-1.5">
<Info className="h-4 w-4 opacity-70" />
Description
</h2>
<p className="text-sm">
{site.description || "No description provided for this site."}
</p>
</div> </div>
</div> </div>
<div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl"> </div>
<div className="flex-1">
<div className="flex justify-between items-center"> {/* Networks Section */}
<h1 className="text-2xl font-bold">Networks</h1> <div className="card bg-base-100 shadow-lg rounded-xl overflow-hidden border border-base-200 w-full">
{isEditMode ? ( <div className="card-body p-6">
<button className="btn btn-primary btn-sm px-2" onClick={() => document.getElementById('add_network')?.showModal()}> <div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-bold">Networks</h2>
{isEditMode && (
<button
className="btn btn-primary btn-sm px-2"
onClick={() => (document.getElementById('add_network') as HTMLDialogElement)?.showModal()}
>
<Plus className="w-5 h-5" /> <Plus className="w-5 h-5" />
</button> </button>
) : null} )}
</div> </div>
<p className="text-sm opacity-70">
{site.networks && site.networks.length > 0 ? (
<div className="rounded-xl overflow-hidden border border-base-200">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="table"> <table className="table table-zebra">
<thead> <thead className="bg-base-200 text-base-content">
<tr> <tr>
<th></th> <th className="w-12 text-center">#</th>
<th>Network Name</th> <th>Network Name</th>
<th>IPv4 Subnet</th> <th>IPv4 Subnet</th>
<th>IPv6 Subnet</th> <th>IPv6 Subnet</th>
<th>Gateway</th> <th>Gateway</th>
{isEditMode ? ( {isEditMode && <th className="w-24 text-center">Actions</th>}
<th className="w-20">Actions</th>
) : null}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{site.networks?.map((network, index) => ( {site.networks.map((network, index) => (
<tr key={index}> <tr key={index} className="hover:bg-base-200/50">
<th>{index + 1}</th> <th className="text-center font-normal text-base-content/70">{index + 1}</th>
<td>{network.name}</td> <td className="font-medium">{network.name}</td>
<td>{network.ipv4Subnet}</td> <td className="font-mono text-xs">{network.ipv4Subnet || "—"}</td>
<td>{network.ipv6Subnet}</td> <td className="font-mono text-xs">{network.ipv6Subnet || "—"}</td>
<td>{network.gateway}</td> <td className="font-mono text-xs">{network.gateway || "—"}</td>
{isEditMode ? ( {isEditMode && (
<td className="px-0"> <td className="px-0">
<div className="flex gap-1 justify-center"> <div className="flex gap-1 justify-center">
<button <button
className="btn btn-primary btn-s px-2" className="btn btn-primary btn-s px-2"
onClick={() => document.getElementById('edit_network')?.showModal()} onClick={() => (document.getElementById('edit_network') as HTMLDialogElement)?.showModal()}
> >
<Pencil className="w-3 h-3" /> <Pencil className="h-3 w-3" />
</button> </button>
<button <button
className="btn btn-error btn-s px-2" className="btn btn-error btn-s px-2"
onClick={() => document.getElementById('delete_network')?.showModal()} onClick={() => (document.getElementById('delete_network') as HTMLDialogElement)?.showModal()}
> >
<Trash className="w-3 h-3" /> <Trash className="h-3 w-3" />
</button> </button>
</div> </div>
<EditNetwork siteId={site.id} network={network} /> <EditNetwork siteId={site.id} network={network} />
<DeleteNetwork networkId={network.id} /> <DeleteNetwork networkId={network.id} />
</td> </td>
) : null} )}
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
</p> </div>
) : (
<div className="flex flex-col items-center justify-center py-12 bg-base-200 rounded-xl">
<div className="bg-base-100 p-4 rounded-full mb-4">
<Cpu className="h-8 w-8 text-base-content/50" />
</div>
<p className="text-base-content/70 mb-4">No networks have been added to this site yet.</p>
{isEditMode && (
<button
className="btn btn-primary btn-sm gap-2"
onClick={() => (document.getElementById('add_network') as HTMLDialogElement)?.showModal()}
>
<Plus className="h-4 w-4" />
Add Your First Network
</button>
)}
</div>
)}
</div> </div>
</div> </div>
<AddNetwork siteId={site.id} /> <AddNetwork siteId={site.id} />
</div> </div>
</main> </main>