QuantEngineByItz/oms-wms-erp/src/components/fields/domain/SupplierField/SupplierField.vue

<template>
  <div class="supplier-field">
    <!-- Supplier Search/Select -->
    <div class="form-group">
      <label class="form-label">
        Supplier
        <span class="text-danger">*</span>
      </label>
      <div class="input-group">
        <input
          v-model="searchQuery"
          type="text"
          class="form-control"
          placeholder="Search by company name..."
          @input="handleSearch"
        />
        <button
          v-if="isSearching"
          class="btn btn-outline-secondary"
          disabled
        >
          <span class="spinner-border spinner-border-sm"></span>
        </button>
      </div>

      <!-- Search Results Dropdown -->
      <div v-if="searchResults.length > 0" class="supplier-dropdown">
        <div
          v-for="supplier in searchResults"
          :key="supplier.id"
          class="dropdown-item"
          @click="selectSupplier(supplier)"
        >
          <strong>{{ supplier.name }}</strong>
          <small class="text-muted d-block">{{ supplier.email }} | {{ supplier.phone }}</small>
        </div>
      </div>

      <div v-if="searchError" class="invalid-feedback d-block">
        {{ searchError }}
      </div>
    </div>

    <!-- Selected Supplier Details -->
    <div v-if="selectedSupplier" class="card mt-2">
      <div class="card-body">
        <h5 class="card-title">{{ selectedSupplier.name }}</h5>

        <div class="row mb-3">
          <div class="col-md-6">
            <small>
              <strong>Email:</strong> {{ selectedSupplier.email }}<br>
              <strong>Phone:</strong> {{ selectedSupplier.phone }}<br>
              <strong>City:</strong> {{ selectedSupplier.city }}<br>
            </small>
          </div>

          <div class="col-md-6">
            <small>
              <strong>Status:</strong>
              <span :class="statusClass">{{ selectedSupplier.status }}</span><br>
              <strong>Rating:</strong>
              <span class="rating-stars">{{ renderStars(selectedSupplier.rating) }}</span><br>
              <strong>Joined:</strong> {{ formatDate(selectedSupplier.joinedDate) }}<br>
            </small>
          </div>
        </div>

        <!-- Delivery & Payment Terms -->
        <div class="terms-section mt-3 pt-3 border-top">
          <h6>Terms & Conditions</h6>

          <div class="row">
            <div class="col-md-6">
              <small>
                <strong>Lead Time:</strong>
                <span :class="leadTimeClass">{{ selectedSupplier.leadTimeDays }} days</span><br>
                <strong>Min Order:</strong> {{ formatCurrency(selectedSupplier.minOrderAmount) }}<br>
              </small>
            </div>

            <div class="col-md-6">
              <small>
                <strong>Payment Terms:</strong>
                <span class="badge bg-info">{{ selectedSupplier.paymentTerms }}</span><br>
                <strong>Reliability:</strong>
                <span :class="reliabilityClass">{{ selectedSupplier.onTimeDeliveryRate }}% on-time</span><br>
              </small>
            </div>
          </div>
        </div>

        <!-- Reliability Alert -->
        <div v-if="selectedSupplier.onTimeDeliveryRate < 85" class="alert alert-warning mt-2">
          ⚠️ Delivery Reliability: {{ selectedSupplier.onTimeDeliveryRate }}%
          (Below 85% standard)
        </div>

        <!-- Clear Button -->
        <button
          class="btn btn-sm btn-outline-secondary mt-2"
          @click="clearSelection"
        >
          Clear
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useFormatting } from '@/composables/useFormatting'

interface Supplier {
  id: string
  name: string
  email: string
  phone: string
  city: string
  status: string
  rating: number // 1-5
  joinedDate: string
  leadTimeDays: number
  minOrderAmount: number
  paymentTerms: string
  onTimeDeliveryRate: number // 0-100
}

const props = defineProps<{
  modelValue: string // supplier ID
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
  select: [supplier: Supplier]
}>()

const { formatCurrency, formatDate } = useFormatting()

// State
const searchQuery = ref('')
const searchResults = ref<Supplier[]>([])
const selectedSupplier = ref<Supplier | null>(null)
const isSearching = ref(false)
const searchError = ref<string | null>(null)

// Computed
const statusClass = computed(() => {
  if (!selectedSupplier.value) return ''
  switch (selectedSupplier.value.status) {
    case 'ACTIVE':
      return 'badge bg-success'
    case 'INACTIVE':
      return 'badge bg-secondary'
    case 'SUSPENDED':
      return 'badge bg-danger'
    case 'TRIAL':
      return 'badge bg-warning'
    default:
      return 'badge bg-secondary'
  }
})

const leadTimeClass = computed(() => {
  if (!selectedSupplier.value) return ''
  if (selectedSupplier.value.leadTimeDays > 14) return 'text-danger'
  if (selectedSupplier.value.leadTimeDays > 7) return 'text-warning'
  return 'text-success'
})

const reliabilityClass = computed(() => {
  if (!selectedSupplier.value) return ''
  if (selectedSupplier.value.onTimeDeliveryRate < 85) return 'text-danger'
  if (selectedSupplier.value.onTimeDeliveryRate < 95) return 'text-warning'
  return 'text-success'
})

// Methods
const renderStars = (rating: number): string => {
  return '★'.repeat(Math.round(rating)) + '☆'.repeat(5 - Math.round(rating))
}

const handleSearch = async (e: Event) => {
  const input = e.target as HTMLInputElement
  searchQuery.value = input.value

  if (!searchQuery.value) {
    searchResults.value = []
    searchError.value = null
    return
  }

  isSearching.value = true
  searchError.value = null

  try {
    // Mock API call - would be: await suppliersApi.searchSuppliers(searchQuery.value)
    const results = await mockSearchSuppliers(searchQuery.value)
    searchResults.value = results
  } catch (error) {
    searchError.value = 'Failed to search suppliers'
  } finally {
    isSearching.value = false
  }
}

const selectSupplier = async (supplier: Supplier) => {
  selectedSupplier.value = supplier
  searchQuery.value = supplier.name
  searchResults.value = []

  emit('update:modelValue', supplier.id)
  emit('select', supplier)
}

const clearSelection = () => {
  selectedSupplier.value = null
  searchQuery.value = ''
  searchResults.value = []
  emit('update:modelValue', '')
}

// Mock API - would be replaced with real API call
const mockSearchSuppliers = async (query: string): Promise<Supplier[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const mockSuppliers: Supplier[] = [
        {
          id: 'SUP-001',
          name: 'Premium Electronics Co.',
          email: 'sales@premium-elec.com',
          phone: '010-1111-2222',
          city: 'Seoul',
          status: 'ACTIVE',
          rating: 5,
          joinedDate: '2023-01-15',
          leadTimeDays: 3,
          minOrderAmount: 500000,
          paymentTerms: 'Net 30',
          onTimeDeliveryRate: 98
        },
        {
          id: 'SUP-002',
          name: 'Standard Parts Supplier',
          email: 'contact@standard-parts.com',
          phone: '010-3333-4444',
          city: 'Busan',
          status: 'ACTIVE',
          rating: 4,
          joinedDate: '2022-06-20',
          leadTimeDays: 7,
          minOrderAmount: 300000,
          paymentTerms: 'Net 45',
          onTimeDeliveryRate: 92
        },
        {
          id: 'SUP-003',
          name: 'Budget Components Ltd',
          email: 'procurement@budget-comp.com',
          phone: '010-5555-6666',
          city: 'Incheon',
          status: 'ACTIVE',
          rating: 3,
          joinedDate: '2021-11-10',
          leadTimeDays: 14,
          minOrderAmount: 200000,
          paymentTerms: 'COD',
          onTimeDeliveryRate: 78
        },
        {
          id: 'SUP-004',
          name: 'International Imports Inc',
          email: 'trade@intl-imports.com',
          phone: '010-7777-8888',
          city: 'Seoul',
          status: 'TRIAL',
          rating: 4,
          joinedDate: '2024-08-01',
          leadTimeDays: 21,
          minOrderAmount: 1000000,
          paymentTerms: 'Prepaid',
          onTimeDeliveryRate: 88
        }
      ]

      resolve(
        mockSuppliers.filter((s) =>
          s.name.toLowerCase().includes(query.toLowerCase()) ||
          s.city.toLowerCase().includes(query.toLowerCase())
        )
      )
    }, 300)
  })
}
</script>

<style scoped>
.supplier-field {
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
  position: relative;
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.875rem;
}

.input-group {
  display: flex;
  position: relative;
}

.form-control {
  border-radius: 4px;
  border: 1px solid #dee2e6;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  flex: 1;
}

.form-control:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0 4px 4px 0;
  border: 1px solid #dee2e6;
  border-left: 0;
  cursor: pointer;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-secondary:disabled {
  opacity: 0.65;
}

.spinner-border {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

.supplier-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
}

.dropdown-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.15s ease-in-out;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.card {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-body {
  padding: 1rem;
}

.card-title {
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 1rem;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.col-md-6 {
  flex: 1;
}

small {
  line-height: 1.8;
  display: block;
}

.text-muted {
  color: #6c757d;
}

.badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
  color: white;
}

.bg-success {
  background-color: #28a745 !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

.bg-warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

.text-success {
  color: #28a745;
  font-weight: 600;
}

.text-warning {
  color: #ffc107;
  font-weight: 600;
}

.text-danger {
  color: #dc3545;
  font-weight: 600;
}

.text-danger {
  color: #dc3545;
  margin-left: 0.25rem;
}

.rating-stars {
  font-size: 1rem;
  color: #ffc107;
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  border: 1px solid transparent;
  margin-bottom: 1rem;
}

.alert-warning {
  background-color: #fff3cd;
  color: #856404;
  border-color: #ffeaa7;
}

.invalid-feedback {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.d-block {
  display: block;
}

.border-top {
  border-top: 1px solid #dee2e6;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.pt-3 {
  padding-top: 1rem;
}

h6 {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.terms-section {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
}

.btn-outline-secondary:hover:not(:disabled) {
  background-color: #6c757d;
  color: white;
}
</style>