# All files / js/pages/administration DocumentNumbering.vue

0% Statements 0/16
0% Branches 0/16
0% Functions 0/5
0% Lines 0/16

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111

     <template>
        <AppLayout>
            <div class="space-y-6">
                <div class="bg-white shadow rounded-lg p-6">
                    <h2 class="text-xl font-semibold text-gray-900">Document Numbering</h2>
                    <p class="text-sm text-gray-600 mt-1">
                        Company: {{ company.name }}. Set custom prefix and next number for each record type.
                    </p>
                </div>

                <form @submit.prevent="submit" class="bg-white shadow rounded-lg p-6 space-y-6">
                    <div v-for="row in rows" :key="row.key" class="border rounded-lg p-4">
                        <h3 class="text-sm font-semibold text-gray-900 mb-3">{{ row.label }}</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Prefix</label>
                                <input
                                    v-model="form[row.prefixField]"
                                    type="text"
                                    class="w-full rounded border px-3 py-2"
                                    :class="{ 'border-red-500': form.errors[row.prefixField] }"
                                    placeholder="Example: INV-"
                                />
                                <p class="text-xs text-gray-500 mt-1">Leave blank to use legacy numbering format.</p>
                                <div v-if="form.errors[row.prefixField]" class="text-red-500 text-sm mt-1">
                                    {{ form.errors[row.prefixField] }}
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Next number</label>
                                <input
                                    v-model.number="form[row.nextField]"
                                    type="number"
                                    min="1"
                                    class="w-full rounded border px-3 py-2"
                                    :class="{ 'border-red-500': form.errors[row.nextField] }"
                                    placeholder="Example: 1001"
                                />
                                <p class="text-xs text-gray-500 mt-1">Used when creating the next record of this type.</p>
                                <div v-if="form.errors[row.nextField]" class="text-red-500 text-sm mt-1">
                                    {{ form.errors[row.nextField] }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end">
                        <button
                            type="submit"
                            :disabled="form.processing"
                            class="bg-blue-600 text-white px-5 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
                        >
                            {{ form.processing ? 'Saving...' : 'Save Numbering Settings' }}
                        </button>
                    </div>
                </form>
            </div>
        </AppLayout>
    </template>

    <script setup lang="ts">
    import AppLayout from '@/layouts/AppLayout.vue';
    import { useForm } from '@inertiajs/vue3';

    interface NumberingPayload {
        invoice_prefix: string | null;
        invoice_next: number | null;
        quote_prefix: string | null;
        quote_next: number | null;
        jobcard_prefix: string | null;
        jobcard_next: number | null;
        credit_note_prefix: string | null;
        credit_note_next: number | null;
        purchase_order_prefix: string | null;
        purchase_order_next: number | null;
    }

    const props = defineProps<{
        numbering: NumberingPayload;
        company: {
            id: number;
            name: string;
        };
    }>();

    const form = useForm<NumberingPayload>({
        invoice_prefix: props.numbering.invoice_prefix,
        invoice_next: props.numbering.invoice_next,
        quote_prefix: props.numbering.quote_prefix,
        quote_next: props.numbering.quote_next,
        jobcard_prefix: props.numbering.jobcard_prefix,
        jobcard_next: props.numbering.jobcard_next,
        credit_note_prefix: props.numbering.credit_note_prefix,
        credit_note_next: props.numbering.credit_note_next,
        purchase_order_prefix: props.numbering.purchase_order_prefix,
        purchase_order_next: props.numbering.purchase_order_next,
    });

    const rows = [
        { key: 'invoice', label: 'Invoices', prefixField: 'invoice_prefix', nextField: 'invoice_next' },
        { key: 'quote', label: 'Quotes', prefixField: 'quote_prefix', nextField: 'quote_next' },
        { key: 'jobcard', label: 'Jobcards', prefixField: 'jobcard_prefix', nextField: 'jobcard_next' },
        { key: 'credit_note', label: 'Credit Notes', prefixField: 'credit_note_prefix', nextField: 'credit_note_next' },
        { key: 'purchase_order', label: 'Purchase Orders', prefixField: 'purchase_order_prefix', nextField: 'purchase_order_next' },
    ] as const;

    const submit = () => {
        form.put('/administration/document-numbering');
    };
    </script>