@7365admin1/layer-common 3.0.14 → 3.0.16

package/components/ClientDetailForm.vue

@@ -0,0 +1,831 @@
+<template>
+  <div class="form-wrap">
+    <!-- ===== HEADER ===== -->
+    <div class="header">
+      <div>
+        <h2>Client List</h2>
+        <p>{{ form.organizationName || client?.name }}</p>
+      </div>
+
+      <div class="actions">
+        <button class="btn-cancel" @click="$emit('cancel')">Cancel</button>
+        <button class="btn-submit" @click="handleSubmit">Submit</button>
+      </div>
+    </div>
+
+    <!-- ===== CLIENT INFORMATION ===== -->
+    <section class="section">
+      <h3>Client Information</h3>
+
+      <div class="row">
+        <div class="field">
+          <label>Name</label>
+          <input type="text" v-model="form.name" />
+
+          <span v-if="errors.name" class="error">
+            {{ errors.name }}
+          </span>
+        </div>
+        <div class="field">
+          <label>Email</label>
+          <input
+            type="email"
+            v-model="form.email"
+            placeholder="seventh@email.com"
+            :disabled="true"
+          />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="field">
+          <label>Organization Name</label>
+          <input type="text" v-model="form.organizationName" />
+
+          <span v-if="errors.organizationName" class="error">
+            {{ errors.organizationName }}
+          </span>
+        </div>
+        <div class="field">
+          <label>Phone</label>
+
+          <div class="phone-input">
+            <input class="prefix" :value="phonePrefix" disabled />
+
+            <input
+              class="number"
+              v-model="phoneNumber"
+              type="text"
+              :maxlength="PHONE_RULES[phonePrefix]"
+              @input="phoneNumber = phoneNumber.replace(/\D/g, '')"
+              placeholder="97890123"
+            />
+          </div>
+
+          <span v-if="errors.phone" class="error">
+            {{ errors.phone }}
+          </span>
+        </div>
+      </div>
+    </section>
+
+    <!-- ===== SUBSCRIPTION INFORMATION ===== -->
+    <section class="section">
+      <h3>Subscription Information</h3>
+
+      <div class="row">
+        <div class="field">
+          <label>Subscription plan type</label>
+          <div class="select-wrap">
+            <select v-model="form.planType">
+              <option v-for="opt in PLAN_TYPE_OPTIONS" :key="opt" :value="opt">
+                {{ opt }}
+              </option>
+            </select>
+            <svg class="chevron" viewBox="0 0 10 6" fill="none">
+              <path
+                d="M1 1l4 4 4-4"
+                stroke="#6B7280"
+                stroke-width="1.4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+        <div class="field">
+          <label>Auto Renewal</label>
+          <div class="select-wrap">
+            <select v-model="form.autoRenewal">
+              <option
+                v-for="opt in AUTO_RENEWAL_OPTIONS"
+                :key="opt"
+                :value="opt"
+              >
+                {{ opt }}
+              </option>
+            </select>
+            <svg class="chevron" viewBox="0 0 10 6" fill="none">
+              <path
+                d="M1 1l4 4 4-4"
+                stroke="#6B7280"
+                stroke-width="1.4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="field">
+          <label>Billing Cycle</label>
+          <div class="select-wrap">
+            <select v-model="form.billingCycle" @change="onBillingCycleChange">
+              <option
+                v-for="opt in BILLING_CYCLE_OPTIONS"
+                :key="opt"
+                :value="opt"
+              >
+                {{ opt }}
+              </option>
+            </select>
+            <svg class="chevron" viewBox="0 0 10 6" fill="none">
+              <path
+                d="M1 1l4 4 4-4"
+                stroke="#6B7280"
+                stroke-width="1.4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+        <div class="field">
+          <label>Status</label>
+          <div class="select-wrap">
+            <select v-model="form.status">
+              <option v-for="opt in STATUS_OPTIONS" :key="opt" :value="opt">
+                {{ opt }}
+              </option>
+            </select>
+            <svg class="chevron" viewBox="0 0 10 6" fill="none">
+              <path
+                d="M1 1l4 4 4-4"
+                stroke="#6B7280"
+                stroke-width="1.4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="row row-single">
+        <div class="field">
+          <label>Subscription plan</label>
+          <div class="select-wrap">
+            <select v-model="form.subscriptionPlan">
+              <option
+                v-for="opt in subscriptionPlanOptions"
+                :key="opt"
+                :value="opt"
+              >
+                {{ opt }}
+              </option>
+            </select>
+            <svg class="chevron" viewBox="0 0 10 6" fill="none">
+              <path
+                d="M1 1l4 4 4-4"
+                stroke="#6B7280"
+                stroke-width="1.4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+          <p class="hint">
+            Values of dropdown are determined by the list under selected billing
+            cycle.
+          </p>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="field">
+          <label>Start Date</label>
+          <div class="date-input">
+            <input type="text" :value="form.startDate" disabled />
+            <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+              <rect
+                x="1"
+                y="3"
+                width="14"
+                height="12"
+                rx="2"
+                stroke="#9CA3AF"
+                stroke-width="1.3"
+              />
+              <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3" />
+              <path
+                d="M5 1v3M11 1v3"
+                stroke="#9CA3AF"
+                stroke-width="1.3"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+        <div class="field">
+          <label>End Date</label>
+          <div class="date-input">
+            <input type="text" :value="form.endDate" disabled />
+            <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+              <rect
+                x="1"
+                y="3"
+                width="14"
+                height="12"
+                rx="2"
+                stroke="#9CA3AF"
+                stroke-width="1.3"
+              />
+              <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3" />
+              <path
+                d="M5 1v3M11 1v3"
+                stroke="#9CA3AF"
+                stroke-width="1.3"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <p class="hint hint-below">
+        Start and end date depend on the billing cycle, and cannot be edited.
+      </p>
+    </section>
+
+    <!-- ===== INCLUDED APPLICATION ===== -->
+    <section class="section">
+      <h3>Included Application</h3>
+      <ul class="app-list">
+        <li v-for="(app, idx) in form.includedApps" :key="idx">{{ app }}</li>
+      </ul>
+    </section>
+
+    <!-- ===== SITE PROPERTIES ===== -->
+    <section class="section">
+      <h3>Site Properties</h3>
+      <div class="site-table">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Location</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="form.sites.length === 0">
+              <td colspan="2" class="empty">No sites found.</td>
+            </tr>
+            <tr v-for="site in form.sites" :key="site.name">
+              <td class="td-name">{{ site.name }}</td>
+              <td class="td-muted">{{ site.location }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, watch } from 'vue'
+import useOrg from '../composables/useOrg'
+import useCustomerSite from '../composables/useCustomerSite'
+import useUser from '../composables/useUser'
+
+const {
+  APP_SECURITY,
+  APP_HYGIENE,
+  APP_PROPERTY_MANAGEMENT,
+  APP_MECHANICAL_ELECTRICAL,
+  APP_PEST_CONTROL,
+  APP_LANDSCAPING,
+  APP_POOL_MAINTENANCE
+} = useRuntimeConfig().public
+const APP_CONFIG: Record<string, any> = {
+  property_management_agency: {
+    id: 'property-management',
+    title: 'Property Management',
+    icon: 'mdi-home-city-outline',
+    link: APP_PROPERTY_MANAGEMENT
+  },
+  security_agency: {
+    id: 'security',
+    title: 'Security',
+    icon: 'mdi-shield-outline',
+    link: APP_SECURITY
+  },
+  cleaning_services: {
+    id: 'hygiene',
+    title: 'Hygiene',
+    icon: 'mdi-spray-bottle',
+    link: APP_HYGIENE
+  },
+  mechanical_electrical_services: {
+    id: 'm&e',
+    title: 'M&E',
+    icon: 'mdi-tools',
+    link: APP_MECHANICAL_ELECTRICAL
+  },
+  pest_control_services: {
+    id: 'pest-control-services',
+    title: 'Pest Control',
+    icon: 'mdi-bug-outline',
+    link: APP_PEST_CONTROL
+  },
+  landscaping_services: {
+    id: 'landscaping',
+    title: 'Landscaping',
+    icon: 'mdi-tree-outline',
+    link: APP_LANDSCAPING
+  },
+  pool_maintenance_services: {
+    id: 'pool-maintenance',
+    title: 'Pool Maintenance',
+    icon: 'mdi-pool',
+    link: APP_POOL_MAINTENANCE
+  }
+}
+
+const orgApi = useOrg()
+const userApi = useUser()
+const customerSitesApi = useCustomerSite()
+const orgId = computed(() => props.client?._id)
+
+/* ── TYPES ── */
+interface SiteRow {
+  name: string
+  location: string
+}
+
+/* ── PROPS / EMITS ── */
+const props = defineProps<{
+  client?: Record<string, any> | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'submit', payload: Record<string, any>): void
+}>()
+
+/* ── CONSTANTS ── */
+const PLAN_TYPE_OPTIONS = [
+  'Free (Bundle)',
+  'Paid (Bundle)',
+  'Paid (Custom App)'
+]
+const AUTO_RENEWAL_OPTIONS = ['No', 'Yes']
+const BILLING_CYCLE_OPTIONS = ['Monthly', 'Annually']
+const STATUS_OPTIONS = ['Active', 'Suspend']
+
+// Subscription plan options keyed by billing cycle (annotation from mockup)
+const SUBSCRIPTION_PLAN_BY_CYCLE: Record<string, string[]> = {
+  Monthly: ['Standard Plan', 'Premium Plan'],
+  Annually: ['Standard Plan', 'Premium Plan']
+}
+
+const PHONE_RULES: Record<string, number> = {
+  '+60': 9,
+  '+61': 9,
+  '+63': 10,
+  '+65': 8,
+  '+66': 9,
+  '+84': 9
+}
+
+const errors = reactive({
+  name: '',
+  organizationName: '',
+  phone: ''
+})
+
+const phonePrefix = ref('+65')
+const phoneNumber = ref('')
+
+/* ── FORM STATE ── */
+const form = reactive({
+  name: '',
+  email: '',
+  organizationName: '',
+  phone: '',
+
+  planType: 'Paid (Bundle)',
+  autoRenewal: 'Yes',
+  billingCycle: 'Monthly',
+  status: 'Active',
+  subscriptionPlan: 'Standard Plan',
+
+  startDate: '',
+  endDate: '',
+
+  includedApps: [] as string[],
+
+  sites: [] as SiteRow[]
+})
+
+/* ── COMPUTED ── */
+const subscriptionPlanOptions = computed(
+  () => SUBSCRIPTION_PLAN_BY_CYCLE[form.billingCycle] ?? []
+)
+
+/* ── WATCH: keep subscription plan valid when billing cycle changes ── */
+watch(subscriptionPlanOptions, options => {
+  if (!options.includes(form.subscriptionPlan)) {
+    form.subscriptionPlan = options[0] ?? ''
+  }
+})
+
+watch(
+  () => form.name,
+  value => {
+    errors.name = value.trim() ? '' : 'Name is required.'
+  }
+)
+
+watch(
+  () => form.organizationName,
+  value => {
+    errors.organizationName = value.trim()
+      ? ''
+      : 'Organization name is required.'
+  }
+)
+
+watch([phonePrefix, phoneNumber], ([prefix, value]) => {
+  const expected = PHONE_RULES[prefix]
+
+  if (!value) {
+    errors.phone = 'Phone is required.'
+  } else if (value.length !== expected) {
+    errors.phone = `Phone number must contain exactly ${expected} digits.`
+  } else {
+    errors.phone = ''
+  }
+})
+
+/* ── EVENTS ── */
+function onBillingCycleChange() {
+  // Start / End date are derived from billing cycle and are not editable.
+  // Recompute or refetch here as needed once wired to a real API.
+}
+function validateForm() {
+  errors.name = ''
+  errors.organizationName = ''
+  errors.phone = ''
+
+  let valid = true
+
+  if (!form.name.trim()) {
+    errors.name = 'Name is required.'
+    valid = false
+  }
+
+  if (!form.organizationName.trim()) {
+    errors.organizationName = 'Organization name is required.'
+    valid = false
+  }
+
+  if (!phoneNumber.value) {
+    errors.phone = 'Phone is required.'
+    valid = false
+  } else {
+    const expected = PHONE_RULES[phonePrefix.value]
+
+    if (expected && phoneNumber.value.length !== expected) {
+      errors.phone = `Phone number must contain ${expected} digits.`
+      valid = false
+    }
+  }
+
+  return valid
+}
+async function handleSubmit() {
+  if (!validateForm()) return
+
+  form.phone = `${phonePrefix.value} ${phoneNumber.value}`
+
+  try {
+    if (userId.value) {
+      await userApi.updateUserFieldById(userId.value, 'name', form.name)
+    }
+
+    await orgApi.updateOrg(orgId.value!, {
+      name: form.organizationName,
+      contact: form.phone
+    })
+
+    emit('submit', { ...form })
+  } catch (error) {
+    console.error(error)
+  }
+}
+const userId = ref('')
+async function loadOrganization() {
+  if (!orgId.value) return
+
+  const org = await orgApi.getById(orgId.value)
+
+  const user = await userApi.getUserByEmail(org.email)
+
+  userId.value = user?._id || user?.id || ''
+
+  form.name = user?.name || ''
+  form.email = org.email || ''
+  form.organizationName = org.name || ''
+  const phone = org.contact || ''
+
+  const match = phone.match(/^(\+\d+)\s*(.*)$/)
+
+  if (match) {
+    phonePrefix.value = match[1]
+    phoneNumber.value = match[2].replace(/\D/g, '')
+  } else {
+    phonePrefix.value = '+65'
+    phoneNumber.value = phone.replace(/\D/g, '')
+  }
+
+  form.includedApps =
+    org.type && APP_CONFIG[org.type] ? [APP_CONFIG[org.type].title] : []
+}
+
+async function loadSites() {
+  if (!orgId.value) return
+
+  const res = await customerSitesApi.getAll({
+    org: orgId.value,
+    limit: 100
+  })
+
+  const rows = res.items ?? []
+
+  form.sites = rows.map((site: any) => ({
+    name: site.name,
+    location: [
+      site.address?.line1,
+      site.address?.city,
+      site.address?.state,
+      site.address?.country
+    ]
+      .filter(Boolean)
+      .join(', ')
+  }))
+}
+watch(
+  () => props.client,
+  async client => {
+    if (!client?._id) return
+
+    await Promise.all([loadOrganization(), loadSites()])
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.form-wrap {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 14px;
+  color: #111827;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 24px 28px 32px;
+}
+
+/* ===== HEADER ===== */
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-bottom: 18px;
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 22px;
+}
+.header h2 {
+  font-size: 20px;
+  font-weight: 700;
+  color: #111827;
+}
+.header p {
+  font-size: 13px;
+  color: #2563eb;
+  margin-top: 2px;
+}
+.actions {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.btn-cancel,
+.btn-submit {
+  border: none;
+  border-radius: 20px;
+  padding: 9px 22px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.btn-cancel {
+  background: #e5e7eb;
+  color: #374151;
+}
+.btn-cancel:hover {
+  opacity: 0.85;
+}
+.btn-submit {
+  background: #e5e7eb;
+  color: #374151;
+}
+.btn-submit:hover {
+  opacity: 0.85;
+}
+
+/* ===== SECTIONS ===== */
+.section {
+  margin-bottom: 26px;
+}
+.section h3 {
+  font-size: 15px;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 14px;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 14px;
+}
+.row-single {
+  grid-template-columns: 1fr;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+}
+.field label {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.field input[type='text'],
+.field input[type='email'] {
+  height: 38px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  color: #111827;
+  background: #fff;
+  outline: none;
+}
+.field input:focus {
+  border-color: #9ca3af;
+}
+.field input::placeholder {
+  color: #9ca3af;
+}
+.field input:disabled {
+  background: #f9fafb;
+  color: #6b7280;
+}
+
+/* ===== SELECT ===== */
+.select-wrap {
+  position: relative;
+}
+.select-wrap select {
+  width: 100%;
+  height: 38px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 0 30px 0 12px;
+  font-size: 13px;
+  color: #111827;
+  background: #fff;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+}
+.select-wrap select:focus {
+  border-color: #9ca3af;
+}
+.select-wrap .chevron {
+  position: absolute;
+  right: 11px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 10px;
+  height: 6px;
+  pointer-events: none;
+}
+
+/* ===== DATE ===== */
+.date-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.date-input input {
+  width: 100%;
+  height: 38px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 0 34px 0 12px;
+  font-size: 13px;
+  color: #6b7280;
+  background: #f9fafb;
+  outline: none;
+}
+.date-input svg {
+  position: absolute;
+  right: 12px;
+  pointer-events: none;
+}
+
+/* ===== HINT ===== */
+.hint {
+  font-size: 11px;
+  color: #9ca3af;
+  line-height: 1.4;
+}
+.hint-below {
+  margin-top: 4px;
+}
+
+/* ===== INCLUDED APPS ===== */
+.app-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.app-list li {
+  font-size: 13px;
+  color: #374151;
+}
+
+/* ===== SITE TABLE ===== */
+.site-table {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.site-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.site-table thead th {
+  padding: 10px 16px;
+  text-align: left;
+  font-weight: 600;
+  color: #374151;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+}
+.site-table tbody tr {
+  border-bottom: 1px solid #f3f4f6;
+}
+.site-table tbody tr:last-child {
+  border-bottom: none;
+}
+.site-table tbody td {
+  padding: 12px 16px;
+}
+.site-table .td-name {
+  font-weight: 500;
+  color: #111827;
+}
+.site-table .td-muted {
+  color: #6b7280;
+}
+.site-table .empty {
+  text-align: center;
+  color: #9ca3af;
+  padding: 24px 0 !important;
+}
+.phone-input {
+  display: flex;
+  gap: 8px;
+}
+
+.phone-input .prefix {
+  width: 80px;
+  background: #f3f4f6;
+}
+
+.phone-input .number {
+  flex: 1;
+}
+
+.error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #ef4444;
+}
+</style>