#591 - databases

app/Actions/Database/CreateDatabase.php

@@ -6,6 +6,7 @@
 use App\Models\Database;
 use App\Models\Server;
 use App\Models\Service;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 use Illuminate\Validation\ValidationException;
 
@@ -16,6 +17,8 @@ class CreateDatabase
      */
     public function create(Server $server, array $input): Database
     {
+        Validator::make($input, self::rules($server, $input))->validate();
+
         $database = new Database([
             'server_id' => $server->id,
             'charset' => $input['charset'],

app/Http/Controllers/API/DatabaseController.php

@@ -50,8 +50,6 @@ public function create(Request $request, Project $project, Server $server): Data
 
         $this->validateRoute($project, $server);
 
-        $this->validate($request, CreateDatabase::rules($server, $request->input()));
-
         $database = app(CreateDatabase::class)->create($server, $request->all());
 
         return new DatabaseResource($database);

app/Http/Controllers/API/ProjectController.php

@@ -87,7 +87,9 @@ public function delete(Project $project): Response
 
         /** @var User $user */
         $user = auth()->user();
-        app(DeleteProject::class)->delete($user, $project);
+        app(DeleteProject::class)->delete($user, $project, [
+            'name' => $project->name,
+        ]);
 
         return response()->noContent();
     }

app/Http/Controllers/DatabaseController.php

@@ -0,0 +1,96 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Database\CreateDatabase;
+use App\Actions\Database\DeleteDatabase;
+use App\Actions\Database\SyncDatabases;
+use App\Http\Resources\DatabaseResource;
+use App\Models\Database;
+use App\Models\Server;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+use Spatie\RouteAttributes\Attributes\Delete;
+use Spatie\RouteAttributes\Attributes\Get;
+use Spatie\RouteAttributes\Attributes\Middleware;
+use Spatie\RouteAttributes\Attributes\Patch;
+use Spatie\RouteAttributes\Attributes\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+
+#[Prefix('servers/{server}/database')]
+#[Middleware(['auth', 'has-project'])]
+class DatabaseController extends Controller
+{
+    #[Get('/', name: 'databases')]
+    public function index(Server $server): Response
+    {
+        $this->authorize('viewAny', [Database::class, $server]);
+
+        return Inertia::render('databases/index', [
+            'databases' => DatabaseResource::collection($server->databases()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Get('/charsets', name: 'databases.charsets')]
+    public function charsets(Server $server): JsonResponse
+    {
+        $this->authorize('view', $server);
+
+        $charsets = [];
+        foreach ($server->database()->type_data['charsets'] as $charset => $value) {
+            $charsets[] = $charset;
+        }
+
+        return response()->json($charsets);
+    }
+
+    #[Get('/collations/{charset?}', name: 'databases.collations')]
+    public function collations(Server $server, ?string $charset = null): JsonResponse
+    {
+        $this->authorize('view', $server);
+
+        if (! $charset) {
+            $charset = $server->database()->type_data['defaultCharset'] ?? null;
+        }
+
+        $charsets = $server->database()->type_data['charsets'] ?? [];
+
+        return response()->json(data_get($charsets, $charset.'.list', data_get($charsets, $charset.'.default', [])));
+    }
+
+    #[Post('/', name: 'databases.store')]
+    public function store(Request $request, Server $server): RedirectResponse
+    {
+        $this->authorize('create', [Database::class, $server]);
+
+        app(CreateDatabase::class)->create($server, $request->all());
+
+        return back()
+            ->with('success', 'Database created successfully.');
+    }
+
+    #[Patch('/sync', name: 'databases.sync')]
+    public function sync(Server $server): RedirectResponse
+    {
+        $this->authorize('create', [Database::class, $server]);
+
+        app(SyncDatabases::class)->sync($server);
+
+        return back()
+            ->with('success', 'Databases synced successfully.');
+    }
+
+    #[Delete('/{database}', name: 'databases.destroy')]
+    public function destroy(Server $server, Database $database): RedirectResponse
+    {
+        $this->authorize('delete', [$database, $server]);
+
+        app(DeleteDatabase::class)->delete($server, $database);
+
+        return back()
+            ->with('success', 'Database deleted successfully.');
+    }
+}

app/Http/Controllers/ServerController.php

@@ -10,6 +10,7 @@
 use App\Models\ServerProvider;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\URL;
 use Illuminate\Validation\Rule;
 use Inertia\Inertia;
 use Inertia\Response;
@@ -57,8 +58,7 @@ public function show(Server $server): Response
         $this->authorize('view', $server);
 
         return Inertia::render('servers/show', [
-            'server' => ServerResource::make($server),
+            'logs' => ServerLogResource::collection($server->logs()->latest()->simplePaginate(config('web.pagination_size'))),
-            'logs' => ServerLogResource::collection($server->logs()->latest()->paginate(config('web.pagination_size'))),
         ]);
     }
 
@@ -67,6 +67,18 @@ public function switch(Server $server): RedirectResponse
     {
         $this->authorize('view', $server);
 
+        $previousUrl = URL::previous();
+        $previousRequest = Request::create($previousUrl);
+        $previousRoute = app('router')->getRoutes()->match($previousRequest);
+
+        if ($previousRoute->hasParameter('server')) {
+            if (count($previousRoute->parameters()) > 1) {
+                return redirect()->route('servers.show', ['server' => $server->id]);
+            }
+
+            return redirect()->route($previousRoute->getName(), ['server' => $server]);
+        }
+
         return redirect()->route('servers.show', ['server' => $server->id]);
     }
 

app/Http/Middleware/HandleInertiaRequests.php

@@ -51,8 +51,14 @@ public function share(Request $request): array
             $servers = ServerResource::collection($user->currentProject?->servers);
         }
 
+        $data = [];
+        if ($request->route('server')) {
+            $data['server'] = ServerResource::make($request->route('server'));
+        }
+
         return [
             ...parent::share($request),
+            ...$data,
             'name' => config('app.name'),
             'quote' => ['message' => trim($message), 'author' => trim($author)],
             'auth' => [

app/Http/Resources/DatabaseResource.php

@@ -18,7 +18,10 @@ public function toArray(Request $request): array
             'id' => $this->id,
             'server_id' => $this->server_id,
             'name' => $this->name,
+            'collation' => $this->collation,
+            'charset' => $this->charset,
             'status' => $this->status,
+            'status_color' => $this::$statusColors[$this->status] ?? 'gray',
             'created_at' => $this->created_at,
             'updated_at' => $this->updated_at,
         ];

app/Models/Database.php

@@ -4,6 +4,7 @@
 
 use App\Enums\DatabaseStatus;
 use Carbon\Carbon;
+use Database\Factories\DatabaseFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
@@ -21,7 +22,7 @@
  */
 class Database extends AbstractModel
 {
-    /** @use HasFactory<\Database\Factories\DatabaseFactory> */
+    /** @use HasFactory<DatabaseFactory> */
     use HasFactory;
 
     use SoftDeletes;

config/web.php

@@ -1,7 +1,7 @@
 <?php
 
 return [
-    'pagination_size' => 20,
+    'pagination_size' => 10,
 
     'controllers' => [
         'servers' => \App\Http\Controllers\ServerController::class,

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) => (
+                  {secondNavItems.map((item) => {
-                    <SidebarMenuItem key={item.title}>
+                    const isActive = item.onlyActivePath ? window.location.href === item.href : window.location.href.startsWith(item.href);
-                      <SidebarMenuButton asChild isActive={window.location.href.startsWith(item.href)}>
+
-                        <Link href={item.href} prefetch>
+                    if (item.children && item.children.length > 0) {
-                          {item.icon && <item.icon />}
+                      return (
-                          <span>{item.title}</span>
+                        <Collapsible
-                        </Link>
+                          key={`${item.title}-${item.href}`}
-                      </SidebarMenuButton>
+                          open={isActive || open === item}
-                    </SidebarMenuItem>
+                          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 {
+import { CloudUploadIcon, DatabaseIcon, HomeIcon, UsersIcon } from 'lucide-react';
-  ChartPieIcon,
-  ClockIcon,
-  CogIcon,
-  DatabaseIcon,
-  FlameIcon,
-  FolderOpenIcon,
-  HomeIcon,
-  KeyIcon,
-  ListEndIcon,
-  LogsIcon,
-  MousePointerClickIcon,
-  Settings2Icon,
-  TerminalSquareIcon,
-} 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',
+      title: 'Database',
-      href: '#',
+      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',
+    //   title: 'Sites',
-      href: '#',
+    //   href: '#',
-      icon: MousePointerClickIcon,
+    //   icon: MousePointerClickIcon,
-    },
+    // },
-    {
+    // {
-      title: 'File Manager',
+    //   title: 'Firewall',
-      href: '#',
+    //   href: '#',
-      icon: FolderOpenIcon,
+    //   icon: FlameIcon,
-    },
+    // },
-    {
+    // {
-      title: 'Firewall',
+    //   title: 'CronJobs',
-      href: '#',
+    //   href: '#',
-      icon: FlameIcon,
+    //   icon: ClockIcon,
-    },
+    // },
-    {
+    // {
-      title: 'CronJobs',
+    //   title: 'Workers',
-      href: '#',
+    //   href: '#',
-      icon: ClockIcon,
+    //   icon: ListEndIcon,
-    },
+    // },
-    {
+    // {
-      title: 'Workers',
+    //   title: 'SSH Keys',
-      href: '#',
+    //   href: '#',
-      icon: ListEndIcon,
+    //   icon: KeyIcon,
-    },
+    // },
-    {
+    // {
-      title: 'SSH Keys',
+    //   title: 'Services',
-      href: '#',
+    //   href: '#',
-      icon: KeyIcon,
+    //   icon: CogIcon,
-    },
+    // },
-    {
+    // {
-      title: 'Services',
+    //   title: 'Metrics',
-      href: '#',
+    //   href: '#',
-      icon: CogIcon,
+    //   icon: ChartPieIcon,
-    },
+    // },
-    {
+    // {
-      title: 'Metrics',
+    //   title: 'Console',
-      href: '#',
+    //   href: '#',
-      icon: ChartPieIcon,
+    //   icon: TerminalSquareIcon,
-    },
+    // },
-    {
+    // {
-      title: 'Console',
+    //   title: 'Logs',
-      href: '#',
+    //   href: '#',
-      icon: TerminalSquareIcon,
+    //   icon: LogsIcon,
-    },
+    // },
-    {
+    // {
-      title: 'Logs',
+    //   title: 'Settings',
-      href: '#',
+    //   href: '#',
-      icon: LogsIcon,
+    //   icon: Settings2Icon,
-    },
+    // },
-    {
-      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) => (
+                    {providers.map(
-                      <SelectItem key={provider} value={provider}>
+                      (provider) =>
-                        {provider}
+                        provider !== 'custom' && (
-                      </SelectItem>
+                          <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>
+              <div>
-              <span className="hidden lg:inline-flex">Server Provider</span>
+                <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 {

tests/Feature/DatabaseTest.php

@@ -6,10 +6,8 @@
 use App\Enums\DatabaseUserStatus;
 use App\Facades\SSH;
 use App\Models\Database;
-use App\Web\Pages\Servers\Databases\Index;
-use App\Web\Pages\Servers\Databases\Widgets\DatabasesList;
 use Illuminate\Foundation\Testing\RefreshDatabase;
-use Livewire\Livewire;
+use Inertia\Testing\AssertableInertia;
 use Tests\TestCase;
 
 class DatabaseTest extends TestCase
@@ -22,15 +20,11 @@ public function test_create_database(): void
 
         SSH::fake();
 
-        Livewire::test(Index::class, [
+        $this->post(route('databases.store', $this->server), [
-            'server' => $this->server,
+            'name' => 'database',
-        ])
+            'charset' => 'utf8mb4',
-            ->callAction('create', [
+            'collation' => 'utf8mb4_unicode_ci',
-                'name' => 'database',
+        ])->assertSessionDoesntHaveErrors();
-                'charset' => 'utf8mb4',
-                'collation' => 'utf8mb4_unicode_ci',
-            ])
-            ->assertSuccessful();
 
         $this->assertDatabaseHas('databases', [
             'name' => 'database',
@@ -44,20 +38,16 @@ public function test_create_database_with_user(): void
 
         SSH::fake();
 
-        Livewire::test(Index::class, [
+        $this->post(route('databases.store', $this->server), [
-            'server' => $this->server,
+            'name' => 'database',
-        ])
+            'charset' => 'utf8mb4',
-            ->callAction('create', [
+            'collation' => 'utf8mb4_unicode_ci',
-                'name' => 'database',
+            'user' => true,
-                'charset' => 'utf8mb4',
+            'username' => 'user',
-                'collation' => 'utf8mb4_unicode_ci',
+            'password' => 'password',
-                'user' => true,
+            'remote' => true,
-                'username' => 'user',
+            'host' => '%',
-                'password' => 'password',
+        ])->assertSessionDoesntHaveErrors();
-                'remote' => true,
-                'host' => '%',
-            ])
-            ->assertSuccessful();
 
         $this->assertDatabaseHas('databases', [
             'name' => 'database',
@@ -76,14 +66,13 @@ public function test_see_databases_list(): void
     {
         $this->actingAs($this->user);
 
-        /** @var Database $database */
+        Database::factory()->create([
-        $database = Database::factory()->create([
             'server_id' => $this->server,
         ]);
 
-        $this->get(Index::getUrl(['server' => $this->server]))
+        $this->get(route('databases', $this->server))
             ->assertSuccessful()
-            ->assertSee($database->name);
+            ->assertInertia(fn (AssertableInertia $page) => $page->component('databases/index'));
     }
 
     public function test_delete_database(): void
@@ -97,11 +86,10 @@ public function test_delete_database(): void
             'server_id' => $this->server,
         ]);
 
-        Livewire::test(DatabasesList::class, [
+        $this->delete(route('databases.destroy', [
             'server' => $this->server,
-        ])
+            'database' => $database,
-            ->callTableAction('delete', $database->id)
+        ]))->assertSessionDoesntHaveErrors();
-            ->assertSuccessful();
 
         $this->assertSoftDeleted('databases', [
             'id' => $database->id,
@@ -114,10 +102,7 @@ public function test_sync_databases(): void
 
         SSH::fake();
 
-        Livewire::test(Index::class, [
+        $this->patch(route('databases.sync', $this->server))
-            'server' => $this->server,
+            ->assertSessionDoesntHaveErrors();
-        ])
-            ->callAction('sync')
-            ->assertSuccessful();
     }
 }

tsconfig.json

@@ -1,122 +1,136 @@
 {
-    "compilerOptions": {
+  "compilerOptions": {
-        /* Visit https://aka.ms/tsconfig to read more about this file */
+    /* Visit https://aka.ms/tsconfig to read more about this file */
 
-        /* Projects */
+    /* Projects */
-        // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-        // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-        // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-        // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
-        // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-        // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
-        /* Language and Environment */
+    /* Language and Environment */
-        "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "target": "ESNext"
-        // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-        // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-        // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
-        // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
-        // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-        // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
-        // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-        // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
-        // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
-        // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-        // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
-        /* Modules */
+    /* Modules */
-        "module": "ESNext" /* Specify what module code is generated. */,
+    "module": "ESNext"
-        // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    /* Specify what module code is generated. */,
-        "moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-        // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    "moduleResolution": "bundler"
-        // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    /* Specify how TypeScript looks up a file from a given module specifier. */,
-        // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-        // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-        // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-        // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-        // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-        // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-        // "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-        // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
-        // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
-        // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
-        // "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
-        // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
-        // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
-        // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
-        /* JavaScript Support */
+    /* JavaScript Support */
-        "allowJs": true /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+    "allowJs": true
-        // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
-        // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
-        /* Emit */
+    /* Emit */
-        // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-        // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-        // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-        // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-        // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-        "noEmit": true /* Disable emitting files from a compilation. */,
+    "noEmit": true
-        // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    /* Disable emitting files from a compilation. */,
-        // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-        // "removeComments": true,                           /* Disable emitting comments. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
-        // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "removeComments": true,                           /* Disable emitting comments. */
-        // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-        // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-        // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-        // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-        // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-        // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-        // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
-        // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-        // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-        // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-        // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 
-        /* Interop Constraints */
+    /* Interop Constraints */
-        "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
+    "isolatedModules": true
-        // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    /* Ensure that each file can be safely transpiled without relying on other imports. */,
-        // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
-        // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
-        "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-        // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "esModuleInterop": true
-        "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true
+    /* Ensure that casing is correct in imports. */,
+    /* Type Checking */
+    "strict": true
+    /* Enable all strict type-checking options. */,
+    "noImplicitAny": true
+    /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "strictBuiltinIteratorReturn": true,              /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
 
-        /* Type Checking */
+    /* Completeness */
-        "strict": true /* Enable all strict type-checking options. */,
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-        "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    "skipLibCheck": true
-        // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    /* Skip type checking all .d.ts files. */,
-        // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    "baseUrl": ".",
-        // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    "paths": {
-        // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+      "@/*": [
-        // "strictBuiltinIteratorReturn": true,              /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
+        "./resources/js/*"
-        // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+      ],
-        // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+      "ziggy-js": [
-        // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+        "./vendor/tightenco/ziggy"
-        // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+      ]
-        // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-        // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-        // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-        // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-        // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-        // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-        // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-        // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-        // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-        /* Completeness */
-        // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-        "skipLibCheck": true /* Skip type checking all .d.ts files. */,
-        "baseUrl": ".",
-        "paths": {
-            "@/*": ["./resources/js/*"],
-            "ziggy-js": ["./vendor/tightenco/ziggy"]
-        },
-        "jsx": "react-jsx",
     },
-    "include": [
+    "jsx": "react-jsx"
-        "resources/js/**/*.ts",
+  },
-        "resources/js/**/*.d.ts",
+  "include": [
-        "resources/js/**/*.tsx",
+    "resources/js/**/*.ts",
-    ]
+    "resources/js/**/*.d.ts",
+    "resources/js/**/*.tsx"
+  ]
 }