Major Refactor
This commit is contained in:
@@ -1,107 +1,123 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<div class=" w-full px-10 pb-10">
|
||||
<div class="w-full px-4 md:px-10 ">
|
||||
<!-- Breadcrumbs & Title -->
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{ name: 'customer' }">
|
||||
Customers
|
||||
</router-link>
|
||||
</li>
|
||||
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
||||
<li>Customers</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold mt-4">Customers</h1>
|
||||
|
||||
<div class="flex justify-end mb-10">
|
||||
Customers {{ customer_count }}
|
||||
</div>
|
||||
<!-- Main Content Card -->
|
||||
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
||||
<!-- Header: Search, Count, and Add Button -->
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<!-- SEARCH AND COUNT (IMPROVED ALIGNMENT) -->
|
||||
<div class="form-control">
|
||||
<label class="label pt-1 pb-0">
|
||||
<span class="label-text-alt">{{ customer_count }} customers found</span>
|
||||
</label>
|
||||
</div>
|
||||
<router-link to="/customers/create" class="btn btn-primary btn-sm">
|
||||
Add New Customer
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 bg-secondary">
|
||||
<div class="grid grid-cols-12 p-5 bg-neutral m-5">
|
||||
<div class="col-span-12 font-bold text-xl">Quick Tips</div>
|
||||
<div class="col-span-3 py-2"> @ = last name search</div>
|
||||
<div class="col-span-3 py-2"> ! = address</div>
|
||||
|
||||
<div class="col-span-3 py-2"> $ = account number</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- DESKTOP VIEW: Table (Now breaks at XL) -->
|
||||
<div class="overflow-x-auto hidden xl:block">
|
||||
<table class="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account #</th>
|
||||
<th>Name</th>
|
||||
<th>Town</th>
|
||||
<th>Automatic</th>
|
||||
<th>Phone Number</th>
|
||||
<th class="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="person in customers" :key="person.id" class="hover:bg-blue-600 hover:text-white">
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="link link-hover">
|
||||
{{ person.account_number }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>{{ person.customer_first_name }} {{ person.customer_last_name }}</td>
|
||||
<td>{{ person.customer_town }}</td>
|
||||
<td><span :class="person.customer_automatic ? 'text-success' : 'text-gray-500'">{{ person.customer_automatic ? 'Yes' : 'No' }}</span></td>
|
||||
<td>{{ person.customer_phone_number }}</td>
|
||||
<td class="text-right">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<router-link :to="{ name: 'deliveryCreate', params: { id: person.id } }" class="btn btn-sm btn-primary">
|
||||
New Delivery
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'CalenderCustomer', params: { id: person.id } }" class="btn btn-sm btn-accent">
|
||||
New Service
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'customerEdit', params: { id: person.id } }" class="btn btn-sm btn-secondary">
|
||||
Edit
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">
|
||||
View
|
||||
</router-link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE VIEW: Cards (Now breaks at XL) -->
|
||||
<div class="xl:hidden space-y-4">
|
||||
<div v-for="person in customers" :key="person.id" class="card bg-base-100 shadow-md">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 class="card-title text-base">{{ person.customer_first_name }} {{ person.customer_last_name }}</h2>
|
||||
<p class="text-xs text-gray-400">#{{ person.account_number }}</p>
|
||||
</div>
|
||||
<div class="badge" :class="person.customer_automatic ? 'badge-success' : 'badge-ghost'">
|
||||
{{ person.customer_automatic ? 'Automatic' : 'Will Call' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm mt-2">
|
||||
<p>{{ person.customer_town }}</p>
|
||||
<p>{{ person.customer_phone_number }}</p>
|
||||
</div>
|
||||
<div class="card-actions justify-end flex-wrap gap-2 mt-2">
|
||||
<router-link :to="{ name: 'deliveryCreate', params: { id: person.id } }" class="btn btn-sm btn-primary">
|
||||
New Delivery
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'CalenderCustomer', params: { id: person.id } }" class="btn btn-sm btn-accent">
|
||||
New Service
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'customerEdit', params: { id: person.id } }" class="btn btn-sm btn-secondary">
|
||||
Edit
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: person.id } }" class="btn btn-sm btn-ghost">
|
||||
View
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto bg-neutral font-bold">
|
||||
<table class="table">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account Number</th>
|
||||
<th>Name</th>
|
||||
<th>Town</th>
|
||||
<th>Automatic</th>
|
||||
<th>Phone Number</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- row 1 -->
|
||||
|
||||
<tr v-for="person in customers" :key="person['id']" >
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }">{{ person['account_number'] }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }">
|
||||
{{ person['customer_first_name'] }} {{ person['customer_last_name'] }}
|
||||
</router-link>
|
||||
</td>
|
||||
<td>{{ person['customer_town'] }}</td>
|
||||
<td>
|
||||
<div v-if="person['customer_automatic'] == 0">No</div>
|
||||
<div v-else>Yes</div>
|
||||
</td>
|
||||
<td>{{ person['customer_phone_number'] }}</td>
|
||||
|
||||
<td class="flex gap-5 ">
|
||||
<router-link :to="{ name: 'deliveryCreate', params: { id: person['id'] } }"
|
||||
class="btn-sm btn bg-orange-600 text-white">
|
||||
Create Delivery
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'CalenderCustomer', params: { id: person['id'] } }"
|
||||
class="btn-sm btn bg-indigo-600 text-white">
|
||||
Create Service Call
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'customerEdit', params: { id: person['id'] } }" class="btn-sm btn btn-secondary">
|
||||
Edit Customer
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'customerProfile', params: { id: person['id'] } }"
|
||||
class="btn btn-secondary btn-sm">
|
||||
View Profile
|
||||
</router-link>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-10">
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-6 flex justify-center">
|
||||
<pagination @paginate="getPage" :records="customer_count" v-model="page" :per-page="10" :options="options">
|
||||
</pagination>
|
||||
|
||||
<div class="flex justify-center mb-10"> {{ customer_count }} items Found</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import axios from 'axios'
|
||||
@@ -125,7 +141,7 @@ export default defineComponent({
|
||||
return {
|
||||
token: null,
|
||||
user: null,
|
||||
customers: [],
|
||||
customers: [] as any[],
|
||||
customer_count: 0,
|
||||
page: 1,
|
||||
perPage: 50,
|
||||
|
||||
Reference in New Issue
Block a user