From 7bd0b4cd3e493e9580f9e171b96c75b5f55aed71 Mon Sep 17 00:00:00 2001
From: Adelino Ngomacha <adelino.ngomacha@vm.co.mz>
Date: Sat, 29 Jun 2024 15:00:38 +0200
Subject: [PATCH] feat: add services form page

---
 .../Dashboard/Settings/Forms/ServicesForm.vue | 186 ++++++++++
 .../Settings/SettingsFormManager.vue          |   2 +
 libs/components/Dashboard/SettingsSidebar.vue |   4 +-
 .../views/dashboard/settings/services.vue     | 319 ------------------
 storage/framework/types/components.d.ts       |   3 +
 storage/framework/types/dashboard-router.d.ts |   1 -
 6 files changed, 193 insertions(+), 322 deletions(-)
 create mode 100644 libs/components/Dashboard/Settings/Forms/ServicesForm.vue
 delete mode 100644 resources/views/dashboard/settings/services.vue

diff --git a/libs/components/Dashboard/Settings/Forms/ServicesForm.vue b/libs/components/Dashboard/Settings/Forms/ServicesForm.vue
new file mode 100644
index 0000000000..5b782a6e42
--- /dev/null
+++ b/libs/components/Dashboard/Settings/Forms/ServicesForm.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-y divide-gray-900/10">
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              AWS Settings
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your AWS settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Account ID</label>
+                <div class="mt-2">
+                  <input id="local-driver" type="text" name="local-driver" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Region</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="us-east-1" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              Algolia Settings
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your Algolia settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              Meili Search Settings
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your Meili Search settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              Lemon Squeezy Settings
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your Lemon Squeezy settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              Stripe Settings
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your Stripe settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <button type="button" class="text-sm font-semibold leading-6 text-gray-900">
+        Cancel
+      </button>
+      <Button
+        type="submit"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      >
+        Save
+      </Button>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/libs/components/Dashboard/Settings/SettingsFormManager.vue b/libs/components/Dashboard/Settings/SettingsFormManager.vue
index 4d1a8f1086..78635e44b3 100644
--- a/libs/components/Dashboard/Settings/SettingsFormManager.vue
+++ b/libs/components/Dashboard/Settings/SettingsFormManager.vue
@@ -14,6 +14,7 @@ import LibraryForm from './Forms/LibraryForm.vue'
 import QueueForm from './Forms/QueueForm.vue'
 import SearchEngineForm from './Forms/SearchEngineForm.vue'
 import SecurityForm from './Forms/SecurityForm.vue'
+import ServicesForm from './Forms/ServicesForm.vue'
 
 const props = defineProps({
   name: String,
@@ -138,6 +139,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
         <template v-else-if="name === 'queue'"><QueueForm /></template>
         <template v-else-if="name === 'search-engine'"><SearchEngineForm /></template>
         <template v-else-if="name === 'security'"><SecurityForm /></template>
+        <template v-else-if="name === 'services'"><ServicesForm /></template>
         <template v-else>
           <div class="text-center">
             <div class="i-heroicons-cog-8-tooth text-gray-400 w-12 h-12 dark:text-gray-200 transition-all duration-150 ease-in-out" />
diff --git a/libs/components/Dashboard/SettingsSidebar.vue b/libs/components/Dashboard/SettingsSidebar.vue
index 5bc4578055..f740a11e4f 100644
--- a/libs/components/Dashboard/SettingsSidebar.vue
+++ b/libs/components/Dashboard/SettingsSidebar.vue
@@ -177,10 +177,10 @@
           </RouterLink>
         </li>
         <li>
-          <RouterLink to="service" class="sidebar-links group flex items-center justify-between">
+          <RouterLink to="services" class="sidebar-links group flex items-center justify-between">
             <div class="flex items-center gap-x-2">
               <div class="i-heroicons-briefcase text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
-              Service
+              Services
             </div>
             <div class="i-heroicons-chevron-right text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out self-end" />
           </RouterLink>
diff --git a/resources/views/dashboard/settings/services.vue b/resources/views/dashboard/settings/services.vue
deleted file mode 100644
index bfb4c3028d..0000000000
--- a/resources/views/dashboard/settings/services.vue
+++ /dev/null
@@ -1,319 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <SettingsHeader />
-
-  <main class="px-4 pt-16 sm:px-6 lg:px-8 py-8">
-    <ul
-      role="list"
-      class="grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8"
-    >
-      <li class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
-        <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6 dark:bg-blue-gray-700">
-          <img
-            src="/meilisearch.svg"
-            alt="Tuple"
-            class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10"
-          >
-          <div class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
-            Meilisearch
-          </div>
-          <div class="relative ml-auto">
-            <button
-              id="options-menu-0-button"
-              type="button"
-              class="-m-2.5 block p-2.5 text-gray-400 hover:text-blue-gray-500"
-              aria-expanded="false"
-              aria-haspopup="true"
-            >
-              <span class="sr-only">Open options</span>
-
-              <div class="i-heroicons-ellipsis-horizontal h-5 w-5" />
-            </button>
-
-            <!--
-          Dropdown menu, show/hide based on menu state.
-
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-            <div
-              class="absolute hidden right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="options-menu-0-button"
-              tabindex="-1"
-            >
-              <!-- Active: "bg-gray-50", Not Active: "" -->
-              <a
-                id="options-menu-0-item-0"
-                href="#"
-                class="block px-3 py-1 text-sm leading-6 text-gray-900"
-                role="menuitem"
-                tabindex="-1"
-              >View<span class="sr-only">, Tuple</span></a>
-              <a
-                id="options-menu-0-item-1"
-                href="#"
-                class="block px-3 py-1 text-sm leading-6 text-gray-900"
-                role="menuitem"
-                tabindex="-1"
-              >Edit<span class="sr-only">, Tuple</span></a>
-            </div>
-          </div>
-        </div>
-        <dl class="-my-3 divide-y bg-white divide-gray-100 px-6 py-4 text-sm leading-6">
-          <div class="flex justify-between gap-x-4 py-3">
-            <dt class="text-gray-500">
-              App key
-            </dt>
-            <dd class="text-gray-700">
-              <span> •••• •••• •••• 5173 </span>
-            </dd>
-          </div>
-          <div class="flex justify-between gap-x-4 py-3">
-            <dt class="text-gray-500">
-              Secret key
-            </dt>
-            <dd class="flex items-start gap-x-2">
-              <span> •••• •••• •••• 5173 </span>
-            </dd>
-          </div>
-        </dl>
-      </li>
-      <li class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
-        <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6 dark:bg-blue-gray-700">
-          <img
-            src="/stripe.png"
-            alt="Tuple"
-            class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10"
-          >
-          <div class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
-            Stripe
-          </div>
-          <div class="relative ml-auto">
-            <button
-              id="options-menu-0-button"
-              type="button"
-              class="-m-2.5 block p-2.5 text-gray-400 hover:text-blue-gray-500"
-              aria-expanded="false"
-              aria-haspopup="true"
-            >
-              <span class="sr-only">Open options</span>
-              <div class="i-heroicons-ellipsis-horizontal h-5 w-5" />
-            </button>
-
-            <!--
-          Dropdown menu, show/hide based on menu state.
-
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-            <div
-              class="absolute hidden right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="options-menu-0-button"
-              tabindex="-1"
-            >
-              <!-- Active: "bg-gray-50", Not Active: "" -->
-              <a
-                id="options-menu-0-item-0"
-                href="#"
-                class="block px-3 py-1 text-sm leading-6 text-gray-900"
-                role="menuitem"
-                tabindex="-1"
-              >View<span class="sr-only">, Tuple</span></a>
-              <a
-                id="options-menu-0-item-1"
-                href="#"
-                class="block px-3 py-1 text-sm leading-6 text-gray-900"
-                role="menuitem"
-                tabindex="-1"
-              >Edit<span class="sr-only">, Tuple</span></a>
-            </div>
-          </div>
-        </div>
-        <dl class="-my-3 divide-y bg-white divide-gray-100 px-6 py-4 text-sm leading-6">
-          <div class="flex justify-between gap-x-4 py-3">
-            <dt class="text-gray-500">
-              App key
-            </dt>
-            <dd class="text-gray-700">
-              <span> •••• •••• •••• 5173 </span>
-            </dd>
-          </div>
-          <div class="flex justify-between gap-x-4 py-3">
-            <dt class="text-gray-500">
-              Secret key
-            </dt>
-            <dd class="flex items-start gap-x-2">
-              <span> •••• •••• •••• 5173 </span>
-            </dd>
-          </div>
-        </dl>
-      </li>
-      <li class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
-        <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6 dark:bg-blue-gray-700">
-          <img
-            src="/planetscale.png"
-            alt="Tuple"
-            class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10"
-          >
-          <div class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
-            PlanetScale
-          </div>
-          <div class="relative ml-auto">
-            <button
-              id="options-menu-0-button"
-              type="button"
-              class="-m-2.5 block p-2.5 text-gray-400 hover:text-blue-gray-500"
-              aria-expanded="false"
-              aria-haspopup="true"
-            >
-              <span class="sr-only">Open options</span>
-              <div class="i-heroicons-ellipsis-horizontal h-5 w-5" />
-            </button>
-
-            <!--
-          Dropdown menu, show/hide based on menu state.
-
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-            <div
-              class="absolute hidden right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="options-menu-0-button"
-              tabindex="-1"
-            >
-              <!-- Active: "bg-gray-50", Not Active: "" -->
-              <a
-                id="options-menu-0-item-0"
-                href="#"
-                class="block px-3 py-1 text-sm leading-6 text-gray-900"
-                role="menuitem"
-                tabindex="-1"
-              >View<span class="sr-only">, Tuple</span></a>
-              <a
-                id="options-menu-0-item-1"
-                href="#"
-                class="block px-3 py-1 text-sm leading-6 text-gray-900"
-                role="menuitem"
-                tabindex="-1"
-              >Edit<span class="sr-only">, Tuple</span></a>
-            </div>
-          </div>
-        </div>
-        <dl class="-my-3 bg-white divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
-          <div class="flex justify-between gap-x-4 py-3">
-            <dt class="text-gray-500">
-              App key
-            </dt>
-            <dd class="text-gray-700">
-              <span> •••• •••• •••• 5173 </span>
-            </dd>
-          </div>
-          <div class="flex justify-between gap-x-4 py-3">
-            <dt class="text-gray-500">
-              Secret key
-            </dt>
-            <dd class="flex items-start gap-x-2">
-              <span> •••• •••• •••• 5173 </span>
-            </dd>
-          </div>
-        </dl>
-      </li>
-      <li class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-600">
-        <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6 dark:bg-blue-gray-700">
-          <img
-            src="/aws.webp"
-            alt="Tuple"
-            class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10"
-          >
-          <div class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
-            Amazon Web Services
-          </div>
-          <div class="relative ml-auto">
-            <button
-              id="options-menu-0-button"
-              type="button"
-              class="-m-2.5 block p-2.5 text-gray-400 hover:text-blue-gray-500"
-              aria-expanded="false"
-              aria-haspopup="true"
-            >
-              <span class="sr-only">Open options</span>
-              <div class="i-heroicons-ellipsis-horizontal h-5 w-5" />
-            </button>
-
-            <!--
-          Dropdown menu, show/hide based on menu state.
-
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-            <div
-              class="absolute hidden right-0 z-10 mt-0.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="options-menu-0-button"
-              tabindex="-1"
-            >
-              <!-- Active: "bg-gray-50", Not Active: "" -->
-              <a
-                id="options-menu-0-item-0"
-                href="#"
-                class="block px-3 py-1 text-sm leading-6 text-gray-900"
-                role="menuitem"
-                tabindex="-1"
-              >View<span class="sr-only">, Tuple</span></a>
-              <a
-                id="options-menu-0-item-1"
-                href="#"
-                class="block px-3 py-1 text-sm leading-6 text-gray-900"
-                role="menuitem"
-                tabindex="-1"
-              >Edit<span class="sr-only">, Tuple</span></a>
-            </div>
-          </div>
-        </div>
-        <dl class="-my-3 bg-white divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
-          <div class="flex justify-between gap-x-4 py-3">
-            <dt class="text-gray-500">
-              App key
-            </dt>
-            <dd class="text-gray-700">
-              <span> •••• •••• •••• 5173 </span>
-            </dd>
-          </div>
-          <div class="flex justify-between gap-x-4 py-3">
-            <dt class="text-gray-500">
-              Secret key
-            </dt>
-            <dd class="flex items-start gap-x-2">
-              <span> •••• •••• •••• 5173 </span>
-            </dd>
-          </div>
-        </dl>
-      </li>
-    </ul>
-  </main>
-</template>
diff --git a/storage/framework/types/components.d.ts b/storage/framework/types/components.d.ts
index 58473e51ac..fc84b1eb07 100644
--- a/storage/framework/types/components.d.ts
+++ b/storage/framework/types/components.d.ts
@@ -57,7 +57,10 @@ declare module 'vue' {
     README: typeof import('./../../../libs/components/README.md')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SearchEngineForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/SearchEngineForm.vue')['default']
     SecondaryFeatures: typeof import('./../../../libs/components/Marketing/SecondaryFeatures.vue')['default']
+    SecurityForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/SecurityForm.vue')['default']
+    ServicesForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/ServicesForm.vue')['default']
     SettingsFormManager: typeof import('./../../../libs/components/Dashboard/Settings/SettingsFormManager.vue')['default']
     SettingsHeader: typeof import('./../../../libs/components/Dashboard/SettingsHeader.vue')['default']
     SettingsSidebar: typeof import('./../../../libs/components/Dashboard/SettingsSidebar.vue')['default']
diff --git a/storage/framework/types/dashboard-router.d.ts b/storage/framework/types/dashboard-router.d.ts
index 562df847f1..9eb628bf45 100644
--- a/storage/framework/types/dashboard-router.d.ts
+++ b/storage/framework/types/dashboard-router.d.ts
@@ -43,7 +43,6 @@ declare module 'vue-router/auto-routes' {
     '/settings/[name]': RouteRecordInfo<'/settings/[name]', '/settings/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
     '/settings/billing': RouteRecordInfo<'/settings/billing', '/settings/billing', Record<never, never>, Record<never, never>>,
     '/settings/mail': RouteRecordInfo<'/settings/mail', '/settings/mail', Record<never, never>, Record<never, never>>,
-    '/settings/services': RouteRecordInfo<'/settings/services', '/settings/services', Record<never, never>, Record<never, never>>,
     '/settings/storage': RouteRecordInfo<'/settings/storage', '/settings/storage', Record<never, never>, Record<never, never>>,
     '/teams/[id]': RouteRecordInfo<'/teams/[id]', '/teams/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
   }