feat: add new status columns

components/BerthInfoSentStatusBadge.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-chip :color="badgeColor" small>
+    {{ berthInfoSentStatus }}
+  </v-chip>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue';
+import type { BerthInfoSentStatus } from '~/utils/types';
+
+const props = defineProps<{
+  berthInfoSentStatus: BerthInfoSentStatus;
+}>();
+
+const colorMapping: Record<BerthInfoSentStatus, string> = {
+  "Pending": "amber",
+  "Yes": "green"
+};
+
+const badgeColor = computed(() => {
+  return colorMapping[props.berthInfoSentStatus] || 'grey';
+});
+</script>
+
+<style scoped>
+.v-chip {
+  font-size: 0.8rem;
+}
+</style>

components/ContractSentStatusBadge.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-chip :color="badgeColor" small>
+    {{ contractSentStatus }}
+  </v-chip>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue';
+import type { ContractSentStatus } from '~/utils/types';
+
+const props = defineProps<{
+  contractSentStatus: ContractSentStatus;
+}>();
+
+const colorMapping: Record<ContractSentStatus, string> = {
+  "Pending": "amber",
+  "Yes": "green"
+};
+
+const badgeColor = computed(() => {
+  return colorMapping[props.contractSentStatus] || 'grey';
+});
+</script>
+
+<style scoped>
+.v-chip {
+  font-size: 0.8rem;
+}
+</style>

components/ContractStatusBadge.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-chip :color="badgeColor" small>
+    {{ contractStatus }}
+  </v-chip>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue';
+import type { ContractStatus } from '~/utils/types';
+
+const props = defineProps<{
+  contractStatus: ContractStatus;
+}>();
+
+const colorMapping: Record<ContractStatus, string> = {
+  "Pending": "amber",
+  "40% Received": "blue",
+  "Complete": "green"
+};
+
+const badgeColor = computed(() => {
+  return colorMapping[props.contractStatus] || 'grey';
+});
+</script>
+
+<style scoped>
+.v-chip {
+  font-size: 0.8rem;
+}
+</style>

components/CreateInterestModal.vue

@@ -1,229 +1,309 @@
 <template>
   <v-dialog
     v-model="isOpen"
-    max-width="800"
+    fullscreen
-    persistent
+    hide-overlay
+    transition="dialog-bottom-transition"
   >
     <v-card>
       <v-toolbar dark color="primary">
+        <v-btn icon dark @click="closeModal">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
         <v-toolbar-title>
           <v-icon class="mr-2">mdi-account-plus</v-icon>
           Create New Interest
         </v-toolbar-title>
         <v-spacer></v-spacer>
-        <v-btn icon dark @click="closeModal">
+        <v-toolbar-items>
-          <v-icon>mdi-close</v-icon>
+          <v-btn
-        </v-btn>
+            variant="flat"
+            color="success"
+            :size="mobile ? 'default' : 'large'"
+            @click="createInterest"
+            :loading="isCreating"
+            :disabled="isCreating"
+            class="ml-2"
+            :icon="mobile"
+          >
+            <v-icon v-if="mobile">mdi-content-save</v-icon>
+            <template v-else>
+              <v-icon start>mdi-content-save</v-icon>
+              Create Interest
+            </template>
+          </v-btn>
+        </v-toolbar-items>
       </v-toolbar>
 
-      <v-card-text class="pa-4">
+      <v-card-text>
         <v-alert
           type="info"
           variant="tonal"
-          class="mb-4"
+          class="mb-6"
         >
           Berths and berth recommendations can only be assigned after creating the interest.
         </v-alert>
 
         <v-form ref="form" @submit.prevent="createInterest">
           <!-- Contact Information Section -->
-          <div class="text-h6 mb-3">
+          <v-card variant="flat" class="mb-6">
-            <v-icon class="mr-2" color="primary">mdi-account-circle</v-icon>
+            <v-card-title class="text-h6 d-flex align-center pb-4">
-            Contact Information
+              <v-icon class="mr-2" color="primary">mdi-account-circle</v-icon>
-          </div>
+              Contact Information
-          <v-row dense class="mb-4">
+            </v-card-title>
-            <v-col cols="12" md="6">
+            <v-card-text class="pt-2">
-              <v-text-field
+              <v-row dense>
-                v-model="newInterest['Full Name']"
+                <v-col cols="12" md="4">
-                label="Full Name *"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest['Full Name']"
-                density="comfortable"
+                    label="Full Name *"
-                prepend-inner-icon="mdi-account"
+                    variant="outlined"
-                :rules="[rules.required]"
+                    density="comfortable"
-                required
+                    prepend-inner-icon="mdi-account"
-              ></v-text-field>
+                    :rules="[rules.required]"
-            </v-col>
+                    required
-            <v-col cols="12" md="6">
+                  ></v-text-field>
-              <v-text-field
+                </v-col>
-                v-model="newInterest['Email Address']"
+                <v-col cols="12" md="4">
-                label="Email Address *"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest['Email Address']"
-                density="comfortable"
+                    label="Email Address *"
-                prepend-inner-icon="mdi-email"
+                    variant="outlined"
-                :rules="[rules.required, rules.email]"
+                    density="comfortable"
-                required
+                    prepend-inner-icon="mdi-email"
-              ></v-text-field>
+                    :rules="[rules.required, rules.email]"
-            </v-col>
+                    required
-            <v-col cols="12" md="6">
+                  ></v-text-field>
-              <v-text-field
+                </v-col>
-                v-model="newInterest['Phone Number']"
+                <v-col cols="12" md="4">
-                label="Phone Number"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest['Phone Number']"
-                density="comfortable"
+                    label="Phone Number"
-                prepend-inner-icon="mdi-phone"
+                    variant="outlined"
-              ></v-text-field>
+                    density="comfortable"
-            </v-col>
+                    prepend-inner-icon="mdi-phone"
-            <v-col cols="12" md="6">
+                  ></v-text-field>
-              <v-select
+                </v-col>
-                v-model="newInterest['Contact Method Preferred']"
+                <v-col cols="12" md="4">
-                label="Preferred Contact Method"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest.Address"
-                density="comfortable"
+                    label="Address"
-                :items="ContactMethodPreferredFlow"
+                    variant="outlined"
-                prepend-inner-icon="mdi-message-text"
+                    density="comfortable"
-              ></v-select>
+                    prepend-inner-icon="mdi-map-marker"
-            </v-col>
+                  ></v-text-field>
-            <v-col cols="12" md="6">
+                </v-col>
-              <v-text-field
+                <v-col cols="12" md="4">
-                v-model="newInterest.Address"
+                  <v-text-field
-                label="Address"
+                    v-model="newInterest['Place of Residence']"
-                variant="outlined"
+                    label="Place of Residence"
-                density="comfortable"
+                    variant="outlined"
-                prepend-inner-icon="mdi-map-marker"
+                    density="comfortable"
-              ></v-text-field>
+                    prepend-inner-icon="mdi-home"
-            </v-col>
+                  ></v-text-field>
-            <v-col cols="12" md="6">
+                </v-col>
-              <v-text-field
+                <v-col cols="12" md="4">
-                v-model="newInterest['Place of Residence']"
+                  <v-select
-                label="Place of Residence"
+                    v-model="newInterest['Contact Method Preferred']"
-                variant="outlined"
+                    label="Contact Method Preferred"
-                density="comfortable"
+                    variant="outlined"
-                prepend-inner-icon="mdi-home"
+                    density="comfortable"
-              ></v-text-field>
+                    :items="ContactMethodPreferredFlow"
-            </v-col>
+                    prepend-inner-icon="mdi-message-text"
-          </v-row>
+                  ></v-select>
+                </v-col>
+              </v-row>
+            </v-card-text>
+          </v-card>
 
           <!-- Yacht Information Section -->
-          <div class="text-h6 mb-3">
+          <v-card variant="flat" class="mb-6">
-            <v-icon class="mr-2" color="primary">mdi-sail-boat</v-icon>
+            <v-card-title class="text-h6 d-flex align-center pb-4">
-            Yacht Information
+              <v-icon class="mr-2" color="primary">mdi-sail-boat</v-icon>
-          </div>
+              Yacht Information
-          <v-row dense class="mb-4">
+            </v-card-title>
-            <v-col cols="12" md="6">
+            <v-card-text class="pt-2">
-              <v-text-field
+              <v-row dense>
-                v-model="newInterest['Yacht Name']"
+                <v-col cols="12" md="3">
-                label="Yacht Name"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest['Yacht Name']"
-                density="comfortable"
+                    label="Yacht Name"
-                prepend-inner-icon="mdi-ferry"
+                    variant="outlined"
-              ></v-text-field>
+                    density="comfortable"
-            </v-col>
+                    prepend-inner-icon="mdi-ferry"
-            <v-col cols="12" md="6">
+                  ></v-text-field>
-              <v-text-field
+                </v-col>
-                v-model="newInterest['Berth Size Desired']"
+                <v-col cols="12" md="3">
-                label="Berth Size Desired"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest.Length"
-                density="comfortable"
+                    label="Length"
-                prepend-inner-icon="mdi-tape-measure"
+                    variant="outlined"
-              ></v-text-field>
+                    density="comfortable"
-            </v-col>
+                    prepend-inner-icon="mdi-ruler"
-            <v-col cols="12" md="4">
+                  ></v-text-field>
-              <v-text-field
+                </v-col>
-                v-model="newInterest.Length"
+                <v-col cols="12" md="3">
-                label="Length"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest.Width"
-                density="comfortable"
+                    label="Width"
-                prepend-inner-icon="mdi-ruler"
+                    variant="outlined"
-              ></v-text-field>
+                    density="comfortable"
-            </v-col>
+                    prepend-inner-icon="mdi-arrow-expand-horizontal"
-            <v-col cols="12" md="4">
+                  ></v-text-field>
-              <v-text-field
+                </v-col>
-                v-model="newInterest.Width"
+                <v-col cols="12" md="3">
-                label="Width"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest.Depth"
-                density="comfortable"
+                    label="Depth"
-                prepend-inner-icon="mdi-arrow-expand-horizontal"
+                    variant="outlined"
-              ></v-text-field>
+                    density="comfortable"
-            </v-col>
+                    prepend-inner-icon="mdi-arrow-expand-vertical"
-            <v-col cols="12" md="4">
+                  ></v-text-field>
-              <v-text-field
+                </v-col>
-                v-model="newInterest.Depth"
+              </v-row>
-                label="Depth"
+            </v-card-text>
-                variant="outlined"
+          </v-card>
-                density="comfortable"
-                prepend-inner-icon="mdi-arrow-expand-vertical"
-              ></v-text-field>
-            </v-col>
-          </v-row>
 
-          <!-- Sales Information Section -->
+          <!-- Berth & Sales Information Section -->
-          <div class="text-h6 mb-3">
+          <v-card variant="flat" class="mb-6">
-            <v-icon class="mr-2" color="primary">mdi-chart-line</v-icon>
+            <v-card-title class="text-h6 d-flex align-center pb-4">
-            Sales Information
+              <v-icon class="mr-2" color="primary">mdi-anchor</v-icon>
-          </div>
+              Berth & Sales Information
-          <v-row dense class="mb-4">
+            </v-card-title>
-            <v-col cols="12" md="6">
+            <v-card-text class="pt-2">
-              <v-select
+              <v-row dense>
-                v-model="newInterest['Sales Process Level']"
+                <v-col cols="12" md="4">
-                label="Sales Process Level *"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest['Berth Size Desired']"
-                density="comfortable"
+                    label="Berth Size Desired"
-                :items="InterestSalesProcessLevelFlow"
+                    variant="outlined"
-                prepend-inner-icon="mdi-chart-line"
+                    density="comfortable"
-                :rules="[rules.required]"
+                    prepend-inner-icon="mdi-tape-measure"
-                required
+                  ></v-text-field>
-              ></v-select>
+                </v-col>
-            </v-col>
+                <v-col cols="12" md="4">
-            <v-col cols="12" md="6">
+                  <v-select
-              <v-select
+                    v-model="newInterest['Sales Process Level']"
-                v-model="newInterest['Lead Category']"
+                    label="Sales Process Level *"
-                label="Lead Category"
+                    variant="outlined"
-                variant="outlined"
+                    density="comfortable"
-                density="comfortable"
+                    :items="InterestSalesProcessLevelFlow"
-                :items="InterestLeadCategoryFlow"
+                    prepend-inner-icon="mdi-chart-line"
-                prepend-inner-icon="mdi-tag"
+                    :rules="[rules.required]"
-              ></v-select>
+                    required
-            </v-col>
+                  ></v-select>
-          </v-row>
+                </v-col>
+                <v-col cols="12" md="4">
+                  <v-select
+                    v-model="newInterest['Lead Category']"
+                    label="Lead Category"
+                    variant="outlined"
+                    density="comfortable"
+                    :items="InterestLeadCategoryFlow"
+                    prepend-inner-icon="mdi-tag"
+                  ></v-select>
+                </v-col>
+              </v-row>
+            </v-card-text>
+          </v-card>
+
+          <!-- Process Status Section -->
+          <v-card variant="flat" class="mb-6">
+            <v-card-title class="text-h6 d-flex align-center pb-4">
+              <v-icon class="mr-2" color="primary">mdi-progress-check</v-icon>
+              Process Status
+            </v-card-title>
+            <v-card-text class="pt-2">
+              <v-row dense>
+                <v-col cols="12">
+                  <v-row dense>
+                    <v-col cols="12" md="2">
+                      <v-select
+                        v-model="newInterest['EOI Status']"
+                        label="EOI Status"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="EOIStatusFlow"
+                        prepend-inner-icon="mdi-file-document-outline"
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="2">
+                      <v-select
+                        v-model="newInterest['Berth Info Sent Status']"
+                        label="Berth Info Sent"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="BerthInfoSentStatusFlow"
+                        prepend-inner-icon="mdi-information-outline"
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="2">
+                      <v-select
+                        v-model="newInterest['Contract Sent Status']"
+                        label="Contract Sent"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="ContractSentStatusFlow"
+                        prepend-inner-icon="mdi-email-send"
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="3">
+                      <v-select
+                        v-model="newInterest['Deposit 10% Status']"
+                        label="Deposit 10%"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="Deposit10PercentStatusFlow"
+                        prepend-inner-icon="mdi-cash"
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="3">
+                      <v-select
+                        v-model="newInterest['Contract Status']"
+                        label="Contract Status"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="ContractStatusFlow"
+                        prepend-inner-icon="mdi-file-document"
+                      ></v-select>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-card-text>
+          </v-card>
 
           <!-- Additional Information Section -->
-          <div class="text-h6 mb-3">
+          <v-card variant="flat" class="mb-6">
-            <v-icon class="mr-2" color="primary">mdi-information</v-icon>
+            <v-card-title class="text-h6 d-flex align-center pb-4">
-            Additional Information
+              <v-icon class="mr-2" color="primary">mdi-information</v-icon>
-          </div>
+              Additional Information
-          <v-row dense>
+            </v-card-title>
-            <v-col cols="12" md="6">
+            <v-card-text class="pt-2">
-              <v-text-field
+              <v-row dense>
-                v-model="newInterest.Source"
+                <v-col cols="12" md="4">
-                label="Source"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest.Source"
-                density="comfortable"
+                    label="Source"
-                prepend-inner-icon="mdi-source-branch"
+                    variant="outlined"
-              ></v-text-field>
+                    density="comfortable"
-            </v-col>
+                    prepend-inner-icon="mdi-source-branch"
-            <v-col cols="12" md="6">
+                  ></v-text-field>
-              <v-text-field
+                </v-col>
-                v-model="newInterest['Extra Comments']"
+                <v-col cols="12" md="8">
-                label="Extra Comments"
+                  <v-text-field
-                variant="outlined"
+                    v-model="newInterest['Extra Comments']"
-                density="comfortable"
+                    label="Extra Comments"
-                prepend-inner-icon="mdi-comment-text"
+                    variant="outlined"
-              ></v-text-field>
+                    density="comfortable"
-            </v-col>
+                    prepend-inner-icon="mdi-comment-text"
-          </v-row>
+                  ></v-text-field>
+                </v-col>
+              </v-row>
+            </v-card-text>
+          </v-card>
         </v-form>
       </v-card-text>
-
-      <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
-        <v-btn
-          variant="text"
-          @click="closeModal"
-          :disabled="isCreating"
-        >
-          Cancel
-        </v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
-          @click="createInterest"
-          :loading="isCreating"
-          :disabled="isCreating"
-        >
-          <v-icon start>mdi-content-save</v-icon>
-          Create Interest
-        </v-btn>
-      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
@@ -235,6 +315,11 @@ import {
   InterestSalesProcessLevelFlow,
   InterestLeadCategoryFlow,
   ContactMethodPreferredFlow,
+  EOIStatusFlow,
+  BerthInfoSentStatusFlow,
+  ContractSentStatusFlow,
+  Deposit10PercentStatusFlow,
+  ContractStatusFlow,
 } from "@/utils/types";
 
 interface Props {
@@ -249,6 +334,7 @@ interface Emits {
 const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
+const { mobile } = useDisplay();
 const user = useDirectusUser();
 const toast = useToast();
 
@@ -277,6 +363,11 @@ const getInitialInterest = () => ({
   "Extra Comments": "",
   "Date Added": new Date().toLocaleDateString("en-GB").replace(/\//g, "-"),
   "Created At": new Date().toLocaleDateString("en-GB").replace(/\//g, "-"),
+  "EOI Status": "Awaiting Further Details",
+  "Berth Info Sent Status": "Pending",
+  "Contract Sent Status": "Pending",
+  "Deposit 10% Status": "Awaiting Further Details",
+  "Contract Status": "Pending",
 });
 
 // New interest data
@@ -339,9 +430,3 @@ const createInterest = async () => {
   }
 };
 </script>
-
-<style scoped>
-.v-alert {
-  border-left: 4px solid rgb(var(--v-theme-info));
-}
-</style>

components/Deposit10PercentStatusBadge.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-chip :color="badgeColor" small>
+    {{ deposit10PercentStatus }}
+  </v-chip>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue';
+import type { Deposit10PercentStatus } from '~/utils/types';
+
+const props = defineProps<{
+  deposit10PercentStatus: Deposit10PercentStatus;
+}>();
+
+const colorMapping: Record<Deposit10PercentStatus, string> = {
+  "Awaiting Further Details": "orange",
+  "Pending": "amber",
+  "Received": "green"
+};
+
+const badgeColor = computed(() => {
+  return colorMapping[props.deposit10PercentStatus] || 'grey';
+});
+</script>
+
+<style scoped>
+.v-chip {
+  font-size: 0.8rem;
+}
+</style>

components/EOIStatusBadge.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-chip :color="badgeColor" small>
+    {{ eoiStatus }}
+  </v-chip>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue';
+import type { EOIStatus } from '~/utils/types';
+
+const props = defineProps<{
+  eoiStatus: EOIStatus;
+}>();
+
+const colorMapping: Record<EOIStatus, string> = {
+  "Awaiting Further Details": "orange",
+  "Signed": "green"
+};
+
+const badgeColor = computed(() => {
+  return colorMapping[props.eoiStatus] || 'grey';
+});
+</script>
+
+<style scoped>
+.v-chip {
+  font-size: 0.8rem;
+}
+</style>

components/InterestDetailsModal.vue

@@ -362,6 +362,72 @@
             </v-card-text>
           </v-card>
 
+          <!-- Process Status Section -->
+          <v-card variant="flat" class="mb-6">
+            <v-card-title class="text-h6 d-flex align-center pb-4">
+              <v-icon class="mr-2" color="primary">mdi-progress-check</v-icon>
+              Process Status
+            </v-card-title>
+            <v-card-text class="pt-2">
+              <v-row dense>
+                <v-col cols="12">
+                  <v-row dense>
+                    <v-col cols="12" md="2">
+                      <v-select
+                        v-model="interest['EOI Status']"
+                        label="EOI Status"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="EOIStatusFlow"
+                        prepend-inner-icon="mdi-file-document-outline"
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="2">
+                      <v-select
+                        v-model="interest['Berth Info Sent Status']"
+                        label="Berth Info Sent"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="BerthInfoSentStatusFlow"
+                        prepend-inner-icon="mdi-information-outline"
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="2">
+                      <v-select
+                        v-model="interest['Contract Sent Status']"
+                        label="Contract Sent"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="ContractSentStatusFlow"
+                        prepend-inner-icon="mdi-email-send"
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="3">
+                      <v-select
+                        v-model="interest['Deposit 10% Status']"
+                        label="Deposit 10%"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="Deposit10PercentStatusFlow"
+                        prepend-inner-icon="mdi-cash"
+                      ></v-select>
+                    </v-col>
+                    <v-col cols="12" md="3">
+                      <v-select
+                        v-model="interest['Contract Status']"
+                        label="Contract Status"
+                        variant="outlined"
+                        density="comfortable"
+                        :items="ContractStatusFlow"
+                        prepend-inner-icon="mdi-file-document"
+                      ></v-select>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-card-text>
+          </v-card>
+
           <!-- Additional Information Section -->
           <v-card variant="flat" class="mb-6">
             <v-card-title class="text-h6 d-flex align-center pb-4">
@@ -433,6 +499,11 @@ import {
   InterestSalesProcessLevelFlow,
   InterestLeadCategoryFlow,
   ContactMethodPreferredFlow,
+  EOIStatusFlow,
+  BerthInfoSentStatusFlow,
+  ContractSentStatusFlow,
+  Deposit10PercentStatusFlow,
+  ContractStatusFlow,
 } from "@/utils/types";
 
 interface Props {

pages/dashboard/interest-list.vue

@@ -125,13 +125,6 @@
                   </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']"
@@ -149,10 +142,38 @@
                 />
               </td>
               <td>
-                <div v-if="item['Phone Number']" class="d-flex align-center">
+                <EOIStatusBadge
-                  <v-icon size="small" class="mr-2" color="green-darken-2">mdi-phone</v-icon>
+                  v-if="item['EOI Status']"
-                  <span>{{ item["Phone Number"] }}</span>
+                  :eoiStatus="item['EOI Status']"
-                </div>
+                />
+                <span v-else class="text-grey-darken-1">—</span>
+              </td>
+              <td>
+                <BerthInfoSentStatusBadge
+                  v-if="item['Berth Info Sent Status']"
+                  :berthInfoSentStatus="item['Berth Info Sent Status']"
+                />
+                <span v-else class="text-grey-darken-1">—</span>
+              </td>
+              <td>
+                <ContractSentStatusBadge
+                  v-if="item['Contract Sent Status']"
+                  :contractSentStatus="item['Contract Sent Status']"
+                />
+                <span v-else class="text-grey-darken-1">—</span>
+              </td>
+              <td>
+                <Deposit10PercentStatusBadge
+                  v-if="item['Deposit 10% Status']"
+                  :deposit10PercentStatus="item['Deposit 10% Status']"
+                />
+                <span v-else class="text-grey-darken-1">—</span>
+              </td>
+              <td>
+                <ContractStatusBadge
+                  v-if="item['Contract Status']"
+                  :contractStatus="item['Contract Status']"
+                />
                 <span v-else class="text-grey-darken-1">—</span>
               </td>
               <td><LeadCategoryBadge :leadCategory="item['Lead Category']" /></td>
@@ -177,7 +198,7 @@
                   </template>
                   <span>{{ item["Extra Comments"] }}</span>
                 </v-tooltip>
-                <span v-else class="text-grey-darken-1">—</span>
+                <span v-else class="text-grey-darken-1"></span>
               </td>
             </tr>
           </template>
@@ -207,6 +228,11 @@ import LeadCategoryBadge from "~/components/LeadCategoryBadge.vue";
 import InterestSalesBadge from "~/components/InterestSalesBadge.vue";
 import InterestDetailsModal from "~/components/InterestDetailsModal.vue";
 import CreateInterestModal from "~/components/CreateInterestModal.vue";
+import EOIStatusBadge from "~/components/EOIStatusBadge.vue";
+import BerthInfoSentStatusBadge from "~/components/BerthInfoSentStatusBadge.vue";
+import ContractSentStatusBadge from "~/components/ContractSentStatusBadge.vue";
+import Deposit10PercentStatusBadge from "~/components/Deposit10PercentStatusBadge.vue";
+import ContractStatusBadge from "~/components/ContractStatusBadge.vue";
 import { useFetch } from "#app";
 import { ref, computed } from "vue";
 import type { Interest } from "@/utils/types";
@@ -258,14 +284,17 @@ const handleInterestCreated = async (interest: Interest) => {
 };
 
 const headers = [
-  { title: "Contact", key: "Full Name", sortable: true, width: "25%" },
+  { title: "Contact", key: "Full Name", sortable: true, width: "20%" },
-  { title: "Yacht", key: "Yacht Name", sortable: true },
   { title: "Berth", key: "Berth Number", sortable: true },
-  { title: "Status", key: "Sales Process Level", sortable: true },
+  { title: "Sales Status", key: "Sales Process Level", sortable: true },
-  { title: "Phone", key: "Phone Number", sortable: false },
+  { title: "EOI Status", key: "EOI Status", sortable: true },
+  { title: "Berth Info", key: "Berth Info Sent Status", sortable: true },
+  { title: "Contract Sent", key: "Contract Sent Status", sortable: true },
+  { title: "Deposit 10%", key: "Deposit 10% Status", sortable: true },
+  { title: "Contract", key: "Contract Status", sortable: true },
   { title: "Category", key: "Lead Category", sortable: true },
   { title: "Created", key: "Created At", sortable: true },
-  { title: "Notes", key: "Extra Comments", sortable: false },
+  { title: "", key: "Extra Comments", sortable: false },
 ];
 
 const formatDate = (dateString: string) => {

pages/dashboard/interest-status.vue

@@ -297,7 +297,7 @@ const getColumnIcon = (level: string) => {
     'General Qualified Interest': 'mdi-account-search',
     'Specific Qualified Interest': 'mdi-account-check',
     'LOI and NDA Sent': 'mdi-email-send',
-    'Signed LOI and NDA': 'mdi-file-sign',
+    'Signed LOI and NDA': 'mdi-file-check',
     'Made Reservation': 'mdi-calendar-check',
     'Contract Negotiation': 'mdi-handshake',
     'Contract Negotiations Finalized': 'mdi-file-document-check',
@@ -406,7 +406,7 @@ const handleDrop = async (event: DragEvent, targetLevel: string) => {
     const response = await $fetch('/api/update-interest', {
       method: 'POST',
       headers: {
-        'x-tag': user.value?.email ? "094ut234" : "pjnvü1230"
+        'x-tag': user.value?.email ? "094ut234" : "pjnvü1230",
       },
       body: {
         id: interestId,

server/utils/nocodb.ts

@@ -69,6 +69,11 @@ export const updateInterest = async (id: string, data: Partial<Interest>) => {
     "Request More Info - To Sales",
     "EOI Send to Sales",
     "Time LOI Sent",
+    "EOI Status",
+    "Berth Info Sent Status",
+    "Contract Sent Status",
+    "Deposit 10% Status",
+    "Contract Status",
   ];
 
   // Filter the data to only include allowed fields
@@ -112,6 +117,11 @@ export const createInterest = async (data: Partial<Interest>) => {
     "Place of Residence",
     "Contact Method Preferred",
     "Lead Category",
+    "EOI Status",
+    "Berth Info Sent Status",
+    "Contract Sent Status",
+    "Deposit 10% Status",
+    "Contract Status",
   ];
 
   // Filter the data to only include allowed fields

utils/types.ts

@@ -62,6 +62,26 @@ export type ContactMethodPreferred = "Email" | "Phone";
 
 export const ContactMethodPreferredFlow = ["Email", "Phone"];
 
+export type EOIStatus = "Awaiting Further Details" | "Signed";
+
+export const EOIStatusFlow = ["Awaiting Further Details", "Signed"];
+
+export type BerthInfoSentStatus = "Pending" | "Yes";
+
+export const BerthInfoSentStatusFlow = ["Pending", "Yes"];
+
+export type ContractSentStatus = "Pending" | "Yes";
+
+export const ContractSentStatusFlow = ["Pending", "Yes"];
+
+export type Deposit10PercentStatus = "Awaiting Further Details" | "Pending" | "Received";
+
+export const Deposit10PercentStatusFlow = ["Awaiting Further Details", "Pending", "Received"];
+
+export type ContractStatus = "Pending" | "40% Received" | "Complete";
+
+export const ContractStatusFlow = ["Pending", "40% Received", "Complete"];
+
 export interface Interest {
   Id: number;
   "Full Name": string;
@@ -94,6 +114,11 @@ export interface Interest {
   "EOI Send to Sales": string;
   "Time LOI Sent": string;
   Berths: number;
+  "EOI Status": EOIStatus;
+  "Berth Info Sent Status": BerthInfoSentStatus;
+  "Contract Sent Status": ContractSentStatus;
+  "Deposit 10% Status": Deposit10PercentStatus;
+  "Contract Status": ContractStatus;
 }
 
 export interface InterestsResponse {