- Implemented dashboard view with vehicle stats, active services, recent activity, and upcoming appointments. - Created estimates view with filtering options and a list of service estimates. - Developed invoices view to manage service invoices and payment history with filtering. - Added vehicles view to display registered vehicles and their details. - Built work orders view to track the progress of vehicle services with filtering and detailed information.
233 lines
12 KiB
PHP
233 lines
12 KiB
PHP
<div class="space-y-6">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<!-- Additional Information -->
|
|
<div>
|
|
<flux:heading size="lg" class="mb-4">Additional Information</flux:heading>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Notes</flux:label>
|
|
<flux:textarea wire:model="notes" placeholder="Enter any additional notes about this customer..." rows="3" />
|
|
<flux:error name="notes" />
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Account Settings -->
|
|
<div>
|
|
<flux:heading size="lg" class="mb-4">Customer Portal Access</flux:heading>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:checkbox wire:model.live="create_user_account" />
|
|
<flux:label>Create customer portal account</flux:label>
|
|
<flux:description>Allow this customer to login and access their portal</flux:description>
|
|
</flux:field>
|
|
</div>
|
|
|
|
@if($create_user_account)
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Password *</flux:label>
|
|
<div class="flex space-x-2">
|
|
<flux:input wire:model="password" type="text" placeholder="Generated password" class="flex-1" />
|
|
<flux:button type="button" wire:click="generatePassword" variant="outline" size="sm">
|
|
Generate
|
|
</flux:button>
|
|
</div>
|
|
<flux:error name="password" />
|
|
<flux:description>Customer will receive this password via email</flux:description>
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<flux:field>
|
|
<flux:checkbox wire:model="send_welcome_email" />
|
|
<flux:label>Send welcome email with login details</flux:label>
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->:heading size="xl">Add New Customer</flux:heading>
|
|
<flux:subheading>Create a new customer profile and optional user account</flux:subheading>
|
|
</div>
|
|
<flux:button href="/customers-list" variant="outline" size="sm">
|
|
<flux:icon name="arrow-left" class="size-4" />
|
|
Back to Customers
|
|
</flux:button>
|
|
</div>
|
|
|
|
<!-- Customer Form -->
|
|
<div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
|
|
<div class="p-6">
|
|
<form wire:submit="save" class="space-y-8">
|
|
<!-- Personal Information -->
|
|
<div>
|
|
<flux:heading size="lg" class="mb-4">Personal Information</flux:heading>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>First Name *</flux:label>
|
|
<flux:input wire:model="first_name" placeholder="Enter first name" />
|
|
<flux:error name="first_name" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Last Name *</flux:label>
|
|
<flux:input wire:model="last_name" placeholder="Enter last name" />
|
|
<flux:error name="last_name" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Email Address *</flux:label>
|
|
<flux:input wire:model="email" type="email" placeholder="Enter email address" />
|
|
<flux:error name="email" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Phone Number *</flux:label>
|
|
<flux:input wire:model="phone" placeholder="Enter phone number" />
|
|
<flux:error name="phone" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Secondary Phone</flux:label>
|
|
<flux:input wire:model="secondary_phone" placeholder="Enter secondary phone (optional)" />
|
|
<flux:error name="secondary_phone" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Status *</flux:label>
|
|
<select wire:model="status" class="w-full rounded-md border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-2 focus:ring-blue-500">
|
|
<option value="active">Active</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
<flux:error name="status" />
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address Information -->
|
|
<div>
|
|
<flux:heading size="lg" class="mb-4">Address Information</flux:heading>
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Street Address *</flux:label>
|
|
<flux:input wire:model="address" placeholder="Enter street address" />
|
|
<flux:error name="address" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>City *</flux:label>
|
|
<flux:input wire:model="city" placeholder="Enter city" />
|
|
<flux:error name="city" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>State *</flux:label>
|
|
<flux:input wire:model="state" placeholder="CA" maxlength="2" />
|
|
<flux:error name="state" />
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>ZIP Code *</flux:label>
|
|
<flux:input wire:model="zip_code" placeholder="12345" />
|
|
<flux:error name="zip_code" />
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information -->
|
|
<div>
|
|
<flux:heading size="lg" class="mb-4">Additional Information</flux:heading>
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Notes</flux:label>
|
|
<flux:textarea wire:model="notes" placeholder="Enter any additional notes about this customer..." rows="3" />
|
|
<flux:error name="notes" />
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Account Settings -->
|
|
<div>
|
|
<flux:heading size="lg" class="mb-4">Customer Portal Access</flux:heading>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:checkbox wire:model.live="create_user_account" />
|
|
<flux:label>Create customer portal account</flux:label>
|
|
<flux:description>Allow this customer to login and access their portal</flux:description>
|
|
</flux:field>
|
|
</div>
|
|
|
|
@if($create_user_account)
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<flux:field>
|
|
<flux:label>Password *</flux:label>
|
|
<div class="flex space-x-2">
|
|
<flux:input wire:model="password" type="text" placeholder="Generated password" class="flex-1" />
|
|
<flux:button type="button" wire:click="generatePassword" variant="outline" size="sm">
|
|
Generate
|
|
</flux:button>
|
|
</div>
|
|
<flux:error name="password" />
|
|
<flux:description>Customer will receive this password via email</flux:description>
|
|
</flux:field>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<flux:field>
|
|
<flux:checkbox wire:model="send_welcome_email" />
|
|
<flux:label>Send welcome email with login details</flux:label>
|
|
</flux:field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex items-center justify-end space-x-3 pt-6 border-t border-zinc-200 dark:border-zinc-700">
|
|
<flux:button href="/customers-list" variant="outline">Cancel</flux:button>
|
|
<flux:button type="submit">
|
|
<flux:icon name="check" class="size-4" />
|
|
Create Customer
|
|
</flux:button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|