518 lines
17 KiB
Vue
518 lines
17 KiB
Vue
<template>
|
|
<div>
|
|
<v-container fluid>
|
|
<!-- Header Section -->
|
|
<v-row class="mb-4 mb-md-6">
|
|
<v-col cols="12" md="8">
|
|
<h1 class="text-h5 text-md-h4 font-weight-bold mb-1 mb-md-2">
|
|
Berth Status Overview
|
|
</h1>
|
|
<p class="text-body-2 text-md-subtitle-1 text-grey-darken-1">
|
|
Visual overview of all berth statuses and occupancy
|
|
</p>
|
|
</v-col>
|
|
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-center mt-2 mt-md-0">
|
|
<v-chip
|
|
v-if="berths?.list?.length"
|
|
color="primary"
|
|
variant="tonal"
|
|
:size="mobile ? 'default' : 'large'"
|
|
>
|
|
{{ berths.list.length }} Total Berths
|
|
</v-chip>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Summary Cards -->
|
|
<v-row class="mb-6">
|
|
<v-col v-for="statusSummary in statusSummaries" :key="statusSummary.status" cols="6" md="3">
|
|
<v-card :color="statusSummary.color" variant="tonal" class="text-center pa-4">
|
|
<div class="text-h4 font-weight-bold mb-1">{{ statusSummary.count }}</div>
|
|
<div class="text-body-2 font-weight-medium">{{ statusSummary.status }}</div>
|
|
<v-progress-linear
|
|
:model-value="statusSummary.percentage"
|
|
:color="statusSummary.color"
|
|
height="4"
|
|
class="mt-2"
|
|
/>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Search and View Toggle -->
|
|
<v-row class="mb-4">
|
|
<v-col cols="12" :md="mobile ? 12 : 8" class="mb-2 mb-md-0">
|
|
<v-text-field
|
|
v-model="search"
|
|
label="Search berths..."
|
|
placeholder="Search by mooring number, area..."
|
|
prepend-inner-icon="mdi-magnify"
|
|
variant="outlined"
|
|
:density="mobile ? 'compact' : 'comfortable'"
|
|
clearable
|
|
hide-details
|
|
class="search-field"
|
|
>
|
|
<template v-slot:append-inner>
|
|
<v-fade-transition>
|
|
<v-chip
|
|
v-if="filteredBerths.length !== berths?.list?.length"
|
|
size="x-small"
|
|
color="primary"
|
|
variant="tonal"
|
|
>
|
|
{{ filteredBerths.length }}
|
|
</v-chip>
|
|
</v-fade-transition>
|
|
</template>
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" :md="mobile ? 12 : 4">
|
|
<div class="d-flex align-center" :class="mobile ? 'justify-start' : 'justify-end'">
|
|
<v-btn-toggle
|
|
v-model="viewMode"
|
|
mandatory
|
|
variant="outlined"
|
|
:density="mobile ? 'compact' : 'comfortable'"
|
|
>
|
|
<v-btn value="kanban" :size="mobile ? 'small' : 'default'">
|
|
<v-icon>mdi-view-column</v-icon>
|
|
<span v-if="!mobile" class="ml-2">Kanban</span>
|
|
</v-btn>
|
|
<v-btn value="grid" :size="mobile ? 'small' : 'default'">
|
|
<v-icon>mdi-view-grid</v-icon>
|
|
<span v-if="!mobile" class="ml-2">Grid</span>
|
|
</v-btn>
|
|
</v-btn-toggle>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-progress-linear v-if="loading" indeterminate color="primary" class="mb-4" />
|
|
|
|
<!-- Kanban View -->
|
|
<div v-if="viewMode === 'kanban' && !loading" class="kanban-container">
|
|
<v-row>
|
|
<v-col
|
|
v-for="status in statusOptions"
|
|
:key="status.value"
|
|
cols="12"
|
|
:sm="mobile ? 12 : 6"
|
|
:md="mobile ? 12 : 3"
|
|
>
|
|
<v-card class="status-column" elevation="1">
|
|
<v-card-title class="d-flex align-center justify-space-between pa-4">
|
|
<div class="d-flex align-center">
|
|
<v-icon :color="status.color" class="mr-2">{{ status.icon }}</v-icon>
|
|
<span class="font-weight-bold">{{ status.value }}</span>
|
|
</div>
|
|
<v-chip
|
|
:color="status.color"
|
|
variant="tonal"
|
|
size="small"
|
|
>
|
|
{{ getBerthsByStatus(status.value).length }}
|
|
</v-chip>
|
|
</v-card-title>
|
|
<v-divider />
|
|
<v-card-text class="pa-4" style="max-height: 600px; overflow-y: auto;">
|
|
<div class="d-flex flex-column gap-4">
|
|
<v-card
|
|
v-for="berth in getBerthsByStatus(status.value)"
|
|
:key="berth.Id"
|
|
@click="handleBerthClick(berth)"
|
|
class="berth-kanban-card"
|
|
:color="status.color"
|
|
variant="tonal"
|
|
elevation="0"
|
|
hover
|
|
>
|
|
<v-card-text class="pa-4">
|
|
<div class="d-flex align-center justify-space-between mb-3">
|
|
<span class="font-weight-bold text-subtitle-2">{{ berth['Mooring Number'] }}</span>
|
|
<span class="text-caption text-grey-darken-1">Area {{ berth.Area }}</span>
|
|
</div>
|
|
<div class="text-caption text-grey-darken-1 mb-3">
|
|
{{ displayMeasurement(berth['Nominal Boat Size']) }} boat
|
|
</div>
|
|
<div class="d-flex justify-space-between align-center">
|
|
<span class="text-body-2 font-weight-medium">${{ formatPrice(berth.Price) }}</span>
|
|
<v-tooltip v-if="getInterestedCount(berth)" location="top">
|
|
<template v-slot:activator="{ props }">
|
|
<v-chip
|
|
v-bind="props"
|
|
size="x-small"
|
|
color="primary"
|
|
variant="flat"
|
|
>
|
|
{{ getInterestedCount(berth) }} interested
|
|
</v-chip>
|
|
</template>
|
|
<div class="pa-2">
|
|
<div class="text-subtitle-2 mb-1">Interested Parties:</div>
|
|
<div v-for="party in berth['Interested Parties']" :key="party.Id" class="text-body-2">
|
|
{{ party['Full Name'] }}
|
|
</div>
|
|
</div>
|
|
</v-tooltip>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- Empty state for status column -->
|
|
<div v-if="getBerthsByStatus(status.value).length === 0" class="text-center py-4">
|
|
<v-icon size="32" color="grey-lighten-2" class="mb-2">{{ status.icon }}</v-icon>
|
|
<p class="text-caption text-grey-darken-1">No {{ status.value.toLowerCase() }} berths</p>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
|
|
<!-- Grid View -->
|
|
<div v-if="viewMode === 'grid' && !loading">
|
|
<div v-if="filteredBerths.length === 0" class="text-center py-8">
|
|
<v-icon size="64" color="grey-lighten-2" class="mb-4">mdi-pier-crane</v-icon>
|
|
<p class="text-h6 text-grey-darken-1">No berths found</p>
|
|
<p class="text-body-2 text-grey">Try adjusting your search</p>
|
|
</div>
|
|
|
|
<!-- Grouped by Area for Grid View -->
|
|
<div v-for="area in areasWithBerths" :key="area" class="area-section mb-8">
|
|
<div class="d-flex align-center mb-4">
|
|
<h3 class="text-h5 font-weight-bold text-primary mr-4">Area {{ area }}</h3>
|
|
<v-chip color="primary" variant="tonal" size="small">
|
|
{{ getBerthsByArea(area).length }} berths
|
|
</v-chip>
|
|
</div>
|
|
|
|
<v-row>
|
|
<v-col
|
|
v-for="berth in getBerthsByArea(area)"
|
|
:key="berth.Id"
|
|
cols="12"
|
|
:sm="mobile ? 12 : 6"
|
|
:md="mobile ? 12 : 4"
|
|
:lg="mobile ? 12 : 3"
|
|
>
|
|
<v-card
|
|
@click="handleBerthClick(berth)"
|
|
class="berth-grid-card"
|
|
elevation="2"
|
|
hover
|
|
>
|
|
<v-card-text class="pa-4">
|
|
<!-- Berth Header -->
|
|
<div class="d-flex align-center justify-space-between mb-3">
|
|
<div class="d-flex align-center">
|
|
<v-avatar
|
|
size="36"
|
|
:color="getBerthColorFromMooringNumber(berth['Mooring Number'])"
|
|
class="mr-3"
|
|
>
|
|
<span class="text-white text-body-2 font-weight-bold">
|
|
{{ berth['Mooring Number'] }}
|
|
</span>
|
|
</v-avatar>
|
|
<div>
|
|
<h4 class="text-subtitle-1 font-weight-medium">{{ berth['Mooring Number'] }}</h4>
|
|
<p class="text-caption text-grey-darken-1 mb-0">Area {{ berth.Area }}</p>
|
|
</div>
|
|
</div>
|
|
<BerthStatusBadge :status="berth.Status" size="small" />
|
|
</div>
|
|
|
|
<!-- Berth Details -->
|
|
<div class="berth-details mb-3">
|
|
<div class="detail-row">
|
|
<span class="detail-label">Boat Size:</span>
|
|
<span class="detail-value">{{ displayMeasurement(berth['Nominal Boat Size']) }}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Water Depth:</span>
|
|
<span class="detail-value">{{ displayMeasurement(berth['Water Depth']) }}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Price:</span>
|
|
<span class="detail-value">${{ formatPrice(berth.Price) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="d-flex justify-space-between align-center">
|
|
<span class="text-caption text-grey-darken-1">{{ berth['Mooring Type'] || 'Standard' }}</span>
|
|
<v-chip
|
|
v-if="getInterestedCount(berth)"
|
|
size="x-small"
|
|
color="primary"
|
|
variant="tonal"
|
|
>
|
|
{{ getInterestedCount(berth) }} interested
|
|
</v-chip>
|
|
<span v-else class="text-caption text-grey-darken-1">No interest</span>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</div>
|
|
</v-container>
|
|
|
|
<!-- Berth Details Modal -->
|
|
<BerthDetailsModal
|
|
v-model="showModal"
|
|
:berth="selectedBerth"
|
|
@save="handleBerthSave"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useFetch } from '#app';
|
|
import type { Berth, BerthsResponse } from '@/utils/types';
|
|
import { BerthArea, BerthStatus } from '@/utils/types';
|
|
import { getBerthColorFromMooringNumber } from '@/utils/berthColors';
|
|
import BerthStatusBadge from '@/components/BerthStatusBadge.vue';
|
|
import BerthDetailsModal from '@/components/BerthDetailsModal.vue';
|
|
|
|
useHead({
|
|
title: "Berth Status",
|
|
});
|
|
|
|
const { mobile } = useDisplay();
|
|
const loading = ref(true);
|
|
const showModal = ref(false);
|
|
const selectedBerth = ref<Berth | null>(null);
|
|
const search = ref("");
|
|
const viewMode = ref('kanban');
|
|
|
|
const { data: berths, refresh } = useFetch<BerthsResponse>("/api/get-berths", {
|
|
onResponse() {
|
|
loading.value = false;
|
|
},
|
|
onResponseError() {
|
|
loading.value = false;
|
|
},
|
|
});
|
|
|
|
// Status options with colors and icons
|
|
const statusOptions = [
|
|
{ value: BerthStatus.Available, color: 'success', icon: 'mdi-check-circle' },
|
|
{ value: BerthStatus.Waitlist, color: 'primary', icon: 'mdi-clock-outline' },
|
|
{ value: BerthStatus.Reserved, color: 'warning', icon: 'mdi-bookmark' },
|
|
{ value: BerthStatus.Sold, color: 'error', icon: 'mdi-check-all' }
|
|
];
|
|
|
|
// Status summaries for overview cards
|
|
const statusSummaries = computed(() => {
|
|
const total = berths.value?.list?.length || 0;
|
|
return statusOptions.map(status => {
|
|
const count = getBerthsByStatus(status.value).length;
|
|
const percentage = total > 0 ? (count / total) * 100 : 0;
|
|
return {
|
|
...status,
|
|
count,
|
|
percentage,
|
|
status: status.value
|
|
};
|
|
});
|
|
});
|
|
|
|
// Filter berths based on search
|
|
const filteredBerths = computed(() => {
|
|
if (!berths.value?.list) return [];
|
|
|
|
let filtered = berths.value.list;
|
|
|
|
// Apply search filter
|
|
if (search.value) {
|
|
const searchLower = search.value.toLowerCase();
|
|
filtered = filtered.filter(berth => {
|
|
return (
|
|
berth['Mooring Number']?.toLowerCase().includes(searchLower) ||
|
|
berth.Area?.toLowerCase().includes(searchLower) ||
|
|
berth.Status?.toLowerCase().includes(searchLower)
|
|
);
|
|
});
|
|
}
|
|
|
|
return filtered;
|
|
});
|
|
|
|
// Get unique areas that have berths (for grid view grouping)
|
|
const areasWithBerths = computed(() => {
|
|
const areas = new Set(filteredBerths.value.map(berth => berth.Area));
|
|
return Array.from(areas).sort();
|
|
});
|
|
|
|
// Get berths by status
|
|
const getBerthsByStatus = (status: string) => {
|
|
return filteredBerths.value
|
|
.filter(berth => berth.Status === status)
|
|
.sort((a, b) => {
|
|
// Sort by area, then by mooring number
|
|
if (a.Area !== b.Area) {
|
|
return a.Area.localeCompare(b.Area);
|
|
}
|
|
const aNum = parseInt(a['Mooring Number']?.replace(/[A-Za-z]/g, '') || '0');
|
|
const bNum = parseInt(b['Mooring Number']?.replace(/[A-Za-z]/g, '') || '0');
|
|
return aNum - bNum;
|
|
});
|
|
};
|
|
|
|
// Get berths by area (for grid view)
|
|
const getBerthsByArea = (area: string) => {
|
|
return filteredBerths.value
|
|
.filter(berth => berth.Area === area)
|
|
.sort((a, b) => {
|
|
// Sort by mooring number within area
|
|
const aNum = parseInt(a['Mooring Number']?.replace(/[A-Za-z]/g, '') || '0');
|
|
const bNum = parseInt(b['Mooring Number']?.replace(/[A-Za-z]/g, '') || '0');
|
|
return aNum - bNum;
|
|
});
|
|
};
|
|
|
|
// Display measurement with both metric and imperial
|
|
const displayMeasurement = (imperial: number): string => {
|
|
if (!imperial) return '—';
|
|
const metric = imperial * 0.3048;
|
|
return `${metric.toFixed(1)}m / ${imperial}ft`;
|
|
};
|
|
|
|
// Format price with thousands separator
|
|
const formatPrice = (price: number): string => {
|
|
if (!price) return '0';
|
|
return new Intl.NumberFormat('en-US').format(price);
|
|
};
|
|
|
|
// Get interested parties count
|
|
const getInterestedCount = (berth: Berth): number => {
|
|
return berth['Interested Parties']?.length || 0;
|
|
};
|
|
|
|
// Handle berth click
|
|
const handleBerthClick = (berth: Berth) => {
|
|
selectedBerth.value = berth;
|
|
showModal.value = true;
|
|
};
|
|
|
|
// Handle berth save
|
|
const handleBerthSave = async (berth: Berth) => {
|
|
// Refresh the berths data to reflect the updates
|
|
loading.value = true;
|
|
await refresh();
|
|
loading.value = false;
|
|
showModal.value = false;
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-field :deep(.v-field) {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-field:focus-within :deep(.v-field) {
|
|
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
|
|
}
|
|
|
|
/* Kanban Layout */
|
|
.kanban-container {
|
|
overflow-x: auto;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.status-column {
|
|
min-height: 400px;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.berth-kanban-card {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.berth-kanban-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
/* Grid Layout */
|
|
.area-section {
|
|
width: 100%;
|
|
}
|
|
|
|
.berth-grid-card {
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border-radius: 12px !important;
|
|
height: 100%;
|
|
}
|
|
|
|
.berth-grid-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.berth-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: #666;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
/* Mobile responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.v-container {
|
|
padding: 12px 16px !important;
|
|
}
|
|
|
|
.kanban-container .v-col {
|
|
min-width: 280px;
|
|
}
|
|
|
|
.status-column {
|
|
min-height: 300px;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar for kanban columns */
|
|
.status-column .v-card-text::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.status-column .v-card-text::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.status-column .v-card-text::-webkit-scrollbar-thumb {
|
|
background: #ccc;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.status-column .v-card-text::-webkit-scrollbar-thumb:hover {
|
|
background: #999;
|
|
}
|
|
</style>
|