feat: add new status columns
This commit is contained in:
Ron
29
components/BerthInfoSentStatusBadge.vue
Normal file
29
components/BerthInfoSentStatusBadge.vue
Normal file
@@ -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>
|
||||
29
components/ContractSentStatusBadge.vue
Normal file
29
components/ContractSentStatusBadge.vue
Normal file
@@ -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>
|
||||
30
components/ContractStatusBadge.vue
Normal file
30
components/ContractStatusBadge.vue
Normal file
@@ -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>
|
||||
|
||||
30
components/Deposit10PercentStatusBadge.vue
Normal file
30
components/Deposit10PercentStatusBadge.vue
Normal file
@@ -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>
|
||||
29
components/EOIStatusBadge.vue
Normal file
29
components/EOIStatusBadge.vue
Normal file
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user