WIP

app/pages/customers/new.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const schema = z.object({
+  first_name: z.string().min(1, 'First name is required'),
+  last_name: z.string().min(1, 'Last name is required'),
+  email: z.string().email('Invalid email'),
+  phone: z.string().min(1, 'Phone is required'),
+  birth_date: z.string().min(1, 'Birth date is required'),
+  gender: z.enum(['male', 'female'])
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({
+  first_name: '',
+  last_name: '',
+  email: '',
+  phone: '',
+  birth_date: '',
+  gender: 'male'
+})
+
+const toast = useToast()
+const router = useRouter()
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  try {
+    await useCustomer('/', {
+      method: 'POST',
+      body: event.data
+    })
+
+    toast.add({
+      title: 'Customer created',
+      description: 'The customer was successfully created.',
+      color: 'success'
+    })
+
+    router.push('/customers')
+  } catch (err: any) {
+    toast.add({
+      title: 'Error',
+      description: err?.message || 'Failed to create customer',
+      color: 'error'
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 p-10">
+    <div class="max-w-5xl mx-auto space-y-8">
+
+      <!-- Header -->
+      <div>
+        <h1 class="text-3xl font-bold text-gray-900">New Customer</h1>
+        <p class="text-gray-500 mt-1">Create a new customer profile</p>
+      </div>
+
+      <!-- Form Card -->
+      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8">
+        <UForm
+          :schema="schema"
+          :state="state"
+          class="space-y-6"
+          @submit="onSubmit"
+        >
+          <!-- Grid -->
+          <div class="grid md:grid-cols-2 gap-6">
+
+            <UFormField label="First Name" name="first_name">
+              <UInput v-model="state.first_name" />
+            </UFormField>
+
+            <UFormField label="Last Name" name="last_name">
+              <UInput v-model="state.last_name" />
+            </UFormField>
+
+            <UFormField label="Email" name="email">
+              <UInput v-model="state.email" />
+            </UFormField>
+
+            <UFormField label="Phone" name="phone">
+              <UInput v-model="state.phone" />
+            </UFormField>
+
+            <UFormField label="Birth Date" name="birth_date">
+              <UInput v-model="state.birth_date" type="date" />
+            </UFormField>
+
+            <UFormField label="Gender" name="gender">
+              <USelect
+                v-model="state.gender"
+                :items="[
+                  { label: 'Male', value: 'male' },
+                  { label: 'Female', value: 'female' }
+                ]"
+              />
+            </UFormField>
+
+          </div>
+
+
+          <!-- Actions -->
+          <div class="flex justify-end gap-4 pt-4">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              @click="$router.push('/customers')"
+            >
+              Cancel
+            </UButton>
+
+            <UButton type="submit" color="primary">
+              Create Customer
+            </UButton>
+          </div>
+
+        </UForm>
+      </div>
+
+    </div>
+  </div>
+</template>