feat: changes

pages/dashboard/interest-list/[id].vue

@@ -0,0 +1,296 @@
+<template>
+  <div>
+    <v-container>
+      <v-btn @click="router.back()" variant="text">
+        <v-icon icon="mdi-arrow-left"></v-icon>
+        Back to Contacts
+      </v-btn>
+
+      <v-card flat>
+        <v-card-text>
+          <v-stepper
+            v-model="currentStep"
+            class="mb-6"
+            variant="flat"
+            alt-labels
+          >
+            <v-stepper-header>
+              <template
+                v-for="(level, index) in InterestSalesProcessLevelFlow"
+                :key="index"
+              >
+                <v-stepper-item
+                  :step="index"
+                  :complete="currentStep + 1 > index"
+                  :title="level"
+                />
+                <v-divider
+                  v-if="index < InterestSalesProcessLevelFlow.length - 1"
+                ></v-divider>
+              </template>
+            </v-stepper-header>
+          </v-stepper>
+
+          <v-form v-if="interest" @submit.prevent="saveInterest">
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Full Name']"
+                  label="Full Name"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Yacht Name']"
+                  label="Yacht Name"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest.Length"
+                  label="Length"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest.Address"
+                  label="Address"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Email Address']"
+                  label="Email Address"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="interest['Sales Process Level']"
+                  label="Sales Process Level"
+                  variant="outlined"
+                  :items="InterestSalesProcessLevelFlow"
+                ></v-select>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Phone Number']"
+                  label="Phone Number"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Extra Comments']"
+                  label="Extra Comments"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Berth Size Desired']"
+                  label="Berth Size Desired"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Berth Recommendations']"
+                  label="Berth Recommendations"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Date Added']"
+                  label="Date Added"
+                  variant="outlined"
+                  readonly
+                  disabled
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest.Width"
+                  label="Width"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest.Depth"
+                  label="Depth"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Created At']"
+                  label="Created At"
+                  variant="outlined"
+                  readonly
+                  disabled
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest.Source"
+                  label="Source"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Place of Residence']"
+                  label="Place of Residence"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="interest['Contact Method Preferred']"
+                  label="Contact Method Preferred"
+                  variant="outlined"
+                  :items="ContactMethodPreferredFlow"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Request Form Sent']"
+                  label="Request Form Sent"
+                  variant="outlined"
+                  readonly
+                  disabled
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Berth Number']"
+                  label="Berth Number"
+                  variant="outlined"
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['EOI Time Sent']"
+                  label="EOI Time Sent"
+                  variant="outlined"
+                  readonly
+                  disabled
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" md="6">
+                <v-select
+                  v-model="interest['Lead Category']"
+                  label="Lead Category"
+                  variant="outlined"
+                  :items="InterestLeadCategoryFlow"
+                ></v-select>
+              </v-col>
+              <v-col cols="12" md="6">
+                <v-text-field
+                  v-model="interest['Time LOI Sent']"
+                  label="Time LOI Sent"
+                  variant="outlined"
+                  readonly
+                  disabled
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" class="d-flex">
+                <v-btn @click="requestMoreInfoToSales" class="mr-2"
+                  >Request More Info - To Sales</v-btn
+                >
+                <v-btn @click="requestMoreInformation" class="mr-2"
+                  >Request More Information</v-btn
+                >
+                <v-btn @click="eoiSendToSales">EOI Send to Sales</v-btn>
+                <v-spacer />
+                <v-btn type="submit" color="primary" class="mr-2">Save</v-btn>
+              </v-col>
+            </v-row>
+          </v-form>
+        </v-card-text>
+      </v-card>
+    </v-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRoute, useRouter } from "#app";
+import { ref, computed, onMounted } from "vue";
+import {
+  InterestSalesProcessLevelFlow,
+  InterestLeadCategoryFlow,
+  ContactMethodPreferredFlow,
+} from "@/utils/types";
+
+const router = useRouter();
+const route = useRoute();
+
+const { data: interest } = useFetch<Interest>("/api/get-interest-by-id", {
+  params: {
+    id: route.params.id,
+  },
+});
+
+const currentStep = computed(() => {
+  return InterestSalesProcessLevelFlow.indexOf(
+    interest.value?.["Sales Process Level"] || ""
+  );
+});
+
+const fetchInterest = async () => {
+  try {
+  } catch (error) {
+    console.error("Failed to fetch interest:", error);
+  }
+};
+
+const saveInterest = async () => {
+  if (interest.value) {
+    try {
+      alert("Interest saved successfully!");
+    } catch (error) {
+      console.error("Failed to save interest:", error);
+    }
+  }
+};
+
+const requestMoreInfoToSales = () => {
+  alert("Request More Info - To Sales");
+};
+
+const requestMoreInformation = () => {
+  alert("Request More Information");
+};
+
+const eoiSendToSales = () => {
+  alert("EOI Send to Sales");
+};
+</script>

pages/dashboard/interest-list/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <v-container>
+      <v-text-field
+        v-model="search"
+        label="Search contacts"
+        prepend-inner-icon="mdi-magnify"
+        variant="outlined"
+        class="mb-4"
+        clearable
+      ></v-text-field>
+
+      <v-data-table
+        :headers="headers"
+        :items="filteredInterests"
+        :search="search"
+        :sort-by="[{ key: 'Full Name', order: 'asc' }]"
+        must-sort
+        hover
+        :loading="loading"
+        loading-text="Loading... Please wait"
+        :items-per-page="50"
+        :items-per-page-options="[10, 20, 50, 100]"
+      >
+        <template #item="{ item }">
+          <tr @click="handleRowClick(item)" class="cursor-pointer">
+            <td>{{ item["Full Name"] }}</td>
+            <td>{{ item["Yacht Name"] }}</td>
+            <td>{{ item.Length }}</td>
+            <td>{{ item.Width }}</td>
+            <td>{{ item.Depth }}</td>
+            <td>{{ item["Berth Number"] }}</td>
+            <td>
+              <InterestSalesBadge
+                :salesProcessLevel="item['Sales Process Level']"
+              />
+            </td>
+            <td>{{ item["Phone Number"] }}</td>
+            <td>{{ item["Email Address"] }}</td>
+            <td><LeadCategoryBadge :leadCategory="item['Lead Category']" /></td>
+            <td>
+              <v-tooltip bottom>
+                <template #activator="{ props }">
+                  <v-icon v-if="item['Extra Comments']" v-bind="props"
+                    >mdi-comment</v-icon
+                  >
+                </template>
+                <span>{{ item["Extra Comments"] }}</span>
+              </v-tooltip>
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+    </v-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LeadCategoryBadge from "~/components/LeadCategoryBadge.vue";
+import InterestSalesBadge from "~/components/InterestSalesBadge.vue";
+import { useFetch } from "#app";
+import { ref, computed } from "vue";
+
+useHead({
+  title: "Interest List",
+});
+
+const user = useDirectusUser();
+const router = useRouter();
+const loading = ref(true);
+
+const { data: interests } = 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) => {
+  router.push(`/dashboard/interest-list/${interest.Id}`);
+};
+
+const headers = [
+  { title: "Full Name", key: "Full Name", sortable: true },
+  { title: "Yacht Name", key: "Yacht Name", sortable: true },
+  { title: "Length", key: "Length", sortable: true },
+  { title: "Width", key: "Width", sortable: true },
+  { title: "Depth", key: "Depth", sortable: true },
+  { title: "Berth Number", key: "Berth Number", sortable: true },
+  { title: "Sales Process Level", key: "Sales Process Level", sortable: true },
+  { title: "Phone", key: "Phone Number", sortable: false },
+  { title: "Email", key: "Email Address", sortable: false },
+  { title: "Lead Category", key: "Lead Category", sortable: true },
+  { title: "Comments", key: "Extra Comments", sortable: false }, // New column for comments
+];
+
+const filteredInterests = computed(() => {
+  if (!interests.value?.list) return [];
+
+  return interests.value.list.filter((item) => {
+    const searchLower = search.value?.toLowerCase() || "";
+    return Object.values(item).some((value) =>
+      String(value).toLowerCase().includes(searchLower)
+    );
+  });
+});
+</script>
+
+<style scoped>
+tr:hover {
+  background-color: #f5f5f5;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>