External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-18 07:56:57 +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 { EditModeToggle } from "@/components/EditModeToggle"
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 DeleteNetwork from "@/components/dialogues/DeleteNetwork"
@ -25,81 +25,114 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
}, [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">
<Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Resources", "Sites", site.name]}>
<main className="w-full">
<div className="flex flex-col gap-4 w-full">
{/* Site Info Card */}
<div className="card bg-base-100 shadow-lg rounded-xl overflow-hidden border border-base-200 w-full">
<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>
<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 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 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()}>
</div>
{/* Networks Section */}
<div className="card bg-base-100 shadow-lg rounded-xl overflow-hidden border border-base-200 w-full">
<div className="card-body p-6">
<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" />
</button>
) : null}
)}
</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">
<table className="table">
<thead>
<table className="table table-zebra">
<thead className="bg-base-200 text-base-content">
<tr>
<th></th>
<th className="w-12 text-center">#</th>
<th>Network Name</th>
<th>IPv4 Subnet</th>
<th>IPv6 Subnet</th>
<th>Gateway</th>
{isEditMode ? (
<th className="w-20">Actions</th>
) : null}
{isEditMode && <th className="w-24 text-center">Actions</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>
{isEditMode ? (
{site.networks.map((network, index) => (
<tr key={index} className="hover:bg-base-200/50">
<th className="text-center font-normal text-base-content/70">{index + 1}</th>
<td className="font-medium">{network.name}</td>
<td className="font-mono text-xs">{network.ipv4Subnet || "—"}</td>
<td className="font-mono text-xs">{network.ipv6Subnet || "—"}</td>
<td className="font-mono text-xs">{network.gateway || "—"}</td>
{isEditMode && (
<td className="px-0">
<div className="flex gap-1 justify-center">
<button
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
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>
</div>
<EditNetwork siteId={site.id} network={network} />
<DeleteNetwork networkId={network.id} />
</td>
) : null}
)}
</tr>
))}
</tbody>
</table>
</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>
<AddNetwork siteId={site.id} />
</div>
</main>