mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-18 07:56:57 +00:00
Sites view styling
This commit is contained in:
headlesdev
parent
d499c89023
commit
1f91402afd
@ -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">
|
||||
<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>
|
||||
<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>
|
||||
<p className="text-sm opacity-70">Description: {site.description || "No description"}</p>
|
||||
</div>
|
||||
|
||||
<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 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" />
|
||||
|
||||
{/* 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">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table">
|
||||
<thead>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{site.networks && site.networks.length > 0 ? (
|
||||
<div className="rounded-xl overflow-hidden border border-base-200">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table table-zebra">
|
||||
<thead className="bg-base-200 text-base-content">
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Network Name</th>
|
||||
<th>IPv4 Subnet</th>
|
||||
<th>IPv6 Subnet</th>
|
||||
<th>Gateway</th>
|
||||
{isEditMode ? (
|
||||
<th className="w-20">Actions</th>
|
||||
) : null}
|
||||
<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-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 ? (
|
||||
<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()}
|
||||
>
|
||||
<Pencil className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-error btn-s px-2"
|
||||
onClick={() => document.getElementById('delete_network')?.showModal()}
|
||||
>
|
||||
<Trash className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
<EditNetwork siteId={site.id} network={network} />
|
||||
<DeleteNetwork networkId={network.id} />
|
||||
</td>
|
||||
) : null}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{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') as HTMLDialogElement)?.showModal()}
|
||||
>
|
||||
<Pencil className="h-3 w-3" />
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-error btn-s px-2"
|
||||
onClick={() => (document.getElementById('delete_network') as HTMLDialogElement)?.showModal()}
|
||||
>
|
||||
<Trash className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
<EditNetwork siteId={site.id} network={network} />
|
||||
<DeleteNetwork networkId={network.id} />
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
) : (
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user