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

<template>
  <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>
.v-card {
  border-radius: 8px;
}

.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>