Release 202507240432

web/src/actions/admin/service.ts

@@ -11,6 +11,7 @@ import { prisma } from '../../lib/prisma'
 import { separateServiceUrlsByType } from '../../lib/urls'
 import {
   imageFileSchema,
+  stringListOfContactMethodsSchema,
   stringListOfUrlsSchemaRequired,
   zodCohercedNumber,
   zodContactMethod,
@@ -45,6 +46,7 @@ const serviceSchemaBase = z.object({
   description: z.string().min(1),
   allServiceUrls: stringListOfUrlsSchemaRequired,
   tosUrls: stringListOfUrlsSchemaRequired,
+  contactMethods: stringListOfContactMethodsSchema,
   kycLevel: z.coerce.number().int().min(0).max(4),
   kycLevelClarification: z.nativeEnum(KycLevelClarification).optional().nullable().default(null),
   attributes: z.array(z.coerce.number().int().positive()),
@@ -52,7 +54,7 @@ const serviceSchemaBase = z.object({
   verificationStatus: z.nativeEnum(VerificationStatus),
   verificationSummary: z.string().optional().nullable().default(null),
   verificationProofMd: z.string().optional().nullable().default(null),
-  acceptedCurrencies: z.array(z.nativeEnum(Currency)),
+  acceptedCurrencies: z.array(z.nativeEnum(Currency)).min(1),
   referral: z
     .string()
     .regex(/^(\?\w+=.|\/.+)/, 'Referral must be a valid URL parameter or path, not a full URL')
@@ -69,7 +71,6 @@ const serviceSchemaBase = z.object({
     }),
   registeredCompanyName: z.string().trim().max(100).optional().nullable(),
   imageFile: imageFileSchema,
-  overallScore: zodCohercedNumber(z.number().int().min(0).max(10)).optional(),
   serviceVisibility: z.nativeEnum(ServiceVisibility),
   internalNote: z.string().optional(),
   strictCommentingEnabled: z.boolean().optional().default(false),
@@ -144,7 +145,6 @@ export const adminServiceActions = {
           referral: input.referral || null,
           serviceVisibility: input.serviceVisibility,
           slug: input.slug,
-          overallScore: input.overallScore,
           categories: {
             connect: input.categories.map((id) => ({ id })),
           },
@@ -155,6 +155,11 @@ export const adminServiceActions = {
               },
             })),
           },
+          contactMethods: {
+            create: input.contactMethods.map((value) => ({
+              value,
+            })),
+          },
           imageUrl,
           internalNotes: input.internalNote
             ? {
@@ -165,6 +170,8 @@ export const adminServiceActions = {
               }
             : undefined,
           operatingSince: input.operatingSince,
+          registrationCountryCode: input.registrationCountryCode ?? null,
+          registeredCompanyName: input.registeredCompanyName,
         },
         select: {
           id: true,
@@ -266,7 +273,6 @@ export const adminServiceActions = {
           referral: input.referral || null,
           serviceVisibility: input.serviceVisibility,
           slug: input.slug,
-          overallScore: input.overallScore,
           previousSlugs:
             existingService.slug !== input.slug
               ? {
@@ -354,7 +360,6 @@ export const adminServiceActions = {
         await prisma.serviceContactMethod.delete({
           where: { id: input.id },
         })
-        return { success: true }
       },
     }),
   },
@@ -480,7 +485,6 @@ export const adminServiceActions = {
       input: evidenceImageDeleteSchema,
       handler: async (input) => {
         await deleteFileLocally(input.fileUrl)
-        return { success: true }
       },
     }),
   },

web/src/pages/admin/services/new.astro

@@ -1,24 +1,57 @@
 ---
-import { AttributeCategory, Currency, VerificationStatus } from '@prisma/client'
+import { ServiceVisibility, VerificationStatus } from '@prisma/client'
-import { Icon } from 'astro-icon/components'
 import { actions, isInputError } from 'astro:actions'
+import { orderBy } from 'lodash-es'
 
+import InputCardGroup from '../../../components/InputCardGroup.astro'
 import InputCheckbox from '../../../components/InputCheckbox.astro'
+import InputCheckboxGroup from '../../../components/InputCheckboxGroup.astro'
+import InputImageFile from '../../../components/InputImageFile.astro'
+import InputSelect from '../../../components/InputSelect.astro'
+import InputSubmitButton from '../../../components/InputSubmitButton.astro'
+import InputText from '../../../components/InputText.astro'
+import InputTextArea from '../../../components/InputTextArea.astro'
+import { getAttributeCategoryInfo } from '../../../constants/attributeCategories'
+import { getAttributeTypeInfo } from '../../../constants/attributeTypes'
+import { contactMethodUrlTypes } from '../../../constants/contactMethods'
+import { countries } from '../../../constants/countries'
+import { currencies } from '../../../constants/currencies'
+import { kycLevelClarifications } from '../../../constants/kycLevelClarifications'
+import { kycLevels } from '../../../constants/kycLevels'
+import { serviceVisibilities } from '../../../constants/serviceVisibility'
+import { verificationStatuses } from '../../../constants/verificationStatus'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
-import { cn } from '../../../lib/cn'
 import { prisma } from '../../../lib/prisma'
 
-const categories = await Astro.locals.banners.try('Failed to fetch categories', () =>
+const [categories, attributes] = await Astro.locals.banners.tryMany([
+  [
+    'Failed to fetch categories',
+    () =>
       prisma.category.findMany({
         orderBy: { name: 'asc' },
-  })
+        select: {
-)
+          id: true,
-
+          name: true,
-const attributes = await Astro.locals.banners.try('Failed to fetch attributes', () =>
+          icon: true,
+        },
+      }),
+    [],
+  ],
+  [
+    'Failed to fetch attributes',
+    () =>
       prisma.attribute.findMany({
         orderBy: { category: 'asc' },
-  })
+        select: {
-)
+          id: true,
+          title: true,
+          category: true,
+          type: true,
+        },
+      }),
+    [],
+  ],
+])
 
 const result = Astro.getActionResult(actions.admin.service.create)
 Astro.locals.banners.addIfSuccess(result, 'Service created successfully')
@@ -28,382 +61,287 @@ if (result && !result.error) {
 const inputErrors = isInputError(result?.error) ? result.error.fields : {}
 ---
 
-<BaseLayout pageTitle="Create Service" widthClassName="max-w-screen-sm">
+<BaseLayout
-  <section class="mb-8">
+  pageTitle="Create Service"
-    <div class="font-title mb-4">
+  description="Create a new service for KYCnot.me"
-      <span class="text-sm text-green-500">service.create</span>
+  widthClassName="max-w-screen-md"
-    </div>
+>
+  <h1 class="font-title mt-12 mb-6 text-center text-3xl font-bold">Create Service</h1>
 
   <form
     method="POST"
     action={actions.admin.service.create}
-      class="space-y-4 rounded-lg border border-green-500/30 bg-black/40 p-6 shadow-[0_0_15px_rgba(34,197,94,0.2)] backdrop-blur-xs"
     enctype="multipart/form-data"
+    class="space-y-6"
   >
-      <div>
+    <InputText
-        <label for="name" class="font-title mb-2 block text-sm text-green-500">name</label>
+      label="Name"
-        <input
-          transition:persist
-          type="text"
       name="name"
-          id="name"
+      inputProps={{
-          required
+        required: true,
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
+        maxlength: 40,
+      }}
+      error={inputErrors.name}
     />
-        {
-          inputErrors.name && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.name.join(', ')}</p>
-          )
-        }
-      </div>
 
-      <div>
+    <InputTextArea
-        <label for="description" class="font-title mb-2 block text-sm text-green-500">description</label>
+      label="Description"
-        <textarea
-          transition:persist
       name="description"
-          id="description"
+      inputProps={{
-          required
+        required: true,
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
+      }}
-          set:text=""
+      error={inputErrors.description}
     />
-        {
-          inputErrors.description && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.description.join(', ')}</p>
-          )
-        }
-      </div>
 
-      <div>
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <label for="allServiceUrls" class="font-title mb-2 block text-sm text-green-500">Service URLs</label>
+      <InputTextArea
-        <textarea
+        label="Service URLs"
-          transition:persist
+        description="One per line. Accepts **Web**, **Onion**, and **I2P** URLs."
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
         name="allServiceUrls"
-          id="allServiceUrls"
+        inputProps={{
-          rows={3}
+          placeholder: 'example1.com\nexample2.onion\nexample3.b32.i2p',
-          placeholder="https://example1.com\nhttps://example2.onion\nhttps://example3.b32.i2p"
+          class: 'md:min-h-20 min-h-24 h-full',
-          set:text=""
+          required: true,
+        }}
+        class="flex flex-col self-stretch"
+        error={inputErrors.allServiceUrls}
+      />
+
+      <InputTextArea
+        label="Contact Methods"
+        description={[
+          'One per line.',
+          `Accepts: ${contactMethodUrlTypes.map((type: any) => type.labelPlural).join(', ')}`,
+        ].join('\n')}
+        name="contactMethods"
+        inputProps={{
+          placeholder: 'contact@example.com\nt.me/example\n+123 456 7890',
+          class: 'h-full',
+        }}
+        class="flex flex-col self-stretch"
+        error={inputErrors.contactMethods}
       />
-        {
-          inputErrors.allServiceUrls && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.allServiceUrls.join(', ')}</p>
-          )
-        }
     </div>
 
-      <div>
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <label for="tosUrls" class="font-title mb-2 block text-sm text-green-500">tosUrls</label>
+      <InputTextArea
-        <textarea
+        label="ToS URLs"
-          transition:persist
+        description="One per line. AI review uses the first working URL only."
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
         name="tosUrls"
-          id="tosUrls"
+        inputProps={{
-          rows={3}
+          placeholder: 'example.com/tos',
-          placeholder="https://example1.com/tos https://example2.com/tos"
+          required: true,
-          set:text=""
+          class: 'min-h-10',
+        }}
+        error={inputErrors.tosUrls}
+      />
+
+      <InputText
+        label="Operating since"
+        name="operatingSince"
+        inputProps={{
+          type: 'date',
+          max: new Date().toISOString().slice(0, 10),
+        }}
+        error={inputErrors.operatingSince}
       />
-        {
-          inputErrors.tosUrls && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.tosUrls.join(', ')}</p>
-          )
-        }
     </div>
 
-      <div>
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <label for="imageFile" class="font-title mb-2 block text-sm text-green-500">serviceImage</label>
+      <InputText
-        <div class="space-y-2">
+        label="Registered Company Name"
-          <input
+        name="registeredCompanyName"
-            transition:persist
+        description="Official name of the registered company (optional)"
-            type="file"
+        inputProps={{
-            name="imageFile"
+          placeholder: 'e.g. Example Corp Ltd.',
-            id="imageFile"
+        }}
-            accept="image/*"
+      />
-            required
+
-            class="font-title file:font-title block w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 file:mr-3 file:rounded-md file:border-0 file:bg-green-500/30 file:px-3 file:py-1 file:text-gray-300 focus:border-green-500 focus:ring-green-500"
+      <InputSelect
+        name="registrationCountryCode"
+        label="Company Registration Country"
+        description="Country where the service company is legally registered (optional)"
+        options={[
+          { label: 'Not registered', value: '' },
+          ...countries
+            .sort((a: any, b: any) => a.name.localeCompare(b.name))
+            .map((country: any) => ({
+              label: `${country.flag} ${country.name}`,
+              value: country.code,
+            }))
+        ]}
+        selectedValue=""
       />
-          <p class="font-title text-xs text-gray-400">
-            Upload a square image for best results. Supported formats: JPG, PNG, WebP, SVG.
-          </p>
-        </div>
-        {
-          inputErrors.imageFile && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.imageFile.join(', ')}</p>
-          )
-        }
     </div>
 
-      <div>
+    <InputCardGroup
-        <label class="font-title mb-2 block text-sm text-green-500" for="categories">categories</label>
-        <div class="mt-2 grid grid-cols-2 gap-2">
-          {
-            categories?.map((category) => (
-              <label class="inline-flex items-center">
-                <input
-                  transition:persist
-                  type="checkbox"
-                  name="categories"
-                  value={category.id}
-                  class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
-                />
-                <span class="font-title ml-2 flex items-center gap-2 text-gray-300">
-                  <Icon class="h-3 w-3 text-green-500" name={category.icon} />
-                  {category.name}
-                </span>
-              </label>
-            ))
-          }
-        </div>
-        {
-          inputErrors.categories && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.categories.join(', ')}</p>
-          )
-        }
-      </div>
-
-      <div>
-        <label for="kycLevel" class="font-title mb-2 block text-sm text-green-500">kycLevel</label>
-        <input
-          transition:persist
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          type="number"
       name="kycLevel"
-          id="kycLevel"
+      label="KYC Level"
-          min={0}
+      options={kycLevels.map((kycLevel: any) => ({
-          max={4}
+        label: kycLevel.name,
-          value={4}
+        value: kycLevel.id.toString(),
+        icon: kycLevel.icon,
+        description: `${kycLevel.description}\n\n_KYC Level ${kycLevel.value}/4_`,
+      }))}
+      iconSize="md"
+      cardSize="md"
       required
+      error={inputErrors.kycLevel}
     />
-        {
-          inputErrors.kycLevel && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.kycLevel.join(', ')}</p>
-          )
-        }
-      </div>
 
-      <div>
+    <InputCardGroup
-        <label class="font-title mb-2 block text-sm text-green-500" for="attributes">attributes</label>
+      name="kycLevelClarification"
-        <div class="space-y-4">
+      label="KYC Level Clarification"
-          {
+      options={kycLevelClarifications.map((clarification: any) => ({
-            Object.values(AttributeCategory).map((category) => (
+        label: clarification.label,
-              <div class="rounded-md border border-green-500/20 bg-black/30 p-4">
+        value: clarification.value,
-                <h4 class="font-title mb-3 text-green-400">{category}</h4>
+        icon: clarification.icon,
-                <div class="grid grid-cols-1 gap-2">
+        description: clarification.description,
-                  {attributes
+      }))}
-                    ?.filter((attr) => attr.category === category)
+      selectedValue="NONE"
-                    .map((attr) => (
+      iconSize="sm"
-                      <label class="inline-flex items-center">
+      cardSize="sm"
-                        <input
+      error={inputErrors.kycLevelClarification}
-                          transition:persist
+    />
-                          type="checkbox"
+
+    <div class="xs:grid-cols-[1fr_2fr] grid grid-cols-1 items-stretch gap-x-4 gap-y-6">
+      <InputCheckboxGroup
+        name="categories"
+        label="Categories"
+        required
+        options={categories.map((category: any) => ({
+          label: category.name,
+          value: category.id.toString(),
+          icon: category.icon,
+        }))}
+        size="lg"
+        error={inputErrors.categories}
+        class="min-w-auto"
+      />
+
+      <InputCheckboxGroup
         name="attributes"
-                          value={attr.id}
+        label="Attributes"
-                          class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
+        options={orderBy(
+          attributes.map((attribute: any) => ({
+            ...attribute,
+            categoryInfo: getAttributeCategoryInfo(attribute.category),
+            typeInfo: getAttributeTypeInfo(attribute.type),
+          })),
+          ['categoryInfo.order', 'typeInfo.order']
+        ).map((attribute: any) => ({
+          label: attribute.title,
+          value: attribute.id.toString(),
+          icon: [attribute.categoryInfo.icon, attribute.typeInfo.icon],
+          iconClassName: [attribute.categoryInfo.classNames.icon, attribute.typeInfo.classNames.icon],
+        }))}
+        description="See list of [all attributes](/attributes) and their scoring."
+        error={inputErrors.attributes}
+        size="lg"
       />
-                        <span class="font-title ml-2 flex items-center gap-2 text-gray-300">
-                          {attr.title}
-                          <span
-                            class={cn('font-title rounded-sm px-1.5 py-0.5 text-xs', {
-                              'border border-green-500/50 bg-green-500/20 text-green-400':
-                                attr.type === 'GOOD',
-                              'border border-red-500/50 bg-red-500/20 text-red-400': attr.type === 'BAD',
-                              'border border-yellow-500/50 bg-yellow-500/20 text-yellow-400':
-                                attr.type === 'WARNING',
-                              'border border-blue-500/50 bg-blue-500/20 text-blue-400': attr.type === 'INFO',
-                            })}
-                          >
-                            {attr.type}
-                          </span>
-                        </span>
-                      </label>
-                    ))}
-                </div>
-                {inputErrors.attributes && (
-                  <p class="font-title mt-1 text-sm text-red-500">{inputErrors.attributes.join(', ')}</p>
-                )}
-              </div>
-            ))
-          }
-        </div>
     </div>
 
-      <div>
+    <InputCardGroup
-        <label class="font-title mb-2 block text-sm text-green-500" for="verificationStatus"
-          >verificationStatus</label
-        >
-        <select
-          transition:persist
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 focus:border-green-500 focus:ring-green-500"
-          name="verificationStatus"
-          id="verificationStatus"
-          required
-        >
-          {Object.values(VerificationStatus).map((status) => <option value={status}>{status}</option>)}
-        </select>
-        {
-          inputErrors.verificationStatus && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.verificationStatus.join(', ')}</p>
-          )
-        }
-      </div>
-
-      <div>
-        <label class="font-title mb-2 block text-sm text-green-500" for="verificationSummary"
-          >verificationSummary</label
-        >
-        <textarea
-          transition:persist
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          name="verificationSummary"
-          id="verificationSummary"
-          rows={3}
-          set:text=""
-        />
-        {
-          inputErrors.verificationSummary && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.verificationSummary.join(', ')}</p>
-          )
-        }
-      </div>
-
-      <div>
-        <label class="font-title mb-2 block text-sm text-green-500" for="verificationProofMd"
-          >verificationProofMd</label
-        >
-        <textarea
-          transition:persist
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
-          name="verificationProofMd"
-          id="verificationProofMd"
-          rows={10}
-          set:text=""
-        />
-        {
-          inputErrors.verificationProofMd && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.verificationProofMd.join(', ')}</p>
-          )
-        }
-      </div>
-
-      <div>
-        <label class="font-title mb-2 block text-sm text-green-500" for="acceptedCurrencies"
-          >acceptedCurrencies</label
-        >
-        <div class="mt-2 grid grid-cols-2 gap-2">
-          {
-            Object.values(Currency).map((currency) => (
-              <label class="inline-flex items-center">
-                <input
-                  transition:persist
-                  type="checkbox"
       name="acceptedCurrencies"
-                  value={currency}
+      label="Accepted Currencies"
-                  class="rounded-sm border-green-500/30 bg-black/50 text-green-500 focus:ring-green-500 focus:ring-offset-black"
+      options={currencies.map((currency: any) => ({
+        label: currency.name,
+        value: currency.id,
+        icon: currency.icon,
+      }))}
+      error={inputErrors.acceptedCurrencies}
+      multiple
     />
-                <span class="font-title ml-2 text-gray-300">{currency}</span>
-              </label>
-            ))
-          }
-        </div>
-        {
-          inputErrors.acceptedCurrencies && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.acceptedCurrencies.join(', ')}</p>
-          )
-        }
-      </div>
 
-      <div>
+    <InputImageFile
-        <label class="font-title mb-2 block text-sm text-green-500" for="overallScore">overallScore</label>
+      label="Service Image"
-        <input
+      name="imageFile"
-          transition:persist
+      description="Square image. At least 192x192px. Transparency supported."
-          type="number"
+      error={inputErrors.imageFile}
-          name="overallScore"
+      square
-          id="overallScore"
-          value={0}
-          min={0}
-          max={10}
       required
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 focus:border-green-500 focus:ring-green-500"
     />
-        {
-          inputErrors.overallScore && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.overallScore.join(', ')}</p>
-          )
-        }
-      </div>
 
-      <div>
+    <InputSelect
-        <label class="font-title mb-2 block text-sm text-green-500" for="referral">referral link path</label>
+      name="verificationStatus"
-        <input
+      label="Verification Status"
-          transition:persist
+      options={Object.values(VerificationStatus).map((status) => ({
-          type="text"
+        label: status.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, (l: string) => l.toUpperCase()),
+        value: status,
+      }))}
+      error={inputErrors.verificationStatus}
+    />
+
+    <InputTextArea
+      label="Verification Summary"
+      name="verificationSummary"
+      error={inputErrors.verificationSummary}
+    />
+
+    <InputTextArea
+      label="Verification Proof (Markdown)"
+      name="verificationProofMd"
+      inputProps={{
+        rows: 10,
+      }}
+      error={inputErrors.verificationProofMd}
+    />
+
+    <InputText
+      label="Referral Link Path"
       name="referral"
-          id="referral"
+      inputProps={{
-          placeholder="e.g. ?ref=123 or /ref/123"
+        placeholder: 'e.g. ?ref=123 or /ref/123',
-          class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
+      }}
+      error={inputErrors.referral}
+      description="Will be appended to the service URL"
     />
-        {
-          inputErrors.referral && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.referral.join(', ')}</p>
-          )
-        }
-      </div>
 
-      <div>
+    <InputCardGroup
-        <label for="internalNote" class="font-title mb-2 block text-sm text-green-500">internalNote</label>
+      name="serviceVisibility"
-        <div class="space-y-2">
+      label="Service Visibility"
-          <textarea
+      options={serviceVisibilities.map((visibility: any) => ({
-            transition:persist
+        label: visibility.label,
-            name="internalNote"
+        value: visibility.value,
-            id="internalNote"
+        icon: visibility.icon,
-            rows={4}
+        iconClass: visibility.iconClass,
-            placeholder="Markdown supported"
+        description: visibility.description,
-            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
+      }))}
-            set:text=""
+      selectedValue="PUBLIC"
+      error={inputErrors.serviceVisibility}
+      cardSize="sm"
+    />
+
+    <InputTextArea
+      label="Internal Note"
+      name="internalNote"
+      description="Markdown supported. Internal notes for admins."
+      inputProps={{
+        rows: 4,
+      }}
+      error={inputErrors.internalNote}
     />
-        </div>
-        {
-          inputErrors.internalNote && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.internalNote.join(', ')}</p>
-          )
-        }
-      </div>
 
     <InputCheckbox
       label="Strict Commenting"
       name="strictCommentingEnabled"
       checked={false}
       descriptionInline="Require proof of being a client for comments."
+      error={inputErrors.strictCommentingEnabled}
     />
 
-      <div>
+    <InputTextArea
-        <label for="commentSectionMessage" class="font-title mb-2 block text-sm text-green-500"
+      label="Comment Section Message"
-          >Comment Section Message</label
-        >
-        <div class="space-y-2">
-          <textarea
-            transition:persist
       name="commentSectionMessage"
-            id="commentSectionMessage"
+      description="Markdown supported. This message will be displayed in the comment section for root comments."
-            rows={4}
+      inputProps={{
-            placeholder="Markdown supported. This message will be displayed in the comment section for root comments."
+        rows: 4,
-            class="font-title w-full rounded-md border border-green-500/30 bg-black/50 p-2 text-gray-300 placeholder-gray-500 focus:border-green-500 focus:ring-green-500"
+      }}
-            set:text=""
+      error={inputErrors.commentSectionMessage}
     />
-        </div>
-        {
-          inputErrors.commentSectionMessage && (
-            <p class="font-title mt-1 text-sm text-red-500">{inputErrors.commentSectionMessage.join(', ')}</p>
-          )
-        }
-      </div>
 
-      <button
+    <InputSubmitButton label="Create Service" icon="ri:add-line" hideCancel />
-        type="submit"
-        class="font-title inline-flex justify-center rounded-md border border-green-500/30 bg-green-500/10 px-4 py-2 text-sm text-green-400 shadow-xs transition-colors duration-200 hover:bg-green-500/20 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-black focus:outline-hidden"
-      >
-        Create Service
-      </button>
       </form>
-  </section>
+    </FormSection>
+  </div>
 </BaseLayout>