Plugins base (#613)

* wip * wip * cleanup * notification channels * phpstan * services * remove server types * refactoring * refactoring
2025-07-05 16:02:34 +00:00 · 2025-06-14 14:35:18 +02:00
parent adc0653d15
commit 131b828807
311 changed files with 3976 additions and 2660 deletions
--- a/resources/js/pages/notification-channels/components/connect-notification-channel.tsx
+++ b/resources/js/pages/notification-channels/components/connect-notification-channel.tsx
@ -19,6 +19,8 @@ import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { SharedData } from '@/types';
 import { Checkbox } from '@/components/ui/checkbox';
+import { DynamicFieldConfig } from '@/types/dynamic-field-config';
+import DynamicField from '@/components/ui/dynamic-field';

 type NotificationChannelForm = {
  provider: string;
@ -27,12 +29,10 @@ type NotificationChannelForm = {
 };

 export default function ConnectNotificationChannel({
-  providers,
  defaultProvider,
  onProviderAdded,
  children,
 }: {
-  providers: string[];
  defaultProvider?: string;
  onProviderAdded?: () => void;
  children: ReactNode;
@ -62,7 +62,7 @@ export default function ConnectNotificationChannel({
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Connect to notification channel</DialogTitle>
          <DialogDescription className="sr-only">Connect to a new notification channel</DialogDescription>
@ -83,9 +83,9 @@ export default function ConnectNotificationChannel({
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
-                    {providers.map((provider) => (
-                      <SelectItem key={provider} value={provider}>
-                        {provider}
+                    {Object.entries(page.props.configs.notification_channel.providers).map(([key, provider]) => (
+                      <SelectItem key={key} value={key}>
+                        {provider.label}
                      </SelectItem>
                    ))}
                  </SelectGroup>
@ -105,29 +105,18 @@ export default function ConnectNotificationChannel({
              />
              <InputError message={form.errors.name} />
            </FormField>
-            <div
-              className={
-                page.props.configs.notification_channels_providers_custom_fields[form.data.provider].length > 1
-                  ? 'grid grid-cols-2 items-start gap-6'
-                  : ''
-              }
-            >
-              {page.props.configs.notification_channels_providers_custom_fields[form.data.provider]?.map((item: string) => (
-                <FormField key={item}>
-                  <Label htmlFor={item} className="capitalize">
-                    {item.replaceAll('_', ' ')}
-                  </Label>
-                  <Input
-                    type="text"
-                    name={item}
-                    id={item}
-                    value={(form.data[item as keyof NotificationChannelForm] as string) ?? ''}
-                    onChange={(e) => form.setData(item as keyof NotificationChannelForm, e.target.value)}
-                  />
-                  <InputError message={form.errors[item as keyof NotificationChannelForm]} />
-                </FormField>
-              ))}
-            </div>
+            {page.props.configs.notification_channel.providers[form.data.provider]?.form?.map((field: DynamicFieldConfig) => (
+              <DynamicField
+                key={`field-${field.name}`}
+                /*@ts-expect-error dynamic types*/
+                value={form.data[field.name]}
+                /*@ts-expect-error dynamic types*/
+                onChange={(value) => form.setData(field.name, value)}
+                config={field}
+                /*@ts-expect-error dynamic types*/
+                error={form.errors[field.name]}
+              />
+            ))}
            <FormField>
              <div className="flex items-center space-x-3">
                <Checkbox id="global" name="global" checked={form.data.global} onClick={() => form.setData('global', !form.data.global)} />
--- a/resources/js/pages/notification-channels/index.tsx
+++ b/resources/js/pages/notification-channels/index.tsx
@ -24,7 +24,7 @@ export default function NotificationChannels() {
        <div className="flex items-start justify-between">
          <Heading title="Notification Channels" description="Here you can manage all of the notification channel connectinos" />
          <div className="flex items-center gap-2">
-            <ConnectNotificationChannel providers={page.props.configs.notification_channels_providers}>
+            <ConnectNotificationChannel>
              <Button>Connect</Button>
            </ConnectNotificationChannel>
          </div>
--- a/resources/js/pages/php/components/extensions.tsx
+++ b/resources/js/pages/php/components/extensions.tsx
@ -30,6 +30,7 @@ export default function Extensions({ service }: { service: Service }) {
    extension: '',
    version: service.version,
  });
+  const [, php] = Object.entries(page.props.configs.service.services).filter(([key]) => key === 'php')[0] || null;

  const submit = (e: FormEvent) => {
    e.preventDefault();
@ -40,6 +41,10 @@ export default function Extensions({ service }: { service: Service }) {
    });
  };

+  if (!php) {
+    return null;
+  }
+
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
@ -60,7 +65,7 @@ export default function Extensions({ service }: { service: Service }) {
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
-                    {page.props.configs.php_extensions.map((extension: string) => (
+                    {php.data?.extensions?.map((extension: string) => (
                      <SelectItem key={`extension-${extension}`} value={extension} disabled={service.type_data.extensions?.includes(extension)}>
                        {extension} {service.type_data.extensions?.includes(extension) && <span>(installed)</span>}
                      </SelectItem>
--- a/resources/js/pages/server-providers/components/connect-server-provider.tsx
+++ b/resources/js/pages/server-providers/components/connect-server-provider.tsx
@ -19,6 +19,8 @@ import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { SharedData } from '@/types';
 import { Checkbox } from '@/components/ui/checkbox';
+import { DynamicFieldConfig } from '@/types/dynamic-field-config';
+import DynamicField from '@/components/ui/dynamic-field';

 type ServerProviderForm = {
  provider: string;
@ -81,11 +83,11 @@ export default function ConnectServerProvider({
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
-                    {page.props.configs.server_providers.map(
-                      (provider) =>
-                        provider !== 'custom' && (
-                          <SelectItem key={provider} value={provider}>
-                            {provider}
+                    {Object.entries(page.props.configs.server_provider.providers).map(
+                      ([key, provider]) =>
+                        key !== 'custom' && (
+                          <SelectItem key={key} value={key}>
+                            {provider.label}
                          </SelectItem>
                        ),
                    )}
@ -106,25 +108,18 @@ export default function ConnectServerProvider({
              />
              <InputError message={form.errors.name} />
            </FormField>
-            <div
-              className={page.props.configs.server_providers_custom_fields[form.data.provider].length > 1 ? 'grid grid-cols-2 items-start gap-6' : ''}
-            >
-              {page.props.configs.server_providers_custom_fields[form.data.provider]?.map((item: string) => (
-                <FormField key={item}>
-                  <Label htmlFor={item} className="capitalize">
-                    {item.replaceAll('_', ' ')}
-                  </Label>
-                  <Input
-                    type="text"
-                    name={item}
-                    id={item}
-                    value={(form.data[item as keyof ServerProviderForm] as string) ?? ''}
-                    onChange={(e) => form.setData(item as keyof ServerProviderForm, e.target.value)}
-                  />
-                  <InputError message={form.errors[item as keyof ServerProviderForm]} />
-                </FormField>
-              ))}
-            </div>
+            {page.props.configs.server_provider.providers[form.data.provider]?.form?.map((field: DynamicFieldConfig) => (
+              <DynamicField
+                key={`field-${field.name}`}
+                /*@ts-expect-error dynamic types*/
+                value={form.data[field.name]}
+                /*@ts-expect-error dynamic types*/
+                onChange={(value) => form.setData(field.name, value)}
+                config={field}
+                /*@ts-expect-error dynamic types*/
+                error={form.errors[field.name]}
+              />
+            ))}
            <FormField>
              <div className="flex items-center space-x-3">
                <Checkbox id="global" name="global" checked={form.data.global} onClick={() => form.setData('global', !form.data.global)} />
--- a/resources/js/pages/servers/components/create-server.tsx
+++ b/resources/js/pages/servers/components/create-server.tsx
@ -23,9 +23,6 @@ type CreateServerForm = {
  port: number;
  region: string;
  plan: string;
-  webserver: string;
-  database: string;
-  php: string;
 };

 export default function CreateServer({ children }: { children: React.ReactNode }) {
@ -40,9 +37,6 @@ export default function CreateServer({ children }: { children: React.ReactNode }
    port: 22,
    region: '',
    plan: '',
-    webserver: 'nginx',
-    database: 'none',
-    php: 'none',
  });

  const submit: FormEventHandler = (e) => {
@ -52,7 +46,7 @@ export default function CreateServer({ children }: { children: React.ReactNode }

  const [copySuccess, setCopySuccess] = useState(false);
  const copyToClipboard = () => {
-    navigator.clipboard.writeText(page.props.publicKeyText).then(() => {
+    navigator.clipboard.writeText(page.props.public_key_text).then(() => {
      setCopySuccess(true);
      setTimeout(() => {
        setCopySuccess(false);
@ -119,9 +113,9 @@ export default function CreateServer({ children }: { children: React.ReactNode }
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
-                    {page.props.configs.server_providers.map((provider) => (
-                      <SelectItem key={provider} value={provider}>
-                        {provider}
+                    {Object.entries(page.props.configs.server_provider.providers).map(([key, provider]) => (
+                      <SelectItem key={key} value={key}>
+                        {provider.label}
                      </SelectItem>
                    ))}
                  </SelectGroup>
@ -218,10 +212,10 @@ export default function CreateServer({ children }: { children: React.ReactNode }
                    variant="outline"
                    id="public_key"
                    type="button"
-                    value={page.props.publicKeyText}
+                    value={page.props.public_key_text}
                    className="justify-between truncate font-normal"
                  >
-                    <span className="w-full max-w-2/3 overflow-x-hidden overflow-ellipsis">{page.props.publicKeyText}</span>
+                    <span className="w-full max-w-2/3 overflow-x-hidden overflow-ellipsis">{page.props.public_key_text}</span>
                    {copySuccess ? <ClipboardCheckIcon size={5} className="text-success!" /> : <ClipboardIcon size={5} />}
                  </Button>
                </FormField>
@ -275,63 +269,6 @@ export default function CreateServer({ children }: { children: React.ReactNode }
                </FormField>
              </div>
            )}
-
-            <div className="grid grid-cols-3 items-start gap-6">
-              <FormField>
-                <Label htmlFor="webserver">Webserver</Label>
-                <Select value={form.data.webserver} onValueChange={(value) => form.setData('webserver', value)}>
-                  <SelectTrigger id="webserver">
-                    <SelectValue placeholder="Select webserver" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {page.props.configs.webservers.map((value) => (
-                        <SelectItem key={`webserver-${value}`} value={value}>
-                          {value}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <InputError message={form.errors.webserver} />
-              </FormField>
-              <FormField>
-                <Label htmlFor="database">Database</Label>
-                <Select value={form.data.database} onValueChange={(value) => form.setData('database', value)}>
-                  <SelectTrigger id="database">
-                    <SelectValue placeholder="Select database" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {page.props.configs.databases.map((value) => (
-                        <SelectItem key={`database-${value}`} value={value}>
-                          {value}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <InputError message={form.errors.database} />
-              </FormField>
-              <FormField>
-                <Label htmlFor="php">PHP</Label>
-                <Select value={form.data.php} onValueChange={(value) => form.setData('php', value)}>
-                  <SelectTrigger id="php">
-                    <SelectValue placeholder="Select PHP version" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {page.props.configs.php_versions.map((value) => (
-                        <SelectItem key={`php-${value}`} value={value}>
-                          {value}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <InputError message={form.errors.php} />
-              </FormField>
-            </div>
          </FormFields>
        </Form>
        <SheetFooter>
--- a/resources/js/pages/services/components/action.tsx
+++ b/resources/js/pages/services/components/action.tsx
@ -15,6 +15,7 @@ import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { LoaderCircleIcon } from 'lucide-react';
 import FormSuccessful from '@/components/form-successful';
+import InputError from '@/components/ui/input-error';

 export function Action({ type, service }: { type: 'start' | 'stop' | 'restart' | 'enable' | 'disable'; service: Service }) {
  const [open, setOpen] = useState(false);
@ -41,7 +42,12 @@ export function Action({ type, service }: { type: 'start' | 'stop' | 'restart' |
          </DialogTitle>
          <DialogDescription className="sr-only">{type} service</DialogDescription>
        </DialogHeader>
-        <p className="p-4">Are you sure you want to {type} the service?</p>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to {type} the service?</p>
+          {Object.entries(form.errors).map(([key, value]) => (
+            <InputError key={key} message={value} />
+          ))}
+        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
--- a/resources/js/pages/services/components/install.tsx
+++ b/resources/js/pages/services/components/install.tsx
@ -73,9 +73,9 @@ export default function InstallService({ name, children }: { name?: string; chil
                  </SelectTrigger>
                  <SelectContent>
                    <SelectGroup>
-                      {Object.entries(page.props.configs.service_types).map(([key]) => (
+                      {Object.entries(page.props.configs.service.services).map(([key, service]) => (
                        <SelectItem key={`service-${key}`} value={key}>
-                          {key}
+                          {service.label}
                        </SelectItem>
                      ))}
                    </SelectGroup>
@ -95,7 +95,7 @@ export default function InstallService({ name, children }: { name?: string; chil
                <SelectContent>
                  <SelectGroup>
                    {form.data.name &&
-                      page.props.configs.service_versions[form.data.name].map((version) => (
+                      page.props.configs.service.services[form.data.name].versions.map((version) => (
                        <SelectItem key={`version-${form.data.name}-${version}`} value={version}>
                          {version}
                        </SelectItem>
--- a/resources/js/pages/site-features/components/feature-action.tsx
+++ b/resources/js/pages/site-features/components/feature-action.tsx
@ -0,0 +1,94 @@
+import { Site, SiteFeatureAction } from '@/types/site';
+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 { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { DynamicFieldConfig } from '@/types/dynamic-field-config';
+import DynamicField from '@/components/ui/dynamic-field';
+import { LoaderCircleIcon } from 'lucide-react';
+
+export default function FeatureAction({
+  site,
+  featureId,
+  actionId,
+  action,
+  children,
+}: {
+  site: Site;
+  featureId: string;
+  actionId: string;
+  action: SiteFeatureAction;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(
+      route('site-features.action', {
+        server: site.server_id,
+        site: site.id,
+        feature: featureId,
+        action: actionId,
+      }),
+      {
+        onSuccess: () => {
+          setOpen(false);
+          form.reset();
+        },
+      },
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{action.label}</DialogTitle>
+          <DialogDescription className="sr-only">action {action.label}</DialogDescription>
+        </DialogHeader>
+        <Form id="action-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <p className="text-muted-foreground">
+                You're performing action <b className="text-foreground">[{action.label}]</b> on site{' '}
+                <b className="text-foreground">[{site.domain}]</b>
+              </p>
+            </FormField>
+            {action.form?.map((field: DynamicFieldConfig) => (
+              <DynamicField
+                key={`field-${field.name}`}
+                /*@ts-expect-error dynamic types*/
+                value={form.data[field.name]}
+                onChange={(value) => form.setData(field.name, value)}
+                config={field}
+                error={form.errors[field.name]}
+              />
+            ))}
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button form="action-form" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            {action.label}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/resources/js/pages/site-features/index.tsx
+++ b/resources/js/pages/site-features/index.tsx
@ -0,0 +1,83 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import ServerLayout from '@/layouts/server/layout';
+import { BookOpenIcon, MoreVerticalIcon } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import React from 'react';
+import { Site, SiteFeature } from '@/types/site';
+import { Separator } from '@/components/ui/separator';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import FeatureAction from '@/pages/site-features/components/feature-action';
+
+export default function SiteFeatures() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    features: {
+      [key: string]: SiteFeature;
+    };
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Features - ${page.props.site.domain}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Features" description="Your site has some features enabled by Vito or other plugins" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/sites/features" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+          </div>
+        </HeaderContainer>
+
+        <Card>
+          <CardHeader className="flex-row items-center justify-between gap-2">
+            <div className="space-y-2">
+              <CardTitle>Site features</CardTitle>
+              <CardDescription>Here you can see the list of features and their actions</CardDescription>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {Object.entries(page.props.features).map(([key, feature], index) => (
+              <div key={`feature-${key}`}>
+                <div className="flex items-center justify-between p-4">
+                  <div className="space-y-1">
+                    <p>{feature.label}</p>
+                    <p className="text-muted-foreground text-sm">{feature.description}</p>
+                  </div>
+                  <DropdownMenu modal={false}>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="outline">
+                        Actions
+                        <MoreVerticalIcon />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {Object.entries(feature.actions || {}).map(([actionKey, action]) => (
+                        <FeatureAction key={`action-${actionKey}`} site={page.props.site} featureId={key} actionId={actionKey} action={action}>
+                          <DropdownMenuItem onSelect={(e) => e.preventDefault()} disabled={!action.active}>
+                            {action.label}
+                          </DropdownMenuItem>
+                        </FeatureAction>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+                {index < Object.keys(page.props.features).length - 1 && <Separator />}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </Container>
+    </ServerLayout>
+  );
+}
--- a/resources/js/pages/site-settings/components/vhost.tsx
+++ b/resources/js/pages/site-settings/components/vhost.tsx
@ -25,7 +25,7 @@ export default function VHost({ site, children }: { site: Site; children: ReactN

  const submit = (e: FormEvent) => {
    e.preventDefault();
-    form.patch(route('site-settings.update-vhost', { server: site.server_id, site: site.id }), {
+    form.put(route('site-settings.update-vhost', { server: site.server_id, site: site.id }), {
      onSuccess: () => {
        setOpen(false);
      },
--- a/resources/js/pages/sites/components/create-site.tsx
+++ b/resources/js/pages/sites/components/create-site.tsx
@ -25,7 +25,6 @@ type CreateSiteForm = {
  php_version: string;
  source_control: string;
  user: string;
-  port: string;
 };

 export default function CreateSite({ server, children }: { server?: Server; children: ReactNode }) {
@ -40,7 +39,6 @@ export default function CreateSite({ server, children }: { server?: Server; chil
    php_version: '',
    source_control: '',
    user: '',
-    port: '',
  });

  const submit: FormEventHandler = (e) => {
@ -121,9 +119,9 @@ export default function CreateSite({ server, children }: { server?: Server; chil
                    </SelectTrigger>
                    <SelectContent>
                      <SelectGroup>
-                        {page.props.configs.site_types.map((type) => (
-                          <SelectItem key={`type-${type}`} value={type}>
-                            {type}
+                        {Object.entries(page.props.configs.site.types).map(([key, type]) => (
+                          <SelectItem key={`type-${key}`} value={key}>
+                            {type.label}
                          </SelectItem>
                        ))}
                      </SelectGroup>
@ -156,16 +154,7 @@ export default function CreateSite({ server, children }: { server?: Server; chil
                  <InputError message={form.errors.aliases} />
                </FormField>

-                <FormField>
-                  <Label htmlFor="port">Reverse proxy port</Label>
-                  <Input id="port" type="text" value={form.data.port} onChange={(e) => form.setData('port', e.target.value)} placeholder="3000" />
-                  <p className="text-muted-foreground text-xs">
-                    This port will be used for reverse proxying the site. It should be unique across all sites on the server.
-                  </p>
-                  <InputError message={form.errors.port} />
-                </FormField>
-
-                {page.props.configs.site_types_custom_fields[form.data.type].map((config) => getFormField(config))}
+                {page.props.configs.site.types[form.data.type].form?.map((config) => getFormField(config))}

                <FormField>
                  <Label htmlFor="user">Isolated User (Optional)</Label>
--- a/resources/js/pages/source-controls/components/columns.tsx
+++ b/resources/js/pages/source-controls/components/columns.tsx
@ -33,7 +33,11 @@ function Edit({ sourceControl }: { sourceControl: SourceControl }) {

  const submit = (e: FormEvent) => {
    e.preventDefault();
-    form.patch(route('source-controls.update', sourceControl.id));
+    form.patch(route('source-controls.update', sourceControl.id), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
  };
  return (
    <Dialog open={open} onOpenChange={setOpen}>
--- a/resources/js/pages/source-controls/components/connect-source-control.tsx
+++ b/resources/js/pages/source-controls/components/connect-source-control.tsx
@ -19,6 +19,8 @@ import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { SharedData } from '@/types';
 import { Checkbox } from '@/components/ui/checkbox';
+import { DynamicFieldConfig } from '@/types/dynamic-field-config';
+import DynamicField from '@/components/ui/dynamic-field';

 type SourceControlForm = {
  provider: string;
@ -81,9 +83,9 @@ export default function ConnectSourceControl({
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
-                    {page.props.configs.source_control_providers.map((provider) => (
-                      <SelectItem key={provider} value={provider}>
-                        {provider}
+                    {Object.entries(page.props.configs.source_control.providers).map(([key, provider]) => (
+                      <SelectItem key={key} value={key}>
+                        {provider.label}
                      </SelectItem>
                    ))}
                  </SelectGroup>
@ -103,20 +105,17 @@ export default function ConnectSourceControl({
              />
              <InputError message={form.errors.name} />
            </FormField>
-            {page.props.configs.source_control_providers_custom_fields[form.data.provider]?.map((item: string) => (
-              <FormField key={item}>
-                <Label htmlFor={item} className="capitalize">
-                  {item}
-                </Label>
-                <Input
-                  type="text"
-                  name={item}
-                  id={item}
-                  value={(form.data[item as keyof SourceControlForm] as string) ?? ''}
-                  onChange={(e) => form.setData(item as keyof SourceControlForm, e.target.value)}
-                />
-                <InputError message={form.errors[item as keyof SourceControlForm]} />
-              </FormField>
+            {page.props.configs.source_control.providers[form.data.provider]?.form?.map((field: DynamicFieldConfig) => (
+              <DynamicField
+                key={`field-${field.name}`}
+                /*@ts-expect-error dynamic types*/
+                value={form.data[field.name]}
+                /*@ts-expect-error dynamic types*/
+                onChange={(value) => form.setData(field.name, value)}
+                config={field}
+                /*@ts-expect-error dynamic types*/
+                error={form.errors[field.name]}
+              />
            ))}
            <FormField>
              <div className="flex items-center space-x-3">
--- a/resources/js/pages/storage-providers/components/connect-storage-provider.tsx
+++ b/resources/js/pages/storage-providers/components/connect-storage-provider.tsx
@ -19,6 +19,8 @@ import { Form, FormField, FormFields } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { SharedData } from '@/types';
 import { Checkbox } from '@/components/ui/checkbox';
+import { DynamicFieldConfig } from '@/types/dynamic-field-config';
+import DynamicField from '@/components/ui/dynamic-field';

 type StorageProviderForm = {
  provider: string;
@ -40,7 +42,7 @@ export default function ConnectStorageProvider({
  const page = usePage<SharedData>();

  const form = useForm<Required<StorageProviderForm>>({
-    provider: defaultProvider || 's3',
+    provider: defaultProvider || 'local',
    name: '',
    global: false,
  });
@ -60,7 +62,7 @@ export default function ConnectStorageProvider({
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>Connect to storage provider</DialogTitle>
          <DialogDescription className="sr-only">Connect to a new storage provider</DialogDescription>
@ -81,9 +83,9 @@ export default function ConnectStorageProvider({
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
-                    {page.props.configs.storage_providers.map((provider) => (
-                      <SelectItem key={provider} value={provider}>
-                        {provider}
+                    {Object.entries(page.props.configs.storage_provider.providers).map(([key, provider]) => (
+                      <SelectItem key={key} value={key}>
+                        {provider.label}
                      </SelectItem>
                    ))}
                  </SelectGroup>
@ -95,7 +97,7 @@ export default function ConnectStorageProvider({
              <Label htmlFor="name">Name</Label>
              <Input
                type="text"
-                name="name"
+                name="host"
                id="name"
                placeholder="Name"
                value={form.data.name}
@ -103,27 +105,18 @@ export default function ConnectStorageProvider({
              />
              <InputError message={form.errors.name} />
            </FormField>
-            <div
-              className={
-                page.props.configs.storage_providers_custom_fields[form.data.provider].length > 1 ? 'grid grid-cols-2 items-start gap-6' : ''
-              }
-            >
-              {page.props.configs.storage_providers_custom_fields[form.data.provider]?.map((item: string) => (
-                <FormField key={item}>
-                  <Label htmlFor={item} className="capitalize">
-                    {item.replaceAll('_', ' ')}
-                  </Label>
-                  <Input
-                    type="text"
-                    name={item}
-                    id={item}
-                    value={(form.data[item as keyof StorageProviderForm] as string) ?? ''}
-                    onChange={(e) => form.setData(item as keyof StorageProviderForm, e.target.value)}
-                  />
-                  <InputError message={form.errors[item as keyof StorageProviderForm]} />
-                </FormField>
-              ))}
-            </div>
+            {page.props.configs.storage_provider.providers[form.data.provider]?.form?.map((field: DynamicFieldConfig) => (
+              <DynamicField
+                key={`field-${field.name}`}
+                /*@ts-expect-error dynamic types*/
+                value={form.data[field.name]}
+                /*@ts-expect-error dynamic types*/
+                onChange={(value) => form.setData(field.name, value)}
+                config={field}
+                /*@ts-expect-error dynamic types*/
+                error={form.errors[field.name]}
+              />
+            ))}
            <FormField>
              <div className="flex items-center space-x-3">
                <Checkbox id="global" name="global" checked={form.data.global} onClick={() => form.setData('global', !form.data.global)} />
--- a/resources/js/pages/workers/components/columns.tsx
+++ b/resources/js/pages/workers/components/columns.tsx
@ -139,6 +139,12 @@ function Logs({ worker }: { worker: Worker }) {
 }

 export const columns: ColumnDef<Worker>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
  {
    accessorKey: 'command',
    header: 'Command',
@ -154,24 +160,6 @@ export const columns: ColumnDef<Worker>[] = [
    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',
--- a/resources/js/pages/workers/components/form.tsx
+++ b/resources/js/pages/workers/components/form.tsx
@ -27,12 +27,14 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
  const page = usePage<SharedData & { server: Server }>();
  const [open, setOpen] = useState(false);
  const form = useForm<{
+    name: string;
    command: string;
    user: string;
    auto_start: boolean;
    auto_restart: boolean;
    numprocs: string;
  }>({
+    name: worker?.name || '',
    command: worker?.command || '',
    user: worker?.user || '',
    auto_start: worker?.auto_start || true,
@ -69,6 +71,13 @@ export default function WorkerForm({ serverId, site, worker, children }: { serve
        </DialogHeader>
        <Form id="worker-form" onSubmit={submit} className="p-4">
          <FormFields>
+            {/*name*/}
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input type="text" id="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+              <InputError message={form.errors.name} />
+            </FormField>
+
            {/*command*/}
            <FormField>
              <Label htmlFor="command">Command</Label>