mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-18 07:56:57 +00:00
Action Buttons Layout improvements
This commit is contained in:
headlessdev
parent
e631d39b75
commit
75ca05454d
@ -474,10 +474,11 @@ export default function Dashboard() {
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="h-[72px] w-10"
|
||||
className="h-9 w-9"
|
||||
onClick={() => deleteApplication(app.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
@ -486,7 +487,7 @@ export default function Dashboard() {
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="h-[72px] w-10"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openEditDialog(app)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
@ -611,6 +612,7 @@ export default function Dashboard() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
@ -16,7 +16,20 @@ import {
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar";
|
||||
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 {
|
||||
Card,
|
||||
CardContent,
|
||||
@ -62,7 +75,7 @@ import {
|
||||
} from "@/components/ui/tooltip";
|
||||
import Cookies from "js-cookie";
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from 'axios';
|
||||
import axios from "axios";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
interface Server {
|
||||
@ -112,23 +125,23 @@ export default function Dashboard() {
|
||||
const [isSearching, setIsSearching] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedLayout = Cookies.get('layoutPreference-servers');
|
||||
setIsGridLayout(savedLayout === 'grid');
|
||||
const savedLayout = Cookies.get("layoutPreference-servers");
|
||||
setIsGridLayout(savedLayout === "grid");
|
||||
}, []);
|
||||
|
||||
const toggleLayout = () => {
|
||||
const newLayout = !isGridLayout;
|
||||
setIsGridLayout(newLayout);
|
||||
Cookies.set('layoutPreference-servers', newLayout ? 'grid' : 'standard', {
|
||||
Cookies.set("layoutPreference-servers", newLayout ? "grid" : "standard", {
|
||||
expires: 365,
|
||||
path: '/',
|
||||
sameSite: 'strict'
|
||||
path: "/",
|
||||
sameSite: "strict",
|
||||
});
|
||||
};
|
||||
|
||||
const add = async () => {
|
||||
try {
|
||||
await axios.post('/api/servers/add', {
|
||||
await axios.post("/api/servers/add", {
|
||||
name,
|
||||
os,
|
||||
ip,
|
||||
@ -136,48 +149,51 @@ export default function Dashboard() {
|
||||
cpu,
|
||||
gpu,
|
||||
ram,
|
||||
disk
|
||||
disk,
|
||||
});
|
||||
getServers();
|
||||
} catch (error: any) {
|
||||
console.log(error.response.data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getServers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.post<GetServersResponse>('/api/servers/get', {
|
||||
page: currentPage
|
||||
});
|
||||
const response = await axios.post<GetServersResponse>(
|
||||
"/api/servers/get",
|
||||
{
|
||||
page: currentPage,
|
||||
}
|
||||
);
|
||||
setServers(response.data.servers);
|
||||
setMaxPage(response.data.maxPage);
|
||||
setLoading(false);
|
||||
} catch (error: any) {
|
||||
console.log(error.response);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getServers();
|
||||
}, [currentPage]);
|
||||
|
||||
const handlePrevious = () => {
|
||||
setCurrentPage(prev => Math.max(1, prev - 1));
|
||||
}
|
||||
setCurrentPage((prev) => Math.max(1, prev - 1));
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
setCurrentPage(prev => Math.min(maxPage, prev + 1));
|
||||
}
|
||||
setCurrentPage((prev) => Math.min(maxPage, prev + 1));
|
||||
};
|
||||
|
||||
const deleteApplication = async (id: number) => {
|
||||
try {
|
||||
await axios.post('/api/servers/delete', { id });
|
||||
await axios.post("/api/servers/delete", { id });
|
||||
getServers();
|
||||
} catch (error: any) {
|
||||
console.log(error.response.data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const openEditDialog = (server: Server) => {
|
||||
setEditId(server.id);
|
||||
@ -195,7 +211,7 @@ export default function Dashboard() {
|
||||
if (!editId) return;
|
||||
|
||||
try {
|
||||
await axios.put('/api/servers/edit', {
|
||||
await axios.put("/api/servers/edit", {
|
||||
id: editId,
|
||||
name: editName,
|
||||
os: editOs,
|
||||
@ -204,14 +220,14 @@ export default function Dashboard() {
|
||||
cpu: editCpu,
|
||||
gpu: editGpu,
|
||||
ram: editRam,
|
||||
disk: editDisk
|
||||
disk: editDisk,
|
||||
});
|
||||
getServers();
|
||||
setEditId(null);
|
||||
} catch (error: any) {
|
||||
console.log(error.response.data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const searchServers = async () => {
|
||||
try {
|
||||
@ -285,9 +301,9 @@ export default function Dashboard() {
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{isGridLayout ?
|
||||
"Switch to list view" :
|
||||
"Switch to grid view"}
|
||||
{isGridLayout
|
||||
? "Switch to list view"
|
||||
: "Switch to grid view"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
@ -310,57 +326,131 @@ export default function Dashboard() {
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<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 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)}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select OS" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Windows">Windows</SelectItem>
|
||||
<SelectItem value="Windows">
|
||||
Windows
|
||||
</SelectItem>
|
||||
<SelectItem value="Linux">Linux</SelectItem>
|
||||
<SelectItem value="MacOS">MacOS</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="icon">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)}/>
|
||||
<Label htmlFor="icon">
|
||||
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 className="grid w-full items-center gap-1.5">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<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>
|
||||
<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>
|
||||
</Tooltip>
|
||||
</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>
|
||||
</TabsContent>
|
||||
<TabsContent value="hardware">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="name">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)}/>
|
||||
<Label htmlFor="name">
|
||||
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 className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="name">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)}/>
|
||||
<Label htmlFor="name">
|
||||
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 className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="name">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)}/>
|
||||
<Label htmlFor="name">
|
||||
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 className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="name">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)}/>
|
||||
<Label htmlFor="name">
|
||||
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>
|
||||
</TabsContent>
|
||||
@ -384,30 +474,48 @@ export default function Dashboard() {
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
{!loading ?
|
||||
<div className={isGridLayout ?
|
||||
"grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4" :
|
||||
"space-y-4"}>
|
||||
{!loading ? (
|
||||
<div
|
||||
className={
|
||||
isGridLayout
|
||||
? "grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4"
|
||||
: "space-y-4"
|
||||
}
|
||||
>
|
||||
{servers.map((server) => (
|
||||
<Card
|
||||
key={server.id}
|
||||
className={isGridLayout ?
|
||||
"h-full flex flex-col justify-between" :
|
||||
"w-full mb-4"}
|
||||
className={
|
||||
isGridLayout
|
||||
? "h-full flex flex-col justify-between"
|
||||
: "w-full mb-4"
|
||||
}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center">
|
||||
<div className="ml-4">
|
||||
<CardTitle className="text-2xl font-bold">{server.name}</CardTitle>
|
||||
<CardDescription className={`text-sm mt-1 grid gap-y-1 ${isGridLayout ? "grid-cols-1" : "grid-cols-2 gap-x-4"}`}>
|
||||
<CardTitle className="text-2xl font-bold">
|
||||
{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">
|
||||
<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 className="flex items-center gap-2 text-foreground/80">
|
||||
<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 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">
|
||||
<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 className="flex items-center gap-2 text-foreground/80">
|
||||
<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 className="flex items-center gap-2 text-foreground/80">
|
||||
<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 className="flex items-center gap-2 text-foreground/80">
|
||||
<HardDrive className="h-4 w-4 text-muted-foreground" />
|
||||
<span><b>Disk:</b> {server.disk || '-'}</span>
|
||||
<span>
|
||||
<b>Disk:</b> {server.disk || "-"}
|
||||
</span>
|
||||
</div>
|
||||
</CardDescription>
|
||||
</div>
|
||||
@ -440,17 +556,20 @@ export default function Dashboard() {
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2 w-full"
|
||||
onClick={() => window.open(server.url, "_blank")}
|
||||
onClick={() =>
|
||||
window.open(server.url, "_blank")
|
||||
}
|
||||
>
|
||||
<Link className="h-4 w-4" />
|
||||
Open Management URL
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="w-10"
|
||||
className="h-9 w-9"
|
||||
onClick={() => deleteApplication(server.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
@ -459,7 +578,7 @@ export default function Dashboard() {
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="w-10"
|
||||
className="h-9 w-9"
|
||||
onClick={() => openEditDialog(server)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
@ -467,17 +586,28 @@ export default function Dashboard() {
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Edit Server</AlertDialogTitle>
|
||||
<AlertDialogTitle>
|
||||
Edit Server
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
<Tabs defaultValue="general" className="w-full">
|
||||
<Tabs
|
||||
defaultValue="general"
|
||||
className="w-full"
|
||||
>
|
||||
<TabsList className="w-full">
|
||||
<TabsTrigger value="general">General</TabsTrigger>
|
||||
<TabsTrigger value="hardware">Hardware</TabsTrigger>
|
||||
<TabsTrigger value="general">
|
||||
General
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="hardware">
|
||||
Hardware
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="general">
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editOs">Operating System</Label>
|
||||
<Label htmlFor="editOs">
|
||||
Operating System
|
||||
</Label>
|
||||
<Select
|
||||
value={editOs}
|
||||
onValueChange={setEditOs}
|
||||
@ -486,30 +616,44 @@ export default function Dashboard() {
|
||||
<SelectValue placeholder="Select OS" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Windows">Windows</SelectItem>
|
||||
<SelectItem value="Linux">Linux</SelectItem>
|
||||
<SelectItem value="MacOS">MacOS</SelectItem>
|
||||
<SelectItem value="Windows">
|
||||
Windows
|
||||
</SelectItem>
|
||||
<SelectItem value="Linux">
|
||||
Linux
|
||||
</SelectItem>
|
||||
<SelectItem value="MacOS">
|
||||
MacOS
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editIp">IP Adress</Label>
|
||||
<Label htmlFor="editIp">
|
||||
IP Adress
|
||||
</Label>
|
||||
<Input
|
||||
id="editIp"
|
||||
type="text"
|
||||
placeholder="e.g. 192.168.100.2"
|
||||
value={editIp}
|
||||
onChange={(e) => setEditIp(e.target.value)}
|
||||
onChange={(e) =>
|
||||
setEditIp(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editUrl">Management URL</Label>
|
||||
<Label htmlFor="editUrl">
|
||||
Management URL
|
||||
</Label>
|
||||
<Input
|
||||
id="editUrl"
|
||||
type="text"
|
||||
placeholder="e.g. https://proxmox.server1.com"
|
||||
value={editUrl}
|
||||
onChange={(e) => setEditUrl(e.target.value)}
|
||||
onChange={(e) =>
|
||||
setEditUrl(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -522,7 +666,9 @@ export default function Dashboard() {
|
||||
<Input
|
||||
id="editCpu"
|
||||
value={editCpu}
|
||||
onChange={(e) => setEditCpu(e.target.value)}
|
||||
onChange={(e) =>
|
||||
setEditCpu(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
@ -530,7 +676,9 @@ export default function Dashboard() {
|
||||
<Input
|
||||
id="editGpu"
|
||||
value={editGpu}
|
||||
onChange={(e) => setEditGpu(e.target.value)}
|
||||
onChange={(e) =>
|
||||
setEditGpu(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
@ -538,15 +686,21 @@ export default function Dashboard() {
|
||||
<Input
|
||||
id="editRam"
|
||||
value={editRam}
|
||||
onChange={(e) => setEditRam(e.target.value)}
|
||||
onChange={(e) =>
|
||||
setEditRam(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-full items-center gap-1.5">
|
||||
<Label htmlFor="editDisk">Disk</Label>
|
||||
<Label htmlFor="editDisk">
|
||||
Disk
|
||||
</Label>
|
||||
<Input
|
||||
id="editDisk"
|
||||
value={editDisk}
|
||||
onChange={(e) => setEditDisk(e.target.value)}
|
||||
onChange={(e) =>
|
||||
setEditDisk(e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -558,32 +712,44 @@ export default function Dashboard() {
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<Button onClick={edit}>Save</Button>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
:
|
||||
) : (
|
||||
<div className="flex items-center justify-center">
|
||||
<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'>
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<defs>
|
||||
<clipPath id='clip0_9023_61563'>
|
||||
<rect width='24' height='24' fill='white'></rect>
|
||||
<clipPath id="clip0_9023_61563">
|
||||
<rect width="24" height="24" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<span className='sr-only'>Loading...</span>
|
||||
<span className="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
<div className="pt-4">
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
@ -612,5 +778,5 @@ export default function Dashboard() {
|
||||
</div>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
)
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user