From 3a8cb727fa75ffe040cd12365d3d4bbf335bc17f Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 18 Jun 2026 01:08:09 +0700
Subject: [PATCH] feat: implement API endpoint for customer creation and
 enhance order form with quick customer creation modal

---
 .../Admin/Master/CustomerController.php       |  13 ++
 .../orders/CustomerQuickCreateModal.vue       | 121 ++++++++++++++++++
 .../admin/manage/orders/OrderPosForm.vue      |  44 +++++--
 routes/web.php                                |   4 +
 4 files changed, 169 insertions(+), 13 deletions(-)
 create mode 100644 resources/js/components/admin/manage/orders/CustomerQuickCreateModal.vue

diff --git a/app/Http/Controllers/Admin/Master/CustomerController.php b/app/Http/Controllers/Admin/Master/CustomerController.php
index 4c8affc..6ad344c 100644
--- a/app/Http/Controllers/Admin/Master/CustomerController.php
+++ b/app/Http/Controllers/Admin/Master/CustomerController.php
@@ -8,6 +8,7 @@
 use App\Http\Requests\Admin\Master\CustomerRequest;
 use App\Models\Customer;
 use App\Services\Master\CustomerService;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
@@ -41,6 +42,18 @@ public function store(CustomerRequest $request): RedirectResponse
         return redirect()->route('admin.master.customers.index');
     }
 
+    public function storeApi(CustomerRequest $request): JsonResponse
+    {
+        $this->customerService->create($request->validated());
+
+        $customer = Customer::query()->latest()->first();
+
+        return response()->json([
+            'id' => $customer->id,
+            'name' => $customer->name,
+        ]);
+    }
+
     public function update(CustomerRequest $request, Customer $customer): RedirectResponse
     {
         $this->customerService->update($customer, $request->validated());
diff --git a/resources/js/components/admin/manage/orders/CustomerQuickCreateModal.vue b/resources/js/components/admin/manage/orders/CustomerQuickCreateModal.vue
new file mode 100644
index 0000000..dbc8080
--- /dev/null
+++ b/resources/js/components/admin/manage/orders/CustomerQuickCreateModal.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { Save } from '@lucide/vue';
+import { reactive, ref } from 'vue';
+import { toast } from 'vue-sonner';
+import { PhoneNumberInput } from '@/components/form/phone-number-input';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    Field,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+    FieldSet,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { apiFetch } from '@/lib/api';
+import { FIELD_LIMITS } from '@/lib/field-limits';
+
+const open = defineModel<boolean>('open', { default: false });
+
+const emit = defineEmits<{
+    created: [customer: { id: number; name: string }];
+}>();
+
+const processing = ref(false);
+const errors = reactive<Record<string, string>>({});
+
+const form = reactive({
+    name: '',
+    phone_number: '',
+    address: '',
+});
+
+function resetForm() {
+    form.name = '';
+    form.phone_number = '';
+    form.address = '';
+    Object.keys(errors).forEach((key) => delete errors[key]);
+}
+
+async function submit() {
+    Object.keys(errors).forEach((key) => delete errors[key]);
+    processing.value = true;
+
+    try {
+        const customer = await apiFetch<{ id: number; name: string }>('/admin/master/customers/api', {
+            method: 'POST',
+            body: JSON.stringify({
+                name: form.name,
+                phone_number: form.phone_number || null,
+                address: form.address || null,
+            }),
+        });
+
+        emit('created', customer);
+        open.value = false;
+        resetForm();
+        toast.success('Pelanggan berhasil ditambahkan.');
+    } catch (error) {
+        const message = error instanceof Error ? error.message : 'Gagal menyimpan data.';
+
+        if (message.includes('nama')) {
+            errors.name = message;
+        } else {
+            toast.error(message);
+        }
+    } finally {
+        processing.value = false;
+    }
+}
+</script>
+
+<template>
+    <Dialog v-model:open="open">
+        <DialogContent class="sm:max-w-md">
+            <DialogHeader>
+                <DialogTitle>Tambah Pelanggan</DialogTitle>
+            </DialogHeader>
+
+            <form @submit.prevent="submit">
+                <FieldGroup>
+                    <FieldSet class="grid gap-4">
+                        <Field>
+                            <FieldLabel for="quick-customer-name" required>Nama</FieldLabel>
+                            <Input id="quick-customer-name" v-model="form.name" type="text"
+                                placeholder="Contoh: Budi Santoso" autofocus :maxlength="FIELD_LIMITS.name" />
+                            <FieldError v-if="errors.name" :errors="[errors.name]" />
+                        </Field>
+                        <Field>
+                            <FieldLabel for="quick-customer-phone">Nomor Telepon</FieldLabel>
+                            <PhoneNumberInput id="quick-customer-phone" v-model="form.phone_number"
+                                placeholder="Contoh: 08123456789" />
+                        </Field>
+                        <Field>
+                            <FieldLabel for="quick-customer-address">Alamat</FieldLabel>
+                            <Textarea id="quick-customer-address" v-model="form.address" rows="3"
+                                placeholder="Contoh: Jl. Mawar No. 12, Surabaya" />
+                        </Field>
+                    </FieldSet>
+                </FieldGroup>
+
+                <DialogFooter class="mt-6">
+                    <Button type="button" variant="outline" :disabled="processing" @click="open = false">
+                        Batal
+                    </Button>
+                    <Button type="submit" :disabled="processing">
+                        <Save class="size-4" />
+                        {{ processing ? 'Menyimpan...' : 'Simpan' }}
+                    </Button>
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/components/admin/manage/orders/OrderPosForm.vue b/resources/js/components/admin/manage/orders/OrderPosForm.vue
index 8e3eab4..f9c5e7c 100644
--- a/resources/js/components/admin/manage/orders/OrderPosForm.vue
+++ b/resources/js/components/admin/manage/orders/OrderPosForm.vue
@@ -5,6 +5,7 @@ import { computed, ref, watch } from 'vue';
 import { toast } from 'vue-sonner';
 import PosCatalogCard from '@/components/admin/manage/PosCatalogCard.vue';
 import PosCatalogVariantThumb from '@/components/admin/manage/PosCatalogVariantThumb.vue';
+import CustomerQuickCreateModal from '@/components/admin/manage/orders/CustomerQuickCreateModal.vue';
 import { NumberInput } from '@/components/form/number-input';
 import { RupiahInput } from '@/components/form/rupiah-input';
 import { Button } from '@/components/ui/button';
@@ -37,6 +38,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { OrderChannel } from '@/constants/order-channel';
 import { apiFetch } from '@/lib/api';
 import { getFirstCoverImage } from '@/lib/catalog-cover';
+import { useCan } from '@/composables/useCan';
 import { formErrors } from '@/lib/form';
 import { formatRupiah, parseRupiah } from '@/lib/rupiah';
 import type { Auth } from '@/types/auth';
@@ -71,6 +73,8 @@ const props = defineProps<{
 
 const isCreateMode = computed(() => props.method === 'post');
 
+const { can } = useCan();
+
 const page = usePage();
 const authUser = computed(() => (page.props.auth as Auth).user);
 const isMarketingUser = computed(() =>
@@ -79,6 +83,12 @@ const isMarketingUser = computed(() =>
 
 const search = ref('');
 const cart = ref<OrderCartItem[]>([]);
+const customerFormOpen = ref(false);
+
+function onCustomerCreated(customer: { id: number; name: string }) {
+    props.customers.push({ value: customer.id, label: customer.name });
+    form.customer_id = String(customer.id);
+}
 
 // Auto-fill marketing_id with logged-in user's id if they are marketing role
 const defaultMarketingId = computed(() =>
@@ -591,19 +601,25 @@ function submit() {
 
                             <Field>
                                 <FieldLabel for="customer">Pelanggan</FieldLabel>
-                                <Select v-model="form.customer_id">
-                                    <SelectTrigger id="customer" class="w-full">
-                                        <SelectValue placeholder="Pilih pelanggan" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectGroup>
-                                            <SelectItem v-for="customer in customers" :key="customer.value"
-                                                :value="String(customer.value)">
-                                                {{ customer.label }}
-                                            </SelectItem>
-                                        </SelectGroup>
-                                    </SelectContent>
-                                </Select>
+                                <div class="flex gap-2">
+                                    <Select v-model="form.customer_id" class="flex-1">
+                                        <SelectTrigger id="customer" class="w-full">
+                                            <SelectValue placeholder="Pilih pelanggan" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectGroup>
+                                                <SelectItem v-for="customer in customers" :key="customer.value"
+                                                    :value="String(customer.value)">
+                                                    {{ customer.label }}
+                                                </SelectItem>
+                                            </SelectGroup>
+                                        </SelectContent>
+                                    </Select>
+                                    <Button v-if="can('customers.create')" type="button" variant="outline"
+                                        size="icon" class="shrink-0" @click="customerFormOpen = true">
+                                        <Plus class="size-4" />
+                                    </Button>
+                                </div>
                                 <FieldError :errors="formErrors(form, 'customer_id')" />
                             </Field>
 
@@ -727,4 +743,6 @@ function submit() {
             </CardContent>
         </Card>
     </div>
+
+    <CustomerQuickCreateModal v-model:open="customerFormOpen" @created="onCustomerCreated" />
 </template>
diff --git a/routes/web.php b/routes/web.php
index ca77252..e24e06d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -156,6 +156,10 @@
                         ->middleware('permission:'.Permission::CUSTOMERS_CREATE->value)
                         ->name('store');
 
+                    Route::post('api', [CustomerController::class, 'storeApi'])
+                        ->middleware('permission:'.Permission::CUSTOMERS_CREATE->value)
+                        ->name('store.api');
+
                     Route::put('{customer}', [CustomerController::class, 'update'])
                         ->middleware('permission:'.Permission::CUSTOMERS_UPDATE->value)
                         ->name('update');