port-nimara-client-portal/pages/dashboard/interest-list.vue

<template>
  <div>
    <v-container fluid>
      <!-- Header Section -->
      <v-row class="mb-6">
        <v-col cols="12">
          <h1 class="text-h4 font-weight-bold mb-2">
            <v-icon class="mr-2" color="primary">mdi-account-group</v-icon>
            Interest List
          </h1>
          <p class="text-subtitle-1 text-grey-darken-1">
            Manage and track all potential client interests
          </p>
        </v-col>
      </v-row>

      <!-- Search and Filters Section -->
      <v-row class="mb-4">
        <v-col cols="12" md="6">
          <v-text-field
            v-model="search"
            label="Search interests..."
            placeholder="Search by name, yacht, email, phone..."
            prepend-inner-icon="mdi-magnify"
            variant="outlined"
            density="comfortable"
            clearable
            hide-details
            class="search-field"
          >
            <template v-slot:append-inner>
              <v-fade-transition>
                <v-chip
                  v-if="filteredInterests.length !== interests?.list?.length"
                  size="small"
                  color="primary"
                  variant="tonal"
                >
                  {{ filteredInterests.length }} results
                </v-chip>
              </v-fade-transition>
            </template>
          </v-text-field>
        </v-col>
        <v-col cols="12" md="6" class="d-flex justify-end align-center">
          <v-chip-group
            v-model="selectedSalesLevel"
            selected-class="text-primary"
            column
          >
            <v-chip
              filter
              variant="outlined"
              size="small"
              value="all"
            >
              All Levels
            </v-chip>
            <v-chip
              filter
              variant="outlined"
              size="small"
              value="qualified"
            >
              Qualified
            </v-chip>
            <v-chip
              filter
              variant="outlined"
              size="small"
              value="loi"
            >
              LOI Sent
            </v-chip>
            <v-chip
              filter
              variant="outlined"
              size="small"
              value="reserved"
            >
              Reserved
            </v-chip>
          </v-chip-group>
        </v-col>
      </v-row>

      <!-- Data Table -->
      <v-card elevation="0" class="rounded-lg">
        <v-data-table
          :headers="headers"
          :items="filteredInterests"
          :search="search"
          :sort-by="[{ key: 'Created At', order: 'desc' }, { key: 'Full Name', order: 'asc' }]"
          must-sort
          hover
          :loading="loading"
          loading-text="Loading interests..."
          :items-per-page="50"
          :items-per-page-options="[10, 20, 50, 100]"
          class="modern-table"
        >
          <template #item="{ item }">
            <tr @click="handleRowClick(item)" class="table-row">
              <td>
                <div class="d-flex align-center">
                  <v-avatar size="32" color="primary" class="mr-3">
                    <span class="text-white text-caption font-weight-bold">
                      {{ getInitials(item["Full Name"]) }}
                    </span>
                  </v-avatar>
                  <div>
                    <div class="font-weight-medium">{{ item["Full Name"] }}</div>
                    <div class="text-caption text-grey-darken-1">{{ item["Email Address"] }}</div>
                  </div>
                </div>
              </td>
              <td>
                <div v-if="item['Yacht Name']" class="d-flex align-center">
                  <v-icon size="small" class="mr-2" color="blue-darken-2">mdi-sail-boat</v-icon>
                  <span>{{ item["Yacht Name"] }}</span>
                </div>
                <span v-else class="text-grey-darken-1">—</span>
              </td>
              <td>
                <v-chip
                  v-if="item['Berth Number']"
                  size="small"
                  color="deep-purple"
                  variant="tonal"
                >
                  {{ item["Berth Number"] }}
                </v-chip>
                <span v-else class="text-grey-darken-1">—</span>
              </td>
              <td>
                <InterestSalesBadge
                  :salesProcessLevel="item['Sales Process Level']"
                />
              </td>
              <td>
                <div v-if="item['Phone Number']" class="d-flex align-center">
                  <v-icon size="small" class="mr-2" color="green-darken-2">mdi-phone</v-icon>
                  <span>{{ item["Phone Number"] }}</span>
                </div>
                <span v-else class="text-grey-darken-1">—</span>
              </td>
              <td><LeadCategoryBadge :leadCategory="item['Lead Category']" /></td>
              <td>
                <div class="text-caption">
                  <div>{{ formatDate(item["Created At"]) }}</div>
                  <div class="text-grey-darken-1">{{ getRelativeTime(item["Created At"]) }}</div>
                </div>
              </td>
              <td>
                <v-tooltip v-if="item['Extra Comments']" location="bottom">
                  <template #activator="{ props }">
                    <v-chip
                      v-bind="props"
                      size="small"
                      color="orange"
                      variant="tonal"
                    >
                      <v-icon start size="small">mdi-comment-text</v-icon>
                      Note
                    </v-chip>
                  </template>
                  <span>{{ item["Extra Comments"] }}</span>
                </v-tooltip>
                <span v-else class="text-grey-darken-1">—</span>
              </td>
            </tr>
          </template>


        </v-data-table>
      </v-card>
    </v-container>

    <!-- Interest Details Modal -->
    <InterestDetailsModal
      v-model="showModal"
      :selected-interest="selectedInterest"
      @save="handleSaveInterest"
      @request-more-info-to-sales="handleRequestMoreInfoToSales"
      @request-more-information="handleRequestMoreInformation"
      @eoi-send-to-sales="handleEoiSendToSales"
    />
  </div>
</template>

<script lang="ts" setup>
import LeadCategoryBadge from "~/components/LeadCategoryBadge.vue";
import InterestSalesBadge from "~/components/InterestSalesBadge.vue";
import InterestDetailsModal from "~/components/InterestDetailsModal.vue";
import { useFetch } from "#app";
import { ref, computed } from "vue";
import type { Interest } from "@/utils/types";

useHead({
  title: "Interest List",
});

const user = useDirectusUser();
const router = useRouter();
const loading = ref(true);
const showModal = ref(false);
const selectedInterest = ref<Interest | null>(null);
const selectedSalesLevel = ref('all');

const { data: interests, refresh } = useFetch<InterestsResponse>("/api/get-interests", {
  headers: {
    "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
  },
  onResponse() {
    loading.value = false;
  },
  onResponseError() {
    loading.value = false;
  },
});

const search = ref("");

const handleRowClick = (interest: Interest) => {
  selectedInterest.value = { ...interest };
  showModal.value = true;
};

// Event handlers for the modal
const handleSaveInterest = async (interest: Interest) => {
  // Refresh the interests data to reflect the updates
  loading.value = true;
  await refresh();
  loading.value = false;
};

const handleRequestMoreInfoToSales = (interest: Interest) => {
  // The modal component already handles the API call
  // You can add additional logic here if needed
};

const handleRequestMoreInformation = (interest: Interest) => {
  // The modal component already handles the API call
  // You can add additional logic here if needed
};

const handleEoiSendToSales = (interest: Interest) => {
  // The modal component already handles the API call
  // You can add additional logic here if needed
};

const headers = [
  { title: "Contact", key: "Full Name", sortable: true, width: "25%" },
  { title: "Yacht", key: "Yacht Name", sortable: true },
  { title: "Berth", key: "Berth Number", sortable: true },
  { title: "Status", key: "Sales Process Level", sortable: true },
  { title: "Phone", key: "Phone Number", sortable: false },
  { title: "Category", key: "Lead Category", sortable: true },
  { title: "Created", key: "Created At", sortable: true },
  { title: "Notes", key: "Extra Comments", sortable: false },
];

const formatDate = (dateString: string) => {
  if (!dateString) return "-";
  
  try {
    // Handle DD-MM-YYYY format
    const parts = dateString.split("-");
    if (parts.length === 3) {
      const day = parseInt(parts[0], 10);
      const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed in JavaScript
      const year = parseInt(parts[2], 10);
      
      const date = new Date(year, month, day);
      
      // Check if the date is valid
      if (isNaN(date.getTime())) {
        console.warn("Invalid date format:", dateString);
        return "-";
      }
      
      return date.toLocaleDateString("en-US", {
        year: "numeric",
        month: "short",
        day: "numeric",
      });
    } else {
      // Fallback to standard Date parsing
      const date = new Date(dateString);
      
      if (isNaN(date.getTime())) {
        console.warn("Invalid date format:", dateString);
        return "-";
      }
      
      return date.toLocaleDateString("en-US", {
        year: "numeric",
        month: "short",
        day: "numeric",
      });
    }
  } catch (error) {
    console.error("Error formatting date:", dateString, error);
    return "-";
  }
};

const filteredInterests = computed(() => {
  if (!interests.value?.list) return [];

  let filtered = interests.value.list;

  // Apply sales level filter
  if (selectedSalesLevel.value !== 'all') {
    filtered = filtered.filter((item) => {
      const level = item['Sales Process Level']?.toLowerCase() || '';
      switch (selectedSalesLevel.value) {
        case 'qualified':
          return level.includes('qualified');
        case 'loi':
          return level.includes('loi');
        case 'reserved':
          return level.includes('reservation') || level.includes('reserved');
        default:
          return true;
      }
    });
  }

  // Apply search filter
  if (search.value) {
    const searchLower = search.value.toLowerCase();
    filtered = filtered.filter((item) => {
      return Object.values(item).some((value) =>
        String(value).toLowerCase().includes(searchLower)
      );
    });
  }

  return filtered;
});

// Helper function to get initials
const getInitials = (name: string) => {
  if (!name) return '?';
  const parts = name.split(' ');
  if (parts.length >= 2) {
    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
  }
  return name.substring(0, 2).toUpperCase();
};

// Helper function to get relative time
const getRelativeTime = (dateString: string) => {
  if (!dateString) return '';
  
  try {
    let date: Date;
    
    // Handle DD-MM-YYYY format
    if (dateString.includes('-')) {
      const parts = dateString.split('-');
      if (parts.length === 3) {
        const [day, month, year] = parts;
        date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
      } else {
        date = new Date(dateString);
      }
    } else {
      date = new Date(dateString);
    }
    
    if (isNaN(date.getTime())) return '';
    
    const now = new Date();
    const diffTime = Math.abs(now.getTime() - date.getTime());
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
    
    if (diffDays === 0) return 'Today';
    if (diffDays === 1) return 'Yesterday';
    if (diffDays < 7) return `${diffDays} days ago`;
    if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
    if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
    return `${Math.floor(diffDays / 365)} years ago`;
  } catch (error) {
    return '';
  }
};
</script>

<style scoped>
.search-field :deep(.v-field) {
  transition: all 0.3s ease;
}

.search-field:focus-within :deep(.v-field) {
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.modern-table :deep(.v-table__wrapper) {
  border-radius: 8px;
  overflow: hidden;
}

.modern-table :deep(.v-data-table-header__content) {
  font-weight: 600;
  color: #424242;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.modern-table :deep(tbody tr) {
  transition: all 0.2s ease;
}

.modern-table :deep(tbody tr:hover) {
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.table-row {
  cursor: pointer;
}

.table-row td {
  padding: 16px !important;
  border-bottom: 1px solid #e0e0e0;
}

.table-row:last-child td {
  border-bottom: none;
}

.v-avatar {
  font-size: 0.875rem;
}
</style>