#591 - databases

resources/js/components/app-sidebar.tsx

@@ -9,12 +9,16 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
 } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/react';
 import { BookOpen, CogIcon, Folder, ServerIcon } from 'lucide-react';
 import AppLogo from './app-logo';
 import { Icon } from '@/components/icon';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { useState } from 'react';
 
 const mainNavItems: NavItem[] = [
   {
@@ -43,6 +47,8 @@ const footerNavItems: NavItem[] = [
 ];
 
 export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?: NavItem[]; secondNavTitle?: string }) {
+  const [open, setOpen] = useState<NavItem>();
+
   return (
     <Sidebar collapsible="icon" className="overflow-hidden [&>[data-sidebar=sidebar]]:flex-row">
       {/* This is the first sidebar */}
@@ -65,10 +71,10 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
             <SidebarGroupContent className="md:px-0">
               <SidebarMenu>
                 {mainNavItems.map((item) => (
-                  <SidebarMenuItem key={item.title}>
+                  <SidebarMenuItem key={`${item.title}-${item.href}`}>
                     <SidebarMenuButton
                       asChild
-                      isActive={window.location.href.startsWith(item.href)}
+                      isActive={item.onlyActivePath ? window.location.href === item.href : window.location.href.startsWith(item.href)}
                       tooltip={{ children: item.title, hidden: false }}
                     >
                       <Link href={item.href} prefetch>
@@ -85,7 +91,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
         <SidebarFooter className="hidden md:flex">
           <SidebarMenu>
             {footerNavItems.map((item) => (
-              <SidebarMenuItem key={item.title}>
+              <SidebarMenuItem key={`${item.title}-${item.href}`}>
                 <SidebarMenuButton asChild tooltip={{ children: item.title, hidden: false }}>
                   <a href={item.href} target="_blank" rel="noopener noreferrer">
                     {item.icon && <Icon iconNode={item.icon} />}
@@ -113,16 +119,60 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
             <SidebarGroup>
               <SidebarGroupContent>
                 <SidebarMenu>
-                  {secondNavItems.map((item) => (
-                    <SidebarMenuItem key={item.title}>
-                      <SidebarMenuButton asChild isActive={window.location.href.startsWith(item.href)}>
-                        <Link href={item.href} prefetch>
-                          {item.icon && <item.icon />}
-                          <span>{item.title}</span>
-                        </Link>
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  ))}
+                  {secondNavItems.map((item) => {
+                    const isActive = item.onlyActivePath ? window.location.href === item.href : window.location.href.startsWith(item.href);
+
+                    if (item.children && item.children.length > 0) {
+                      return (
+                        <Collapsible
+                          key={`${item.title}-${item.href}`}
+                          open={isActive || open === item}
+                          onOpenChange={() => setOpen(item)}
+                          className="group/collapsible"
+                        >
+                          <SidebarMenuItem>
+                            <CollapsibleTrigger asChild>
+                              <SidebarMenuButton>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                              </SidebarMenuButton>
+                            </CollapsibleTrigger>
+                            <CollapsibleContent>
+                              <SidebarMenuSub>
+                                {item.children.map((childItem) => (
+                                  <SidebarMenuSubItem key={`${childItem.title}-${childItem.href}`}>
+                                    <SidebarMenuButton
+                                      asChild
+                                      isActive={
+                                        childItem.onlyActivePath
+                                          ? window.location.href === childItem.href
+                                          : window.location.href.startsWith(childItem.href)
+                                      }
+                                    >
+                                      <Link href={childItem.href} prefetch>
+                                        <span>{childItem.title}</span>
+                                      </Link>
+                                    </SidebarMenuButton>
+                                  </SidebarMenuSubItem>
+                                ))}
+                              </SidebarMenuSub>
+                            </CollapsibleContent>
+                          </SidebarMenuItem>
+                        </Collapsible>
+                      );
+                    }
+
+                    return (
+                      <SidebarMenuItem key={`${item.title}-${item.href}`}>
+                        <SidebarMenuButton asChild isActive={isActive}>
+                          <Link href={item.href} prefetch>
+                            {item.icon && <item.icon />}
+                            <span>{item.title}</span>
+                          </Link>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    );
+                  })}
                 </SidebarMenu>
               </SidebarGroupContent>
             </SidebarGroup>

resources/js/components/header-container.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export default function HeaderContainer({ children }: { children: ReactNode }) {
+  return <div className="flex items-center justify-between">{children}</div>;
+}

resources/js/components/user-select.tsx

@@ -1,5 +1,5 @@
 import { User } from '@/types/user';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
@@ -13,6 +13,13 @@ export default function UserSelect({ onChange }: { onChange: (selectedUser: User
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState<string>();
 
+  const onOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (open) {
+      fetchUsers();
+    }
+  };
+
   const fetchUsers = async () => {
     const response = await axios.get(route('users.json', { query: query }));
 
@@ -24,12 +31,8 @@ export default function UserSelect({ onChange }: { onChange: (selectedUser: User
     setUsers([]);
   };
 
-  useEffect(() => {
-    fetchUsers();
-  }, [query]);
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={onOpenChange}>
       <PopoverTrigger asChild>
         <Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
           {value ? users.find((user) => user.id === parseInt(value))?.name : 'Select user...'}

resources/js/layouts/database/layout.tsx

@@ -0,0 +1,59 @@
+import { Server } from '@/types/server';
+import { ReactNode } from 'react';
+import ServerLayout from '@/layouts/server/layout';
+import Container from '@/components/container';
+import { NavigationMenu, NavigationMenuLink, NavigationMenuList } from '@/components/ui/navigation-menu';
+import type { NavItem } from '@/types';
+import { CloudUploadIcon, DatabaseIcon, UsersIcon } from 'lucide-react';
+import { Link } from '@inertiajs/react';
+
+export default function DatabaseLayout({ server, children }: { server: Server; children: ReactNode }) {
+  const navItems: NavItem[] = [
+    {
+      title: 'Databases',
+      href: route('databases', { server: server.id }),
+      icon: DatabaseIcon,
+    },
+    {
+      title: 'Users',
+      href: '/database-users',
+      icon: UsersIcon,
+    },
+    {
+      title: 'Backups',
+      href: '/backups',
+      icon: CloudUploadIcon,
+    },
+  ];
+
+  return (
+    <ServerLayout server={server}>
+      <Container className="max-w-5xl">
+        <div className="bg-muted/10 inline-flex rounded-md border">
+          <NavigationMenu className="flex">
+            <NavigationMenuList>
+              {navItems.map((item: NavItem) => (
+                <NavigationMenuLink
+                  key={item.title}
+                  asChild
+                  className={
+                    (item.onlyActivePath ? window.location.href === item.href : window.location.href.startsWith(item.href)) ? 'bg-muted' : ''
+                  }
+                >
+                  <Link href={item.href}>
+                    <div className="flex items-center gap-2">
+                      {item.icon && <item.icon />}
+                      {item.title}
+                    </div>
+                  </Link>
+                </NavigationMenuLink>
+              ))}
+            </NavigationMenuList>
+          </NavigationMenu>
+        </div>
+      </Container>
+
+      {children}
+    </ServerLayout>
+  );
+}

resources/js/layouts/server/layout.tsx

@@ -1,19 +1,5 @@
 import { type NavItem } from '@/types';
-import {
-  ChartPieIcon,
-  ClockIcon,
-  CogIcon,
-  DatabaseIcon,
-  FlameIcon,
-  FolderOpenIcon,
-  HomeIcon,
-  KeyIcon,
-  ListEndIcon,
-  LogsIcon,
-  MousePointerClickIcon,
-  Settings2Icon,
-  TerminalSquareIcon,
-} from 'lucide-react';
+import { CloudUploadIcon, DatabaseIcon, HomeIcon, UsersIcon } from 'lucide-react';
 import { ReactNode } from 'react';
 import { Server } from '@/types/server';
 import ServerHeader from '@/pages/servers/components/header';
@@ -28,68 +14,81 @@ export default function ServerLayout({ server, children }: { server: Server; chi
     {
       title: 'Overview',
       href: route('servers.show', { server: server.id }),
+      onlyActivePath: route('servers.show', { server: server.id }),
       icon: HomeIcon,
     },
     {
-      title: 'Databases',
-      href: '#',
+      title: 'Database',
+      href: route('databases', { server: server.id }),
       icon: DatabaseIcon,
+      children: [
+        {
+          title: 'Databases',
+          href: route('databases', { server: server.id }),
+          icon: DatabaseIcon,
+        },
+        {
+          title: 'Users',
+          href: '/users',
+          icon: UsersIcon,
+        },
+        {
+          title: 'Backups',
+          href: '/backups',
+          icon: CloudUploadIcon,
+        },
+      ],
     },
-    {
-      title: 'Sites',
-      href: '#',
-      icon: MousePointerClickIcon,
-    },
-    {
-      title: 'File Manager',
-      href: '#',
-      icon: FolderOpenIcon,
-    },
-    {
-      title: 'Firewall',
-      href: '#',
-      icon: FlameIcon,
-    },
-    {
-      title: 'CronJobs',
-      href: '#',
-      icon: ClockIcon,
-    },
-    {
-      title: 'Workers',
-      href: '#',
-      icon: ListEndIcon,
-    },
-    {
-      title: 'SSH Keys',
-      href: '#',
-      icon: KeyIcon,
-    },
-    {
-      title: 'Services',
-      href: '#',
-      icon: CogIcon,
-    },
-    {
-      title: 'Metrics',
-      href: '#',
-      icon: ChartPieIcon,
-    },
-    {
-      title: 'Console',
-      href: '#',
-      icon: TerminalSquareIcon,
-    },
-    {
-      title: 'Logs',
-      href: '#',
-      icon: LogsIcon,
-    },
-    {
-      title: 'Settings',
-      href: '#',
-      icon: Settings2Icon,
-    },
+    // {
+    //   title: 'Sites',
+    //   href: '#',
+    //   icon: MousePointerClickIcon,
+    // },
+    // {
+    //   title: 'Firewall',
+    //   href: '#',
+    //   icon: FlameIcon,
+    // },
+    // {
+    //   title: 'CronJobs',
+    //   href: '#',
+    //   icon: ClockIcon,
+    // },
+    // {
+    //   title: 'Workers',
+    //   href: '#',
+    //   icon: ListEndIcon,
+    // },
+    // {
+    //   title: 'SSH Keys',
+    //   href: '#',
+    //   icon: KeyIcon,
+    // },
+    // {
+    //   title: 'Services',
+    //   href: '#',
+    //   icon: CogIcon,
+    // },
+    // {
+    //   title: 'Metrics',
+    //   href: '#',
+    //   icon: ChartPieIcon,
+    // },
+    // {
+    //   title: 'Console',
+    //   href: '#',
+    //   icon: TerminalSquareIcon,
+    // },
+    // {
+    //   title: 'Logs',
+    //   href: '#',
+    //   icon: LogsIcon,
+    // },
+    // {
+    //   title: 'Settings',
+    //   href: '#',
+    //   icon: Settings2Icon,
+    // },
   ];
 
   return (

resources/js/pages/databases/components/columns.tsx

@@ -0,0 +1,120 @@
+import { ColumnDef } from '@tanstack/react-table';
+import DateTime from '@/components/date-time';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { DatabaseIcon, LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { useState } from 'react';
+import { Database } from '@/types/database';
+
+function Delete({ database }: { database: Database }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('databases.destroy', { server: database.server_id, database: database }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+          Delete
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete database [{database.name}]</DialogTitle>
+          <DialogDescription className="sr-only">Delete database</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to delete database <strong>{database.name}</strong>? This action cannot be undone.
+        </p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const columns: ColumnDef<Database>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center gap-1">
+          <DatabaseIcon className="size-3" />
+          {row.getValue('name')}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'charset',
+    header: 'Charset',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'collation',
+    header: 'Collation',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end">
+          <DropdownMenu modal={false}>
+            <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">
+              <Delete database={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/databases/components/create-database.tsx

@@ -0,0 +1,192 @@
+import { Server } from '@/types/server';
+import React, { FormEvent, ReactNode, useState } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { useForm } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import axios from 'axios';
+import { Checkbox } from '@/components/ui/checkbox';
+
+type CreateForm = {
+  name: string;
+  charset: string;
+  collation: string;
+  user: boolean;
+  username: string;
+  password: string;
+  remote: boolean;
+  host: string;
+};
+
+export default function CreateDatabase({ server, children }: { server: Server; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [charsets, setCharsets] = useState<string[]>([]);
+  const [collations, setCollations] = useState<string[]>([]);
+
+  const fetchCharsets = async () => {
+    axios.get(route('databases.charsets', server.id)).then((response) => {
+      setCharsets(response.data);
+    });
+  };
+
+  const form = useForm<CreateForm>({
+    name: '',
+    charset: '',
+    collation: '',
+    user: false,
+    username: '',
+    password: '',
+    remote: false,
+    host: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('databases.store', server.id), {
+      onSuccess: () => {
+        form.reset();
+        setOpen(false);
+      },
+    });
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (open && charsets.length === 0) {
+      fetchCharsets();
+    }
+  };
+
+  const handleCharsetChange = (value: string) => {
+    form.setData('collation', '');
+    form.setData('charset', value);
+    axios.get(route('databases.collations', { server: server.id, charset: value })).then((response) => {
+      setCollations(response.data);
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create database</DialogTitle>
+          <DialogDescription className="sr-only">Create new database</DialogDescription>
+        </DialogHeader>
+        <Form className="p-4" id="create-database-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="charset">Charset</Label>
+              <Select onValueChange={handleCharsetChange} defaultValue={form.data.charset}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select charset" />
+                </SelectTrigger>
+                <SelectContent>
+                  {charsets.map((charset) => (
+                    <SelectItem key={charset} value={charset}>
+                      {charset}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.charset} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="collation">Collation</Label>
+              <Select onValueChange={(value) => form.setData('collation', value)} defaultValue={form.data.collation}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select collation" />
+                </SelectTrigger>
+                <SelectContent>
+                  {collations.map((collation) => (
+                    <SelectItem key={collation} value={collation}>
+                      {collation}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.collation} />
+            </FormField>
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox id="user" name="user" checked={form.data.user} onClick={() => form.setData('user', !form.data.user)} />
+                <Label htmlFor="user">Create user</Label>
+              </div>
+              <InputError message={form.errors.user} />
+            </FormField>
+            {form.data.user && (
+              <>
+                <FormField>
+                  <Label htmlFor="username">Username</Label>
+                  <Input
+                    type="text"
+                    id="username"
+                    name="username"
+                    value={form.data.username}
+                    onChange={(e) => form.setData('username', e.target.value)}
+                  />
+                  <InputError message={form.errors.username} />
+                </FormField>
+                <FormField>
+                  <Label htmlFor="password">Password</Label>
+                  <Input
+                    type="password"
+                    id="password"
+                    name="password"
+                    value={form.data.password}
+                    onChange={(e) => form.setData('password', e.target.value)}
+                  />
+                  <InputError message={form.errors.password} />
+                </FormField>
+                <FormField>
+                  <div className="flex items-center space-x-3">
+                    <Checkbox id="remote" name="remote" checked={form.data.remote} onClick={() => form.setData('remote', !form.data.remote)} />
+                    <Label htmlFor="remote">Allow remote access</Label>
+                  </div>
+                  <InputError message={form.errors.remote} />
+                </FormField>
+                {form.data.remote && (
+                  <FormField>
+                    <Label htmlFor="host">Host</Label>
+                    <Input type="text" id="host" name="host" value={form.data.host} onChange={(e) => form.setData('host', e.target.value)} />
+                    <InputError message={form.errors.host} />
+                  </FormField>
+                )}
+              </>
+            )}
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button type="button" onClick={submit} disabled={form.processing}>
+            {form.processing && <LoaderCircle className="animate-spin" />}
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/databases/components/sync-databases.tsx

@@ -0,0 +1,45 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Server } from '@/types/server';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon, RefreshCwIcon } from 'lucide-react';
+import { useForm } from '@inertiajs/react';
+import { useState } from 'react';
+
+export default function SyncDatabases({ server }: { server: Server }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.patch(route('databases.sync', server.id), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <RefreshCwIcon />
+          <span className="hidden lg:block">Sync</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Sync Databases</DialogTitle>
+          <DialogDescription className="sr-only">Sync databases from the server to Vito.</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to sync the databases from the server to Vito?</p>
+        <DialogFooter>
+          <DialogTrigger asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogTrigger>
+          <Button disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Sync
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/databases/index.tsx

@@ -0,0 +1,54 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import type { Database } from '@/types/database';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import CreateDatabase from '@/pages/databases/components/create-database';
+import { Button } from '@/components/ui/button';
+import ServerLayout from '@/layouts/server/layout';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/databases/components/columns';
+import React from 'react';
+import { BookOpenIcon, PlusIcon } from 'lucide-react';
+import SyncDatabases from '@/pages/databases/components/sync-databases';
+
+type Page = {
+  server: Server;
+  databases: {
+    data: Database[];
+  };
+};
+
+export default function Databases() {
+  const page = usePage<Page>();
+
+  return (
+    <ServerLayout server={page.props.server}>
+      <Head title={`Databases - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Databases" description="Here you can manage the databases" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/servers/database" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            <SyncDatabases server={page.props.server} />
+            <CreateDatabase server={page.props.server}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create</span>
+              </Button>
+            </CreateDatabase>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} data={page.props.databases.data} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/notification-channels/components/connect-notification-channel.tsx

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useEffect, useState } from 'react';
+import { FormEventHandler, ReactNode, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -42,7 +42,7 @@ export default function ConnectNotificationChannel({
   const page = usePage<SharedData>();
 
   const form = useForm<Required<NotificationChannelForm>>({
-    provider: 'email',
+    provider: defaultProvider || 'email',
     name: '',
     global: false,
   });
@@ -59,10 +59,6 @@ export default function ConnectNotificationChannel({
     });
   };
 
-  useEffect(() => {
-    form.setData('provider', defaultProvider ?? 'email');
-  }, [defaultProvider]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>

resources/js/pages/server-providers/components/connect-server-provider.tsx

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useEffect, useState } from 'react';
+import { FormEventHandler, ReactNode, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -42,7 +42,7 @@ export default function ConnectServerProvider({
   const page = usePage<SharedData>();
 
   const form = useForm<Required<ServerProviderForm>>({
-    provider: 'aws',
+    provider: defaultProvider || 'aws',
     name: '',
     global: false,
   });
@@ -59,10 +59,6 @@ export default function ConnectServerProvider({
     });
   };
 
-  useEffect(() => {
-    form.setData('provider', defaultProvider ?? 'aws');
-  }, [defaultProvider]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
@@ -87,11 +83,14 @@ export default function ConnectServerProvider({
                 </SelectTrigger>
                 <SelectContent>
                   <SelectGroup>
-                    {providers.map((provider) => (
-                      <SelectItem key={provider} value={provider}>
-                        {provider}
-                      </SelectItem>
-                    ))}
+                    {providers.map(
+                      (provider) =>
+                        provider !== 'custom' && (
+                          <SelectItem key={provider} value={provider}>
+                            {provider}
+                          </SelectItem>
+                        ),
+                    )}
                   </SelectGroup>
                 </SelectContent>
               </Select>

resources/js/pages/servers/components/header.tsx

@@ -31,8 +31,10 @@ export default function ServerHeader({ server }: { server: Server }) {
               </div>
             </TooltipTrigger>
             <TooltipContent>
-              <span className="lg:hidden">{server.provider}</span>
-              <span className="hidden lg:inline-flex">Server Provider</span>
+              <div>
+                <span className="lg:hidden">{server.provider}</span>
+                <span className="hidden lg:inline-flex">Server Provider</span>
+              </div>
             </TooltipContent>
           </Tooltip>
           <SlashIcon className="size-3" />
@@ -55,7 +57,7 @@ export default function ServerHeader({ server }: { server: Server }) {
                 <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>%{parseInt(server.progress || '0')}</div>
                   </div>
                 </TooltipTrigger>
                 <TooltipContent>Installation Progress</TooltipContent>

resources/js/pages/servers/index.tsx

@@ -11,6 +11,7 @@ import Container from '@/components/container';
 import { Button } from '@/components/ui/button';
 import React from 'react';
 import Layout from '@/layouts/app/layout';
+import { PlusIcon } from 'lucide-react';
 
 type Response = {
   servers: {
@@ -31,7 +32,10 @@ export default function Servers() {
           <Heading title="Servers" description="All of the servers of your project listed here" />
           <div className="flex items-center gap-2">
             <CreateServer>
-              <Button>Create server</Button>
+              <Button>
+                <PlusIcon />
+                Create server
+              </Button>
             </CreateServer>
           </div>
         </div>

resources/js/pages/servers/installing.tsx

@@ -4,6 +4,7 @@ import Container from '@/components/container';
 import { DataTable } from '@/components/data-table';
 import { columns } from '@/pages/server-logs/components/columns';
 import { usePage } from '@inertiajs/react';
+import Heading from '@/components/heading';
 
 export default function InstallingServer() {
   const page = usePage<{
@@ -15,6 +16,7 @@ export default function InstallingServer() {
 
   return (
     <Container className="max-w-5xl">
+      <Heading title="Installing" description="Here you can see the installation logs" />
       <DataTable columns={columns} data={page.props.logs.data} />{' '}
     </Container>
   );

resources/js/pages/servers/show.tsx

@@ -24,7 +24,7 @@ export default function ShowServer() {
   const page = usePage<Response>();
   return (
     <ServerLayout server={page.props.server}>
-      <Head title={page.props.server.name} />
+      <Head title={`Overview - ${page.props.server.name}`} />
 
       {['installing', 'installation_failed'].includes(page.props.server.status) ? <InstallingServer /> : <ServerOverview />}
     </ServerLayout>

resources/js/pages/source-controls/components/connect-source-control.tsx

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useEffect, useState } from 'react';
+import { FormEventHandler, ReactNode, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -42,7 +42,7 @@ export default function ConnectSourceControl({
   const page = usePage<SharedData>();
 
   const form = useForm<Required<SourceControlForm>>({
-    provider: 'github',
+    provider: defaultProvider || 'github',
     name: '',
     global: false,
   });
@@ -59,10 +59,6 @@ export default function ConnectSourceControl({
     });
   };
 
-  useEffect(() => {
-    form.setData('provider', defaultProvider ?? 'github');
-  }, [defaultProvider]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>

resources/js/pages/storage-providers/components/connect-storage-provider.tsx

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { useForm, usePage } from '@inertiajs/react';
-import { FormEventHandler, ReactNode, useEffect, useState } from 'react';
+import { FormEventHandler, ReactNode, useState } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import InputError from '@/components/ui/input-error';
@@ -42,7 +42,7 @@ export default function ConnectStorageProvider({
   const page = usePage<SharedData>();
 
   const form = useForm<Required<StorageProviderForm>>({
-    provider: 's3',
+    provider: defaultProvider || 's3',
     name: '',
     global: false,
   });
@@ -59,10 +59,6 @@ export default function ConnectStorageProvider({
     });
   };
 
-  useEffect(() => {
-    form.setData('provider', defaultProvider ?? 's3');
-  }, [defaultProvider]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>

resources/js/types/database.d.ts

@@ -0,0 +1,13 @@
+export interface Database {
+  id: number;
+  server_id: number;
+  name: string;
+  collation: string;
+  charset: string;
+  status: string;
+  status_color: string;
+  created_at: string;
+  updated_at: string;
+
+  [key: string]: unknown;
+}

resources/js/types/index.d.ts

@@ -23,9 +23,10 @@ export interface NavGroup {
 export interface NavItem {
   title: string;
   href: string;
-  activePath?: string;
+  onlyActivePath?: string;
   icon?: LucideIcon | null;
   isActive?: boolean;
+  children?: NavItem[];
 }
 
 export interface Configs {