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 axios from "axios";
import { useEffect, useState, useCallback } from "react";
import Pagination from "@/components/Pagination";

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

export default function SitesPage({ username, name }: SitesPageProps) {
    const [sites, setSites] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [itemPerPage, setItemPerPage] = useState(5);
    const [total, setTotal] = useState(0);
    const [search, setSearch] = useState("");

    const handlePageChange = (page: number) => {
        setCurrentPage(page);
    };

    const loadSites = useCallback(() => {
        axios.get('/api/sites/get_all', {
            params: {
                currentPage,
                itemPerPage,
                search,
            },
        }).then((response) => {
            setSites(response.data.sites);
            setTotal(response.data.total);
        });
    }, [currentPage, itemPerPage, search]);

    useEffect(() => {
        loadSites();
    }, [loadSites]);

    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} />

                <div className="flex gap-2 items-center pt-4">
                    <input type="text" placeholder="Search..." className="input input-bordered w-full" onChange={(e) => setSearch(e.target.value)} />
                    <select defaultValue="Pick a font" className="select w-24" onChange={(e) => setItemPerPage(Number(e.target.value))}>
                        <option disabled={true}>Layout</option>
                        <option value={5}>List</option>
                        <option value={10}>Grid</option>
                    </select>
                </div>

                <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>
    )
}