icons on service create, firewall rule remove/install

resources/js/enums/DeploymentStatus.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "PENDING": "pending",

resources/js/enums/FirewallRuleStatus.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "NOT_APPLIED": "not-applied",

resources/js/enums/OrganisationRole.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "ADMIN": "admin",

resources/js/enums/RepositoryType.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "GIT": "git"

resources/js/enums/ServerProvider.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "HETZNER": "hetzner",

resources/js/enums/ServerStatus.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "WAITING_FOR_PROVIDER": "waiting-for-provider",

resources/js/enums/ServiceCategory.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "DATABASE": "database",
@@ -12,7 +12,7 @@ export default {
 export const DescriptionMap = {
     "DATABASE": "Postgres or MySQL",
     "APPLICATION": "The base container image for your application",
-    "GATEWAY": "The gateway is the first point of contact for your application",
+    "GATEWAY": "The first point of contact for your application",
     "STORAGE": "S3 or S3-compatible service",
     "CACHE": "Redis, Memcached or similar"
 }

resources/js/enums/ServiceStatus.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "NOT_INSTALLED": "not-installed",

resources/js/enums/ServiceType.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:27:12
+// Published at 2025-04-06 16:01:50
 
 export default {
     "FRANKENPHP": "frankenphp",

resources/js/pages/services/Create.vue

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import InputError from '@/components/InputError.vue';
 import ServiceCategory, { DescriptionMap as serviceCategoryDescriptions } from '@/enums/ServiceCategory';
 import RadioButton from '@/components/RadioButton.vue';
+import { AppWindowIcon, ArchiveIcon, DatabaseIcon, DatabaseZapIcon, DoorOpenIcon } from 'lucide-vue-next';
 
 const props = defineProps({});
 
@@ -15,6 +16,23 @@ const form = useForm({
     category: null,
     type: null,
 });
+
+function getIcon(category) {
+    switch (category) {
+        case ServiceCategory.DATABASE:
+            return DatabaseIcon;
+        case ServiceCategory.CACHE:
+            return DatabaseZapIcon;
+        case ServiceCategory.APPLICATION:
+            return AppWindowIcon;
+        case ServiceCategory.GATEWAY:
+            return DoorOpenIcon;
+        case ServiceCategory.STORAGE:
+            return ArchiveIcon;
+        default:
+            return null;
+    }
+}
 </script>
 
 <template>
@@ -37,15 +55,19 @@ const form = useForm({
         ]"
     >
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-            <div class="flex gap-2">
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-2">
                 <RadioButton
                     v-for="(category, categoryKey) in ServiceCategory"
                     v-model="form.category"
                     :value="category"
                     name="category"
+                    class="py-3 flex gap-3"
                 >
-                    <h4 class="text-lg font-semibold tracking-tighter">{{ category }}</h4>
-                    <p class="text-sm">{{ serviceCategoryDescriptions[categoryKey] }}</p>
+                    <component :is="getIcon(category)" class="size-5" />
+                    <div>
+                        <h4 class="text-lg font-semibold tracking-tighter leading-none mb-1">{{ category }}</h4>
+                        <p class="text-sm">{{ serviceCategoryDescriptions[categoryKey] }}</p>
+                    </div>
                 </RadioButton>
             </div>