363 lines
12 KiB
Vue
363 lines
12 KiB
Vue
<template>
|
|
<v-dialog v-model="isVisible" max-width="1400" persistent>
|
|
<v-card>
|
|
<v-card-title class="d-flex align-center justify-space-between">
|
|
<div class="d-flex align-center">
|
|
<v-icon class="mr-2" color="primary">mdi-account-details</v-icon>
|
|
Interest Details - {{ interest?.['Full Name'] }}
|
|
</div>
|
|
<v-btn
|
|
icon="mdi-close"
|
|
variant="text"
|
|
@click="$emit('close')"
|
|
></v-btn>
|
|
</v-card-title>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-text class="pa-0">
|
|
<v-container fluid class="pa-6">
|
|
<!-- Status Tags Section -->
|
|
<div class="mb-6">
|
|
<div class="text-h6 mb-3">Status & Timeline</div>
|
|
<div class="d-flex flex-wrap ga-2">
|
|
<!-- Sales Process Status -->
|
|
<v-chip
|
|
:color="getSalesProcessLevelColor(interest?.['Sales Process Level'])"
|
|
variant="tonal"
|
|
prepend-icon="mdi-progress-clock"
|
|
>
|
|
{{ interest?.['Sales Process Level'] }}
|
|
</v-chip>
|
|
|
|
<!-- EOI Status -->
|
|
<v-chip
|
|
v-if="interest?.['EOI Status']"
|
|
:color="getEOIStatusColor(interest?.['EOI Status'])"
|
|
variant="tonal"
|
|
prepend-icon="mdi-file-document"
|
|
>
|
|
{{ interest?.['EOI Status'] }}
|
|
</v-chip>
|
|
|
|
<!-- EOI Time Sent -->
|
|
<v-chip
|
|
v-if="interest?.['EOI Time Sent']"
|
|
color="warning"
|
|
variant="tonal"
|
|
prepend-icon="mdi-email-send"
|
|
>
|
|
EOI Sent: {{ formatDate(interest?.["EOI Time Sent"]) }}
|
|
</v-chip>
|
|
|
|
<!-- EOI Time Created -->
|
|
<v-chip
|
|
v-if="interest?.['EOI Time Created'] || (interest?.['documensoID'] && !interest?.['EOI Time Created'])"
|
|
color="primary"
|
|
variant="tonal"
|
|
prepend-icon="mdi-file-document-plus"
|
|
>
|
|
EOI Created: {{ formatDate(interest?.["EOI Time Created"] || interest?.["Created At"]) }}
|
|
</v-chip>
|
|
|
|
<!-- Signature Status Tags -->
|
|
<template v-if="interest?.['documensoID']">
|
|
<v-chip
|
|
v-if="isSignedByClient"
|
|
color="success"
|
|
variant="tonal"
|
|
prepend-icon="mdi-check-circle"
|
|
size="small"
|
|
>
|
|
✓ Client Signed
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="isSignedByCC"
|
|
color="success"
|
|
variant="tonal"
|
|
prepend-icon="mdi-check-circle"
|
|
size="small"
|
|
>
|
|
✓ CC Signed
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="isSignedByDeveloper"
|
|
color="success"
|
|
variant="tonal"
|
|
prepend-icon="mdi-check-circle"
|
|
size="small"
|
|
>
|
|
✓ Developer Signed
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="!isSignedByClient && hasClientSignatureLink"
|
|
color="orange"
|
|
variant="tonal"
|
|
prepend-icon="mdi-clock-outline"
|
|
size="small"
|
|
>
|
|
Client Pending
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="!isSignedByCC && hasCCSignatureLink"
|
|
color="orange"
|
|
variant="tonal"
|
|
prepend-icon="mdi-clock-outline"
|
|
size="small"
|
|
>
|
|
CC Pending
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="!isSignedByDeveloper && hasDeveloperSignatureLink"
|
|
color="orange"
|
|
variant="tonal"
|
|
prepend-icon="mdi-clock-outline"
|
|
size="small"
|
|
>
|
|
Developer Pending
|
|
</v-chip>
|
|
</template>
|
|
|
|
<!-- Lead Category -->
|
|
<v-chip
|
|
v-if="interest?.['Lead Category']"
|
|
color="info"
|
|
variant="tonal"
|
|
prepend-icon="mdi-tag"
|
|
>
|
|
{{ interest?.['Lead Category'] }}
|
|
</v-chip>
|
|
|
|
<!-- Interest Type -->
|
|
<v-chip
|
|
v-if="interest?.['Interest Type']"
|
|
color="secondary"
|
|
variant="tonal"
|
|
prepend-icon="mdi-star"
|
|
>
|
|
{{ interest?.['Interest Type'] }}
|
|
</v-chip>
|
|
|
|
<!-- Created Date -->
|
|
<v-chip
|
|
v-if="interest?.['Created At']"
|
|
color="grey"
|
|
variant="tonal"
|
|
prepend-icon="mdi-calendar-plus"
|
|
>
|
|
Created: {{ formatDate(interest?.['Created At']) }}
|
|
</v-chip>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rest of the modal content would go here -->
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<div class="text-h6 mb-3">Contact Information</div>
|
|
<v-list density="compact">
|
|
<v-list-item>
|
|
<template v-slot:prepend>
|
|
<v-icon>mdi-account</v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ interest?.['Full Name'] }}</v-list-item-title>
|
|
<v-list-item-subtitle>Full Name</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item v-if="interest?.['Email Address']">
|
|
<template v-slot:prepend>
|
|
<v-icon>mdi-email</v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ interest?.['Email Address'] }}</v-list-item-title>
|
|
<v-list-item-subtitle>Email</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item v-if="interest?.['Phone Number']">
|
|
<template v-slot:prepend>
|
|
<v-icon>mdi-phone</v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ interest?.['Phone Number'] }}</v-list-item-title>
|
|
<v-list-item-subtitle>Phone</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item v-if="interest?.['Address']">
|
|
<template v-slot:prepend>
|
|
<v-icon>mdi-map-marker</v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ interest?.['Address'] }}</v-list-item-title>
|
|
<v-list-item-subtitle>Address</v-list-item-subtitle>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="6">
|
|
<div class="text-h6 mb-3">Yacht Information</div>
|
|
<v-list density="compact">
|
|
<v-list-item v-if="interest?.['Yacht Name']">
|
|
<template v-slot:prepend>
|
|
<v-icon>mdi-sail-boat</v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ interest?.['Yacht Name'] }}</v-list-item-title>
|
|
<v-list-item-subtitle>Yacht Name</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item v-if="interest?.['Length']">
|
|
<template v-slot:prepend>
|
|
<v-icon>mdi-ruler</v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ interest?.['Length'] }}</v-list-item-title>
|
|
<v-list-item-subtitle>Length</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item v-if="interest?.['Width']">
|
|
<template v-slot:prepend>
|
|
<v-icon>mdi-arrow-expand-horizontal</v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ interest?.['Width'] }}</v-list-item-title>
|
|
<v-list-item-subtitle>Width</v-list-item-subtitle>
|
|
</v-list-item>
|
|
<v-list-item v-if="interest?.['Depth']">
|
|
<template v-slot:prepend>
|
|
<v-icon>mdi-arrow-expand-vertical</v-icon>
|
|
</template>
|
|
<v-list-item-title>{{ interest?.['Depth'] }}</v-list-item-title>
|
|
<v-list-item-subtitle>Depth</v-list-item-subtitle>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Additional sections can be added here -->
|
|
</v-container>
|
|
</v-card-text>
|
|
|
|
<v-divider />
|
|
|
|
<v-card-actions class="pa-4">
|
|
<v-spacer />
|
|
<v-btn
|
|
color="grey"
|
|
variant="text"
|
|
@click="$emit('close')"
|
|
>
|
|
Close
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Interest } from '~/utils/types';
|
|
|
|
const props = defineProps<{
|
|
interest: Interest | null;
|
|
modelValue: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean];
|
|
close: [];
|
|
}>();
|
|
|
|
const isVisible = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value)
|
|
});
|
|
|
|
// Signature status computed properties
|
|
const isSignedByClient = computed(() => {
|
|
if (!props.interest) return false;
|
|
return !!(props.interest as any)['clientSignTime'];
|
|
});
|
|
|
|
const isSignedByCC = computed(() => {
|
|
if (!props.interest) return false;
|
|
return !!(props.interest as any)['ccSignTime'];
|
|
});
|
|
|
|
const isSignedByDeveloper = computed(() => {
|
|
if (!props.interest) return false;
|
|
return !!(props.interest as any)['developerSignTime'];
|
|
});
|
|
|
|
const hasClientSignatureLink = computed(() => {
|
|
if (!props.interest) return false;
|
|
return !!(
|
|
(props.interest as any)['Signature Link Client'] ||
|
|
(props.interest as any)['EmbeddedSignatureLinkClient']
|
|
);
|
|
});
|
|
|
|
const hasCCSignatureLink = computed(() => {
|
|
if (!props.interest) return false;
|
|
return !!(
|
|
(props.interest as any)['Signature Link CC'] ||
|
|
(props.interest as any)['EmbeddedSignatureLinkCC']
|
|
);
|
|
});
|
|
|
|
const hasDeveloperSignatureLink = computed(() => {
|
|
if (!props.interest) return false;
|
|
return !!(
|
|
(props.interest as any)['Signature Link Developer'] ||
|
|
(props.interest as any)['EmbeddedSignatureLinkDeveloper']
|
|
);
|
|
});
|
|
|
|
// Status color functions
|
|
const getSalesProcessLevelColor = (level: string | undefined) => {
|
|
switch (level) {
|
|
case 'General Qualified Interest':
|
|
return 'info';
|
|
case 'Specific Qualified Interest':
|
|
return 'primary';
|
|
case 'LOI and NDA Sent':
|
|
return 'warning';
|
|
case 'Signed LOI and NDA':
|
|
return 'success';
|
|
case 'Made Reservation':
|
|
return 'success';
|
|
case 'Contract Negotiation':
|
|
return 'orange';
|
|
case 'Final Negotiations Finalized':
|
|
return 'green';
|
|
case 'Contract Signed':
|
|
return 'success';
|
|
default:
|
|
return 'grey';
|
|
}
|
|
};
|
|
|
|
const getEOIStatusColor = (status: string | undefined) => {
|
|
switch (status) {
|
|
case 'Awaiting Further Details':
|
|
return 'grey';
|
|
case 'Waiting for Signatures':
|
|
return 'warning';
|
|
case 'Signed':
|
|
return 'success';
|
|
default:
|
|
return 'grey';
|
|
}
|
|
};
|
|
|
|
// Date formatting function
|
|
const formatDate = (dateString: string | undefined) => {
|
|
if (!dateString) return '';
|
|
|
|
try {
|
|
const date = new Date(dateString);
|
|
if (isNaN(date.getTime())) {
|
|
return dateString;
|
|
}
|
|
|
|
return date.toLocaleString('en-GB', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
});
|
|
} catch (error) {
|
|
console.error('Date formatting error:', error);
|
|
return dateString;
|
|
}
|
|
};
|
|
</script>
|