#591 - sites

app/Actions/FirewallRule/ManageRule.php

@@ -123,9 +123,19 @@ public static function rules(array $input): array
                 'min:1',
                 'max:65535',
             ],
+            'source' => [
+                'nullable',
+                'ip',
+            ],
+            'mask' => [
+                'nullable',
+                'numeric',
+                'min:1',
+                'max:32',
+            ],
         ];
 
-        if (! ($input['source_any'] ?? false)) {
+        if (isset($input['source_any']) && $input['source_any'] === false) {
             $rules['source'] = ['required', 'ip'];
             $rules['mask'] = ['required', 'numeric', 'min:1', 'max:32'];
         }

app/Actions/Redirect/CreateRedirect.php

@@ -7,6 +7,7 @@
 use App\Models\Service;
 use App\Models\Site;
 use App\SSH\Services\Webserver\Webserver;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 
 class CreateRedirect
@@ -16,6 +17,8 @@ class CreateRedirect
      */
     public function create(Site $site, array $input): Redirect
     {
+        Validator::make($input, self::rules($site))->validate();
+
         $redirect = new Redirect;
 
         $redirect->site_id = $site->id;

app/Actions/SSL/CreateSSL.php

@@ -9,6 +9,7 @@
 use App\Models\Site;
 use App\Models\Ssl;
 use App\SSH\Services\Webserver\Webserver;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 use Illuminate\Validation\ValidationException;
 
@@ -21,6 +22,8 @@ class CreateSSL
      */
     public function create(Site $site, array $input): void
     {
+        Validator::make($input, self::rules($input))->validate();
+
         $site->ssls()
             ->where('type', $input['type'])
             ->where('status', SslStatus::FAILED)

app/Actions/SSL/DeactivateSSL.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Actions\SSL;
+
+use App\Models\Ssl;
+
+class DeactivateSSL
+{
+    public function deactivate(Ssl $ssl): void
+    {
+        $ssl->is_active = false;
+        $ssl->save();
+        $ssl->site->webserver()->updateVHost($ssl->site);
+    }
+}

app/Actions/Site/CreateCommand.php

@@ -4,6 +4,7 @@
 
 use App\Models\Command;
 use App\Models\Site;
+use Illuminate\Support\Facades\Validator;
 
 class CreateCommand
 {
@@ -12,6 +13,8 @@ class CreateCommand
      */
     public function create(Site $site, array $input): Command
     {
+        Validator::make($input, self::rules())->validate();
+
         $script = new Command([
             'site_id' => $site->id,
             'name' => $input['name'],

app/Actions/Site/DeleteSite.php

@@ -7,14 +7,20 @@
 use App\Models\Site;
 use App\SSH\Services\PHP\PHP;
 use App\SSH\Services\Webserver\Webserver;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
 
 class DeleteSite
 {
     /**
+     * @param  array<string, mixed>  $input
+     *
      * @throws SSHError
      */
-    public function delete(Site $site): void
+    public function delete(Site $site, array $input): void
     {
+        $this->validate($site, $input);
+
         /** @var Service $service */
         $service = $site->server->webserver();
 
@@ -35,4 +41,14 @@ public function delete(Site $site): void
 
         $site->delete();
     }
+
+    private function validate(Site $site, array $input): void
+    {
+        Validator::make($input, [
+            'domain' => [
+                'required',
+                Rule::in($site->domain),
+            ],
+        ])->validate();
+    }
 }

app/Actions/Site/Deploy.php

@@ -4,7 +4,6 @@
 
 use App\Enums\DeploymentStatus;
 use App\Exceptions\DeploymentScriptIsEmptyException;
-use App\Exceptions\SSHError;
 use App\Facades\Notifier;
 use App\Models\Deployment;
 use App\Models\ServerLog;
@@ -15,7 +14,6 @@ class Deploy
 {
     /**
      * @throws DeploymentScriptIsEmptyException
-     * @throws SSHError
      */
     public function run(Site $site): Deployment
     {
@@ -32,6 +30,11 @@ public function run(Site $site): Deployment
             'deployment_script_id' => $site->deploymentScript->id,
             'status' => DeploymentStatus::DEPLOYING,
         ]);
+        $log = ServerLog::newLog($site->server, 'deploy-'.strtotime('now'))
+            ->forSite($site);
+        $log->save();
+        $deployment->log_id = $log->id;
+        $deployment->save();
         $lastCommit = $site->sourceControl?->provider()?->getLastCommit($site->repository, $site->branch);
         if ($lastCommit) {
             $deployment->commit_id = $lastCommit['commit_id'];
@@ -39,12 +42,7 @@ public function run(Site $site): Deployment
         }
         $deployment->save();
 
-        dispatch(function () use ($site, $deployment): void {
+        dispatch(function () use ($site, $deployment, $log): void {
-            $log = ServerLog::newLog($site->server, 'deploy-'.strtotime('now'))
-                ->forSite($site);
-            $log->save();
-            $deployment->log_id = $log->id;
-            $deployment->save();
             $site->server->os()->runScript(
                 path: $site->path,
                 script: $site->deploymentScript->content,

app/Actions/Site/EditCommand.php

@@ -3,6 +3,7 @@
 namespace App\Actions\Site;
 
 use App\Models\Command;
+use Illuminate\Support\Facades\Validator;
 
 class EditCommand
 {
@@ -11,6 +12,8 @@ class EditCommand
      */
     public function edit(Command $command, array $input): Command
     {
+        Validator::make($input, self::rules())->validate();
+
         $command->name = $input['name'];
         $command->command = $input['command'];
         $command->save();

app/Actions/Site/ExecuteCommand.php

@@ -7,6 +7,7 @@
 use App\Models\CommandExecution;
 use App\Models\ServerLog;
 use App\Models\User;
+use Illuminate\Support\Facades\Validator;
 
 class ExecuteCommand
 {
@@ -15,19 +16,31 @@ class ExecuteCommand
      */
     public function execute(Command $command, User $user, array $input): CommandExecution
     {
+        Validator::make($input, self::rules($command))->validate();
+
+        $variables = [];
+        foreach ($command->getVariables() as $variable) {
+            if (array_key_exists($variable, $input)) {
+                $variables[$variable] = $input[$variable] ?? '';
+            }
+        }
+
         $execution = new CommandExecution([
             'command_id' => $command->id,
             'server_id' => $command->site->server_id,
             'user_id' => $user->id,
-            'variables' => $input['variables'] ?? [],
+            'variables' => $variables,
             'status' => CommandExecutionStatus::EXECUTING,
         ]);
         $execution->save();
 
-        dispatch(function () use ($execution, $command): void {
+        $log = ServerLog::newLog($execution->server, 'command-'.$command->id.'-'.strtotime('now'));
+        $log->save();
+        $execution->server_log_id = $log->id;
+        $execution->save();
+
+        dispatch(function () use ($execution, $command, $log): void {
             $content = $execution->getContent();
-            $log = ServerLog::newLog($execution->server, 'command-'.$command->id.'-'.strtotime('now'));
-            $log->save();
             $execution->server_log_id = $log->id;
             $execution->save();
             $execution->server->os()->runScript(
@@ -48,18 +61,19 @@ public function execute(Command $command, User $user, array $input): CommandExec
     }
 
     /**
-     * @param  array<string, mixed>  $input
      * @return array<string, string|array<int, mixed>>
      */
-    public static function rules(array $input): array
+    public static function rules(Command $command): array
     {
-        return [
+        $rules = [];
-            'variables' => 'array',
+        foreach ($command->getVariables() as $variable) {
-            'variables.*' => [
+            $rules[$variable] = [
                 'required',
                 'string',
                 'max:255',
-            ],
+            ];
-        ];
+        }
+
+        return $rules;
     }
 }

app/Actions/Site/UpdateBranch.php

@@ -5,6 +5,7 @@
 use App\Exceptions\SSHError;
 use App\Models\Site;
 use App\SSH\Git\Git;
+use Illuminate\Support\Facades\Validator;
 
 class UpdateBranch
 {
@@ -15,6 +16,8 @@ class UpdateBranch
      */
     public function update(Site $site, array $input): void
     {
+        Validator::make($input, self::rules())->validate();
+
         $site->branch = $input['branch'];
         app(Git::class)->fetchOrigin($site);
         app(Git::class)->checkout($site);

app/Actions/Site/UpdateDeploymentScript.php

@@ -4,6 +4,7 @@
 
 use App\Models\DeploymentScript;
 use App\Models\Site;
+use Illuminate\Support\Facades\Validator;
 
 class UpdateDeploymentScript
 {
@@ -12,6 +13,8 @@ class UpdateDeploymentScript
      */
     public function update(Site $site, array $input): void
     {
+        Validator::make($input, self::rules())->validate();
+
         /** @var DeploymentScript $script */
         $script = $site->deploymentScript;
         $script->content = $input['script'];

app/Actions/Site/UpdateEnv.php

@@ -4,6 +4,7 @@
 
 use App\Exceptions\SSHError;
 use App\Models\Site;
+use Illuminate\Support\Facades\Validator;
 
 class UpdateEnv
 {
@@ -14,10 +15,14 @@ class UpdateEnv
      */
     public function update(Site $site, array $input): void
     {
-        $site->server->os()->editFileAs(
+        Validator::make($input, [
+            'env' => ['required', 'string'],
+        ])->validate();
+
+        $site->server->os()->write(
             $site->path.'/.env',
-            $site->user,
             trim((string) $input['env']),
+            $site->user,
         );
     }
 }

app/Actions/Site/UpdateLoadBalancer.php

@@ -5,6 +5,7 @@
 use App\Enums\LoadBalancerMethod;
 use App\Models\LoadBalancerServer;
 use App\Models\Site;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 
 class UpdateLoadBalancer
@@ -14,6 +15,8 @@ class UpdateLoadBalancer
      */
     public function update(Site $site, array $input): void
     {
+        Validator::make($input, self::rules($site))->validate();
+
         $site->loadBalancerServers()->delete();
 
         foreach ($input['servers'] as $server) {

app/Actions/Site/UpdatePHPVersion.php

@@ -4,10 +4,23 @@
 
 use App\Exceptions\SSHError;
 use App\Models\Site;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 
 class UpdatePHPVersion
 {
+    /**
+     * @param  array<string, mixed>  $input
+     *
+     * @throws SSHError
+     */
+    public function update(Site $site, array $input): void
+    {
+        Validator::make($input, self::rules($site))->validate();
+
+        $site->changePHPVersion($input['version']);
+    }
+
     /**
      * @return array<string, array<string>>
      */
@@ -22,14 +35,4 @@ public static function rules(Site $site): array
             ],
         ];
     }
-
-    /**
-     * @param  array<string, mixed>  $input
-     *
-     * @throws SSHError
-     */
-    public function update(Site $site, array $input): void
-    {
-        $site->changePHPVersion($input['version']);
-    }
 }

app/Actions/Site/UpdateSourceControl.php

@@ -6,6 +6,7 @@
 use App\Exceptions\RepositoryPermissionDenied;
 use App\Exceptions\SourceControlIsNotConnected;
 use App\Models\Site;
+use Illuminate\Support\Facades\Validator;
 use Illuminate\Validation\Rule;
 use Illuminate\Validation\ValidationException;
 
@@ -18,6 +19,8 @@ class UpdateSourceControl
      */
     public function update(Site $site, array $input): void
     {
+        Validator::make($input, self::rules())->validate();
+
         $site->source_control_id = $input['source_control'];
         try {
             if ($site->sourceControl) {

app/Exceptions/DeploymentScriptIsEmptyException.php

@@ -3,5 +3,20 @@
 namespace App\Exceptions;
 
 use Exception;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Validation\ValidationException;
 
-class DeploymentScriptIsEmptyException extends Exception {}
+class DeploymentScriptIsEmptyException extends Exception
+{
+    public function render(Request $request): RedirectResponse
+    {
+        if ($request->header('X-Inertia')) {
+            return back()->with('error', 'Cannot deploy an empty deployment script.');
+        }
+
+        throw ValidationException::withMessages([
+            'deployment_script' => 'Deployment script cannot be empty.',
+        ]);
+    }
+}

app/Exceptions/FailedToDeployGitHook.php

@@ -3,8 +3,17 @@
 namespace App\Exceptions;
 
 use Exception;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
 
 class FailedToDeployGitHook extends Exception
 {
-    //
+    public function render(Request $request): ?RedirectResponse
+    {
+        if ($request->header('X-Inertia')) {
+            return back()->with('error', 'Failed to deploy git hook.');
+        }
+
+        return null;
+    }
 }

app/Exceptions/FailedToDestroyGitHook.php

@@ -3,8 +3,17 @@
 namespace App\Exceptions;
 
 use Exception;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
 
 class FailedToDestroyGitHook extends Exception
 {
-    //
+    public function render(Request $request): ?RedirectResponse
+    {
+        if ($request->header('X-Inertia')) {
+            return back()->with('error', 'Failed to destroy git hook.');
+        }
+
+        return null;
+    }
 }

app/Exceptions/SourceControlIsNotConnected.php

@@ -3,5 +3,17 @@
 namespace App\Exceptions;
 
 use Exception;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
 
-class SourceControlIsNotConnected extends Exception {}
+class SourceControlIsNotConnected extends Exception
+{
+    public function render(Request $request): ?RedirectResponse
+    {
+        if ($request->header('X-Inertia')) {
+            return back()->with('error', 'Source control is not connected.');
+        }
+
+        return null;
+    }
+}

app/Http/Controllers/ApplicationController.php

@@ -0,0 +1,136 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Site\Deploy;
+use App\Actions\Site\UpdateDeploymentScript;
+use App\Actions\Site\UpdateEnv;
+use App\Actions\Site\UpdateLoadBalancer;
+use App\Exceptions\DeploymentScriptIsEmptyException;
+use App\Exceptions\FailedToDestroyGitHook;
+use App\Exceptions\SourceControlIsNotConnected;
+use App\Exceptions\SSHError;
+use App\Http\Resources\DeploymentResource;
+use App\Http\Resources\LoadBalancerServerResource;
+use App\Models\Server;
+use App\Models\Site;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+use Spatie\RouteAttributes\Attributes\Get;
+use Spatie\RouteAttributes\Attributes\Middleware;
+use Spatie\RouteAttributes\Attributes\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+use Spatie\RouteAttributes\Attributes\Put;
+
+#[Prefix('/servers/{server}/sites/{site}')]
+#[Middleware(['auth', 'has-project'])]
+class ApplicationController extends Controller
+{
+    #[Get('/', name: 'application')]
+    public function index(Server $server, Site $site): Response
+    {
+        $this->authorize('view', [$site, $server]);
+
+        return Inertia::render('application/index', [
+            'deployments' => DeploymentResource::collection($site->deployments()->latest()->simplePaginate(config('web.pagination_size'))),
+            'deploymentScript' => $site->deploymentScript?->content,
+            'loadBalancerServers' => LoadBalancerServerResource::collection($site->loadBalancerServers)
+        ]);
+    }
+
+    #[Put('/deployment-script', name: 'application.update-deployment-script')]
+    public function updateDeploymentScript(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        app(UpdateDeploymentScript::class)->update($site, $request->input());
+
+        return back()->with('success', 'Deployment script updated successfully.');
+    }
+
+    /**
+     * @throws DeploymentScriptIsEmptyException
+     */
+    #[Post('/deploy', name: 'application.deploy')]
+    public function deploy(Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        app(Deploy::class)->run($site);
+
+        return back()->with('info', 'Deployment started, please wait...');
+    }
+
+    #[Get('/env', name: 'application.env')]
+    public function env(Server $server, Site $site): JsonResponse
+    {
+        $this->authorize('view', [$site, $server]);
+
+        $env = $site->getEnv();
+
+        return response()->json([
+            'env' => $env,
+        ]);
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Put('/env', name: 'application.update-env')]
+    public function updateEnv(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        app(UpdateEnv::class)->update($site, $request->input());
+
+        return back()->with('success', '.env file updated successfully.');
+    }
+
+    /**
+     * @throws SourceControlIsNotConnected
+     */
+    #[Post('/enable-auto-deployment', name: 'application.enable-auto-deployment')]
+    public function enableAutoDeployment(Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        if (! $site->sourceControl) {
+            return back()->with('error', 'Cannot find source control for this site.');
+        }
+
+        $site->enableAutoDeployment();
+
+        return back()->with('success', 'Auto deployment enabled successfully.');
+    }
+
+    /**
+     * @throws SourceControlIsNotConnected
+     * @throws FailedToDestroyGitHook
+     */
+    #[Post('/disable-auto-deployment', name: 'application.disable-auto-deployment')]
+    public function disableAutoDeployment(Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        if (! $site->sourceControl) {
+            return back()->with('error', 'Cannot find source control for this site.');
+        }
+
+        $site->disableAutoDeployment();
+
+        return back()->with('success', 'Auto deployment disabled successfully.');
+    }
+
+    #[Post('/load-balancer', name: 'application.update-load-balancer')]
+    public function updateLoadBalancer(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        app(UpdateLoadBalancer::class)->update($site, $request->input());
+
+        return back()->with('success', 'Load balancer updated successfully.');
+    }
+}

app/Http/Controllers/CommandController.php

@@ -0,0 +1,92 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Site\CreateCommand;
+use App\Actions\Site\EditCommand;
+use App\Actions\Site\ExecuteCommand;
+use App\Http\Resources\CommandExecutionResource;
+use App\Http\Resources\CommandResource;
+use App\Models\Command;
+use App\Models\Server;
+use App\Models\Site;
+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\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+use Spatie\RouteAttributes\Attributes\Put;
+
+#[Prefix('/servers/{server}/sites/{site}/commands')]
+#[Middleware(['auth', 'has-project'])]
+class CommandController extends Controller
+{
+    #[Get('/', name: 'commands')]
+    public function index(Server $server, Site $site): Response
+    {
+        $this->authorize('viewAny', [Command::class, $site, $server]);
+
+        return Inertia::render('commands/index', [
+            'commands' => CommandResource::collection($site->commands()->latest()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Post('/', name: 'commands.store')]
+    public function store(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('create', [Command::class, $site, $server]);
+
+        app(CreateCommand::class)->create($site, $request->input());
+
+        return back()
+            ->with('success', 'Command created successfully.');
+    }
+
+    #[Get('/{command}', name: 'commands.show')]
+    public function show(Server $server, Site $site, Command $command): Response
+    {
+        $this->authorize('view', [$command, $site, $server]);
+
+        return Inertia::render('commands/show', [
+            'command' => new CommandResource($command),
+            'executions' => CommandExecutionResource::collection($command->executions()->latest()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Put('/{command}', name: 'commands.update')]
+    public function update(Request $request, Server $server, Site $site, Command $command): RedirectResponse
+    {
+        $this->authorize('update', [$command, $site, $server]);
+
+        app(EditCommand::class)->edit($command, $request->input());
+
+        return back()
+            ->with('success', 'Command updated successfully.');
+    }
+
+    #[Delete('/{command}', name: 'commands.destroy')]
+    public function destroy(Server $server, Site $site, Command $command): RedirectResponse
+    {
+        $this->authorize('delete', [$command, $site, $server]);
+
+        $command->delete();
+
+        return back()
+            ->with('success', 'Command deleted successfully.');
+    }
+
+    #[Post('/{command}/execute', name: 'commands.execute')]
+    public function execute(Request $request, Server $server, Site $site, Command $command): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        app(ExecuteCommand::class)->execute($command, user(), $request->input());
+
+        return redirect()->route('commands.show', ['server' => $server, 'site' => $site, 'command' => $command])
+            ->with('info', 'Command is being executed.');
+    }
+}

app/Http/Controllers/RedirectController.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Redirect\CreateRedirect;
+use App\Actions\Redirect\DeleteRedirect;
+use App\Http\Resources\RedirectResource;
+use App\Models\Redirect;
+use App\Models\Server;
+use App\Models\Site;
+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\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+
+#[Prefix('/servers/{server}/sites/{site}/redirects')]
+#[Middleware(['auth', 'has-project'])]
+class RedirectController extends Controller
+{
+    #[Get('/', name: 'redirects')]
+    public function index(Server $server, Site $site): Response
+    {
+        $this->authorize('viewAny', [Redirect::class, $site, $server]);
+
+        return Inertia::render('redirects/index', [
+            'redirects' => RedirectResource::collection($site->redirects()->latest()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Post('/', name: 'redirects.store')]
+    public function store(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('create', [Redirect::class, $site, $server]);
+
+        app(CreateRedirect::class)->create($site, $request->input());
+
+        return back()
+            ->with('info', 'Creating the redirect');
+    }
+
+    #[Delete('/{redirect}', name: 'redirects.destroy')]
+    public function destroy(Server $server, Site $site, Redirect $redirect): RedirectResponse
+    {
+        $this->authorize('delete', [$redirect, $site, $server]);
+
+        app(DeleteRedirect::class)->delete($site, $redirect);
+
+        return back()
+            ->with('info', 'Deleting the redirect');
+    }
+}

app/Http/Controllers/SSLController.php

@@ -0,0 +1,106 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\SSL\ActivateSSL;
+use App\Actions\SSL\CreateSSL;
+use App\Actions\SSL\DeactivateSSL;
+use App\Actions\SSL\DeleteSSL;
+use App\Http\Resources\SslResource;
+use App\Models\Server;
+use App\Models\Site;
+use App\Models\Ssl;
+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\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+
+#[Prefix('/servers/{server}/sites/{site}/ssl')]
+#[Middleware(['auth', 'has-project'])]
+class SSLController extends Controller
+{
+    #[Get('/', name: 'ssls')]
+    public function index(Server $server, Site $site): Response
+    {
+        $this->authorize('viewAny', [Ssl::class, $site, $server]);
+
+        return Inertia::render('ssls/index', [
+            'ssls' => SslResource::collection($site->ssls()->latest()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Post('/', name: 'ssls.store')]
+    public function store(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('create', [Ssl::class, $site, $server]);
+
+        app(CreateSSL::class)->create($site, $request->input());
+
+        return back()
+            ->with('info', 'Setting up SSL.');
+    }
+
+    #[Delete('/{ssl}', name: 'ssls.destroy')]
+    public function destroy(Server $server, Site $site, Ssl $ssl): RedirectResponse
+    {
+        $this->authorize('delete', [$ssl, $site, $server]);
+
+        app(DeleteSSL::class)->delete($ssl);
+
+        return back()
+            ->with('success', 'SSL deleted successfully.');
+    }
+
+    #[Post('/enable-force-ssl', name: 'ssls.enable-force-ssl')]
+    public function enableForceSSL(Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        $site->force_ssl = true;
+        $site->save();
+        $site->webserver()->updateVHost($site);
+
+        return back()
+            ->with('success', 'Force SSL enabled successfully.');
+    }
+
+    #[Post('/disable-force-ssl', name: 'ssls.disable-force-ssl')]
+    public function disableForceSSL(Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        $site->force_ssl = false;
+        $site->save();
+        $site->webserver()->updateVHost($site);
+
+        return back()
+            ->with('success', 'Force SSL disabled successfully.');
+    }
+
+    #[Post('/{ssl}/activate', name: 'ssls.activate')]
+    public function activate(Server $server, Site $site, Ssl $ssl): RedirectResponse
+    {
+        $this->authorize('update', [$ssl, $site, $server]);
+
+        app(ActivateSSL::class)->activate($ssl);
+
+        return back()
+            ->with('success', 'SSL activated successfully.');
+    }
+
+    #[Post('/{ssl}/deactivate', name: 'ssls.deactivate')]
+    public function deactivate(Server $server, Site $site, Ssl $ssl): RedirectResponse
+    {
+        $this->authorize('update', [$ssl, $site, $server]);
+
+        app(DeactivateSSL::class)->deactivate($ssl);
+
+        return back()
+            ->with('success', 'SSL deactivated successfully.');
+    }
+}

app/Http/Controllers/SiteController.php

@@ -3,8 +3,6 @@
 namespace App\Http\Controllers;
 
 use App\Actions\Site\CreateSite;
-use App\Actions\Site\DeleteSite;
-use App\Exceptions\SSHError;
 use App\Http\Resources\ServerLogResource;
 use App\Http\Resources\SiteResource;
 use App\Models\Server;
@@ -14,7 +12,6 @@
 use Illuminate\Support\Facades\URL;
 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\Post;
@@ -43,17 +40,6 @@ public function server(Server $server): Response
         ]);
     }
 
-    #[Get('/servers/{server}/sites/{site}', name: 'sites.show')]
-    public function show(Server $server, Site $site): Response
-    {
-        $this->authorize('view', [$site, $server]);
-
-        return Inertia::render('sites/show', [
-            'site' => SiteResource::make($site),
-            'logs' => ServerLogResource::collection($site->logs()->latest()->simplePaginate(config('web.pagination_size'), pageName: 'logsPage')),
-        ]);
-    }
-
     /**
      * @throws Throwable
      */
@@ -64,7 +50,7 @@ public function store(Request $request, Server $server): RedirectResponse
 
         $site = app(CreateSite::class)->create($server, $request->all());
 
-        return redirect()->route('sites.show', ['server' => $server, 'site' => $site])
+        return redirect()->route('application', ['server' => $server, 'site' => $site])
             ->with('info', 'Installing site, please wait...');
     }
 
@@ -79,26 +65,22 @@ public function switch(Server $server, Site $site): RedirectResponse
 
         if ($previousRoute->hasParameter('site')) {
             if (count($previousRoute->parameters()) > 2) {
-                return redirect()->route('sites.show', ['server' => $server->id, 'site' => $site->id]);
+                return redirect()->route('application', ['server' => $server->id, 'site' => $site->id]);
             }
 
             return redirect()->route($previousRoute->getName(), ['server' => $server, 'site' => $site->id]);
         }
 
-        return redirect()->route('sites.show', ['server' => $server->id, 'site' => $site->id]);
+        return redirect()->route('application', ['server' => $server->id, 'site' => $site->id]);
     }
 
-    /**
+    #[Get('/servers/{server}/sites/{site}/logs', name: 'sites.logs')]
-     * @throws SSHError
+    public function logs(Server $server, Site $site): Response
-     */
-    #[Delete('/servers/{server}/sites/{site}', name: 'sites.destroy')]
-    public function destroy(Server $server, Site $site): RedirectResponse
     {
-        $this->authorize('delete', [$site, $server]);
+        $this->authorize('view', [$site, $server]);
 
-        app(DeleteSite::class)->delete($site);
+        return Inertia::render('sites/logs', [
-
+            'logs' => ServerLogResource::collection($site->logs()->latest()->simplePaginate(config('web.pagination_size'))),
-        return redirect()->route('sites', ['server' => $server])
+        ]);
-            ->with('success', 'Site deleted successfully.');
     }
 }

app/Http/Controllers/SiteSettingController.php

@@ -0,0 +1,110 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Site\DeleteSite;
+use App\Actions\Site\UpdateBranch;
+use App\Actions\Site\UpdatePHPVersion;
+use App\Actions\Site\UpdateSourceControl;
+use App\Exceptions\SSHError;
+use App\Http\Resources\SourceControlResource;
+use App\Models\Server;
+use App\Models\Site;
+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\Prefix;
+use Spatie\RouteAttributes\Attributes\Put;
+
+#[Prefix('/servers/{server}/sites/{site}/settings')]
+#[Middleware(['auth', 'has-project'])]
+class SiteSettingController extends Controller
+{
+    #[Get('/', name: 'site-settings')]
+    public function index(Server $server, Site $site): Response
+    {
+        return Inertia::render('site-settings/index', [
+            'sourceControl' => $site->sourceControl ? SourceControlResource::make($site->sourceControl) : null,
+        ]);
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Patch('/branch', name: 'site-settings.update-branch')]
+    public function updateBranch(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        app(UpdateBranch::class)->update($site, $request->input());
+
+        return back()->with('success', 'Branch updated successfully.');
+    }
+
+    #[Patch('/source-control', name: 'site-settings.update-source-control')]
+    public function updateSourceControl(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        app(UpdateSourceControl::class)->update($site, $request->input());
+
+        return back()->with('success', 'Source control updated successfully.');
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Patch('/php-version', name: 'site-settings.update-php-version')]
+    public function updatePHPVersion(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        app(UpdatePHPVersion::class)->update($site, $request->input());
+
+        return back()->with('success', 'PHP version updated successfully.');
+    }
+
+    #[Get('/vhost', name: 'site-settings.vhost')]
+    public function vhost(Server $server, Site $site): JsonResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        return response()->json([
+            'vhost' => $site->webserver()->getVHost($site),
+        ]);
+    }
+
+    #[Put('/vhost', name: 'site-settings.update-vhost')]
+    public function updateVhost(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('update', [$site, $server]);
+
+        $this->validate($request, [
+            'vhost' => 'required|string',
+        ]);
+
+        $site->webserver()->updateVHost($site, $request->input('vhost'));
+
+        return back()->with('success', 'VHost updated successfully.');
+    }
+
+    /**
+     * @throws SSHError
+     */
+    #[Delete('/', name: 'site-settings.destroy')]
+    public function destroy(Request $request, Server $server, Site $site): RedirectResponse
+    {
+        $this->authorize('delete', [$site, $server]);
+
+        app(DeleteSite::class)->delete($site, $request->input());
+
+        return redirect()->route('sites', ['server' => $server])
+            ->with('success', 'Site deleted successfully.');
+    }
+}

app/Http/Controllers/WorkerController.php

@@ -39,7 +39,7 @@ public function index(Server $server): Response
         ]);
     }
 
-    #[Get('/sites/{site}/workers', name: 'sites.workers')]
+    #[Get('/sites/{site}/workers', name: 'workers.site')]
     public function site(Server $server, Site $site): Response
     {
         $this->authorize('viewAny', [Worker::class, $server, $site]);

app/Http/Resources/CommandExecutionResource.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\CommandExecution;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin CommandExecution */
+class CommandExecutionResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'command_id' => $this->command_id,
+            'server_id' => $this->server_id,
+            'user_id' => $this->user_id,
+            'server_log_id' => $this->server_log_id,
+            'log' => ServerLogResource::make($this->serverLog),
+            'variables' => $this->variables,
+            'status' => $this->status,
+            'status_color' => CommandExecution::$statusColors[$this->status] ?? 'gray',
+            'created_at' => $this->created_at,
+            'updated_at' => $this->updated_at,
+        ];
+    }
+}

app/Http/Resources/CommandResource.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\Command;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin Command */
+class CommandResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'server_id' => $this->site->server_id,
+            'site_id' => $this->site_id,
+            'name' => $this->name,
+            'command' => $this->command,
+            'variables' => $this->getVariables(),
+            'updated_at' => $this->updated_at,
+            'created_at' => $this->created_at,
+        ];
+    }
+}

app/Http/Resources/DeploymentResource.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\Deployment;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin Deployment */
+class DeploymentResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'site_id' => $this->site_id,
+            'deployment_script_id' => $this->deployment_script_id,
+            'log_id' => $this->log_id,
+            'log' => new ServerLogResource($this->log),
+            'commit_id' => $this->commit_id,
+            'commit_id_short' => $this->commit_id_short,
+            'commit_data' => $this->commit_data,
+            'status' => $this->status,
+            'status_color' => Deployment::$statusColors[$this->status] ?? 'gray',
+            'updated_at' => $this->updated_at,
+            'created_at' => $this->created_at,
+        ];
+    }
+}

app/Http/Resources/LoadBalancerServerResource.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\LoadBalancerServer;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin LoadBalancerServer */
+class LoadBalancerServerResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'load_balancer_id' => $this->load_balancer_id,
+            'ip' => $this->ip,
+            'port' => $this->port,
+            'weight' => $this->weight,
+            'backup' => $this->backup,
+            'created_at' => $this->created_at,
+            'updated_at' => $this->updated_at,
+        ];
+    }
+}

app/Http/Resources/RedirectResource.php

@@ -16,11 +16,13 @@ public function toArray(Request $request): array
     {
         return [
             'id' => $this->id,
+            'server_id' => $this->site->server_id,
             'site_id' => $this->site_id,
-            'mode' => $this->mode,
             'from' => $this->from,
             'to' => $this->to,
+            'mode' => $this->mode,
             'status' => $this->status,
+            'status_color' => Redirect::$statusColors[$this->status] ?? 'gray',
             'created_at' => $this->created_at,
             'updated_at' => $this->updated_at,
         ];

app/Http/Resources/ServerResource.php

@@ -17,6 +17,7 @@ public function toArray(Request $request): array
         return [
             'id' => $this->id,
             'project_id' => $this->project_id,
+            'services' => $this->services()->pluck('name', 'type'),
             'user_id' => $this->user_id,
             'provider_id' => $this->provider_id,
             'name' => $this->name,

app/Http/Resources/SiteResource.php

@@ -21,18 +21,22 @@ public function toArray(Request $request): array
             'source_control_id' => $this->source_control_id,
             'type' => $this->type,
             'type_data' => $this->type_data,
+            'features' => $this->type()->supportedFeatures(),
             'domain' => $this->domain,
             'aliases' => $this->aliases,
             'web_directory' => $this->web_directory,
+            'webserver' => $this->webserver()->name(),
             'path' => $this->path,
             'php_version' => $this->php_version,
             'repository' => $this->repository,
             'branch' => $this->branch,
             'status' => $this->status,
             'status_color' => Site::$statusColors[$this->status] ?? 'default',
+            'auto_deploy' => $this->isAutoDeployment(),
             'port' => $this->port,
             'user' => $this->user,
             'url' => $this->getUrl(),
+            'force_ssl' => $this->force_ssl,
             'progress' => $this->progress,
             'created_at' => $this->created_at,
             'updated_at' => $this->updated_at,

app/Http/Resources/SslResource.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\Ssl;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin Ssl */
+class SslResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'server_id' => $this->site->server_id,
+            'site_id' => $this->site_id,
+            'is_active' => $this->is_active,
+            'type' => $this->type,
+            'status' => $this->status,
+            'log' => $this->log_id ? ServerLogResource::make($this->log) : null,
+            'status_color' => Ssl::$statusColors[$this->status] ?? 'secondary',
+            'expires_at' => $this->expires_at,
+            'created_at' => $this->created_at,
+            'updated_at' => $this->updated_at,
+        ];
+    }
+}

app/Models/Command.php

@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use Carbon\Carbon;
+use Database\Factories\CommandFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
@@ -22,7 +23,7 @@
  */
 class Command extends AbstractModel
 {
-    /** @use HasFactory<\Database\Factories\CommandFactory> */
+    /** @use HasFactory<CommandFactory> */
     use HasFactory;
 
     protected $fillable = [

app/Models/CommandExecution.php

@@ -4,6 +4,7 @@
 
 use App\Enums\CommandExecutionStatus;
 use Carbon\Carbon;
+use Database\Factories\CommandExecutionFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
@@ -18,13 +19,13 @@
  * @property Carbon $created_at
  * @property Carbon $updated_at
  * @property Command $command
- * @property ?ServerLog $serverLog
+ * @property ServerLog $serverLog
  * @property Server $server
  * @property ?User $user
  */
 class CommandExecution extends AbstractModel
 {
-    /** @use HasFactory<\Database\Factories\CommandExecutionFactory> */
+    /** @use HasFactory<CommandExecutionFactory> */
     use HasFactory;
 
     protected $fillable = [

app/Models/Deployment.php

@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use App\Enums\DeploymentStatus;
+use Database\Factories\DeploymentFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
@@ -20,7 +21,7 @@
  */
 class Deployment extends AbstractModel
 {
-    /** @use HasFactory<\Database\Factories\DeploymentFactory> */
+    /** @use HasFactory<DeploymentFactory> */
     use HasFactory;
 
     protected $fillable = [

app/Models/DeploymentScript.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Database\Factories\DeploymentScriptFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
@@ -13,7 +14,7 @@
  */
 class DeploymentScript extends AbstractModel
 {
-    /** @use HasFactory<\Database\Factories\DeploymentScriptFactory> */
+    /** @use HasFactory<DeploymentScriptFactory> */
     use HasFactory;
 
     protected static function boot(): void

app/Models/LoadBalancerServer.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use Database\Factories\LoadBalancerServerFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 
@@ -15,7 +16,7 @@
  */
 class LoadBalancerServer extends AbstractModel
 {
-    /** @use HasFactory<\Database\Factories\LoadBalancerServerFactory> */
+    /** @use HasFactory<LoadBalancerServerFactory> */
     use HasFactory;
 
     protected $fillable = [

app/Models/Ssl.php

@@ -4,6 +4,7 @@
 
 use App\Enums\SslStatus;
 use Carbon\Carbon;
+use Database\Factories\SslFactory;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Support\Str;
@@ -28,7 +29,7 @@
  */
 class Ssl extends AbstractModel
 {
-    /** @use HasFactory<\Database\Factories\SslFactory> */
+    /** @use HasFactory<SslFactory> */
     use HasFactory;
 
     protected $fillable = [

app/Policies/CommandPolicy.php

@@ -2,7 +2,6 @@
 
 namespace App\Policies;
 
-use App\Enums\SiteFeature;
 use App\Models\Command;
 use App\Models\Server;
 use App\Models\Site;
@@ -17,7 +16,6 @@ public function viewAny(User $user, Site $site, Server $server): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            $site->hasFeature(SiteFeature::COMMANDS) &&
             $site->isReady();
     }
 
@@ -27,7 +25,6 @@ public function view(User $user, Command $command, Site $site, Server $server):
             $site->server_id === $server->id &&
             $server->isReady() &&
             $site->isReady() &&
-            $site->hasFeature(SiteFeature::COMMANDS) &&
             $command->site_id === $site->id;
     }
 
@@ -35,7 +32,6 @@ public function create(User $user, Site $site, Server $server): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            $site->hasFeature(SiteFeature::COMMANDS) &&
             $site->isReady();
     }
 
@@ -45,7 +41,6 @@ public function update(User $user, Command $command, Site $site, Server $server)
            $site->server_id === $server->id &&
            $server->isReady() &&
            $site->isReady() &&
-           $site->hasFeature(SiteFeature::COMMANDS) &&
            $command->site_id === $site->id;
     }
 
@@ -55,7 +50,6 @@ public function delete(User $user, Command $command, Site $site, Server $server)
             $site->server_id === $server->id &&
             $server->isReady() &&
             $site->isReady() &&
-            $site->hasFeature(SiteFeature::COMMANDS) &&
             $command->site_id === $site->id;
     }
 }

app/Policies/RedirectPolicy.php

@@ -2,34 +2,40 @@
 
 namespace App\Policies;
 
+use App\Models\Redirect;
 use App\Models\Server;
 use App\Models\Site;
 use App\Models\User;
 
 class RedirectPolicy
 {
-    public function view(User $user, Site $site, Server $server): bool
+    public function viewAny(User $user, Site $site, Server $server): bool
     {
-        if ($user->isAdmin()) {
+        return ($user->isAdmin() || $server->project->users->contains($user)) &&
-            return true;
+            $server->isReady() &&
-        }
+            $site->isReady();
+    }
 
-        return $site->server->project->users->contains($user);
+    public function view(User $user, Redirect $redirect, Site $site, Server $server): bool
+    {
+        return ($user->isAdmin() || $site->server->project->users->contains($user))
+            && $site->server_id === $server->id
+            && $site->server->isReady()
+            && $redirect->site_id === $site->id;
     }
 
     public function create(User $user, Site $site, Server $server): bool
     {
         return ($user->isAdmin() || $site->server->project->users->contains($user))
             && $site->server_id === $server->id
-            && $site->server->isReady()
+            && $site->server->isReady();
-            && $site->server->webserver();
     }
 
-    public function delete(User $user, Site $site, Server $server): bool
+    public function delete(User $user, Redirect $redirect, Site $site, Server $server): bool
     {
         return ($user->isAdmin() || $site->server->project->users->contains($user))
             && $site->server_id === $server->id
-            && $site->server->isReady()
+            && $server->isReady()
-            && $site->server->webserver();
+            && $redirect->site_id === $site->id;
     }
 }

app/Policies/SslPolicy.php

@@ -2,7 +2,6 @@
 
 namespace App\Policies;
 
-use App\Enums\SiteFeature;
 use App\Models\Server;
 use App\Models\Site;
 use App\Models\Ssl;
@@ -17,7 +16,6 @@ public function viewAny(User $user, Site $site, Server $server): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            $site->hasFeature(SiteFeature::SSL) &&
             $site->isReady();
     }
 
@@ -27,7 +25,6 @@ public function view(User $user, Ssl $ssl, Site $site, Server $server): bool
             $site->server_id === $server->id &&
             $server->isReady() &&
             $site->isReady() &&
-            $site->hasFeature(SiteFeature::SSL) &&
             $ssl->site_id === $site->id;
     }
 
@@ -35,18 +32,16 @@ public function create(User $user, Site $site, Server $server): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            $site->hasFeature(SiteFeature::SSL) &&
             $site->isReady();
     }
 
     public function update(User $user, Ssl $ssl, Site $site, Server $server): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
-           $site->server_id === $server->id &&
+            $site->server_id === $server->id &&
-           $server->isReady() &&
+            $server->isReady() &&
-           $site->isReady() &&
+            $site->isReady() &&
-           $site->hasFeature(SiteFeature::SSL) &&
+            $ssl->site_id === $site->id;
-           $ssl->site_id === $site->id;
     }
 
     public function delete(User $user, Ssl $ssl, Site $site, Server $server): bool
@@ -55,7 +50,6 @@ public function delete(User $user, Ssl $ssl, Site $site, Server $server): bool
             $site->server_id === $server->id &&
             $server->isReady() &&
             $site->isReady() &&
-            $site->hasFeature(SiteFeature::SSL) &&
             $ssl->site_id === $site->id;
     }
 }

app/Policies/WorkerPolicy.php

@@ -2,7 +2,6 @@
 
 namespace App\Policies;
 
-use App\Enums\SiteFeature;
 use App\Models\Server;
 use App\Models\Site;
 use App\Models\User;
@@ -17,70 +16,37 @@ public function viewAny(User $user, Server $server, ?Site $site = null): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            (
+            $server->processManager();
-                ! $site instanceof Site ||
-                (
-                    $site->hasFeature(SiteFeature::WORKERS) &&
-                    $site->isReady()
-                )
-            );
     }
 
     public function view(User $user, Worker $worker, Server $server, ?Site $site = null): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            (
+            $worker->server_id === $server->id &&
-                ! $site instanceof Site ||
+            $server->processManager();
-                (
-                    $site->server_id === $server->id &&
-                    $site->hasFeature(SiteFeature::WORKERS) &&
-                    $site->isReady() &&
-                    $worker->site_id === $site->id
-                )
-            );
     }
 
     public function create(User $user, Server $server, ?Site $site = null): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            (
+            $server->processManager();
-                ! $site instanceof Site ||
-                (
-                    $site->hasFeature(SiteFeature::WORKERS) &&
-                    $site->isReady()
-                )
-            );
     }
 
     public function update(User $user, Worker $worker, Server $server, ?Site $site = null): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            (
+            $worker->server_id === $server->id &&
-                ! $site instanceof Site ||
+            $server->processManager();
-                (
-                    $site->server_id === $server->id &&
-                    $site->hasFeature(SiteFeature::WORKERS) &&
-                    $site->isReady() &&
-                    $worker->site_id === $site->id
-                )
-            );
     }
 
     public function delete(User $user, Worker $worker, Server $server, ?Site $site = null): bool
     {
         return ($user->isAdmin() || $server->project->users->contains($user)) &&
             $server->isReady() &&
-            (
+            $worker->server_id === $server->id &&
-                ! $site instanceof Site ||
+            $server->processManager();
-                (
-                    $site->server_id === $server->id &&
-                    $site->hasFeature(SiteFeature::WORKERS) &&
-                    $site->isReady() &&
-                    $worker->site_id === $site->id
-                )
-            );
     }
 }

app/SSH/Services/Webserver/Caddy.php

@@ -10,6 +10,11 @@
 
 class Caddy extends AbstractWebserver
 {
+    public function name(): string
+    {
+        return \App\Enums\Webserver::CADDY;
+    }
+
     /**
      * @throws SSHError
      */

app/SSH/Services/Webserver/Nginx.php

@@ -10,6 +10,11 @@
 
 class Nginx extends AbstractWebserver
 {
+    public function name(): string
+    {
+        return \App\Enums\Webserver::NGINX;
+    }
+
     /**
      * @throws SSHError
      */

app/SSH/Services/Webserver/Webserver.php

@@ -8,6 +8,8 @@
 
 interface Webserver extends ServiceInterface
 {
+    public function name(): string;
+
     public function createVHost(Site $site): void;
 
     public function updateVHost(Site $site, ?string $vhost = null): void;

resources/js/components/app-sidebar-nested.tsx

@@ -103,7 +103,7 @@ export function AppSidebar() {
                 },
                 {
                   title: 'Application',
-                  href: route('sites.show', { server: page.props.server?.id || 0, site: page.props.site?.id || 0 }),
+                  href: route('application', { server: page.props.server?.id || 0, site: page.props.site?.id || 0 }),
                   icon: RocketIcon,
                 },
               ]

resources/js/components/app-sidebar.tsx

@@ -129,7 +129,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
                         <Collapsible key={`${item.title}-${item.href}`} defaultOpen={isActive} className="group/collapsible">
                           <SidebarMenuItem>
                             <CollapsibleTrigger asChild>
-                              <SidebarMenuButton disabled={item.isDisabled || false}>
+                              <SidebarMenuButton disabled={item.isDisabled || false} hidden={item.hidden}>
                                 {item.icon && <item.icon />}
                                 <span>{item.title}</span>
                                 <ChevronRightIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
@@ -162,7 +162,7 @@ export function AppSidebar({ secondNavItems, secondNavTitle }: { secondNavItems?
                     }
 
                     return (
-                      <SidebarMenuItem key={`${item.title}-${item.href}`}>
+                      <SidebarMenuItem key={`${item.title}-${item.href}`} hidden={item.hidden}>
                         <SidebarMenuButton onClick={() => router.visit(item.href)} isActive={isActive} disabled={item.isDisabled || false}>
                           {item.icon && <item.icon />}
                           <span>{item.title}</span>

resources/js/components/copyable-badge.tsx

@@ -17,7 +17,7 @@ export default function CopyableBadge({ text }: { text: string }) {
     <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">
+          <Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[200px] overflow-ellipsis">
             {text}
           </Badge>
         </div>

resources/js/components/site-switch.tsx

@@ -15,15 +15,26 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { type Site } from '@/types/site';
 import type { SharedData } from '@/types';
 import CreateSite from '@/pages/sites/components/create-site';
+import siteHelper from '@/lib/site-helper';
 
 export function SiteSwitch() {
   const page = usePage<SharedData>();
-  const [selectedSite, setSelectedSite] = useState(page.props.site || null);
+  const storedSite = siteHelper.getStoredSite();
+  const [selectedSite, setSelectedSite] = useState(page.props.site || storedSite || null);
   const initials = useInitials();
   const form = useForm();
 
+  if (storedSite && page.props.site && storedSite.id !== page.props.site.id) {
+    siteHelper.storeSite(page.props.site);
+  }
+
+  if (storedSite && page.props.serverSites && !page.props.serverSites.find((site) => site.id === storedSite.id)) {
+    siteHelper.storeSite();
+  }
+
   const handleSiteChange = (site: Site) => {
     setSelectedSite(site);
+    siteHelper.storeSite(site);
     form.post(route('sites.switch', { server: site.server_id, site: site.id }));
   };
 

resources/js/components/ui/dynamic-field.tsx

@@ -43,7 +43,7 @@ export default function DynamicField({ value, onChange, config, error }: Dynamic
         <Label htmlFor={config.name} className="capitalize">
           {label}
         </Label>
-        <Select value={value as string} onValueChange={onChange}>
+        <Select defaultValue={value as string} onValueChange={onChange}>
           <SelectTrigger id={config.name}>
             <SelectValue placeholder={config.placeholder || `Select ${label}`} />
           </SelectTrigger>
@@ -74,7 +74,14 @@ export default function DynamicField({ value, onChange, config, error }: Dynamic
       <Label htmlFor={config.name} className="capitalize">
         {label}
       </Label>
-      <Input type="text" name={config.name} id={config.name} value={(value as string) || ''} onChange={(e) => onChange(e.target.value)} {...props} />
+      <Input
+        type="text"
+        name={config.name}
+        id={config.name}
+        defaultValue={(value as string) || ''}
+        onChange={(e) => onChange(e.target.value)}
+        {...props}
+      />
       {config.description && <p className="text-muted-foreground text-xs">{config.description}</p>}
       <InputError message={error} />
     </FormField>

resources/js/hooks/use-appearance.tsx

@@ -62,6 +62,14 @@ export function useAppearance() {
     applyTheme(mode);
   }, []);
 
+  // create a method to return the actual appearance light or dark
+  const getActualAppearance = useCallback(() => {
+    if (appearance === 'system') {
+      return prefersDark() ? 'dark' : 'light';
+    }
+    return appearance;
+  }, [appearance]);
+
   useEffect(() => {
     const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
     updateAppearance(savedAppearance || 'system');
@@ -69,5 +77,5 @@ export function useAppearance() {
     return () => mediaQuery()?.removeEventListener('change', handleSystemThemeChange);
   }, [updateAppearance]);
 
-  return { appearance, updateAppearance } as const;
+  return { appearance, updateAppearance, getActualAppearance } as const;
 }

resources/js/icons/php.tsx

@@ -2,17 +2,18 @@ import React from 'react';
 import { LucideProps } from 'lucide-react';
 
 export const PHPIcon = React.forwardRef<SVGSVGElement, LucideProps>(
-  ({ color = 'currentColor', size = 24, strokeWidth = 2, className, ...rest }, ref) => {
+  ({ color = 'currentColor', size = 24, strokeWidth = 30, className, ...rest }, ref) => {
     return (
       <svg
         ref={ref}
         xmlns="http://www.w3.org/2000/svg"
         version="1.1"
         viewBox="0 0 512 512"
-        fill={color}
+        fill="none"
         width={size}
         height={size}
         strokeWidth={strokeWidth}
+        stroke={color}
         className={className}
         {...rest}
       >

resources/js/layouts/server/layout.tsx

@@ -1,20 +1,23 @@
 import { type NavItem } from '@/types';
 import {
-  ArrowLeftIcon,
   ChartLineIcon,
   ClockIcon,
   CloudIcon,
   CloudUploadIcon,
   CogIcon,
+  CommandIcon,
   DatabaseIcon,
   FlameIcon,
   HomeIcon,
   KeyIcon,
   ListEndIcon,
+  ListIcon,
+  LockIcon,
   LogsIcon,
   MousePointerClickIcon,
   RocketIcon,
   Settings2Icon,
+  SignpostIcon,
   TerminalSquareIcon,
   UsersIcon,
 } from 'lucide-react';
@@ -26,6 +29,7 @@ import { usePage, usePoll } from '@inertiajs/react';
 import { Site } from '@/types/site';
 import PHPIcon from '@/icons/php';
 import NodeIcon from '@/icons/node';
+import siteHelper from '@/lib/site-helper';
 
 export default function ServerLayout({ children }: { children: ReactNode }) {
   usePoll(7000);
@@ -41,6 +45,7 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
   }
 
   const isMenuDisabled = page.props.server.status !== 'ready';
+  const site = page.props.site || siteHelper.getStoredSite() || null;
 
   const sidebarNavItems: NavItem[] = [
     {
@@ -78,19 +83,53 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
       href: route('sites', { server: page.props.server.id }),
       icon: MousePointerClickIcon,
       isDisabled: isMenuDisabled,
-      children: page.props.site
+      hidden: !page.props.server.services['webserver'],
+      children: site
         ? [
             {
               title: 'All sites',
               href: route('sites', { server: page.props.server.id }),
               onlyActivePath: route('sites', { server: page.props.server.id }),
-              icon: ArrowLeftIcon,
+              icon: ListIcon,
             },
             {
               title: 'Application',
-              href: route('sites.show', { server: page.props.server.id, site: page.props.site.id }),
+              href: route('application', { server: page.props.server.id, site: site.id }),
+              onlyActivePath: route('application', { server: page.props.server.id, site: site.id }),
               icon: RocketIcon,
             },
+            {
+              title: 'Commands',
+              href: route('commands', { server: page.props.server.id, site: site.id }),
+              icon: CommandIcon,
+            },
+            {
+              title: 'SSL',
+              href: route('ssls', { server: page.props.server.id, site: site.id }),
+              icon: LockIcon,
+            },
+            {
+              title: 'Workers',
+              href: route('workers.site', { server: page.props.server.id, site: site.id }),
+              icon: ListEndIcon,
+              isDisabled: isMenuDisabled,
+              hidden: !page.props.server.services['process_manager'],
+            },
+            {
+              title: 'Redirects',
+              href: route('redirects', { server: page.props.server.id, site: site.id }),
+              icon: SignpostIcon,
+            },
+            {
+              title: 'Logs',
+              href: route('sites.logs', { server: page.props.server.id, site: site.id }),
+              icon: LogsIcon,
+            },
+            {
+              title: 'Settings',
+              href: route('site-settings', { server: page.props.server.id, site: site.id }),
+              icon: Settings2Icon,
+            },
           ]
         : [],
     },
@@ -123,6 +162,7 @@ export default function ServerLayout({ children }: { children: ReactNode }) {
       href: route('workers', { server: page.props.server.id }),
       icon: ListEndIcon,
       isDisabled: isMenuDisabled,
+      hidden: !page.props.server.services['process_manager'],
     },
     {
       title: 'SSH Keys',

resources/js/lib/editor.ts

@@ -0,0 +1,235 @@
+type monacoType = typeof import('/Users/saeed/Projects/vito/node_modules/monaco-editor/esm/vs/editor/editor.api') | null;
+
+export function registerIniLanguage(monaco: monacoType): void {
+  monaco?.languages.register({ id: 'ini' });
+  monaco?.languages.setMonarchTokensProvider('ini', {
+    tokenizer: {
+      root: [
+        [/^\[.*]$/, 'keyword'],
+        [/^[^=]+(?==)/, 'attribute.name'],
+        [/=.+$/, 'attribute.value'],
+      ],
+    },
+  });
+}
+
+export function registerNginxLanguage(monaco: monacoType): void {
+  monaco?.languages.register({ id: 'nginx' });
+  monaco?.languages.setMonarchTokensProvider('nginx', {
+    defaultToken: '',
+    tokenPostfix: '.nginx',
+
+    keywords: [
+      'server',
+      'location',
+      'listen',
+      'server_name',
+      'root',
+      'index',
+      'charset',
+      'error_page',
+      'try_files',
+      'include',
+      'deny',
+      'access_log',
+      'log_not_found',
+      'add_header',
+      'fastcgi_pass',
+      'fastcgi_param',
+      'fastcgi_hide_header',
+    ],
+
+    operators: ['=', '~', '!='],
+
+    symbols: /[=~]+/,
+
+    tokenizer: {
+      root: [
+        [/#.*$/, 'comment'],
+
+        // Block names like server, location
+        [/\b(server|location)\b/, 'keyword'],
+
+        // Keywords/directives
+        [
+          /\b([a-z_]+)\b(?=\s)/,
+          {
+            cases: {
+              '@keywords': 'keyword',
+              '@default': '',
+            },
+          },
+        ],
+
+        // Operators
+        [
+          /@symbols/,
+          {
+            cases: {
+              '@operators': 'operator',
+              '@default': '',
+            },
+          },
+        ],
+
+        // IPs, ports, URLs, filenames, values
+        [/\d+\.\d+\.\d+\.\d+(:\d+)?/, 'number'],
+        [/\/[^\s;"]*/, 'string.path'],
+        [/\$[a-zA-Z_][\w]*/, 'variable'],
+        [/".*?"/, 'string'],
+        [/'.*?'/, 'string'],
+
+        // Braces and semicolons
+        [/[{}]/, 'delimiter.bracket'],
+        [/;/, 'delimiter'],
+
+        // Numbers
+        [/\b\d+\b/, 'number'],
+      ],
+    },
+  });
+}
+
+export function registerCaddyLanguage(monaco: monacoType): void {
+  monaco?.languages.register({ id: 'caddy' });
+  monaco?.languages.setMonarchTokensProvider('caddy', {
+    defaultToken: '',
+    tokenPostfix: '.caddy',
+
+    keywords: [
+      'root',
+      'reverse_proxy',
+      'file_server',
+      'handle',
+      'route',
+      'redir',
+      'encode',
+      'tls',
+      'log',
+      'header',
+      'php_fastcgi',
+      'basicauth',
+      'respond',
+      'rewrite',
+      'handle_path',
+    ],
+
+    operators: ['*', '=', '->'],
+
+    symbols: /[=*>]+/,
+
+    tokenizer: {
+      root: [
+        // Comments
+        [/#.*$/, 'comment'],
+
+        // Site label (e.g. example.com)
+        [/^[^\s{]+(?=\s*{)/, 'type.identifier'],
+
+        // Directives
+        [
+          /\b([a-z_][a-z0-9_]*)(?=\s|$)/i,
+          {
+            cases: {
+              '@keywords': 'keyword',
+              '@default': '',
+            },
+          },
+        ],
+
+        // Braces
+        [/[{}]/, 'delimiter.bracket'],
+
+        // Operators
+        [
+          /@symbols/,
+          {
+            cases: {
+              '@operators': 'operator',
+              '@default': '',
+            },
+          },
+        ],
+
+        // Paths, values, URIs
+        [/\/[^\s#"]+/, 'string.path'],
+
+        // Quoted strings
+        [/".*?"/, 'string'],
+        [/'.*?'/, 'string'],
+
+        // Variables (environment-style)
+        [/\$\{?[a-zA-Z_][\w]*\}?/, 'variable'],
+
+        // IPs and ports
+        [/\d+\.\d+\.\d+\.\d+(:\d+)?/, 'number'],
+        [/\b\d{2,5}\b/, 'number'],
+      ],
+    },
+  });
+}
+
+export function registerBashLanguage(monaco: monacoType): void {
+  monaco?.languages.register({ id: 'bash' });
+  monaco?.languages.setMonarchTokensProvider('bash', {
+    defaultToken: '',
+    tokenPostfix: '.bash',
+    keywords: ['if', 'then', 'else', 'fi', 'for', 'while', 'in', 'do', 'done', 'case', 'esac', 'function', 'select', 'until', 'elif', 'time'],
+    builtins: [
+      'echo',
+      'read',
+      'cd',
+      'pwd',
+      'exit',
+      'kill',
+      'exec',
+      'eval',
+      'set',
+      'unset',
+      'export',
+      'source',
+      'trap',
+      'shift',
+      'alias',
+      'type',
+      'ulimit',
+    ],
+    tokenizer: {
+      root: [
+        [/#.*$/, 'comment'],
+        [/"/, { token: 'string.quote', bracket: '@open', next: '@string_double' }],
+        [/'/, { token: 'string.quote', bracket: '@open', next: '@string_single' }],
+        [/\$[a-zA-Z_]\w*/, 'variable'],
+        [/\$\{[^}]+}/, 'variable'],
+        [/\b(if|then|else|fi|for|while|in|do|done|case|esac|function|select|until|elif|time)\b/, 'keyword'],
+        [/\b(echo|read|cd|pwd|exit|kill|exec|eval|set|unset|export|source|trap|shift|alias|type|ulimit)\b/, 'type.identifier'],
+        [/\b\d+\b/, 'number'],
+        [/==|=~|!=|<=|>=|<<|>>|[<>;&|]/, 'operator'],
+      ],
+      string_double: [
+        [/[^\\"]+/, 'string'],
+        [/\\./, 'string.escape'],
+        [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
+      ],
+      string_single: [
+        [/[^']+/, 'string'],
+        [/'/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
+      ],
+    },
+  });
+}
+
+export function registerDotEnvLanguage(monaco: monacoType): void {
+  monaco?.languages.register({ id: 'dotenv' });
+  monaco?.languages.setMonarchTokensProvider('dotenv', {
+    tokenizer: {
+      root: [
+        [/#.*$/, 'comment'],
+        [/^\w+/, 'variable'],
+        [/=/, 'delimiter'],
+        [/"[^"]*"/, 'string'],
+        [/'[^']*'/, 'string'],
+      ],
+    },
+  });
+}

resources/js/lib/site-helper.ts

@@ -0,0 +1,20 @@
+import { Site } from '@/types/site';
+
+const siteHelper = {
+  getStoredSite() {
+    const storedSite = localStorage.getItem('site');
+    if (storedSite) {
+      return JSON.parse(storedSite) as Site;
+    }
+    return null;
+  },
+  storeSite(site?: Site) {
+    if (!site) {
+      localStorage.removeItem('site');
+      return;
+    }
+    localStorage.setItem('site', JSON.stringify(site));
+  },
+};
+
+export default siteHelper;

resources/js/pages/application/components/app-with-deployment.tsx

@@ -0,0 +1,77 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Site } from '@/types/site';
+import ServerLayout from '@/layouts/server/layout';
+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 { BookOpenIcon, MoreHorizontalIcon, RocketIcon } from 'lucide-react';
+import React from 'react';
+import { PaginatedData } from '@/types';
+import { Deployment } from '@/types/deployment';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import DeploymentScript from '@/pages/application/components/deployment-script';
+import Env from '@/pages/application/components/env';
+import Deploy from '@/pages/application/components/deploy';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/application/components/deployment-columns';
+import AutoDeployment from '@/pages/application/components/auto-deployment';
+
+export default function AppWithDeployment() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    deployments: PaginatedData<Deployment>;
+    deploymentScript: string;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`${page.props.site.domain} - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Application" description="Here you can manage the deployed application" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/sites/application" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            <Deploy site={page.props.site}>
+              <Button>
+                <RocketIcon />
+                <span className="hidden lg:block">Deploy</span>
+              </Button>
+            </Deploy>
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="p-0">
+                  <span className="sr-only">Open menu</span>
+                  <MoreHorizontalIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <AutoDeployment site={page.props.site}>
+                  <DropdownMenuItem onSelect={(e) => e.preventDefault()} disabled={!page.props.site.source_control_id}>
+                    {page.props.site.auto_deploy ? 'Disable' : 'Enable'} auto deploy
+                  </DropdownMenuItem>
+                </AutoDeployment>
+                <DeploymentScript site={page.props.site} script={page.props.deploymentScript}>
+                  <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Deployment Script</DropdownMenuItem>
+                </DeploymentScript>
+                <Env site={page.props.site}>
+                  <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Update .env</DropdownMenuItem>
+                </Env>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.deployments} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/application/components/auto-deployment.tsx

@@ -0,0 +1,59 @@
+import React, { ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { Site } from '@/types/site';
+
+export default function AutoDeployment({ site, children }: { site: Site; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    const url = site.auto_deploy
+      ? route('application.disable-auto-deployment', {
+          server: site.server_id,
+          site: site.id,
+        })
+      : route('application.enable-auto-deployment', { server: site.server_id, site: site.id });
+    form.post(url, {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{site.auto_deploy ? 'Disable' : 'Enable'} auto deployment</DialogTitle>
+          <DialogDescription className="sr-only">{site.auto_deploy ? 'Disable' : 'Enable'} auto deployment</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to {site.auto_deploy ? 'disable' : 'enable'} auto deployment?</p>
+        </div>
+        <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} />
+            Yes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/application/components/deploy.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { Site } from '@/types/site';
+
+export default function Deploy({ site, children }: { site: Site; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.post(route('application.deploy', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Deploy</DialogTitle>
+          <DialogDescription className="sr-only">Deploy application</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to deploy this site?</p>
+        </div>
+        <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} />
+            Deploy
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/application/components/deployment-columns.tsx

@@ -0,0 +1,61 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Button } from '@/components/ui/button';
+import { MoreVerticalIcon } from 'lucide-react';
+import DateTime from '@/components/date-time';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Deployment } from '@/types/deployment';
+import { Badge } from '@/components/ui/badge';
+import { Download, View } from '@/pages/server-logs/components/columns';
+
+export const columns: ColumnDef<Deployment>[] = [
+  {
+    accessorKey: 'commit_id',
+    header: 'Commit',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      return row.original.commit_data?.message ?? 'No commit message';
+    },
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Deployed At',
+    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">
+              <View serverLog={row.original.log} />
+              <Download serverLog={row.original.log}>
+                <DropdownMenuItem>Download</DropdownMenuItem>
+              </Download>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/application/components/deployment-script.tsx

@@ -0,0 +1,69 @@
+import React, { FormEvent, ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Form } from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Site } from '@/types/site';
+import { registerBashLanguage } from '@/lib/editor';
+import InputError from '@/components/ui/input-error';
+import { useAppearance } from '@/hooks/use-appearance';
+
+export default function DeploymentScript({ site, script, children }: { site: Site; script: string; children: ReactNode }) {
+  const { getActualAppearance } = useAppearance();
+
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    script: string;
+  }>({
+    script: script,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.put(route('application.update-deployment-script', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  registerBashLanguage(useMonaco());
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-5xl">
+        <SheetHeader>
+          <SheetTitle>Deployment script</SheetTitle>
+          <SheetDescription className="sr-only">Update deployment script</SheetDescription>
+        </SheetHeader>
+        <Form id="update-script-form" className="h-full" onSubmit={submit}>
+          <Editor
+            defaultLanguage="bash"
+            defaultValue={form.data.script}
+            theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
+            className="h-full"
+            onChange={(value) => form.setData('script', value ?? '')}
+            options={{
+              fontSize: 15,
+            }}
+          />
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button form="update-script-form" disabled={form.processing} onClick={submit} className="ml-2">
+              {form.processing && <LoaderCircleIcon className="animate-spin" />}
+              Save
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+            <InputError message={form.errors.script} />
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

resources/js/pages/application/components/env.tsx

@@ -0,0 +1,91 @@
+import React, { FormEvent, ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Form } from '@/components/ui/form';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import { registerDotEnvLanguage } from '@/lib/editor';
+import { Site } from '@/types/site';
+import { useAppearance } from '@/hooks/use-appearance';
+
+export default function Env({ site, children }: { site: Site; children: ReactNode }) {
+  const { getActualAppearance } = useAppearance();
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    env: string;
+  }>({
+    env: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.put(route('application.update-env', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  const query = useQuery({
+    queryKey: ['application.env', site.server_id, site.id],
+    queryFn: async () => {
+      const response = await axios.get(
+        route('application.env', {
+          server: site.server_id,
+          site: site.id,
+        }),
+      );
+      if (response.data?.env) {
+        form.setData('env', response.data.env);
+      }
+      return response.data;
+    },
+    retry: false,
+    enabled: open,
+  });
+
+  registerDotEnvLanguage(useMonaco());
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-5xl">
+        <SheetHeader>
+          <SheetTitle>Edit .env</SheetTitle>
+          <SheetDescription className="sr-only">Edit .env file</SheetDescription>
+        </SheetHeader>
+        <Form id="update-env-form" className="h-full" onSubmit={submit}>
+          {query.isSuccess ? (
+            <Editor
+              defaultLanguage="dotenv"
+              defaultValue={query.data.env}
+              theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
+              className="h-full"
+              onChange={(value) => form.setData('env', value ?? '')}
+              options={{
+                fontSize: 15,
+              }}
+            />
+          ) : (
+            <Skeleton className="h-full w-full rounded-none" />
+          )}
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button form="update-env-form" disabled={form.processing || query.isLoading} onClick={submit} className="ml-2">
+              {(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
+              Save
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

resources/js/pages/application/components/load-balancer.tsx

@@ -0,0 +1,108 @@
+import { Head, useForm, usePage } from '@inertiajs/react';
+import { Site } from '@/types/site';
+import ServerLayout from '@/layouts/server/layout';
+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 { BookOpenIcon, LoaderCircleIcon } from 'lucide-react';
+import React, { FormEvent } from 'react';
+import { LoadBalancerServer } from '@/types/load-balancer-server';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import type { Project } from '@/types/project';
+import InputError from '@/components/ui/input-error';
+import FormSuccessful from '@/components/form-successful';
+
+export default function LoadBalancer() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    loadBalancerServers: LoadBalancerServer[];
+  }>();
+
+  const form = useForm<{
+    method: 'round-robin' | 'least-connections' | 'ip-hash';
+    servers: {
+      server: string;
+      port: string;
+      weight: string;
+      backup: boolean;
+    }[];
+  }>({
+    method: 'round-robin',
+    servers: [],
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('application.update-load-balancer', { server: page.props.server.id, site: page.props.site.id }), {
+      onSuccess: () => {
+        form.reset();
+      },
+      preserveScroll: true,
+    });
+  };
+
+  return (
+    <ServerLayout>
+      <Head title={`${page.props.site.domain} - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Load balancer" description="Here you can manage the load balancer configs" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/sites/load-balancer" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+          </div>
+        </HeaderContainer>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Configs</CardTitle>
+            <CardDescription>Modify load balancer configs</CardDescription>
+          </CardHeader>
+          <CardContent className="p-4">
+            <Form>
+              <FormFields>
+                <FormField>
+                  <Label htmlFor="method">Method</Label>
+                  <Select
+                    value={form.data.method}
+                    onValueChange={(value) => form.setData('method', value as 'round-robin' | 'least-connections' | 'ip-hash')}
+                  >
+                    <SelectTrigger id="method">
+                      <SelectValue placeholder="Select a method" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="round-robin">round-robin</SelectItem>
+                        <SelectItem value="least-connections">least-connections</SelectItem>
+                        <SelectItem value="ip-hash">ip-hash</SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <InputError message={form.errors.method} />
+                </FormField>
+              </FormFields>
+            </Form>
+          </CardContent>
+          <CardFooter>
+            <Button disabled={form.processing} onClick={submit}>
+              {form.processing && <LoaderCircleIcon className="animate-spin" />}
+              <FormSuccessful successful={form.recentlySuccessful} />
+              Save and Deploy
+            </Button>
+          </CardFooter>
+        </Card>
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/application/index.tsx

@@ -0,0 +1,20 @@
+import { usePage } from '@inertiajs/react';
+import { Site } from '@/types/site';
+import React from 'react';
+import AppWithDeployment from '@/pages/application/components/app-with-deployment';
+import LoadBalancer from '@/pages/application/components/load-balancer';
+import siteHelper from '@/lib/site-helper';
+
+export default function Application() {
+  const page = usePage<{
+    site: Site;
+  }>();
+
+  siteHelper.storeSite(page.props.site);
+
+  if (page.props.site.type === 'load-balancer') {
+    return <LoadBalancer />;
+  }
+
+  return <AppWithDeployment />;
+}

resources/js/pages/backups/components/edit-backup.tsx

@@ -48,10 +48,10 @@ export default function EditBackup({ backup, children }: { backup: Backup; child
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Create backup</DialogTitle>
+          <DialogTitle>Edit backup</DialogTitle>
-          <DialogDescription className="sr-only">Create a new backup</DialogDescription>
+          <DialogDescription className="sr-only">Edit backup</DialogDescription>
         </DialogHeader>
-        <Form id="create-backup-form" onSubmit={submit} className="p-4">
+        <Form id="edit-backup-form" onSubmit={submit} className="p-4">
           <FormFields>
             {/*interval*/}
             <FormField>
@@ -101,7 +101,7 @@ export default function EditBackup({ backup, children }: { backup: Backup; child
             <DialogClose asChild>
               <Button variant="outline">Cancel</Button>
             </DialogClose>
-            <Button form="create-backup-form" type="button" onClick={submit} disabled={form.processing}>
+            <Button form="edit-backup-form" type="button" onClick={submit} disabled={form.processing}>
               {form.processing && <LoaderCircle className="animate-spin" />}
               Save
             </Button>

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

@@ -0,0 +1,118 @@
+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 { Link, useForm } from '@inertiajs/react';
+import { LoaderCircleIcon, MoreVerticalIcon, PlayIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { useState } from 'react';
+import { Command } from '@/types/command';
+import EditCommand from '@/pages/commands/components/edit-command';
+import CopyableBadge from '@/components/copyable-badge';
+import Execute from '@/pages/commands/components/execute';
+
+function Delete({ command }: { command: Command }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('commands.destroy', { server: command.server_id, site: command.site_id, command: command.id }), {
+      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 command</DialogTitle>
+          <DialogDescription className="sr-only">Delete command</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">Are you sure you want to this command?</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<Command>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'command',
+    header: 'Command',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <CopyableBadge text={row.original.command} />;
+    },
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end gap-1">
+          <Execute command={row.original}>
+            <Button variant="outline" className="size-8">
+              <PlayIcon className="size-3" />
+            </Button>
+          </Execute>
+          <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">
+              <EditCommand command={row.original}>
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit</DropdownMenuItem>
+              </EditCommand>
+              <Link
+                href={route('commands.show', {
+                  server: row.original.server_id,
+                  site: row.original.site_id,
+                  command: row.original.id,
+                })}
+              >
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Executions</DropdownMenuItem>
+              </Link>
+              <DropdownMenuSeparator />
+              <Delete command={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/commands/components/create-command.tsx

@@ -0,0 +1,87 @@
+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, usePage } from '@inertiajs/react';
+import { Button } from '@/components/ui/button';
+import { LoaderCircle } from 'lucide-react';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { Input } from '@/components/ui/input';
+import { Site } from '@/types/site';
+import { Textarea } from '@/components/ui/textarea';
+
+export default function CreateCommand({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const page = usePage<{
+    server: Server;
+    site: Site;
+  }>();
+
+  const form = useForm<{
+    name: string;
+    command: string;
+  }>({
+    name: '',
+    command: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('commands.store', { server: page.props.server.id, site: page.props.site.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create command</DialogTitle>
+          <DialogDescription className="sr-only">Create a new command</DialogDescription>
+        </DialogHeader>
+        <Form id="create-command-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input 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="command">Command</Label>
+              <Textarea id="command" name="command" value={form.data.command} onChange={(e) => form.setData('command', e.target.value)} />
+              <p className="text-muted-foreground text-sm">
+                You can use variables like {'${VARIABLE_NAME}'} in the command. The variables will be asked when executing the command
+              </p>
+              <InputError message={form.errors.command} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <div className="flex items-center gap-2">
+            <Button form="create-command-form" type="button" onClick={submit} disabled={form.processing}>
+              {form.processing && <LoaderCircle className="animate-spin" />}
+              Create
+            </Button>
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/commands/components/edit-command.tsx

@@ -0,0 +1,81 @@
+import React, { FormEvent, ReactNode, useState } from 'react';
+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 InputError from '@/components/ui/input-error';
+import { Input } from '@/components/ui/input';
+import { Command } from '@/types/command';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Textarea } from '@/components/ui/textarea';
+
+export default function EditCommand({ command, children }: { command: Command; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<{
+    name: string;
+    command: string;
+  }>({
+    name: command.name,
+    command: command.command,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.put(route('commands.update', { server: command.server_id, site: command.site_id, command: command.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Edit command</DialogTitle>
+          <DialogDescription className="sr-only">Create a new command</DialogDescription>
+        </DialogHeader>
+        <Form id="create-command-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="name">Name</Label>
+              <Input 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="command">Command</Label>
+              <Textarea id="command" name="command" value={form.data.command} onChange={(e) => form.setData('command', e.target.value)} />
+              <p className="text-muted-foreground text-sm">
+                You can use variables like {'${VARIABLE_NAME}'} in the command. The variables will be asked when executing the command
+              </p>
+              <InputError message={form.errors.command} />
+            </FormField>
+          </FormFields>
+        </Form>
+        <DialogFooter>
+          <div className="flex items-center gap-2">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button form="create-command-form" type="button" onClick={submit} disabled={form.processing}>
+              {form.processing && <LoaderCircle className="animate-spin" />}
+              Save
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/commands/components/execute.tsx

@@ -0,0 +1,69 @@
+import React, { ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { Command } from '@/types/command';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+
+export default function Execute({ command, children }: { command: Command; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm<Record<string, string>>({});
+
+  const submit = () => {
+    form.post(route('commands.execute', { server: command.server_id, site: command.site_id, command: command.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Execute</DialogTitle>
+          <DialogDescription className="sr-only">Execute command</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to run this command?</p>
+          <Form id="execute-command-form" onSubmit={submit}>
+            <FormFields>
+              {command.variables.map((variable: string) => (
+                <FormField key={`variable-${variable}`}>
+                  <Label htmlFor={variable}>{variable}</Label>
+                  <Input id={variable} name={variable} value={form.data[variable] || ''} onChange={(e) => form.setData(variable, e.target.value)} />
+                  <InputError message={form.errors[variable as keyof typeof form.errors]} />
+                </FormField>
+              ))}
+            </FormFields>
+          </Form>
+        </div>
+        <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} />
+            Execute
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/commands/components/execution-columns.tsx

@@ -0,0 +1,53 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Button } from '@/components/ui/button';
+import { MoreVerticalIcon } from 'lucide-react';
+import DateTime from '@/components/date-time';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { CommandExecution } from '@/types/command-execution';
+import { Badge } from '@/components/ui/badge';
+import { Download, View } from '@/pages/server-logs/components/columns';
+
+export const columns: ColumnDef<CommandExecution>[] = [
+  {
+    accessorKey: 'created_at',
+    header: 'Deployed At',
+    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">
+              <View serverLog={row.original.log} />
+              <Download serverLog={row.original.log}>
+                <DropdownMenuItem>Download</DropdownMenuItem>
+              </Download>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/commands/index.tsx

@@ -0,0 +1,44 @@
+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 { PlusIcon } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/commands/components/columns';
+import CreateCommand from '@/pages/commands/components/create-command';
+import { PaginatedData } from '@/types';
+import { Command } from '@/types/command';
+import { Site } from '@/types/site';
+
+export default function Commands() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    commands: PaginatedData<Command>;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Commands - ${page.props.site.domain} - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Commands" description="These are the commands that you can run on your site's location" />
+          <div className="flex items-center gap-2">
+            <CreateCommand>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create</span>
+              </Button>
+            </CreateCommand>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.commands} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/commands/show.tsx

@@ -0,0 +1,35 @@
+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 ServerLayout from '@/layouts/server/layout';
+import { DataTable } from '@/components/data-table';
+import { PaginatedData } from '@/types';
+import { columns } from '@/pages/commands/components/execution-columns';
+import { Site } from '@/types/site';
+import { CommandExecution } from '@/types/command-execution';
+
+type Page = {
+  server: Server;
+  site: Site;
+  executions: PaginatedData<CommandExecution>;
+};
+
+export default function Show() {
+  const page = usePage<Page>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Executions - ${page.props.site.domain} - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title={`Command executions`} description="Here you can see the command executions" />
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.executions} />
+      </Container>
+    </ServerLayout>
+  );
+}

resources/js/pages/php/components/ini.tsx

@@ -10,8 +10,11 @@ import { Form } from '@/components/ui/form';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { LoaderCircleIcon } from 'lucide-react';
+import { registerIniLanguage } from '@/lib/editor';
+import { useAppearance } from '@/hooks/use-appearance';
 
 export default function PHPIni({ service, type }: { service: Service; type: 'fpm' | 'cli' }) {
+  const { getActualAppearance } = useAppearance();
   const [open, setOpen] = useState(false);
   const form = useForm<{
     ini: string;
@@ -52,17 +55,7 @@ export default function PHPIni({ service, type }: { service: Service; type: 'fpm
     enabled: open,
   });
 
-  const monaco = useMonaco();
+  registerIniLanguage(useMonaco());
-  monaco?.languages.register({ id: 'ini' });
-  monaco?.languages.setMonarchTokensProvider('ini', {
-    tokenizer: {
-      root: [
-        [/^\[.*]$/, 'keyword'],
-        [/^[^=]+(?==)/, 'attribute.name'],
-        [/=.+$/, 'attribute.value'],
-      ],
-    },
-  });
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -79,7 +72,7 @@ export default function PHPIni({ service, type }: { service: Service; type: 'fpm
             <Editor
               defaultLanguage="ini"
               defaultValue={query.data.ini}
-              theme="vs-dark"
+              theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
               className="h-full"
               onChange={(value) => form.setData('ini', value ?? '')}
               options={{
@@ -87,7 +80,7 @@ export default function PHPIni({ service, type }: { service: Service; type: 'fpm
               }}
             />
           ) : (
-            <Skeleton className="h-full w-full" />
+            <Skeleton className="h-full w-full rounded-none" />
           )}
         </Form>
         <SheetFooter>

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

@@ -0,0 +1,129 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import DateTime from '@/components/date-time';
+import { Redirect } from '@/types/redirect';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import FormSuccessful from '@/components/form-successful';
+
+function Delete({ redirect }: { redirect: Redirect }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(
+      route('redirects.destroy', {
+        server: redirect.server_id,
+        site: redirect.site_id,
+        redirect: redirect.id,
+      }),
+      {
+        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 Redirect</DialogTitle>
+          <DialogDescription className="sr-only">Delete Redirect</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to delete this redirect?</p>
+        </div>
+        <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<Redirect>[] = [
+  {
+    accessorKey: 'from',
+    header: 'From',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'to',
+    header: 'To',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'mode',
+    header: 'Mode',
+    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">
+              <Delete redirect={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/redirects/components/create-redirect.tsx

@@ -0,0 +1,112 @@
+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 { Site } from '@/types/site';
+
+type CreateForm = {
+  mode: string;
+  from: string;
+  to: string;
+};
+
+export default function CreateRedirect({ site, children }: { site: Site; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<CreateForm>({
+    mode: '',
+    from: '',
+    to: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('redirects.store', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        form.reset();
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create Redirect</DialogTitle>
+          <DialogDescription className="sr-only">Create new Redirect</DialogDescription>
+        </DialogHeader>
+        <Form className="p-4" id="create-redirect-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="mode">Mode</Label>
+              <Select onValueChange={(value) => form.setData('mode', value)} defaultValue={form.data.mode}>
+                <SelectTrigger id="mode">
+                  <SelectValue placeholder="Select mode" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="301">301 - Moved Permanently</SelectItem>
+                  <SelectItem value="302">302 - Found</SelectItem>
+                  <SelectItem value="307">307 - Temporary Redirect</SelectItem>
+                  <SelectItem value="308">308 - Permanent Redirect</SelectItem>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.mode} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="from">From</Label>
+              <Input
+                type="text"
+                id="from"
+                name="from"
+                value={form.data.from}
+                onChange={(e) => form.setData('from', e.target.value)}
+                placeholder="/path/to/redirect"
+              />
+              <InputError message={form.errors.from} />
+            </FormField>
+            <FormField>
+              <Label htmlFor="to">To</Label>
+              <Input
+                type="text"
+                id="to"
+                name="to"
+                value={form.data.to}
+                onChange={(e) => form.setData('to', e.target.value)}
+                placeholder="https://new-url"
+              />
+              <InputError message={form.errors.to} />
+            </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/redirects/index.tsx

@@ -0,0 +1,50 @@
+import ServerLayout from '@/layouts/server/layout';
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import { PaginatedData } from '@/types';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { BookOpenIcon, PlusIcon } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/redirects/components/columns';
+import { Redirect } from '@/types/redirect';
+import CreateRedirect from '@/pages/redirects/components/create-redirect';
+import { Site } from '@/types/site';
+
+export default function Redirects() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    redirects: PaginatedData<Redirect>;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Redirect - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Redirect" description="Here you can Redirect certificates" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/sites/redirects" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            <CreateRedirect site={page.props.site}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">Create redirect</span>
+              </Button>
+            </CreateRedirect>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.redirects} />
+      </Container>
+    </ServerLayout>
+  );
+}

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

@@ -21,7 +21,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSepara
 import { useForm } from '@inertiajs/react';
 import FormSuccessful from '@/components/form-successful';
 
-function View({ serverLog }: { serverLog: ServerLog }) {
+export function View({ serverLog, children }: { serverLog: ServerLog; children?: ReactNode }) {
   const [open, setOpen] = useState(false);
 
   const query = useQuery({
@@ -47,9 +47,7 @@ function View({ serverLog }: { serverLog: ServerLog }) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
+      <DialogTrigger asChild>{children ? children : <DropdownMenuItem onSelect={(e) => e.preventDefault()}>View</DropdownMenuItem>}</DialogTrigger>
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>View</DropdownMenuItem>
-      </DialogTrigger>
       <DialogContent className="sm:max-w-5xl">
         <DialogHeader>
           <DialogTitle>View Log</DialogTitle>
@@ -72,7 +70,7 @@ function View({ serverLog }: { serverLog: ServerLog }) {
   );
 }
 
-function Download({ serverLog, children }: { serverLog: ServerLog; children: ReactNode }) {
+export function Download({ serverLog, children }: { serverLog: ServerLog; children: ReactNode }) {
   return (
     <a href={route('logs.download', { server: serverLog.server_id, log: serverLog.id })} target="_blank">
       {children}

resources/js/pages/server-settings/index.tsx

@@ -13,6 +13,7 @@ import DateTime from '@/components/date-time';
 import CopyableBadge from '@/components/copyable-badge';
 import { Input } from '@/components/ui/input';
 import React, { useState } from 'react';
+import DeleteServer from '@/pages/servers/components/delete-server';
 
 export default function Databases() {
   const page = usePage<{
@@ -208,6 +209,22 @@ export default function Databases() {
             </div>
           </CardContent>
         </Card>
+
+        <Card className="border-destructive/50">
+          <CardHeader>
+            <CardTitle>Delete server</CardTitle>
+            <CardDescription>Here you can delete the server.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 p-4">
+              <p>please note that this action is irreversible and will delete all data associated with the server.</p>
+
+              <DeleteServer server={page.props.server}>
+                <Button variant="destructive">Delete server</Button>
+              </DeleteServer>
+            </div>
+          </CardContent>
+        </Card>
       </Container>
     </ServerLayout>
   );

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

@@ -1,8 +1,7 @@
 import { Server } from '@/types/server';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
-import DeleteServer from '@/pages/servers/components/delete-server';
 import RebootServer from '@/pages/servers/components/reboot-server';
 import { useForm } from '@inertiajs/react';
 import UpdateServer from '@/pages/servers/components/update-server';
@@ -69,12 +68,6 @@ export default function ServerActions({ server }: { server: Server }) {
             Update
           </DropdownMenuItem>
         </UpdateServer>
-        <DropdownMenuSeparator />
-        <DeleteServer server={server}>
-          <DropdownMenuItem onSelect={(e) => e.preventDefault()} variant="destructive">
-            Delete Server
-          </DropdownMenuItem>
-        </DeleteServer>
       </DropdownMenuContent>
     </DropdownMenu>
   );

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

@@ -80,7 +80,7 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
               <Tooltip>
                 <TooltipTrigger asChild>
                   <div className="flex items-center space-x-1">
-                    <LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'animate-spin' : '')} />
+                    <LoaderCircleIcon className={cn('size-4', server.status === 'installing' ? 'text-brand animate-spin' : '')} />
                     <div>%{parseInt(server.progress || '0')}</div>
                     {server.status === 'installation_failed' && (
                       <Badge className="ml-1" variant={server.status_color}>
@@ -115,7 +115,7 @@ export default function ServerHeader({ server, site }: { server: Server; site?:
               <Tooltip>
                 <TooltipTrigger asChild>
                   <div className="flex items-center space-x-1">
-                    <LoaderCircleIcon className={cn('size-4', site.status === 'installing' ? 'animate-spin' : '')} />
+                    <LoaderCircleIcon className={cn('size-4', site.status === 'installing' ? 'text-brand animate-spin' : '')} />
                     <div>%{parseInt(site.progress.toString() || '0')}</div>
                     {site.status === 'installation_failed' && (
                       <Badge className="ml-1" variant={site.status_color}>

resources/js/pages/site-settings/components/branch.tsx

@@ -0,0 +1,70 @@
+import { FormEvent, ReactNode, useState } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Site } from '@/types/site';
+
+export default function ChangeBranch({ site, children }: { site: Site; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    branch: string;
+  }>({
+    branch: site.branch || '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('site-settings.update-branch', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change branch</DialogTitle>
+          <DialogDescription className="sr-only">Change site's source control branch.</DialogDescription>
+        </DialogHeader>
+
+        <Form id="change-branch-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="branch">Branch</Label>
+              <Input id="branch" value={form.data.branch} onChange={(e) => form.setData('branch', e.target.value)} placeholder="main" />
+              <InputError message={form.errors.branch} />
+            </FormField>
+          </FormFields>
+        </Form>
+
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+
+          <Button form="change-branch-form" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/site-settings/components/delete-site.tsx

@@ -0,0 +1,73 @@
+import { FormEvent, ReactNode } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import InputError from '@/components/ui/input-error';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Site } from '@/types/site';
+import siteHelper from '@/lib/site-helper';
+
+export default function DeleteSite({ site, children }: { site: Site; children: ReactNode }) {
+  const form = useForm({
+    domain: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.delete(route('site-settings.destroy', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        siteHelper.storeSite();
+      },
+    });
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete {site.domain}</DialogTitle>
+          <DialogDescription className="sr-only">Delete site and its resources.</DialogDescription>
+        </DialogHeader>
+
+        <p className="p-4">
+          Are you sure you want to delete this site: <strong>{site.domain}</strong>? All resources associated with this site will be deleted and this
+          action cannot be undone.
+        </p>
+
+        <Form id="delete-site-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="domain">Domain</Label>
+              <Input id="domain" value={form.data.domain} onChange={(e) => form.setData('domain', e.target.value)} />
+              <InputError message={form.errors.domain} />
+            </FormField>
+          </FormFields>
+        </Form>
+
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+
+          <Button form="delete-site-form" variant="destructive" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
+            Delete site
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/site-settings/components/php-version.tsx

@@ -0,0 +1,75 @@
+import { FormEvent, ReactNode, useState } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Site } from '@/types/site';
+import ServiceVersionSelect from '@/pages/services/components/service-version-select';
+
+export default function ChangePHPVersion({ site, children }: { site: Site; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    version: string;
+  }>({
+    version: site.php_version || '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('site-settings.update-php-version', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change PHP version</DialogTitle>
+          <DialogDescription className="sr-only">Change site's php version.</DialogDescription>
+        </DialogHeader>
+
+        <Form id="change-php-version-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="versino">PHP version</Label>
+              <ServiceVersionSelect
+                serverId={site.server_id}
+                service="php"
+                value={form.data.version}
+                onValueChange={(value) => form.setData('version', value)}
+              />
+              <InputError message={form.errors.version} />
+            </FormField>
+          </FormFields>
+        </Form>
+
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+
+          <Button form="change-php-version-form" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/site-settings/components/source-control.tsx

@@ -0,0 +1,70 @@
+import { FormEvent, ReactNode, useState } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { LoaderCircleIcon } from 'lucide-react';
+import { Site } from '@/types/site';
+import SourceControlSelect from '@/pages/source-controls/components/source-control-select';
+
+export default function ChangeSourceControl({ site, children }: { site: Site; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    source_control: string;
+  }>({
+    source_control: site.source_control_id.toString() || '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('site-settings.update-source-control', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Change source control</DialogTitle>
+          <DialogDescription className="sr-only">Change site's source control.</DialogDescription>
+        </DialogHeader>
+
+        <Form id="change-php-version-form" onSubmit={submit} className="p-4">
+          <FormFields>
+            <FormField>
+              <Label htmlFor="versino">PHP version</Label>
+              <SourceControlSelect value={form.data.source_control} onValueChange={(value) => form.setData('source_control', value)} />
+              <InputError message={form.errors.source_control} />
+            </FormField>
+          </FormFields>
+        </Form>
+
+        <DialogFooter className="gap-2">
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+
+          <Button form="change-php-version-form" disabled={form.processing}>
+            {form.processing && <LoaderCircleIcon className="size-4 animate-spin" />}
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/site-settings/components/vhost.tsx

@@ -0,0 +1,104 @@
+import React, { FormEvent, ReactNode, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Form } from '@/components/ui/form';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+import { registerCaddyLanguage, registerNginxLanguage } from '@/lib/editor';
+import { useAppearance } from '@/hooks/use-appearance';
+import { Site } from '@/types/site';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { StatusRipple } from '@/components/status-ripple';
+
+export default function VHost({ site, children }: { site: Site; children: ReactNode }) {
+  const { getActualAppearance } = useAppearance();
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    vhost: string;
+  }>({
+    vhost: '',
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('site-settings.update-vhost', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  const query = useQuery({
+    queryKey: ['site-settings.vhost', site.server_id, site.id],
+    queryFn: async () => {
+      const response = await axios.get(
+        route('site-settings.vhost', {
+          server: site.server_id,
+          site: site.id,
+        }),
+      );
+      if (response.data?.vhost) {
+        form.setData('vhost', response.data.vhost);
+      }
+      return response.data;
+    },
+    retry: false,
+    enabled: open,
+  });
+
+  const monaco = useMonaco();
+  registerNginxLanguage(monaco);
+  registerCaddyLanguage(monaco);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="sm:max-w-5xl">
+        <SheetHeader>
+          <SheetTitle>Edit virtual host file</SheetTitle>
+          <SheetDescription className="sr-only">Edit virtual host file.</SheetDescription>
+        </SheetHeader>
+        <Form id="update-vhost-form" className="h-full" onSubmit={submit}>
+          {query.isSuccess ? (
+            <Editor
+              defaultLanguage={site.webserver}
+              defaultValue={query.data.vhost}
+              theme={getActualAppearance() === 'dark' ? 'vs-dark' : 'vs'}
+              className="h-full"
+              onChange={(value) => form.setData('vhost', value ?? '')}
+              options={{
+                fontSize: 15,
+              }}
+            />
+          ) : (
+            <Skeleton className="h-full w-full rounded-none" />
+          )}
+          {/*make alert center with absolute position*/}
+          <div className="absolute! right-0 bottom-[80px] left-0 z-10 mx-auto max-w-5xl px-6">
+            <Alert variant="destructive">
+              <AlertDescription className="flex items-center gap-2">
+                <StatusRipple variant="destructive" />
+                <p>Nginx vhost file will get reset if you generate or modify SSLs, Aliases, or create/delete site redirects.</p>
+              </AlertDescription>
+            </Alert>
+          </div>
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button form="update-vhost-form" disabled={form.processing || query.isLoading} onClick={submit} className="ml-2">
+              {(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
+              Save
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

resources/js/pages/site-settings/index.tsx

@@ -0,0 +1,167 @@
+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 } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import DateTime from '@/components/date-time';
+import React from 'react';
+import { Site } from '@/types/site';
+import { Badge } from '@/components/ui/badge';
+import ChangeBranch from '@/pages/site-settings/components/branch';
+import { SourceControl } from '@/types/source-control';
+import CopyableBadge from '@/components/copyable-badge';
+import ChangePHPVersion from '@/pages/site-settings/components/php-version';
+import DeleteSite from '@/pages/site-settings/components/delete-site';
+import VHost from '@/pages/site-settings/components/vhost';
+import ChangeSourceControl from '@/pages/site-settings/components/source-control';
+
+export default function Databases() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    sourceControl?: SourceControl;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`Settings - ${page.props.site.domain}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Settings" description="Here you can manage your server's settings" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/sites/settings" 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 details</CardTitle>
+              <CardDescription>Update site details</CardDescription>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between p-4">
+              <span>ID</span>
+              <span className="text-muted-foreground">{page.props.site.id}</span>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Domain</span>
+              <a href={page.props.site.url} target="_blank" className="text-muted-foreground hover:underline">
+                {page.props.site.domain}
+              </a>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Type</span>
+              <span className="text-muted-foreground">{page.props.site.type}</span>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Source control</span>
+              {page.props.site.source_control_id ? (
+                <ChangeSourceControl site={page.props.site}>
+                  <Button variant="outline" className="h-6">
+                    {page.props.sourceControl?.provider}
+                  </Button>
+                </ChangeSourceControl>
+              ) : (
+                <span className="text-muted-foreground">-</span>
+              )}
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Repository</span>
+              <span className="text-muted-foreground">{page.props.site.repository || '-'}</span>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Branch</span>
+              {page.props.site.source_control_id ? (
+                <ChangeBranch site={page.props.site}>
+                  <Button variant="outline" className="h-6">
+                    {page.props.site.branch}
+                  </Button>
+                </ChangeBranch>
+              ) : (
+                '-'
+              )}
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>VHost</span>
+              <VHost site={page.props.site}>
+                <Button variant="outline" className="h-6">
+                  Edit VHost
+                </Button>
+              </VHost>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Web directory</span>
+              <span className="text-muted-foreground">{page.props.site.web_directory || '-'}</span>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Path</span>
+              <CopyableBadge text={page.props.site.path} />
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>PHP version</span>
+              {page.props.site.php_version ? (
+                <ChangePHPVersion site={page.props.site}>
+                  <Button variant="outline" className="h-6">
+                    {page.props.site.php_version}
+                  </Button>
+                </ChangePHPVersion>
+              ) : (
+                <span className="text-muted-foreground">-</span>
+              )}
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Status</span>
+              <Badge variant={page.props.site.status_color}>{page.props.site.status}</Badge>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between p-4">
+              <span>Created at</span>
+              <span className="text-muted-foreground">
+                <DateTime date={page.props.site.created_at} />
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border-destructive/50">
+          <CardHeader>
+            <CardTitle>Delete site</CardTitle>
+            <CardDescription>Here you can delete the site.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 p-4">
+              <p>please note that this action is irreversible and will delete all data associated with the site.</p>
+
+              <DeleteSite site={page.props.site}>
+                <Button variant="destructive">Delete site</Button>
+              </DeleteSite>
+            </div>
+          </CardContent>
+        </Card>
+      </Container>
+    </ServerLayout>
+  );
+}

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

@@ -56,7 +56,7 @@ export default function getColumns(server?: Server): ColumnDef<Site>[] {
       cell: ({ row }) => {
         return (
           <div className="flex items-center justify-end">
-            <Link href={route('sites.show', { server: row.original.server_id, site: row.original.id })} prefetch>
+            <Link href={route('application', { server: row.original.server_id, site: row.original.id })} prefetch>
               <Button variant="outline" size="sm">
                 <EyeIcon />
               </Button>

resources/js/pages/sites/logs.tsx

@@ -0,0 +1,36 @@
+import { Head, usePage } from '@inertiajs/react';
+import { Site } from '@/types/site';
+import ServerLayout from '@/layouts/server/layout';
+import { Server } from '@/types/server';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import React from 'react';
+import { PaginatedData } from '@/types';
+import { ServerLog } from '@/types/server-log';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/server-logs/components/columns';
+
+type Page = {
+  server: Server;
+  site: Site;
+  logs: PaginatedData<ServerLog>;
+};
+
+export default function ShowSite() {
+  const page = usePage<Page>();
+
+  return (
+    <ServerLayout>
+      <Head title={`${page.props.site.domain} - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="Logs" description="Here you can see your site's logs" />
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.logs} />
+      </Container>
+    </ServerLayout>
+  );
+}

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

@@ -0,0 +1,189 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon, LockIcon, LockOpenIcon, MoreVerticalIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import DateTime from '@/components/date-time';
+import { SSL } from '@/types/ssl';
+import moment from 'moment';
+import { View } from '@/pages/server-logs/components/columns';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import FormSuccessful from '@/components/form-successful';
+
+function Delete({ ssl }: { ssl: SSL }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('ssls.destroy', { server: ssl.server_id, site: ssl.site_id, ssl: ssl.id }), {
+      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 SSL</DialogTitle>
+          <DialogDescription className="sr-only">Delete SSL</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to delete this certificate?</p>
+        </div>
+        <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 ToggleActivate({ ssl }: { ssl: SSL }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    const url = ssl.is_active
+      ? route('ssls.deactivate', { server: ssl.server_id, site: ssl.site_id, ssl: ssl.id })
+      : route('ssls.activate', { server: ssl.server_id, site: ssl.site_id, ssl: ssl.id });
+    form.post(url, {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>{ssl.is_active ? 'Deactivate' : 'Activate'}</DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{ssl.is_active ? 'Deactivate' : 'Activate'} SSL</DialogTitle>
+          <DialogDescription className="sr-only">{ssl.is_active ? 'Deactivate' : 'Activate'} SSL</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to {ssl.is_active ? 'deactivate' : 'activate'} this certificate?</p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant={ssl.is_active ? 'destructive' : 'default'} disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            {ssl.is_active ? 'Deactivate' : 'Activate'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const columns: ColumnDef<SSL>[] = [
+  {
+    accessorKey: 'id',
+    header: 'Is active',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return row.original.is_active ? <LockIcon className="text-success" /> : <LockOpenIcon />;
+    },
+  },
+  {
+    accessorKey: 'type',
+    header: 'Type',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    accessorKey: 'expires_at',
+    header: 'Expires at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      const targetDate = moment(row.original.expires_at);
+      const today = moment();
+      const daysRemaining = targetDate.diff(today, 'days');
+
+      return (
+        <div className="flex items-center gap-2">
+          <DateTime date={row.original.expires_at} /> ({daysRemaining} days remaining)
+        </div>
+      );
+    },
+  },
+  {
+    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">
+              <ToggleActivate ssl={row.original} />
+              {row.original.log && (
+                <>
+                  <View serverLog={row.original.log}>
+                    <DropdownMenuItem onSelect={(e) => e.preventDefault()}>View Log</DropdownMenuItem>
+                  </View>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+              <Delete ssl={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/ssls/components/create-ssl.tsx

@@ -0,0 +1,141 @@
+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 { Checkbox } from '@/components/ui/checkbox';
+import { Site } from '@/types/site';
+import { Textarea } from '@/components/ui/textarea';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+type CreateForm = {
+  type: string;
+  email: string;
+  certificate: string;
+  private: string;
+  expires_at: string;
+  aliases: boolean;
+};
+
+export default function CreateSSL({ site, children }: { site: Site; children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<CreateForm>({
+    type: '',
+    email: '',
+    certificate: '',
+    private: '',
+    expires_at: '',
+    aliases: false,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.post(route('ssls.store', { server: site.server_id, site: site.id }), {
+      onSuccess: () => {
+        form.reset();
+        setOpen(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create SSL</DialogTitle>
+          <DialogDescription className="sr-only">Create new SSL</DialogDescription>
+        </DialogHeader>
+        <Form className="p-4" id="create-ssl-form" onSubmit={submit}>
+          <FormFields>
+            <FormField>
+              <Label htmlFor="type">Type</Label>
+              <Select onValueChange={(value) => form.setData('type', value)} defaultValue={form.data.type}>
+                <SelectTrigger id="type">
+                  <SelectValue placeholder="Select type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="letsencrypt">Let's Encrypt</SelectItem>
+                  <SelectItem value="custom">Custom</SelectItem>
+                </SelectContent>
+              </Select>
+              <InputError message={form.errors.type} />
+            </FormField>
+            {form.data.type === 'letsencrypt' && (
+              <>
+                <Alert>
+                  <AlertDescription>
+                    <p>
+                      Let's Encrypt has rate limits. Read more about them{' '}
+                      <a href="https://letsencrypt.org/docs/rate-limits/" target="_blank" className="underline">
+                        here
+                      </a>
+                      .
+                    </p>
+                  </AlertDescription>
+                </Alert>
+                <FormField>
+                  <Label htmlFor="email">Email</Label>
+                  <Input type="text" id="email" name="email" value={form.data.email} onChange={(e) => form.setData('email', e.target.value)} />
+                  <InputError message={form.errors.email} />
+                </FormField>
+              </>
+            )}
+            {form.data.type === 'custom' && (
+              <>
+                <FormField>
+                  <Label htmlFor="certificate">Certificate</Label>
+                  <Textarea
+                    id="certificate"
+                    name="certificate"
+                    value={form.data.certificate}
+                    onChange={(e) => form.setData('certificate', e.target.value)}
+                  />
+                  <InputError message={form.errors.certificate} />
+                </FormField>
+                <FormField>
+                  <Label htmlFor="private">Private key</Label>
+                  <Textarea id="private" name="private" value={form.data.private} onChange={(e) => form.setData('private', e.target.value)} />
+                  <InputError message={form.errors.private} />
+                </FormField>
+              </>
+            )}
+            <FormField>
+              <div className="flex items-center space-x-3">
+                <Checkbox id="aliases" name="aliases" checked={form.data.aliases} onClick={() => form.setData('aliases', !form.data.aliases)} />
+                <Label htmlFor="aliases">Set SSL for site's aliases as well</Label>
+              </div>
+              <InputError message={form.errors.aliases} />
+            </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/ssls/components/force-ssl.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+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 { Site } from '@/types/site';
+
+export default function ToggleForceSSL({ site }: { site: Site }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    const url = site.force_ssl
+      ? route('ssls.disable-force-ssl', { server: site.server_id, site: site.id })
+      : route('ssls.enable-force-ssl', { server: site.server_id, site: site.id });
+    form.post(url, {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>{site.force_ssl ? 'Disable' : 'Enable'} Force-SSL</DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{site.force_ssl ? 'Disable' : 'Enable'} Force-SSL</DialogTitle>
+          <DialogDescription className="sr-only">{site.force_ssl ? 'Disable' : 'Enable'} Force-SSL</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2 p-4">
+          <p>Are you sure you want to {site.force_ssl ? 'disable' : 'enable'} force-ssl?</p>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant={site.force_ssl ? 'destructive' : 'default'} disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            {site.force_ssl ? 'Disable' : 'Enable'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/ssls/index.tsx

@@ -0,0 +1,64 @@
+import ServerLayout from '@/layouts/server/layout';
+import { Head, usePage } from '@inertiajs/react';
+import { Server } from '@/types/server';
+import { PaginatedData } from '@/types';
+import Container from '@/components/container';
+import HeaderContainer from '@/components/header-container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { BookOpenIcon, MoreHorizontalIcon, PlusIcon } from 'lucide-react';
+import { DataTable } from '@/components/data-table';
+import { columns } from '@/pages/ssls/components/columns';
+import { SSL } from '@/types/ssl';
+import CreateSSL from '@/pages/ssls/components/create-ssl';
+import { Site } from '@/types/site';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import React from 'react';
+import ToggleForceSSL from '@/pages/ssls/components/force-ssl';
+
+export default function Ssls() {
+  const page = usePage<{
+    server: Server;
+    site: Site;
+    ssls: PaginatedData<SSL>;
+  }>();
+
+  return (
+    <ServerLayout>
+      <Head title={`SSL - ${page.props.server.name}`} />
+
+      <Container className="max-w-5xl">
+        <HeaderContainer>
+          <Heading title="SSL" description="Here you can SSL certificates" />
+          <div className="flex items-center gap-2">
+            <a href="https://vitodeploy.com/docs/sites/ssl" target="_blank">
+              <Button variant="outline">
+                <BookOpenIcon />
+                <span className="hidden lg:block">Docs</span>
+              </Button>
+            </a>
+            <CreateSSL site={page.props.site}>
+              <Button>
+                <PlusIcon />
+                <span className="hidden lg:block">New SSL</span>
+              </Button>
+            </CreateSSL>
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline">
+                  <span className="sr-only">Open menu</span>
+                  <MoreHorizontalIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <ToggleForceSSL site={page.props.site} />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </HeaderContainer>
+
+        <DataTable columns={columns} paginatedData={page.props.ssls} />
+      </Container>
+    </ServerLayout>
+  );
+}

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

@@ -21,8 +21,9 @@ import { Worker } from '@/types/worker';
 import { SharedData } from '@/types';
 import { Server } from '@/types/server';
 import { Switch } from '@/components/ui/switch';
+import { Site } from '@/types/site';
 
-export default function WorkerForm({ serverId, worker, children }: { serverId: number; worker?: Worker; children: ReactNode }) {
+export default function WorkerForm({ serverId, site, worker, children }: { serverId: number; site?: Site; worker?: Worker; children: ReactNode }) {
   const page = usePage<SharedData & { server: Server }>();
   const [open, setOpen] = useState(false);
   const form = useForm<{
@@ -51,7 +52,7 @@ export default function WorkerForm({ serverId, worker, children }: { serverId: n
       return;
     }
 
-    form.post(route('workers.store', { server: serverId }), {
+    form.post(route('workers.store', { server: serverId, site: site?.id }), {
       onSuccess: () => {
         setOpen(false);
         form.reset();

resources/js/pages/workers/index.tsx

@@ -11,11 +11,13 @@ 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';
+import { Site } from '@/types/site';
 
 export default function WorkerIndex() {
   const page = usePage<{
     server: Server;
     workers: PaginatedData<Worker>;
+    site?: Site;
   }>();
 
   return (
@@ -32,7 +34,7 @@ export default function WorkerIndex() {
                 <span className="hidden lg:block">Docs</span>
               </Button>
             </a>
-            <WorkerForm serverId={page.props.server.id}>
+            <WorkerForm serverId={page.props.server.id} site={page.props.site}>
               <Button>
                 <PlusIcon />
                 <span className="hidden lg:block">Create</span>

resources/js/types/command-execution.d.ts

@@ -0,0 +1,16 @@
+import { ServerLog } from '@/types/server-log';
+
+export interface CommandExecution {
+  id: number;
+  command_id: number;
+  server_id: number;
+  user_id: number;
+  server_log_id: number;
+  log: ServerLog;
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+
+  [key: string]: unknown;
+}

resources/js/types/command.d.ts

@@ -0,0 +1,12 @@
+export interface Command {
+  id: number;
+  server_id: number;
+  site_id: number;
+  name: string;
+  command: string;
+  variables: string[];
+  created_at: string;
+  updated_at: string;
+
+  [key: string]: unknown;
+}

resources/js/types/deployment.d.ts

@@ -0,0 +1,23 @@
+import { ServerLog } from '@/types/server-log';
+
+export interface Deployment {
+  id: number;
+  site_id: number;
+  deployment_script_id: number;
+  log_id: number;
+  log: ServerLog;
+  commit_id: string;
+  commit_id_short: string;
+  commit_data: {
+    name?: string;
+    email?: string;
+    message?: string;
+    url?: string;
+  };
+  status: string;
+  status_color: 'gray' | 'success' | 'info' | 'warning' | 'danger';
+  created_at: string;
+  updated_at: string;
+
+  [key: string]: unknown;
+}

resources/js/types/index.d.ts

@@ -26,10 +26,11 @@ export interface NavItem {
   title: string;
   href: string;
   onlyActivePath?: string;
-  icon?: LucideIcon | string | null;
+  icon?: LucideIcon | null;
   isActive?: boolean;
   isDisabled?: boolean;
   children?: NavItem[];
+  hidden?: boolean;
 }
 
 export interface Configs {

resources/js/types/load-balancer-server.d.ts

@@ -0,0 +1,11 @@
+export interface LoadBalancerServer {
+  load_balancer_id: number;
+  ip: number;
+  port: number;
+  weight: boolean;
+  backup: string;
+  created_at: string;
+  updated_at: string;
+
+  [key: string]: unknown;
+}