#591 - workers

resources/js/components/app-header.tsx

@@ -13,7 +13,7 @@ export function AppHeader() {
   return (
     <header className="bg-background -ml-1 flex h-12 shrink-0 items-center justify-between gap-2 border-b p-4 md:-ml-2">
       <div className="flex items-center">
-        <SidebarTrigger />
+        <SidebarTrigger className="-ml-1 md:hidden" />
         <div className="flex items-center space-x-2 text-xs">
           <ProjectSwitch />
           <SlashIcon className="size-3" />

resources/js/components/command-cell.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Badge } from '@/components/ui/badge';
+
+export default function CommandCell({ command }: { command: string }) {
+  const [copySuccess, setCopySuccess] = useState(false);
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command).then(() => {
+      setCopySuccess(true);
+      setTimeout(() => {
+        setCopySuccess(false);
+      }, 2000);
+    });
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="inline-flex cursor-pointer justify-start space-x-2 truncate" onClick={copyToClipboard}>
+          <Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[150px] overflow-ellipsis">
+            {command}
+          </Badge>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <span className="flex items-center space-x-2">Copy</span>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

resources/js/components/log-output.tsx

@@ -0,0 +1,45 @@
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { ReactNode, useRef, useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ArrowDown, ClockArrowDownIcon } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function LogOutput({ children }: { children: ReactNode }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(false);
+
+  useEffect(() => {
+    if (autoScroll && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [children, autoScroll]);
+
+  const toggleAutoScroll = () => {
+    setAutoScroll(!autoScroll);
+  };
+
+  return (
+    <div className="relative">
+      <ScrollArea ref={scrollRef} className="bg-accent/50 text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
+        {children}
+        <div ref={endRef} />
+        <ScrollBar orientation="vertical" />
+      </ScrollArea>
+      <Button
+        variant="outline"
+        size="icon"
+        className="bg-accent! absolute right-4 bottom-4"
+        onClick={toggleAutoScroll}
+        title={autoScroll ? 'Disable auto-scroll' : 'Enable auto-scroll'}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>{autoScroll ? <ClockArrowDownIcon className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />}</div>
+          </TooltipTrigger>
+          <TooltipContent>{autoScroll ? 'Turn off auto scroll' : 'Auto scroll down'}</TooltipContent>
+        </Tooltip>
+      </Button>
+    </div>
+  );
+}

resources/js/layouts/app/layout.tsx

@@ -1,7 +1,7 @@
 import { AppSidebar } from '@/components/app-sidebar';
 import { AppHeader } from '@/components/app-header';
 import { type BreadcrumbItem, NavItem, SharedData } from '@/types';
-import { type PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren } from 'react';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { usePage } from '@inertiajs/react';
 import { Toaster } from '@/components/ui/sonner';
@@ -18,13 +18,13 @@ export default function Layout({
   secondNavTitle?: string;
 }>) {
   const page = usePage<SharedData>();
-  const [sidebarOpen, setSidebarOpen] = useState(
-    (localStorage.getItem('sidebar') === 'true' || false) && !!(secondNavItems && secondNavItems.length > 0),
-  );
-  const sidebarOpenChange = (open: boolean) => {
-    setSidebarOpen(open);
-    localStorage.setItem('sidebar', String(open));
-  };
+  // const [sidebarOpen, setSidebarOpen] = useState(
+  //   (localStorage.getItem('sidebar') === 'true' || false) && !!(secondNavItems && secondNavItems.length > 0),
+  // );
+  // const sidebarOpenChange = (open: boolean) => {
+  //   setSidebarOpen(open);
+  //   localStorage.setItem('sidebar', String(open));
+  // };
 
   if (page.props.flash && page.props.flash.success) toast.success(page.props.flash.success);
   if (page.props.flash && page.props.flash.error) toast.error(page.props.flash.error);
@@ -35,7 +35,7 @@ export default function Layout({
 
   return (
     <QueryClientProvider client={queryClient}>
-      <SidebarProvider open={sidebarOpen} onOpenChange={sidebarOpenChange}>
+      <SidebarProvider defaultOpen={!!(secondNavItems && secondNavItems.length > 0)}>
         <AppSidebar secondNavItems={secondNavItems} secondNavTitle={secondNavTitle} />
         <SidebarInset>
           <AppHeader />

resources/js/layouts/server/layout.tsx

@@ -6,6 +6,7 @@ import {
   DatabaseIcon,
   FlameIcon,
   HomeIcon,
+  ListEndIcon,
   MousePointerClickIcon,
   RocketIcon,
   UsersIcon,
@@ -96,11 +97,12 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
       icon: ClockIcon,
       isDisabled: isMenuDisabled,
     },
-    // {
-    //   title: 'Workers',
-    //   href: '#',
-    //   icon: ListEndIcon,
-    // },
+    {
+      title: 'Workers',
+      href: route('workers', { server: page.props.server.id }),
+      icon: ListEndIcon,
+      isDisabled: isMenuDisabled,
+    },
     // {
     //   title: 'SSH Keys',
     //   href: '#',

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

@@ -19,7 +19,7 @@ import { CronJob } from '@/types/cronjob';
 import { Badge } from '@/components/ui/badge';
 import DateTime from '@/components/date-time';
 import CronJobForm from '@/pages/cronjobs/components/form';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import CommandCell from '@/components/command-cell';
 
 function Delete({ cronJob }: { cronJob: CronJob }) {
   const [open, setOpen] = useState(false);
@@ -60,33 +60,6 @@ function Delete({ cronJob }: { cronJob: CronJob }) {
   );
 }
 
-function CommandCell({ row }: { row: { original: CronJob } }) {
-  const [copySuccess, setCopySuccess] = useState(false);
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(row.original.command).then(() => {
-      setCopySuccess(true);
-      setTimeout(() => {
-        setCopySuccess(false);
-      }, 2000);
-    });
-  };
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div className="inline-flex cursor-pointer justify-start space-x-2 truncate" onClick={copyToClipboard}>
-          <Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[150px] overflow-ellipsis">
-            {row.original.command}
-          </Badge>
-        </div>
-      </TooltipTrigger>
-      <TooltipContent side="top">
-        <span className="flex items-center space-x-2">Copy</span>
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
 export const columns: ColumnDef<CronJob>[] = [
   {
     accessorKey: 'command',
@@ -94,7 +67,7 @@ export const columns: ColumnDef<CronJob>[] = [
     enableColumnFilter: true,
     enableSorting: true,
     cell: ({ row }) => {
-      return <CommandCell row={row} />;
+      return <CommandCell command={row.original.command} />;
     },
   },
   {

resources/js/pages/cronjobs/index.tsx

@@ -29,7 +29,7 @@ export default function CronJobIndex() {
             <CronJobForm serverId={page.props.server.id}>
               <Button>
                 <PlusIcon />
-                <span className="hidden lg:block">Create rule</span>
+                <span className="hidden lg:block">Create</span>
               </Button>
             </CronJobForm>
           </div>

resources/js/pages/firewall/index.tsx

@@ -29,7 +29,7 @@ export default function Firewall() {
             <RuleForm serverId={page.props.server.id}>
               <Button>
                 <PlusIcon />
-                <span className="hidden lg:block">Create rule</span>
+                <span className="hidden lg:block">Create</span>
               </Button>
             </RuleForm>
           </div>

resources/js/pages/server-logs/components/columns.tsx

@@ -1,42 +1,33 @@
 import { ColumnDef, Row } from '@tanstack/react-table';
 import { Button } from '@/components/ui/button';
-import { EyeIcon, LoaderCircleIcon } from 'lucide-react';
+import { EyeIcon } from 'lucide-react';
 import type { ServerLog } from '@/types/server-log';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { useState } from 'react';
 import axios from 'axios';
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import DateTime from '@/components/date-time';
+import LogOutput from '@/components/log-output';
+import { useQuery } from '@tanstack/react-query';
 
 const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
   const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [content, setContent] = useState('');
 
-  const showLog = async () => {
-    setLoading(true);
-    try {
+  const query = useQuery({
+    queryKey: ['server-log', row.original.id],
+    queryFn: async () => {
       const response = await axios.get(route('logs.show', { server: row.original.server_id, log: row.original.id }));
-      setContent(response.data);
-    } catch (error: unknown) {
-      console.error(error);
-      if (error instanceof Error) {
-        setContent(error.message);
-      } else {
-        setContent('An unknown error occurred.');
-      }
-    } finally {
-      setLoading(false);
-      setOpen(true);
-    }
-  };
+      return response.data;
+    },
+    enabled: open,
+    refetchInterval: 2500,
+  });
 
   return (
     <div className="flex items-center justify-end">
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>
-          <Button variant="outline" size="sm" onClick={showLog} disabled={loading}>
-            {loading ? <LoaderCircleIcon className="animate-spin" /> : <EyeIcon />}
+          <Button variant="outline" size="sm">
+            <EyeIcon />
           </Button>
         </DialogTrigger>
         <DialogContent className="sm:max-w-5xl">
@@ -44,10 +35,7 @@ const LogActionCell = ({ row }: { row: Row<ServerLog> }) => {
             <DialogTitle>View Log</DialogTitle>
             <DialogDescription className="sr-only">This is all content of the log</DialogDescription>
           </DialogHeader>
-          <ScrollArea className="bg-accent/50 text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
-            {content}
-            <ScrollBar orientation="vertical" />
-          </ScrollArea>
+          <LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
           <DialogFooter>
             <Button variant="outline">Download</Button>
           </DialogFooter>

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

@@ -1,5 +1,5 @@
 import { Server } from '@/types/server';
-import { CloudIcon, LoaderCircleIcon, MapPinIcon, MousePointerClickIcon, SlashIcon } from 'lucide-react';
+import { ClipboardCheckIcon, CloudIcon, LoaderCircleIcon, MapPinIcon, MousePointerClickIcon, SlashIcon } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import ServerActions from '@/pages/servers/components/actions';
 import { cn } from '@/lib/utils';
@@ -7,6 +7,7 @@ import { Site } from '@/types/site';
 import { StatusRipple } from '@/components/status-ripple';
 import { Badge } from '@/components/ui/badge';
 import { useForm } from '@inertiajs/react';
+import { useState } from 'react';
 
 export default function ServerHeader({ server, site }: { server: Server; site?: Site }) {
   const statusForm = useForm();
@@ -19,6 +20,16 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
     statusForm.patch(route('servers.status', { server: server.id }));
   };
 
+  const [ipCopied, setIpCopied] = useState(false);
+  const copyIp = (ip: string) => {
+    navigator.clipboard.writeText(ip).then(() => {
+      setIpCopied(true);
+      setTimeout(() => {
+        setIpCopied(false);
+      }, 2000);
+    });
+  };
+
   return (
     <div className="flex items-center justify-between border-b px-4 py-2">
       <div className="space-y-2">
@@ -64,8 +75,10 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
           <Tooltip>
             <TooltipTrigger asChild>
               <div className="flex items-center space-x-1">
-                <MapPinIcon className="size-4" />
-                <div className="hidden lg:inline-flex">{server.ip}</div>
+                {ipCopied ? <ClipboardCheckIcon className="text-success size-4" /> : <MapPinIcon className="size-4" />}
+                <div className="hidden cursor-pointer lg:inline-flex" onClick={() => copyIp(server.ip)}>
+                  {server.ip}
+                </div>
               </div>
             </TooltipTrigger>
             <TooltipContent side="bottom">

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

@@ -0,0 +1,225 @@
+import { ColumnDef } from '@tanstack/react-table';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import React, { useState } from 'react';
+import { Worker } from '@/types/worker';
+import { Badge } from '@/components/ui/badge';
+import DateTime from '@/components/date-time';
+import WorkerForm from '@/pages/workers/components/form';
+import CommandCell from '@/components/command-cell';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import LogOutput from '@/components/log-output';
+
+function Delete({ worker }: { worker: Worker }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('workers.destroy', { server: worker.server_id, worker: worker }), {
+      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 worker</DialogTitle>
+          <DialogDescription className="sr-only">Delete worker</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to delete this worker? 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>
+  );
+}
+
+function Action({ type, worker }: { type: 'start' | 'stop' | 'restart'; worker: Worker }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.post(route(`workers.${type}`, { server: worker.server_id, worker: worker }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>{type}</DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{type} worker</DialogTitle>
+          <DialogDescription className="sr-only">{type} worker</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to {type} the worker?</p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            {type}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Logs({ worker }: { worker: Worker }) {
+  const [open, setOpen] = useState(false);
+
+  const query = useQuery({
+    queryKey: ['workerLog', worker.id],
+    queryFn: async () => {
+      const response = await axios.get(route('workers.logs', { server: worker.server_id, worker: worker.id }));
+      return response.data.logs;
+    },
+    refetchInterval: 2500,
+    enabled: open,
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Logs</DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>Worker logs</DialogTitle>
+          <DialogDescription className="sr-only">View worker logs</DialogDescription>
+        </DialogHeader>
+        <LogOutput>{query.isLoading ? 'Loading...' : query.data}</LogOutput>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const columns: ColumnDef<Worker>[] = [
+  {
+    accessorKey: 'command',
+    header: 'Command',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <CommandCell command={row.original.command} />;
+    },
+  },
+  {
+    accessorKey: 'user',
+    header: 'User',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'auto_start',
+    header: 'Auto start',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.auto_start ? 'success' : 'outline'}>{row.original.auto_start ? 'Yes' : 'No'}</Badge>;
+    },
+  },
+  {
+    accessorKey: 'auto_restart',
+    header: 'Auto restart',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.auto_restart ? 'success' : 'outline'}>{row.original.auto_restart ? 'Yes' : 'No'}</Badge>;
+    },
+  },
+  {
+    accessorKey: 'numprocs',
+    header: 'Numprocs',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <Badge variant={row.original.status_color}>{row.original.status}</Badge>;
+    },
+  },
+  {
+    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">
+              <WorkerForm serverId={row.original.server_id} worker={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+              </WorkerForm>
+              <Action type="start" worker={row.original} />
+              <Action type="stop" worker={row.original} />
+              <Action type="restart" worker={row.original} />
+              <Logs worker={row.original} />
+              <DropdownMenuSeparator />
+              <Delete worker={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/workers/components/form.tsx

@@ -0,0 +1,142 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import React, { FormEvent, ReactNode, useState } from 'react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { useForm, usePage } from '@inertiajs/react';
+import { LoaderCircleIcon } 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, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Worker } from '@/types/worker';
+import { SharedData } from '@/types';
+import { Server } from '@/types/server';
+import { Switch } from '@/components/ui/switch';
+
+export default function WorkerForm({ serverId, worker, children }: { serverId: number; worker?: Worker; children: ReactNode }) {
+  const page = usePage<SharedData & { server: Server }>();
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    command: string;
+    user: string;
+    auto_start: boolean;
+    auto_restart: boolean;
+    numprocs: string;
+  }>({
+    command: worker?.command || '',
+    user: worker?.user || '',
+    auto_start: worker?.auto_start || true,
+    auto_restart: worker?.auto_restart || true,
+    numprocs: worker?.numprocs.toString() || '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (worker) {
+      form.put(route('workers.update', { server: serverId, worker: worker.id }), {
+        onSuccess: () => {
+          setOpen(false);
+          form.reset();
+        },
+      });
+      return;
+    }
+
+    form.post(route('workers.store', { server: serverId }), {
+      onSuccess: () => {
+        setOpen(false);
+        form.reset();
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{worker ? 'Edit' : 'Create'} worker</DialogTitle>
+          <DialogDescription className="sr-only">{worker ? 'Edit' : 'Create new'} worker</DialogDescription>
+        </DialogHeader>
+        <Form id="worker-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            {/*command*/}
+            <FormField>
+              <Label htmlFor="command">Command</Label>
+              <Input type="text" id="command" value={form.data.command} onChange={(e) => form.setData('command', e.target.value)} />
+              <InputError message={form.errors.command} />
+            </FormField>
+
+            {/*user*/}
+            <FormField>
+              <Label htmlFor="user">User</Label>
+              <Select value={form.data.user} onValueChange={(value) => form.setData('user', value)}>
+                <SelectTrigger id="user">
+                  <SelectValue placeholder="Select a user" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {page.props.server.ssh_users.map((user) => (
+                      <SelectItem key={`user-${user}`} value={user}>
+                        {user}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.user} />
+            </FormField>
+
+            {/*numprocs*/}
+            <FormField>
+              <Label htmlFor="custom_frequency">Numprocs</Label>
+              <Input
+                id="numprocs"
+                name="numprocs"
+                value={form.data.numprocs}
+                onChange={(e) => form.setData('numprocs', e.target.value)}
+                placeholder="1"
+              />
+              <InputError message={form.errors.numprocs} />
+            </FormField>
+          </FormFields>
+
+          {/*auto start*/}
+          <FormField>
+            <div className="flex items-center space-x-2">
+              <Switch id="auto_start" checked={form.data.auto_start} onCheckedChange={(value) => form.setData('auto_start', value)} />
+              <Label htmlFor="auto_start">Auto start</Label>
+              <InputError message={form.errors.auto_start} />
+            </div>
+          </FormField>
+
+          {/*auto restart*/}
+          <FormField>
+            <div className="flex items-center space-x-2">
+              <Switch id="auto_restart" checked={form.data.auto_restart} onCheckedChange={(value) => form.setData('auto_restart', value)} />
+              <Label htmlFor="auto_restart">Auto restart</Label>
+              <InputError message={form.errors.auto_restart} />
+            </div>
+          </FormField>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button form="worker-form" type="submit" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/workers/index.tsx

@@ -0,0 +1,42 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import { PaginatedData } from '@/types';
+import ServerLayout from '@/layouts/server/layout';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { PlusIcon } from 'lucide-react';
+import Container from '@/components/container';
+import { DataTable } from '@/components/data-table';
+import { Worker } from '@/types/worker';
+import { columns } from '@/pages/workers/components/columns';
+import WorkerForm from '@/pages/workers/components/form';
+
+export default function WorkerIndex() {
+  const page = usePage<{
+    server: Server;
+    workers: PaginatedData<Worker>;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Workers - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Workers" description="Here you can manage server's workers" />
+          <div className="flex items-center gap-2">
+            <WorkerForm serverId={page.props.server.id}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create</span>
+              </Button>
+            </WorkerForm>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.workers} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/types/worker.d.ts

@@ -0,0 +1,13 @@
+export interface Worker {
+  id: number;
+  server_id: number;
+  command: string;
+  user: string;
+  auto_start: boolean;
+  auto_restart: boolean;
+  numprocs: number;
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+}