feat: add new status columns
This commit is contained in:
Ron
parent
bc0fa6fbe0
commit
762fddea70
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,229 +1,309 @@
|
|||
<template>
|
||||
<v-dialog
|
||||
v-model="isOpen"
|
||||
max-width="800"
|
||||
persistent
|
||||
fullscreen
|
||||
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-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-items>
|
||||
<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-icon class="mr-2" color="primary">mdi-account-circle</v-icon>
|
||||
Contact Information
|
||||
</div>
|
||||
<v-row dense class="mb-4">
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest['Full Name']"
|
||||
label="Full Name *"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-account"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest['Email Address']"
|
||||
label="Email Address *"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-email"
|
||||
:rules="[rules.required, rules.email]"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest['Phone Number']"
|
||||
label="Phone Number"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-phone"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="newInterest['Contact Method Preferred']"
|
||||
label="Preferred Contact Method"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:items="ContactMethodPreferredFlow"
|
||||
prepend-inner-icon="mdi-message-text"
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest.Address"
|
||||
label="Address"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-map-marker"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest['Place of Residence']"
|
||||
label="Place of Residence"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-home"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<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-account-circle</v-icon>
|
||||
Contact Information
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-2">
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest['Full Name']"
|
||||
label="Full Name *"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-account"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest['Email Address']"
|
||||
label="Email Address *"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-email"
|
||||
:rules="[rules.required, rules.email]"
|
||||
required
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest['Phone Number']"
|
||||
label="Phone Number"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-phone"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest.Address"
|
||||
label="Address"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-map-marker"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest['Place of Residence']"
|
||||
label="Place of Residence"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-home"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-select
|
||||
v-model="newInterest['Contact Method Preferred']"
|
||||
label="Contact Method Preferred"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:items="ContactMethodPreferredFlow"
|
||||
prepend-inner-icon="mdi-message-text"
|
||||
></v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Yacht Information Section -->
|
||||
<div class="text-h6 mb-3">
|
||||
<v-icon class="mr-2" color="primary">mdi-sail-boat</v-icon>
|
||||
Yacht Information
|
||||
</div>
|
||||
<v-row dense class="mb-4">
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest['Yacht Name']"
|
||||
label="Yacht Name"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-ferry"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest['Berth Size Desired']"
|
||||
label="Berth Size Desired"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-tape-measure"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest.Length"
|
||||
label="Length"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-ruler"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest.Width"
|
||||
label="Width"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-arrow-expand-horizontal"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest.Depth"
|
||||
label="Depth"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-arrow-expand-vertical"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<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-sail-boat</v-icon>
|
||||
Yacht Information
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-2">
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="3">
|
||||
<v-text-field
|
||||
v-model="newInterest['Yacht Name']"
|
||||
label="Yacht Name"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-ferry"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-text-field
|
||||
v-model="newInterest.Length"
|
||||
label="Length"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-ruler"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-text-field
|
||||
v-model="newInterest.Width"
|
||||
label="Width"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-arrow-expand-horizontal"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-text-field
|
||||
v-model="newInterest.Depth"
|
||||
label="Depth"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-arrow-expand-vertical"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Sales Information Section -->
|
||||
<div class="text-h6 mb-3">
|
||||
<v-icon class="mr-2" color="primary">mdi-chart-line</v-icon>
|
||||
Sales Information
|
||||
</div>
|
||||
<v-row dense class="mb-4">
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="newInterest['Sales Process Level']"
|
||||
label="Sales Process Level *"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:items="InterestSalesProcessLevelFlow"
|
||||
prepend-inner-icon="mdi-chart-line"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
></v-select>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<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>
|
||||
<!-- Berth & Sales Information 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-anchor</v-icon>
|
||||
Berth & Sales Information
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-2">
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest['Berth Size Desired']"
|
||||
label="Berth Size Desired"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-tape-measure"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-select
|
||||
v-model="newInterest['Sales Process Level']"
|
||||
label="Sales Process Level *"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
:items="InterestSalesProcessLevelFlow"
|
||||
prepend-inner-icon="mdi-chart-line"
|
||||
:rules="[rules.required]"
|
||||
required
|
||||
></v-select>
|
||||
</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-icon class="mr-2" color="primary">mdi-information</v-icon>
|
||||
Additional Information
|
||||
</div>
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest.Source"
|
||||
label="Source"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-source-branch"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="newInterest['Extra Comments']"
|
||||
label="Extra Comments"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-comment-text"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<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-information</v-icon>
|
||||
Additional Information
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-2">
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="newInterest.Source"
|
||||
label="Source"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-source-branch"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8">
|
||||
<v-text-field
|
||||
v-model="newInterest['Extra Comments']"
|
||||
label="Extra Comments"
|
||||
variant="outlined"
|
||||
density="comfortable"
|
||||
prepend-inner-icon="mdi-comment-text"
|
||||
></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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<v-icon size="small" class="mr-2" color="green-darken-2">mdi-phone</v-icon>
|
||||
<span>{{ item["Phone Number"] }}</span>
|
||||
</div>
|
||||
<EOIStatusBadge
|
||||
v-if="item['EOI Status']"
|
||||
:eoiStatus="item['EOI Status']"
|
||||
/>
|
||||
<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: "Yacht", key: "Yacht Name", sortable: true },
|
||||
{ title: "Contact", key: "Full Name", sortable: true, width: "20%" },
|
||||
{ title: "Berth", key: "Berth Number", sortable: true },
|
||||
{ title: "Status", key: "Sales Process Level", sortable: true },
|
||||
{ title: "Phone", key: "Phone Number", sortable: false },
|
||||
{ title: "Sales Status", key: "Sales Process Level", sortable: true },
|
||||
{ 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) => {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue