From b4313dd81571fb838ebdfaf3d735416b22fe313c Mon Sep 17 00:00:00 2001
From: Ron <ron@portnimara.com>
Date: Thu, 29 May 2025 08:32:13 +0300
Subject: [PATCH] feat: changes

---
 components/InterestSalesBadge.vue       |  44 ++++
 components/LeadCategoryBadge.vue        |  28 +++
 nuxt.config.ts                          |   5 +
 pages/dashboard/interest-list.vue       |  30 ---
 pages/dashboard/interest-list/[id].vue  | 296 ++++++++++++++++++++++++
 pages/dashboard/interest-list/index.vue | 124 ++++++++++
 pages/dashboard/interest-status.vue     | 144 ++++++++++--
 server/api/get-interest-by-id.ts        |  29 +++
 server/api/get-interests.ts             |  10 +
 server/utils/nocodb.ts                  |  38 +++
 utils/types.ts                          |  95 ++++++++
 11 files changed, 797 insertions(+), 46 deletions(-)
 create mode 100644 components/InterestSalesBadge.vue
 create mode 100644 components/LeadCategoryBadge.vue
 delete mode 100644 pages/dashboard/interest-list.vue
 create mode 100644 pages/dashboard/interest-list/[id].vue
 create mode 100644 pages/dashboard/interest-list/index.vue
 create mode 100644 server/api/get-interest-by-id.ts
 create mode 100644 server/api/get-interests.ts
 create mode 100644 server/utils/nocodb.ts
 create mode 100644 utils/types.ts

diff --git a/components/InterestSalesBadge.vue b/components/InterestSalesBadge.vue
new file mode 100644
index 0000000..01fbb42
--- /dev/null
+++ b/components/InterestSalesBadge.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-chip :color="badgeColor" small>
+    {{ salesProcessLevel }}
+  </v-chip>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, computed } from "vue";
+
+type InterestSalesProcessLevel =
+  | "General Qualified Interest"
+  | "Specific Qualified Interest"
+  | "LOI and NDA Sent"
+  | "Signed LOI and NDA"
+  | "Made Reservation"
+  | "Contract Negotiation"
+  | "Contract Negotiations Finalized"
+  | "Contract Signed";
+
+const props = defineProps<{
+  salesProcessLevel: InterestSalesProcessLevel;
+}>();
+
+const colorMapping: Record<InterestSalesProcessLevel, string> = {
+  "General Qualified Interest": "blue",
+  "Specific Qualified Interest": "green",
+  "LOI and NDA Sent": "orange",
+  "Signed LOI and NDA": "purple",
+  "Made Reservation": "pink",
+  "Contract Negotiation": "brown",
+  "Contract Negotiations Finalized": "teal",
+  "Contract Signed": "indigo",
+};
+
+const badgeColor = computed(() => {
+  return colorMapping[props.salesProcessLevel] || "grey";
+});
+</script>
+
+<style scoped>
+.v-chip {
+  font-size: 0.8rem;
+}
+</style>
diff --git a/components/LeadCategoryBadge.vue b/components/LeadCategoryBadge.vue
new file mode 100644
index 0000000..23a570d
--- /dev/null
+++ b/components/LeadCategoryBadge.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-chip :color="badgeColor" small>
+    {{ leadCategory }}
+  </v-chip>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue';
+
+const props = defineProps<{
+  leadCategory: string;
+}>();
+
+const colorMapping: Record<string, string> = {
+  "General": "cyan",
+  "Friends and Family": "light-green"
+};
+
+const badgeColor = computed(() => {
+  return colorMapping[props.leadCategory] || 'grey';
+});
+</script>
+
+<style scoped>
+.v-chip {
+  font-size: 0.8rem;
+}
+</style>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 425f1f7..f9cc841 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
+  ssr: false,
   compatibilityDate: "2024-11-01",
   devtools: { enabled: true },
   modules: ["nuxt-directus", "vuetify-nuxt-module", "@vite-pwa/nuxt"],
@@ -17,6 +18,10 @@ export default defineNuxtConfig({
     },
   },
   runtimeConfig: {
+    nocodb: {
+      url: "",
+      token: "",
+    },
     public: {
       directus: {
         url: "https://cms.portnimara.dev",
diff --git a/pages/dashboard/interest-list.vue b/pages/dashboard/interest-list.vue
deleted file mode 100644
index 17411ab..0000000
--- a/pages/dashboard/interest-list.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="embed">
-    <iframe
-      src="https://database.portnimara.com/dashboard/#/nc/view/ebf570e4-8329-424d-a43d-a775d2169ffc"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-useHead({
-  title: "Interest List",
-});
-</script>
-
-<style scoped>
-.embed {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100vh;
-}
-
-.embed iframe {
-  width: 100%;
-  height: calc(100% + 46px);
-  border: 0;
-  position: absolute;
-  top: -46px;
-}
-</style>
diff --git a/pages/dashboard/interest-list/[id].vue b/pages/dashboard/interest-list/[id].vue
new file mode 100644
index 0000000..a09ab7a
--- /dev/null
+++ b/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>
diff --git a/pages/dashboard/interest-list/index.vue b/pages/dashboard/interest-list/index.vue
new file mode 100644
index 0000000..309e4f6
--- /dev/null
+++ b/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>
diff --git a/pages/dashboard/interest-status.vue b/pages/dashboard/interest-status.vue
index cb050c9..04776c8 100644
--- a/pages/dashboard/interest-status.vue
+++ b/pages/dashboard/interest-status.vue
@@ -1,30 +1,142 @@
 <template>
-  <div class="embed">
-    <iframe
-      src="https://database.portnimara.com/dashboard/#/nc/kanban/2fe9125c-9051-4b49-93ff-745159528425"
-    />
-  </div>
+  <v-card>
+    <v-card-text>
+      <v-row class="overflow-x-auto flex-nowrap">
+        <v-col
+          v-for="level in InterestSalesProcessLevelFlow"
+          :key="level"
+          class="v-col-auto"
+        >
+          <v-card v-if="groupedInterests[level].length" color="grey-lighten-5">
+            <v-card-title>
+              <InterestSalesBadge
+                :sales-process-level="(level as InterestSalesProcessLevel)"
+              />
+            </v-card-title>
+            <v-card-text class="overflow-y-auto" style="max-height: 90vh">
+              <v-card
+                v-for="interest in groupedInterests[level]"
+                :key="interest.Id"
+                class="mx-3 my-6"
+                variant="flat"
+                @click="handleInterestClick(interest.Id)"
+                style="cursor: pointer"
+              >
+                <v-card-title>{{ interest["Full Name"] }}</v-card-title>
+                <v-card-text>
+                  <v-list bg-color="transparent">
+                    <v-list-item>
+                      <v-list-item-title>Yacht Name</v-list-item-title>
+                      <v-list-item-subtitle>{{
+                        interest["Yacht Name"] || "-"
+                      }}</v-list-item-subtitle>
+                    </v-list-item>
+                    <v-list-item>
+                      <v-list-item-title>Email Address</v-list-item-title>
+                      <v-list-item-subtitle>{{
+                        interest["Email Address"] || "-"
+                      }}</v-list-item-subtitle>
+                    </v-list-item>
+                    <v-list-item>
+                      <v-list-item-title>Berth Number</v-list-item-title>
+                      <v-list-item-subtitle>{{
+                        interest["Berth Number"] || "-"
+                      }}</v-list-item-subtitle>
+                    </v-list-item>
+                    <v-list-item>
+                      <v-list-item-title>Phone Number</v-list-item-title>
+                      <v-list-item-subtitle>{{
+                        interest["Phone Number"] || "-"
+                      }}</v-list-item-subtitle>
+                    </v-list-item>
+                    <v-list-item>
+                      <v-list-item-title>Berth Size Desired</v-list-item-title>
+                      <v-list-item-subtitle>{{
+                        interest["Berth Size Desired"] || "-"
+                      }}</v-list-item-subtitle>
+                    </v-list-item>
+                  </v-list>
+                </v-card-text>
+              </v-card>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
 </template>
 
 <script lang="ts" setup>
+import { useFetch } from "#app";
+import { ref, computed } from "vue";
+import { useRouter } from "#app";
+
+const router = useRouter();
+
 useHead({
   title: "Interest Status",
 });
+
+const loading = ref(true);
+
+const { data: interests } = useFetch<InterestsResponse>("/api/get-interests", {
+  onResponse() {
+    loading.value = false;
+  },
+  onResponseError() {
+    loading.value = false;
+  },
+});
+
+const groupedInterests = computed(() => {
+  const groups: Record<string, Interest[]> = {};
+
+  InterestSalesProcessLevelFlow.forEach((level) => {
+    groups[level] = [];
+  });
+
+  interests.value?.list.forEach((interest) => {
+    const level = interest["Sales Process Level"];
+    if (groups[level]) {
+      groups[level].push(interest);
+    }
+  });
+
+  // Sort each group by "Full Name"
+  for (const level in groups) {
+    groups[level].sort((a, b) => {
+      if (a["Full Name"] < b["Full Name"]) return -1;
+      if (a["Full Name"] > b["Full Name"]) return 1;
+      return 0;
+    });
+  }
+
+  return groups;
+});
+
+const handleInterestClick = (id: number) => {
+  router.push(`/dashboard/interest-list/${id}`);
+};
 </script>
 
 <style scoped>
-.embed {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100vh;
+.v-card {
+  border-radius: 8px;
 }
 
-.embed iframe {
-  width: 100%;
-  height: calc(100% + 46px);
-  border: 0;
-  position: absolute;
-  top: -46px;
+.v-card-title {
+  font-weight: bold;
+}
+
+.v-list-item {
+  padding: 0;
+}
+
+.v-list-item-content {
+  padding: 0;
+}
+
+.v-list-item-subtitle {
+  white-space: normal;
 }
 </style>
diff --git a/server/api/get-interest-by-id.ts b/server/api/get-interest-by-id.ts
new file mode 100644
index 0000000..f06ac5b
--- /dev/null
+++ b/server/api/get-interest-by-id.ts
@@ -0,0 +1,29 @@
+export default defineEventHandler(async (event) => {
+  const xTagHeader = getRequestHeader(event, "x-tag");
+
+  if (!xTagHeader || xTagHeader !== "094ut234") {
+    throw createError({ statusCode: 401, statusMessage: "unauthenticated" });
+  }
+
+  const query = getQuery(event);
+
+  const { id } = query;
+
+  if (!id) {
+    throw createError({ statusCode: 400, statusMessage: "ID is required" });
+  }
+
+  try {
+    const interest = await getInterestById(id as string);
+    return interest;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw createError({ statusCode: 500, statusMessage: error.message });
+    } else {
+      throw createError({
+        statusCode: 500,
+        statusMessage: "An unexpected error occurred",
+      });
+    }
+  }
+});
diff --git a/server/api/get-interests.ts b/server/api/get-interests.ts
new file mode 100644
index 0000000..5cf56b3
--- /dev/null
+++ b/server/api/get-interests.ts
@@ -0,0 +1,10 @@
+export default defineEventHandler(async (event) => {
+  const xTagHeader = getRequestHeader(event, "x-tag");
+
+  if (!xTagHeader || xTagHeader !== "094ut234") {
+    throw createError({ statusCode: 401, statusMessage: "unauthenticated" });
+  }
+
+  const interests = await getInterests();
+  return interests;
+});
diff --git a/server/utils/nocodb.ts b/server/utils/nocodb.ts
new file mode 100644
index 0000000..774f762
--- /dev/null
+++ b/server/utils/nocodb.ts
@@ -0,0 +1,38 @@
+export interface PageInfo {
+  pageSize: number;
+  totalRows: number;
+  isFirstPage: boolean;
+  isLastPage: boolean;
+  page: number;
+}
+
+export interface InterestsResponse {
+  list: Interest[];
+  PageInfo: PageInfo;
+}
+
+export enum Table {
+  Interest = "mbs9hjauug4eseo",
+}
+
+export const getNocoDbConfiguration = () => useRuntimeConfig().nocodb;
+
+export const createTableUrl = (table: Table) =>
+  `${getNocoDbConfiguration().url}/api/v2/tables/${table}/records`;
+
+export const getInterests = async () =>
+  $fetch<InterestsResponse>(createTableUrl(Table.Interest), {
+    headers: {
+      "xc-token": getNocoDbConfiguration().token,
+    },
+    params: {
+      limit: 1000,
+    },
+  });
+
+export const getInterestById = async (id: string) =>
+  $fetch<Interest>(`${createTableUrl(Table.Interest)}/${id}`, {
+    headers: {
+      "xc-token": getNocoDbConfiguration().token,
+    },
+  });
diff --git a/utils/types.ts b/utils/types.ts
new file mode 100644
index 0000000..7c3fff3
--- /dev/null
+++ b/utils/types.ts
@@ -0,0 +1,95 @@
+export interface Berth {
+  "Mooring Number": string;
+  Length: string;
+  Draft: string;
+  "Side Pontoon": string;
+  "Power Capacity": number;
+  Voltage: number;
+  Status: string;
+  Width: string;
+  Area: string;
+  "Map Data": {};
+  "Nominal Boat Size": number;
+  "Water Depth": string;
+  "Water Depth Is Minimum": boolean;
+  "Width Is Minimum": boolean;
+  "Mooring Type": string;
+  "Cleat Type": string;
+  "Cleat Capacity": string;
+  "Bollard Type": string;
+  "Bollard Capacity": string;
+  Access: string;
+  Price: string;
+  "Bow Facing": string;
+  "Berth Approved": boolean;
+}
+
+export interface EOIDocument {
+  mimetype: string;
+  size: number;
+  title: string;
+  url: string;
+  icon: string;
+}
+
+export type InterestSalesProcessLevel =
+  | "General Qualified Interest"
+  | "Specific Qualified Interest"
+  | "LOI and NDA Sent"
+  | "Signed LOI and NDA"
+  | "Made Reservation"
+  | "Contract Negotiation"
+  | "Contract Negotiations Finalized"
+  | "Contract Signed";
+
+export const InterestSalesProcessLevelFlow = [
+  "General Qualified Interest",
+  "Specific Qualified Interest",
+  "LOI and NDA Sent",
+  "Signed LOI and NDA",
+  "Made Reservation",
+  "Contract Negotiation",
+  "Contract Negotiations Finalized",
+  "Contract Signed",
+];
+
+export type InterestLeadCategory = "General" | "Friends and Family";
+
+export const InterestLeadCategoryFlow = ["General", "Friends and Family"];
+
+export type ContactMethodPreferred = "Email" | "Phone";
+
+export const ContactMethodPreferredFlow = ["Email", "Phone"];
+
+export interface Interest {
+  Id: number;
+  "Full Name": string;
+  "Yacht Name": string;
+  Length: string;
+  Address: string;
+  "Email Address": string;
+  Berths_id: number;
+  Berth: Berth;
+  "Sales Process Level": InterestSalesProcessLevel;
+  "Phone Number": string;
+  "Extra Comments": string;
+  "Berth Size Desired": string;
+  "LOI-NDA Document": string;
+  "Berth Recommendations": number;
+  "Date Added": string;
+  Width: string;
+  Depth: string;
+  "Created At": string;
+  "Request More Information": string;
+  Source: string;
+  "Place of Residence": string;
+  "Contact Method Preferred": ContactMethodPreferred;
+  "Request Form Sent": string;
+  "Berth Number": string;
+  "EOI Time Sent": string;
+  "EOI Document": EOIDocument[];
+  "Lead Category": string;
+  "Request More Info - To Sales": string;
+  "EOI Send to Sales": string;
+  "Time LOI Sent": string;
+}