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

Action Buttons Layout improvements

Browse Source
This commit is contained in:
headlessdev 2025-04-14 15:35:32 +02:00
parent e631d39b75
commit 75ca05454d
2 changed files with 548 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/dashboard/applications/Applications.tsx
View File

@ -474,10 +474,11 @@ export default function Dashboard() {
</Button> </Button>
)} )}
</div> </div>
<div className="flex flex-col gap-2">
<Button <Button
variant="destructive" variant="destructive"
size="icon" size="icon"
className="h-[72px] w-10" className="h-9 w-9"
onClick={() => deleteApplication(app.id)} onClick={() => deleteApplication(app.id)}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
@ -486,7 +487,7 @@ export default function Dashboard() {
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button <Button
size="icon" size="icon"
className="h-[72px] w-10" className="h-9 w-9"
onClick={() => openEditDialog(app)} onClick={() => openEditDialog(app)}
> >
<Pencil className="h-4 w-4" /> <Pencil className="h-4 w-4" />
@ -611,6 +612,7 @@ export default function Dashboard() {
</div> </div>
</div> </div>
</div> </div>
</div>
</CardHeader> </CardHeader>
</Card> </Card>
))} ))}

340
app/dashboard/servers/Servers.tsx
View File

@ -16,7 +16,20 @@ import {
SidebarTrigger, SidebarTrigger,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Plus, Link, MonitorCog, FileDigit, Trash2, LayoutGrid, List, Pencil, Cpu, Microchip, MemoryStick, HardDrive } from "lucide-react"; import {
Plus,
Link,
MonitorCog,
FileDigit,
Trash2,
LayoutGrid,
List,
Pencil,
Cpu,
Microchip,
MemoryStick,
HardDrive,
} from "lucide-react";
import { import {
Card, Card,
CardContent, CardContent,
@ -62,7 +75,7 @@ import {
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import axios from 'axios'; import axios from "axios";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
interface Server { interface Server {
@ -112,23 +125,23 @@ export default function Dashboard() {
const [isSearching, setIsSearching] = useState<boolean>(false); const [isSearching, setIsSearching] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
const savedLayout = Cookies.get('layoutPreference-servers'); const savedLayout = Cookies.get("layoutPreference-servers");
setIsGridLayout(savedLayout === 'grid'); setIsGridLayout(savedLayout === "grid");
}, []); }, []);
const toggleLayout = () => { const toggleLayout = () => {
const newLayout = !isGridLayout; const newLayout = !isGridLayout;
setIsGridLayout(newLayout); setIsGridLayout(newLayout);
Cookies.set('layoutPreference-servers', newLayout ? 'grid' : 'standard', { Cookies.set("layoutPreference-servers", newLayout ? "grid" : "standard", {
expires: 365, expires: 365,
path: '/', path: "/",
sameSite: 'strict' sameSite: "strict",
}); });
}; };
const add = async () => { const add = async () => {
try { try {
await axios.post('/api/servers/add', { await axios.post("/api/servers/add", {
name, name,
os, os,
ip, ip,
@ -136,48 +149,51 @@ export default function Dashboard() {
cpu, cpu,
gpu, gpu,
ram, ram,
disk disk,
}); });
getServers(); getServers();
} catch (error: any) { } catch (error: any) {
console.log(error.response.data); console.log(error.response.data);
} }
} };
const getServers = async () => { const getServers = async () => {
try { try {
setLoading(true); setLoading(true);
const response = await axios.post<GetServersResponse>('/api/servers/get', { const response = await axios.post<GetServersResponse>(
page: currentPage "/api/servers/get",
}); {
page: currentPage,
}
);
setServers(response.data.servers); setServers(response.data.servers);
setMaxPage(response.data.maxPage); setMaxPage(response.data.maxPage);
setLoading(false); setLoading(false);
} catch (error: any) { } catch (error: any) {
console.log(error.response); console.log(error.response);
} }
} };
useEffect(() => { useEffect(() => {
getServers(); getServers();
}, [currentPage]); }, [currentPage]);
const handlePrevious = () => { const handlePrevious = () => {
setCurrentPage(prev => Math.max(1, prev - 1)); setCurrentPage((prev) => Math.max(1, prev - 1));
} };
const handleNext = () => { const handleNext = () => {
setCurrentPage(prev => Math.min(maxPage, prev + 1)); setCurrentPage((prev) => Math.min(maxPage, prev + 1));
} };
const deleteApplication = async (id: number) => { const deleteApplication = async (id: number) => {
try { try {
await axios.post('/api/servers/delete', { id }); await axios.post("/api/servers/delete", { id });
getServers(); getServers();
} catch (error: any) { } catch (error: any) {
console.log(error.response.data); console.log(error.response.data);
} }
} };
const openEditDialog = (server: Server) => { const openEditDialog = (server: Server) => {
setEditId(server.id); setEditId(server.id);
@ -195,7 +211,7 @@ export default function Dashboard() {
if (!editId) return; if (!editId) return;
try { try {
await axios.put('/api/servers/edit', { await axios.put("/api/servers/edit", {
id: editId, id: editId,
name: editName, name: editName,
os: editOs, os: editOs,
@ -204,14 +220,14 @@ export default function Dashboard() {
cpu: editCpu, cpu: editCpu,
gpu: editGpu, gpu: editGpu,
ram: editRam, ram: editRam,
disk: editDisk disk: editDisk,
}); });
getServers(); getServers();
setEditId(null); setEditId(null);
} catch (error: any) { } catch (error: any) {
console.log(error.response.data); console.log(error.response.data);
} }
} };
const searchServers = async () => { const searchServers = async () => {
try { try {
@ -285,9 +301,9 @@ export default function Dashboard() {
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
{isGridLayout ? {isGridLayout
"Switch to list view" : ? "Switch to list view"
"Switch to grid view"} : "Switch to grid view"}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@ -310,57 +326,131 @@ export default function Dashboard() {
<div className="space-y-4 pt-4"> <div className="space-y-4 pt-4">
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">Name</Label> <Label htmlFor="name">Name</Label>
<Input id="name" type="text" placeholder="e.g. Server1" onChange={(e) => setName(e.target.value)}/> <Input
id="name"
type="text"
placeholder="e.g. Server1"
onChange={(e) => setName(e.target.value)}
/>
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="description">Operating System <span className="text-stone-600">(optional)</span></Label> <Label htmlFor="description">
Operating System{" "}
<span className="text-stone-600">
(optional)
</span>
</Label>
<Select onValueChange={(value) => setOs(value)}> <Select onValueChange={(value) => setOs(value)}>
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
<SelectValue placeholder="Select OS" /> <SelectValue placeholder="Select OS" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="Windows">Windows</SelectItem> <SelectItem value="Windows">
Windows
</SelectItem>
<SelectItem value="Linux">Linux</SelectItem> <SelectItem value="Linux">Linux</SelectItem>
<SelectItem value="MacOS">MacOS</SelectItem> <SelectItem value="MacOS">MacOS</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="icon">IP Adress <span className="text-stone-600">(optional)</span></Label> <Label htmlFor="icon">
<Input id="icon" type="text" placeholder="e.g. 192.168.100.2" onChange={(e) => setIp(e.target.value)}/> IP Adress{" "}
<span className="text-stone-600">
(optional)
</span>
</Label>
<Input
id="icon"
type="text"
placeholder="e.g. 192.168.100.2"
onChange={(e) => setIp(e.target.value)}
/>
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<Label htmlFor="publicURL">Management URL <span className="text-stone-600">(optional)</span></Label> <Label htmlFor="publicURL">
Management URL{" "}
<span className="text-stone-600">
(optional)
</span>
</Label>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
Link to a web interface (e.g. Proxmox or Portainer) with which the server can be managed Link to a web interface (e.g. Proxmox or
Portainer) with which the server can be
managed
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<Input id="publicURL" type="text" placeholder="e.g. https://proxmox.server1.com" onChange={(e) => setUrl(e.target.value)}/> <Input
id="publicURL"
type="text"
placeholder="e.g. https://proxmox.server1.com"
onChange={(e) => setUrl(e.target.value)}
/>
</div> </div>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="hardware"> <TabsContent value="hardware">
<div className="space-y-4 pt-4"> <div className="space-y-4 pt-4">
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">CPU <span className="text-stone-600">(optional)</span></Label> <Label htmlFor="name">
<Input id="name" type="text" placeholder="e.g. AMD Ryzen™ 7 7800X3D" onChange={(e) => setCpu(e.target.value)}/> CPU{" "}
<span className="text-stone-600">
(optional)
</span>
</Label>
<Input
id="name"
type="text"
placeholder="e.g. AMD Ryzen™ 7 7800X3D"
onChange={(e) => setCpu(e.target.value)}
/>
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">GPU <span className="text-stone-600">(optional)</span></Label> <Label htmlFor="name">
<Input id="name" type="text" placeholder="e.g. AMD Radeon™ Graphics" onChange={(e) => setGpu(e.target.value)}/> GPU{" "}
<span className="text-stone-600">
(optional)
</span>
</Label>
<Input
id="name"
type="text"
placeholder="e.g. AMD Radeon™ Graphics"
onChange={(e) => setGpu(e.target.value)}
/>
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">RAM <span className="text-stone-600">(optional)</span></Label> <Label htmlFor="name">
<Input id="name" type="text" placeholder="e.g. 64GB DDR5" onChange={(e) => setRam(e.target.value)}/> RAM{" "}
<span className="text-stone-600">
(optional)
</span>
</Label>
<Input
id="name"
type="text"
placeholder="e.g. 64GB DDR5"
onChange={(e) => setRam(e.target.value)}
/>
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">Disk <span className="text-stone-600">(optional)</span></Label> <Label htmlFor="name">
<Input id="name" type="text" placeholder="e.g. 2TB SSD" onChange={(e) => setDisk(e.target.value)}/> Disk{" "}
<span className="text-stone-600">
(optional)
</span>
</Label>
<Input
id="name"
type="text"
placeholder="e.g. 2TB SSD"
onChange={(e) => setDisk(e.target.value)}
/>
</div> </div>
</div> </div>
</TabsContent> </TabsContent>
@ -384,30 +474,48 @@ export default function Dashboard() {
/> />
</div> </div>
<br /> <br />
{!loading ? {!loading ? (
<div className={isGridLayout ? <div
"grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4" : className={
"space-y-4"}> isGridLayout
? "grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4"
: "space-y-4"
}
>
{servers.map((server) => ( {servers.map((server) => (
<Card <Card
key={server.id} key={server.id}
className={isGridLayout ? className={
"h-full flex flex-col justify-between" : isGridLayout
"w-full mb-4"} ? "h-full flex flex-col justify-between"
: "w-full mb-4"
}
> >
<CardHeader> <CardHeader>
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div className="flex items-center"> <div className="flex items-center">
<div className="ml-4"> <div className="ml-4">
<CardTitle className="text-2xl font-bold">{server.name}</CardTitle> <CardTitle className="text-2xl font-bold">
<CardDescription className={`text-sm mt-1 grid gap-y-1 ${isGridLayout ? "grid-cols-1" : "grid-cols-2 gap-x-4"}`}> {server.name}
</CardTitle>
<CardDescription
className={`text-sm mt-1 grid gap-y-1 ${
isGridLayout
? "grid-cols-1"
: "grid-cols-2 gap-x-4"
}`}
>
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center gap-2 text-foreground/80">
<MonitorCog className="h-4 w-4 text-muted-foreground" /> <MonitorCog className="h-4 w-4 text-muted-foreground" />
<span><b>OS:</b> {server.os || '-'}</span> <span>
<b>OS:</b> {server.os || "-"}
</span>
</div> </div>
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center gap-2 text-foreground/80">
<FileDigit className="h-4 w-4 text-muted-foreground" /> <FileDigit className="h-4 w-4 text-muted-foreground" />
<span><b>IP:</b> {server.ip || 'Nicht angegeben'}</span> <span>
<b>IP:</b> {server.ip || "Nicht angegeben"}
</span>
</div> </div>
<div className="col-span-full pt-2 pb-2"> <div className="col-span-full pt-2 pb-2">
@ -416,19 +524,27 @@ export default function Dashboard() {
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center gap-2 text-foreground/80">
<Cpu className="h-4 w-4 text-muted-foreground" /> <Cpu className="h-4 w-4 text-muted-foreground" />
<span><b>CPU:</b> {server.cpu || '-'}</span> <span>
<b>CPU:</b> {server.cpu || "-"}
</span>
</div> </div>
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center gap-2 text-foreground/80">
<Microchip className="h-4 w-4 text-muted-foreground" /> <Microchip className="h-4 w-4 text-muted-foreground" />
<span><b>GPU:</b> {server.gpu || '-'}</span> <span>
<b>GPU:</b> {server.gpu || "-"}
</span>
</div> </div>
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center gap-2 text-foreground/80">
<MemoryStick className="h-4 w-4 text-muted-foreground" /> <MemoryStick className="h-4 w-4 text-muted-foreground" />
<span><b>RAM:</b> {server.ram || '-'}</span> <span>
<b>RAM:</b> {server.ram || "-"}
</span>
</div> </div>
<div className="flex items-center gap-2 text-foreground/80"> <div className="flex items-center gap-2 text-foreground/80">
<HardDrive className="h-4 w-4 text-muted-foreground" /> <HardDrive className="h-4 w-4 text-muted-foreground" />
<span><b>Disk:</b> {server.disk || '-'}</span> <span>
<b>Disk:</b> {server.disk || "-"}
</span>
</div> </div>
</CardDescription> </CardDescription>
</div> </div>
@ -440,17 +556,20 @@ export default function Dashboard() {
<Button <Button
variant="outline" variant="outline"
className="gap-2 w-full" className="gap-2 w-full"
onClick={() => window.open(server.url, "_blank")} onClick={() =>
window.open(server.url, "_blank")
}
> >
<Link className="h-4 w-4" /> <Link className="h-4 w-4" />
Open Management URL Open Management URL
</Button> </Button>
)} )}
</div> </div>
<div className="flex flex-col gap-2">
<Button <Button
variant="destructive" variant="destructive"
size="icon" size="icon"
className="w-10" className="h-9 w-9"
onClick={() => deleteApplication(server.id)} onClick={() => deleteApplication(server.id)}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
@ -459,7 +578,7 @@ export default function Dashboard() {
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button <Button
size="icon" size="icon"
className="w-10" className="h-9 w-9"
onClick={() => openEditDialog(server)} onClick={() => openEditDialog(server)}
> >
<Pencil className="h-4 w-4" /> <Pencil className="h-4 w-4" />
@ -467,17 +586,28 @@ export default function Dashboard() {
</AlertDialogTrigger> </AlertDialogTrigger>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Edit Server</AlertDialogTitle> <AlertDialogTitle>
Edit Server
</AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
<Tabs defaultValue="general" className="w-full"> <Tabs
defaultValue="general"
className="w-full"
>
<TabsList className="w-full"> <TabsList className="w-full">
<TabsTrigger value="general">General</TabsTrigger> <TabsTrigger value="general">
<TabsTrigger value="hardware">Hardware</TabsTrigger> General
</TabsTrigger>
<TabsTrigger value="hardware">
Hardware
</TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="general"> <TabsContent value="general">
<div className="space-y-4 pt-4"> <div className="space-y-4 pt-4">
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="editOs">Operating System</Label> <Label htmlFor="editOs">
Operating System
</Label>
<Select <Select
value={editOs} value={editOs}
onValueChange={setEditOs} onValueChange={setEditOs}
@ -486,30 +616,44 @@ export default function Dashboard() {
<SelectValue placeholder="Select OS" /> <SelectValue placeholder="Select OS" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="Windows">Windows</SelectItem> <SelectItem value="Windows">
<SelectItem value="Linux">Linux</SelectItem> Windows
<SelectItem value="MacOS">MacOS</SelectItem> </SelectItem>
<SelectItem value="Linux">
Linux
</SelectItem>
<SelectItem value="MacOS">
MacOS
</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="editIp">IP Adress</Label> <Label htmlFor="editIp">
IP Adress
</Label>
<Input <Input
id="editIp" id="editIp"
type="text" type="text"
placeholder="e.g. 192.168.100.2" placeholder="e.g. 192.168.100.2"
value={editIp} value={editIp}
onChange={(e) => setEditIp(e.target.value)} onChange={(e) =>
setEditIp(e.target.value)
}
/> />
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="editUrl">Management URL</Label> <Label htmlFor="editUrl">
Management URL
</Label>
<Input <Input
id="editUrl" id="editUrl"
type="text" type="text"
placeholder="e.g. https://proxmox.server1.com" placeholder="e.g. https://proxmox.server1.com"
value={editUrl} value={editUrl}
onChange={(e) => setEditUrl(e.target.value)} onChange={(e) =>
setEditUrl(e.target.value)
}
/> />
</div> </div>
</div> </div>
@ -522,7 +666,9 @@ export default function Dashboard() {
<Input <Input
id="editCpu" id="editCpu"
value={editCpu} value={editCpu}
onChange={(e) => setEditCpu(e.target.value)} onChange={(e) =>
setEditCpu(e.target.value)
}
/> />
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
@ -530,7 +676,9 @@ export default function Dashboard() {
<Input <Input
id="editGpu" id="editGpu"
value={editGpu} value={editGpu}
onChange={(e) => setEditGpu(e.target.value)} onChange={(e) =>
setEditGpu(e.target.value)
}
/> />
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
@ -538,15 +686,21 @@ export default function Dashboard() {
<Input <Input
id="editRam" id="editRam"
value={editRam} value={editRam}
onChange={(e) => setEditRam(e.target.value)} onChange={(e) =>
setEditRam(e.target.value)
}
/> />
</div> </div>
<div className="grid w-full items-center gap-1.5"> <div className="grid w-full items-center gap-1.5">
<Label htmlFor="editDisk">Disk</Label> <Label htmlFor="editDisk">
Disk
</Label>
<Input <Input
id="editDisk" id="editDisk"
value={editDisk} value={editDisk}
onChange={(e) => setEditDisk(e.target.value)} onChange={(e) =>
setEditDisk(e.target.value)
}
/> />
</div> </div>
</div> </div>
@ -563,27 +717,39 @@ export default function Dashboard() {
</div> </div>
</div> </div>
</div> </div>
</div>
</CardHeader> </CardHeader>
</Card> </Card>
))} ))}
</div> </div>
: ) : (
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<div className='inline-block' role='status' aria-label='loading'> <div className="inline-block" role="status" aria-label="loading">
<svg className='w-6 h-6 stroke-white animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <svg
<g clip-path='url(#clip0_9023_61563)'> className="w-6 h-6 stroke-white animate-spin "
<path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' className='my-path'></path> viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_9023_61563)">
<path
d="M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444"
stroke="stroke-current"
stroke-width="1.4"
stroke-linecap="round"
className="my-path"
></path>
</g> </g>
<defs> <defs>
<clipPath id='clip0_9023_61563'> <clipPath id="clip0_9023_61563">
<rect width='24' height='24' fill='white'></rect> <rect width="24" height="24" fill="white"></rect>
</clipPath> </clipPath>
</defs> </defs>
</svg> </svg>
<span className='sr-only'>Loading...</span> <span className="sr-only">Loading...</span>
</div> </div>
</div> </div>
} )}
<div className="pt-4"> <div className="pt-4">
<Pagination> <Pagination>
<PaginationContent> <PaginationContent>
@ -612,5 +778,5 @@ export default function Dashboard() {
</div> </div>
</SidebarInset> </SidebarInset>
</SidebarProvider> </SidebarProvider>
) );
} }