direct-online/vito
2
0
Fork 0
mirror of https://github.com/vitodeploy/vito.git synced 2025-07-03 06:56:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard layout (#597)

Browse Source
This commit is contained in:
Saeed Vaziry
2025-05-13 23:42:22 +03:00
committed by GitHub
parent 38bafd7654
commit a81e9b18b7
57 changed files with 1011 additions and 843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/pages/servers/index.tsx
View File

@ -2,16 +2,16 @@ import { Head, usePage } from '@inertiajs/react';
import { type Configs } from '@/types';
import AppLayout from '@/layouts/app-layout';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/servers/columns';
import { columns } from '@/pages/servers/partials/columns';
import { Server } from '@/types/server';
import Heading from '@/components/heading';
import CreateServer from '@/pages/servers/create-server';
import CreateServer from '@/pages/servers/partials/create-server';
import Container from '@/components/container';
import { PlusIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import React from 'react';
import Layout from '@/layouts/app/layout';
type Response = {
servers: {
@ -24,12 +24,12 @@ type Response = {
export default function Servers() {
const page = usePage<Response>();
return (
<AppLayout>
<Layout>
<Head title="Servers" />
<Container>
<Container className="max-w-5xl">
<div className="flex items-start justify-between">
<Heading title="Servers" description="All of the servers on your project are here" />
<Heading title="Servers" />
<div className="flex items-center gap-2">
<CreateServer>
<Button variant="outline">
@ -40,6 +40,6 @@ export default function Servers() {
</div>
<DataTable columns={columns} data={page.props.servers.data} />
</Container>
</AppLayout>
</Layout>
);
}

15
resources/js/pages/servers/installing.tsx
View File

@ -1,12 +1,9 @@
import type { Server } from '@/types/server';
import type { ServerLog } from '@/types/server-log';
import Container from '@/components/container';
import Heading from '@/components/heading';
import { Progress } from '@/components/ui/progress';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/server-logs/columns';
import { columns } from '@/pages/server-logs/partials/columns';
import { usePage } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
export default function InstallingServer() {
const page = usePage<{
@ -17,14 +14,8 @@ export default function InstallingServer() {
}>();
return (
<Container>
<div className="flex items-start justify-between">
<Heading title={`Installing ${page.props.server.name}`} description="Your server is being installed" />
{page.props.server.status === 'installation_failed' && <Button variant="destructive">Delete</Button>}
</div>
<Progress value={parseInt(page.props.server.progress || '0')} />
<div className="mt-2 text-center">{page.props.server.progress}%</div>
<DataTable columns={columns} data={page.props.logs.data} />
<Container className="max-w-3xl">
<DataTable columns={columns} data={page.props.logs.data} />{' '}
</Container>
);
}

21
resources/js/pages/servers/overview.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { Server } from '@/types/server';
import type { ServerLog } from '@/types/server-log';
import { DataTable } from '@/components/data-table';
import { columns } from '@/pages/server-logs/partials/columns';
import { usePage } from '@inertiajs/react';
import Container from '@/components/container';
export default function ServerOverview() {
const page = usePage<{
server: Server;
logs: {
data: ServerLog[];
};
}>();
return (
<Container className="max-w-3xl">
<DataTable columns={columns} data={page.props.logs.data} />
</Container>
);
}

27
resources/js/pages/servers/partials/actions.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Server } from '@/types/server';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
import { MoreVerticalIcon } from 'lucide-react';
import DeleteServer from '@/pages/servers/partials/delete-server';
export default function ServerActions({ server }: { server: Server }) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreVerticalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Copy payment ID</DropdownMenuItem>
<DropdownMenuSeparator />
<DeleteServer server={server}>
<DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
Delete Server
</DropdownMenuItem>
</DeleteServer>
</DropdownMenuContent>
</DropdownMenu>
);
}

4
resources/js/pages/servers/columns.tsx → resources/js/pages/servers/partials/columns.tsx
View File

@ -2,10 +2,10 @@
import { ColumnDef } from '@tanstack/react-table';
import { Server } from '@/types/server';
import { Badge } from '@/components/ui/badge';
import { Link } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { EyeIcon } from 'lucide-react';
import ServerStatus from '@/pages/servers/partials/status';
export const columns: ColumnDef<Server>[] = [
{
@ -33,7 +33,7 @@ export const columns: ColumnDef<Server>[] = [
enableColumnFilter: true,
enableSorting: true,
cell: ({ row }) => {
return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
return <ServerStatus server={row.original} />;
},
},
{

4
resources/js/pages/servers/create-server.tsx → resources/js/pages/servers/partials/create-server.tsx
View File

@ -5,11 +5,11 @@ import { useForm, usePage } from '@inertiajs/react';
import React, { FormEventHandler, useState } from 'react';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import InputError from '@/components/input-error';
import InputError from '@/components/ui/input-error';
import { Input } from '@/components/ui/input';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { ServerProvider } from '@/types/server-provider';
import CreateServerProvider from '@/pages/server-providers/create-server-provider';
import CreateServerProvider from '@/pages/server-providers/partials/create-server-provider';
import axios from 'axios';
import { Form, FormField, FormFields } from '@/components/ui/form';
import type { SharedData } from '@/types';

63
resources/js/pages/servers/partials/delete-server.tsx Normal file
View File

@ -0,0 +1,63 @@
import { Server } from '@/types/server';
import { FormEvent, ReactNode } from 'react';
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useForm } from '@inertiajs/react';
import { Form, FormField, FormFields } from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import InputError from '@/components/ui/input-error';
import { LoaderCircleIcon } from 'lucide-react';
export default function DeleteServer({ server, children }: { server: Server; children: ReactNode }) {
const form = useForm({
name: '',
});
const submit = (e: FormEvent) => {
e.preventDefault();
form.delete(route('servers.destroy', server.id));
};
return (
<Dialog>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete {server.name}</DialogTitle>
<DialogDescription>Delete server and its resources.</DialogDescription>
</DialogHeader>
<Form id="delete-server-form" onSubmit={submit}>
<FormFields>
<FormField>
<Label htmlFor="server-name">Name</Label>
<Input id="server-name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
<InputError message={form.errors.name} />
</FormField>
</FormFields>
</Form>
<DialogFooter className="gap-2">
<DialogClose asChild>
<Button variant="secondary">Cancel</Button>
</DialogClose>
<Button form="delete-server-form" variant="destructive" disabled={form.processing}>
{form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
Delete server
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

73
resources/js/pages/servers/partials/header.tsx Normal file
View File

@ -0,0 +1,73 @@
import { Server } from '@/types/server';
import { CloudIcon, IdCardIcon, LoaderCircleIcon, MapPinIcon, SlashIcon } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import ServerStatus from '@/pages/servers/partials/status';
import ServerActions from '@/pages/servers/partials/actions';
import { cn } from '@/lib/utils';
export default function ServerHeader({ server }: { server: Server }) {
return (
<div className="flex items-center justify-between border-b px-4 py-2">
<div className="space-y-2">
<div className="text-accent-foreground/50 flex items-center space-x-2 text-xs">
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<IdCardIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.name}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.name}</span>
<span className="hidden lg:inline-flex">Server Name</span>
</TooltipContent>
</Tooltip>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<CloudIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.provider}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.provider}</span>
<span className="hidden lg:inline-flex">Server Provider</span>
</TooltipContent>
</Tooltip>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<MapPinIcon className="size-4" />
<div className="hidden lg:inline-flex">{server.ip}</div>
</div>
</TooltipTrigger>
<TooltipContent>
<span className="lg:hidden">{server.ip}</span>
<span className="hidden lg:inline-flex">Server IP</span>
</TooltipContent>
</Tooltip>
{['installing', 'installation_failed'].includes(server.status) && (
<>
<SlashIcon className="size-3" />
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center space-x-1">
<LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'animate-spin' : '')} />
<div>%{server.progress}</div>
</div>
</TooltipTrigger>
<TooltipContent>Installation Progress</TooltipContent>
</Tooltip>
</>
)}
</div>
</div>
<div className="flex items-center space-x-1">
<ServerStatus server={server} />
<ServerActions server={server} />
</div>
</div>
);
}

6
resources/js/pages/servers/partials/status.tsx Normal file
View File

@ -0,0 +1,6 @@
import { Server } from '@/types/server';
import { Badge } from '@/components/ui/badge';
export default function ServerStatus({ server }: { server: Server }) {
return <Badge variant={server.status_color}>{server.status}</Badge>;
}

9
resources/js/pages/servers/show.tsx
View File

@ -2,10 +2,11 @@ import { Head, usePage } from '@inertiajs/react';
import { type Configs } from '@/types';
import AppLayout from '@/layouts/app-layout';
import { type Server } from '@/types/server';
import InstallingServer from '@/pages/servers/installing';
import type { ServerLog } from '@/types/server-log';
import ServerOverview from '@/pages/servers/overview';
import ServerLayout from '@/layouts/server/layout';
type Response = {
servers: {
@ -22,10 +23,10 @@ type Response = {
export default function ShowServer() {
const page = usePage<Response>();
return (
<AppLayout>
<ServerLayout server={page.props.server}>
<Head title={page.props.server.name} />
{['installing', 'installation_failed'].includes(page.props.server.status) && <InstallingServer />}
</AppLayout>
{['installing', 'installation_failed'].includes(page.props.server.status) ? <InstallingServer /> : <ServerOverview />}
</ServerLayout>
);
}