CoreControl/app/dashboard/sites/SitesPage.tsx

"use client";
import Sidebar from "@/components/Sidebar";
import { Plus } from "lucide-react";
import AddSite from "@/components/dialogues/AddSite";
import Sites from "@/components/cards/Sites";
import Pagination from "@/components/Pagination";
import useSites from "@/hooks/useSites";
import SearchAndLayout from "@/components/SearchAndLayout";

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

export default function SitesPage({ username, name }: SitesPageProps) {
    const {
        sites,
        currentPage,
        itemPerPage,
        total,
        search,
        setSearch,
        handlePageChange,
        setItemPerPage,
        loadSites
    } = useSites();

    return (
        <Sidebar 
            username={username} 
            fullName={name} 
            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Sites']}
        >
            <main>
                <div className="flex gap-4 items-center">
                    <div className="flex-1">
                        <h1 className="text-2xl font-bold">Sites</h1>
                        <p className="text-sm opacity-70">
                            Manage your sites. Sites are real-world locations where you can 
                            monitor your assets & add networks.
                        </p>
                    </div>
                    <button 
                        className="btn btn-primary" 
                        onClick={() => document.getElementById('add_site')?.showModal()}
                    >
                        <Plus className="w-5 h-5" />
                        Add Site
                    </button>
                </div>
                
                <AddSite onSiteAdded={loadSites} />
                <SearchAndLayout 
                    search={search}
                    setSearch={setSearch}
                    itemPerPage={itemPerPage}
                    setItemPerPage={setItemPerPage}
                />

                <div className={
                    itemPerPage === 5 
                        ? "flex flex-col gap-4 pt-4" 
                        : "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4"
                }>
                    {sites.map((site: any) => (
                        <Sites 
                            key={site.id} 
                            id={site.id} 
                            name={site.name} 
                            description={site.description} 
                            networks={site.networks} 
                        />
                    ))}
                </div>
            
                <Pagination 
                    currentPage={currentPage} 
                    totalItems={total} 
                    itemsPerPage={itemPerPage} 
                    onPageChange={handlePageChange}
                />
            </main>
        </Sidebar>
    )
}