oceanhelm 0.0.11 → 0.0.13

package/src/components/CrewManagement.vue

@@ -6,13 +6,85 @@
         <div class="crew-section">
             <div class="crew-section-header">
                 <h4 class="crew-subhead">{{ sectionTitle }}</h4>
-                <button class="btn btn-primary" @click="handleToggleAddForm" v-if="canAddCrew">
-                    {{ showAddForm ? 'Cancel' : '+ Add Crew Member' }}
-                </button>
+                <div class="header-actions">
+                    <button class="btn btn-secondary" @click="handleToggleGuestForm" v-if="canAddCrew">
+                        {{ showGuestForm ? 'Cancel' : '+ Check-in Guest' }}
+                    </button>
+                    <button class="btn btn-primary" @click="handleToggleAddForm" v-if="canAddCrew">
+                        {{ showAddForm ? 'Cancel' : '+ Add Crew Member' }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- Personnel Onboard Summary -->
+            <div class="personnel-summary" v-if="!showAddForm && !showGuestForm && !showTimesheet">
+                <div class="summary-header">
+                    <h3><i class="bi bi-people-fill"></i> Personnel Onboard Summary</h3>
+                    <div class="summary-date">{{ currentDate }}</div>
+                </div>
+
+                <div class="summary-cards">
+                    <!-- Total Onboard -->
+                    <div class="summary-card total-card">
+                        <div class="card-icon">
+                            <i class="bi bi-people"></i>
+                        </div>
+                        <div class="card-content">
+                            <div class="card-value">{{ totalOnboard }}</div>
+                            <div class="card-label">Total Onboard</div>
+                        </div>
+                    </div>
+
+                    <!-- Crew Onboard -->
+                    <div class="summary-card crew-card">
+                        <div class="card-icon">
+                            <i class="bi bi-person-badge"></i>
+                        </div>
+                        <div class="card-content">
+                            <div class="card-value">{{ crewOnboard }}</div>
+                            <div class="card-label">Crew Onboard</div>
+                        </div>
+                    </div>
+
+                    <!-- Guests Onboard -->
+                    <div class="summary-card guest-card-summary">
+                        <div class="card-icon">
+                            <i class="bi bi-person-check"></i>
+                        </div>
+                        <div class="card-content">
+                            <div class="card-value">{{ guestsOnboard }}</div>
+                            <div class="card-label">Guests Onboard</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Breakdown by Vessel -->
+                <div class="vessel-breakdown" v-if="Object.keys(personnelByVessel).length > 0">
+                    <h4>Breakdown by Vessel</h4>
+                    <div class="vessel-cards">
+                        <div v-for="(data, vessel) in personnelByVessel" :key="vessel" class="vessel-card">
+                            <div class="vessel-name">{{ vessel }}</div>
+                            <div class="vessel-stats">
+                                <div class="stat-item">
+                                    <span class="stat-label">Crew:</span>
+                                    <span class="stat-value">{{ data.crew }}</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">Guests:</span>
+                                    <span class="stat-value">{{ data.guests }}</span>
+                                </div>
+                                <div class="stat-item total-stat">
+                                    <span class="stat-label">Total:</span>
+                                    <span class="stat-value">{{ data.total }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
 
             <!-- Search and Filter - Hide when form is shown -->
-            <div class="search-filter" v-if="!showAddForm">
+            <div class="search-filter" v-if="!showAddForm && !showGuestForm">
                 <input type="text" placeholder="Search crew by name or role..." v-model="searchQuery" @input="handleSearch">
                 <select v-model="filterStatus" @change="handleFilter">
                     <option value="all">All Statuses</option>
@@ -29,7 +101,7 @@
             </div>
 
             <!-- Loading State - Hide when form is shown -->
-            <div v-if="loading && !showAddForm" class="loading-state">
+            <div v-if="loading && !showAddForm && !showGuestForm" class="loading-state">
                 <div class="spinner-border text-primary" role="status">
                     <span class="visually-hidden">Loading crew...</span>
                 </div>
@@ -37,7 +109,7 @@
             </div>
 
             <!-- Consolidated Timesheet View - Hide when form is shown -->
-            <div v-else-if="showTimesheet && !showAddForm" class="timesheet-view">
+            <div v-else-if="showTimesheet && !showAddForm && !showGuestForm" class="timesheet-view">
                 <div class="timesheet-header">
                     <h3><i class="bi bi-table"></i> Crew Activity Timesheet</h3>
                     <div class="timesheet-controls">
@@ -121,32 +193,52 @@
             </div>
 
             <!-- Crew Grid - Hide when form is shown -->
-            <div class="crew-grid" v-else-if="filteredCrew.length > 0 && !showAddForm">
+            <div class="crew-grid" v-else-if="filteredCrew.length > 0 && !showAddForm && !showGuestForm">
                 <div v-for="member in filteredCrew" :key="member.id" class="crew-card"
-                    :class="{ 'unavailable': member.status === 'unavailable' }">
+                    :class="{ 'unavailable': member.status === 'unavailable', 'guest-card': member.role === 'guest' }">
                     <div :class="['crew-status-badge', getStatusClass(member.status)]">
                         {{ formatStatus(member.status) }}
                     </div>
 
                     <div class="crew-name">{{ member.name }}</div>
-                    <div class="crew-role">{{ member.role }}</div>
+                    <div class="crew-role">{{ member.role === 'guest' ? 'Guest' : member.role }}</div>
 
-                    <!-- Certifications -->
-                    <div class="crew-certifications">
-                        <div v-for="cert in member.certifications" :key="cert.name" class="certification-tag"
+                    <!-- Certifications - Only show for non-guests -->
+                    <div class="crew-certifications" v-if="member.role !== 'guest'">
+                        <div v-for="cert in getApprovedCertifications(member)" :key="cert.name" class="certification-tag"
                             :class="getCertificationClass(cert.expiryDate)" @click="handleViewCertification(cert, member)">
                             {{ cert.name }}
                         </div>
+                        <!-- Optional: Show pending certifications count -->
+                        <div v-if="getPendingCertificationsCount(member) > 0" class="certification-tag text-muted">
+                            <i class="bi bi-clock-history"></i> {{ getPendingCertificationsCount(member) }} pending
+                        </div>
                         <i class="bi bi-patch-plus-fill icon" @click="handleAddCertification(member)"
                             v-if="canEditCrew"></i>
                     </div>
 
-                    <!-- Crew Details -->
-                    <div class="crew-availability">
-                        <strong>Embarkation Date:</strong> {{ member.nextShift || 'Not Scheduled' }}
+                    <!-- Crew Details - Different for guests -->
+                    <div v-if="member.role === 'guest'">
+                        <div class="crew-availability">
+                            <strong>Arrival Date:</strong> {{ member.nextShift || 'Not Recorded' }}
+                        </div>
+                        <div class="crew-availability">
+                            <strong>Expected Days Onboard:</strong> {{ member.onBoard || 'Not Specified' }}
+                        </div>
+                        <div class="crew-availability">
+                            <strong>Days Onboard:</strong> {{ getGuestDaysOnboard(member) }}
+                        </div>
                     </div>
-                    <div class="crew-availability">
-                        <strong>Expected Days Onboard (in days):</strong> {{ member.onBoard || 'Not Scheduled' }}
+                    <div v-else>
+                        <div class="crew-availability">
+                            <strong>Embarkation Date:</strong> {{ getEmbarkationDate(member) }}
+                        </div>
+                        <div class="crew-availability">
+                            <strong>Expected Days Onboard:</strong> {{ member.onBoard || 'Not Scheduled' }}
+                        </div>
+                        <div class="crew-availability">
+                            <strong>Days Onboard:</strong> {{ getDaysOnboard(member) }}
+                        </div>
                     </div>
 
                     <!-- Action Buttons -->
@@ -157,21 +249,31 @@
                         <div v-else class="status-unavailable crew-availability vcard">
                             Vessel: Unassigned
                         </div>
-                        <!-- Available: Show Assign Shift button -->
-                        <button class="btn btn-primary" @click="handleAssignShift(member)"
-                            v-if="canAssignShift && member.status === 'available'">
-                            Assign Shift
-                        </button>
-                        <!-- On Duty: Show Check In button -->
-                        <button class="btn btn-success" @click="handleCheckinCrew(member)"
-                            v-if="canDeboardCrew && member.status === 'onduty'">
-                            Check In
-                        </button>
-                        <!-- Onboard: Show Deboard button -->
-                        <button class="btn btn-warning" @click="handleDeboardCrew(member)"
-                            v-if="canDeboardCrew && member.status === 'onboard'">
-                            Deboard
+
+                        <!-- Guest-specific actions -->
+                        <button class="btn btn-warning" @click="handleCheckoutGuest(member)"
+                            v-if="member.role === 'guest' && member.status === 'onboard'">
+                            Check Out
                         </button>
+
+                        <!-- Crew-specific actions -->
+                        <template v-if="member.role !== 'guest'">
+                            <!-- Available: Show Assign Shift button -->
+                            <button class="btn btn-primary" @click="handleAssignShift(member)"
+                                v-if="canAssignShift && member.status === 'available'">
+                                Assign Shift
+                            </button>
+                            <!-- On Duty: Show Check In button -->
+                            <button class="btn btn-success" @click="handleCheckinCrew(member)"
+                                v-if="canDeboardCrew && member.status === 'onduty'">
+                                Check In
+                            </button>
+                            <!-- Onboard: Show Deboard button -->
+                            <button class="btn btn-warning" @click="handleDeboardCrew(member)"
+                                v-if="canDeboardCrew && member.status === 'onboard'">
+                                Deboard
+                            </button>
+                        </template>
                         <!-- Unavailable & Assigned: No buttons -->
                     </div>
 
@@ -206,7 +308,7 @@
             </div>
 
             <!-- No Results - Hide when form is shown -->
-            <div v-else-if="!loading && !showTimesheet && !showAddForm" class="no-results">
+            <div v-else-if="!loading && !showTimesheet && !showAddForm && !showGuestForm" class="no-results">
                 {{ crew.length === 0 ? 'No crew members found.' : 'No crew members found matching your search criteria.' }}
             </div>
 
@@ -242,7 +344,7 @@
                     </div>
                 </div>
 
-                <!-- Certifications Section -->
+                <!-- Certifications Section 
                 <div class="certification-section">
                     <h3>Certifications</h3>
                     <div v-for="(cert, index) in newCrew.certifications" :key="index" class="certification-entry">
@@ -292,6 +394,7 @@
                         + Add More Certification
                     </button>
                 </div>
+                -->
 
                 <!-- Notes -->
                 <div class="form-row">
@@ -307,6 +410,71 @@
                     <button class="btn btn-primary" @click="handleAddCrewMember">Add Crew Member</button>
                 </div>
             </div>
+
+            <!-- Guest Check-in Form -->
+            <div class="add-crew-form" v-if="showGuestForm">
+                <h2>Check-in Guest</h2>
+
+                <!-- Basic Information -->
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="guest-name">Full Name *</label>
+                        <input type="text" id="guest-name" v-model="newGuest.name"
+                            :class="{ 'error': guestFormErrors.name }">
+                        <div v-if="guestFormErrors.name" class="error-message">{{ guestFormErrors.name }}</div>
+                    </div>
+                    <div class="form-group">
+                        <label for="guest-email">Email Address</label>
+                        <input type="email" id="guest-email" v-model="newGuest.email">
+                    </div>
+                </div>
+
+                <!-- Vessel Selection - Only show when not on a specific vessel page -->
+                <div class="form-row" v-if="!vesselName">
+                    <div class="form-group">
+                        <label for="guest-vessel">Vessel *</label>
+                        <select id="guest-vessel" v-model="newGuest.vessel" :class="{ 'error': guestFormErrors.vessel }">
+                            <option value="">Select a vessel</option>
+                            <option v-for="vessel in availableVessels" :key="vessel" :value="vessel">
+                                {{ vessel }}
+                            </option>
+                        </select>
+                        <div v-if="guestFormErrors.vessel" class="error-message">{{ guestFormErrors.vessel }}</div>
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="guest-arrival">Arrival Date *</label>
+                        <input type="date" id="guest-arrival" v-model="newGuest.arrivalDate"
+                            :class="{ 'error': guestFormErrors.arrivalDate }">
+                        <div v-if="guestFormErrors.arrivalDate" class="error-message">{{ guestFormErrors.arrivalDate }}
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="guest-expected-days">Expected Days Onboard *</label>
+                        <input type="number" id="guest-expected-days" v-model="newGuest.expectedDays" min="1"
+                            :class="{ 'error': guestFormErrors.expectedDays }">
+                        <div v-if="guestFormErrors.expectedDays" class="error-message">{{ guestFormErrors.expectedDays }}
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Notes -->
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="guest-notes">Notes</label>
+                        <textarea id="guest-notes" rows="3" v-model="newGuest.notes"
+                            placeholder="Purpose of visit, company affiliation, etc."></textarea>
+                    </div>
+                </div>
+
+                <!-- Form Actions -->
+                <div class="form-actions">
+                    <button class="btn btn-secondary" @click="handleCancelGuestForm">Cancel</button>
+                    <button class="btn btn-primary" @click="handleCheckinGuest">Check-in Guest</button>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -325,6 +493,11 @@ export default {
             type: String,
             default: ''
         },
+        currentCompanyId: {
+            type: String,
+            required: true,
+            default: ''
+        },
         userProfile: {
             type: Object,
             default: () => ({ role: 'viewer' })
@@ -354,6 +527,7 @@ export default {
         'crew-add',
         'crew-edit',
         'crew-delete',
+        'view-pending-certifications',
         'crew-assign-shift',
         'crew-deboard',
         'crew-checkin',
@@ -362,7 +536,9 @@ export default {
         'search-changed',
         'filter-changed',
         'access-denied',
-        'upload-cert-image'
+        'upload-cert-image',
+        'guest-checkin',
+        'guest-checkout'
     ],
 
     data() {
@@ -370,7 +546,9 @@ export default {
             searchQuery: '',
             filterStatus: 'all',
             showAddForm: false,
+            showGuestForm: false,
             formErrors: {},
+            guestFormErrors: {},
             expandedLogs: [],
             showTimesheet: false,
             timesheetFilter: 'all',
@@ -394,6 +572,14 @@ export default {
                 notes: '',
                 email: '',
                 onBoard: ''
+            },
+            newGuest: {
+                name: '',
+                email: '',
+                vessel: '',
+                arrivalDate: '',
+                expectedDays: '',
+                notes: ''
             }
         }
     },
@@ -403,6 +589,29 @@ export default {
             return this.vesselName ? `Current Crew for ${this.vesselName}` : 'All Fleet Crew'
         },
 
+        getApprovedCertifications() {
+            return (member) => {
+                if (!member.certifications || member.certifications.length === 0) {
+                    return []
+                }
+
+                return member.certifications.filter(cert => {
+                    // If no verifications exist, certificate is not approved by anyone
+                    if (!cert.verifications || cert.verifications.length === 0) {
+                        return false
+                    }
+
+                    // Find verification for current company
+                    const companyVerification = cert.verifications.find(
+                        v => v.companyId === this.currentCompanyId
+                    )
+
+                    // Only show if approved by this company
+                    return companyVerification && companyVerification.status === 'approved'
+                })
+            }
+        },
+
         filteredCrew() {
             return this.crew.filter(member => {
                 const matchesSearch = this.searchQuery === '' ||
@@ -496,6 +705,72 @@ export default {
 
         canDeboardCrew() {
             return this.config.enableAssignShift && this.hasPermission('assign')
+        },
+
+        // Current date for display
+        currentDate() {
+            return new Date().toLocaleDateString('en-US', {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            })
+        },
+
+        // Total personnel onboard
+        totalOnboard() {
+            return this.crew.filter(member => member.status === 'onboard').length
+        },
+
+        // Crew members onboard (excluding guests)
+        crewOnboard() {
+            return this.crew.filter(member =>
+                member.status === 'onboard' && member.role !== 'guest'
+            ).length
+        },
+
+        // Guests onboard
+        guestsOnboard() {
+            return this.crew.filter(member =>
+                member.status === 'onboard' && member.role === 'guest'
+            ).length
+        },
+
+        // Personnel breakdown by vessel
+        personnelByVessel() {
+            const breakdown = {}
+
+            this.crew.forEach(member => {
+                if (member.status === 'onboard' && member.vessel) {
+                    if (!breakdown[member.vessel]) {
+                        breakdown[member.vessel] = {
+                            crew: 0,
+                            guests: 0,
+                            total: 0
+                        }
+                    }
+
+                    if (member.role === 'guest') {
+                        breakdown[member.vessel].guests++
+                    } else {
+                        breakdown[member.vessel].crew++
+                    }
+                    breakdown[member.vessel].total++
+                }
+            })
+
+            return breakdown
+        },
+
+        // Get unique vessels from crew data for vessel selector
+        availableVessels() {
+            const vessels = new Set()
+            this.crew.forEach(member => {
+                if (member.vessel && member.vessel.trim() !== '') {
+                    vessels.add(member.vessel)
+                }
+            })
+            return Array.from(vessels).sort()
         }
     },
 
@@ -520,6 +795,124 @@ export default {
             return rolePermissions.includes(action)
         },
 
+        /**
+         * Get embarkation date based on crew member status
+         * Returns N/A if status is not onboard, onduty, or assigned
+         * @param {Object} member - The crew member
+         * @returns {String} - Embarkation date or 'N/A'
+         */
+        getEmbarkationDate(member) {
+            const validStatuses = ['onboard', 'onduty', 'assigned']
+            if (!validStatuses.includes(member.status)) {
+                return 'N/A'
+            }
+            return member.nextShift || 'Not Scheduled'
+        },
+
+        /**
+         * Calculate days onboard from logs
+         * Finds the most recent "Onboard" action and counts days from that timestamp
+         * @param {Object} member - The crew member
+         * @returns {String|Number} - Days onboard or 'N/A'
+         */
+        getDaysOnboard(member) {
+            // Only calculate if member is currently onboard
+            if (member.status !== 'onboard') {
+                return 'N/A'
+            }
+
+            // Check if logs exist
+            if (!member.log || member.log.length === 0) {
+                return 'N/A'
+            }
+
+            // Find the most recent "Onboard" action
+            // Logs are typically sorted by timestamp, but we'll search from the end to be safe
+            let mostRecentOnboard = null
+
+            for (let i = member.log.length - 1; i >= 0; i--) {
+                if (member.log[i].action === 'Onboard') {
+                    mostRecentOnboard = member.log[i]
+                    break
+                }
+            }
+
+            // If no "Onboard" action found, return N/A
+            if (!mostRecentOnboard || !mostRecentOnboard.timestamp) {
+                return 'N/A'
+            }
+
+            // Calculate days between onboard timestamp and now
+            const onboardDate = new Date(mostRecentOnboard.timestamp)
+            const today = new Date()
+            const diffTime = Math.abs(today - onboardDate)
+            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+
+            return diffDays
+        },
+
+        /**
+         * Calculate days onboard for guests from arrival date
+         * @param {Object} member - The guest member
+         * @returns {String|Number} - Days onboard or 'N/A'
+         */
+        getGuestDaysOnboard(member) {
+            // Check if arrival date (nextShift) exists
+            if (!member.nextShift) {
+                return 'N/A'
+            }
+
+            // Only calculate if guest is currently onboard
+            if (member.status !== 'onboard') {
+                return 'N/A'
+            }
+
+            // Calculate days between arrival date and now
+            const arrivalDate = new Date(member.nextShift)
+            const today = new Date()
+            const diffTime = Math.abs(today - arrivalDate)
+            const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+
+            return diffDays
+        },
+
+        /**
+     * Get count of pending certifications for a member
+     * @param {Object} member - The crew member
+     * @returns {Number} - Count of pending certifications
+     */
+        getPendingCertificationsCount(member) {
+            if (!member.certifications || member.certifications.length === 0) {
+                return 0
+            }
+
+            return member.certifications.filter(cert => {
+                if (!cert.verifications || cert.verifications.length === 0) {
+                    return true // No verifications = pending
+                }
+
+                const companyVerification = cert.verifications.find(
+                    v => v.companyId === this.currentCompanyId
+                )
+
+                // Pending if: no verification OR verification is pending/rejected
+                return !companyVerification ||
+                    companyVerification.status === 'pending'
+            }).length
+        },
+
+        /**
+         * Emit event when user clicks on pending certifications
+         * This allows parent component to navigate to verification page
+         */
+        handleViewPendingCertifications(member) {
+            this.$emit('view-pending-certifications', {
+                memberId: member.id,
+                memberName: member.name,
+                companyId: this.currentCompanyId
+            })
+        },
+
         handleToggleAddForm() {
             if (!this.canAddCrew) {
                 this.$emit('access-denied', { action: 'add crew', userProfile: this.userProfile })
@@ -531,6 +924,101 @@ export default {
             }
         },
 
+        handleToggleGuestForm() {
+            if (!this.canAddCrew) {
+                this.$emit('access-denied', { action: 'check-in guest', userProfile: this.userProfile })
+                return
+            }
+            this.showGuestForm = !this.showGuestForm
+            if (!this.showGuestForm) {
+                this.resetGuestForm()
+            }
+        },
+
+        handleCheckinGuest() {
+            if (!this.validateGuestForm()) {
+                return
+            }
+
+            const newGuest = {
+                name: this.newGuest.name,
+                role: 'guest',
+                status: 'onboard',
+                nextShift: this.newGuest.arrivalDate, // Store arrival date in nextShift
+                onBoard: this.newGuest.expectedDays,
+                email: this.newGuest.email || '',
+                notes: this.newGuest.notes,
+                vessel: this.vesselName || this.newGuest.vessel,
+                certifications: []
+            }
+
+            this.$emit('guest-checkin', newGuest)
+            this.resetGuestForm()
+            this.showGuestForm = false
+        },
+
+        handleCheckoutGuest(member) {
+            if (!this.canDeboardCrew) {
+                this.$emit('access-denied', { action: 'check out guest', userProfile: this.userProfile })
+                return
+            }
+
+            let duration = null
+            if (member.nextShift) {
+                const arrivalDate = new Date(member.nextShift)
+                const today = new Date()
+                const diffTime = Math.abs(today - arrivalDate)
+                duration = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+            }
+
+            this.$emit('guest-checkout', { member, duration })
+        },
+
+        handleCancelGuestForm() {
+            this.showGuestForm = false
+            this.resetGuestForm()
+        },
+
+        resetGuestForm() {
+            this.newGuest = {
+                name: '',
+                email: '',
+                vessel: '',
+                arrivalDate: '',
+                expectedDays: '',
+                notes: ''
+            }
+            this.guestFormErrors = {}
+        },
+
+        validateGuestForm() {
+            this.guestFormErrors = {}
+
+            if (!this.newGuest.name || this.newGuest.name.trim() === '') {
+                this.guestFormErrors.name = 'Guest name is required'
+            }
+
+            // Require vessel selection if not on a specific vessel page
+            if (!this.vesselName && (!this.newGuest.vessel || this.newGuest.vessel.trim() === '')) {
+                this.guestFormErrors.vessel = 'Please select a vessel'
+            }
+
+            if (!this.newGuest.arrivalDate) {
+                this.guestFormErrors.arrivalDate = 'Arrival date is required'
+            }
+
+            if (!this.newGuest.expectedDays || this.newGuest.expectedDays <= 0) {
+                this.guestFormErrors.expectedDays = 'Expected days onboard must be at least 1'
+            }
+
+            if (Object.keys(this.guestFormErrors).length > 0) {
+                this.$emit('validation-error', this.guestFormErrors)
+                return false
+            }
+
+            return true
+        },
+
         handleSearch() {
             this.$emit('search-changed', this.searchQuery)
         },
@@ -930,6 +1418,152 @@ export default {
     margin-bottom: 30px;
 }
 
+/* Personnel Summary Styles */
+.personnel-summary {
+    background: linear-gradient(135deg, #005792 0%, #00a8e8 100%);
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 25px;
+    color: white;
+    box-shadow: 0 4px 12px rgba(0, 87, 146, 0.2);
+}
+
+.summary-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.summary-header h3 {
+    margin: 0;
+    font-size: 1.4em;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.summary-date {
+    font-size: 0.9em;
+    opacity: 0.9;
+}
+
+.summary-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-bottom: 25px;
+}
+
+.summary-card {
+    background: linear-gradient(135deg, #005792 0%, #00a8e8 100%);
+    backdrop-filter: blur(10px);
+    border-radius: 8px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    transition: transform 0.2s, background 0.2s;
+}
+
+.summary-card:hover {
+    transform: translateY(-3px);
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.card-icon {
+    font-size: 2.5em;
+    opacity: 0.9;
+}
+
+.card-content {
+    flex: 1;
+}
+
+.card-value {
+    font-size: 2.5em;
+    font-weight: bold;
+    line-height: 1;
+    margin-bottom: 5px;
+}
+
+.card-label {
+    font-size: 0.9em;
+    opacity: 0.9;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.total-card {
+    background: linear-gradient(135deg, #005792 0%, #00a8e8 100%);
+}
+
+.vessel-breakdown {
+    margin-top: 20px;
+}
+
+.vessel-breakdown h4 {
+    margin: 0 0 15px 0;
+    font-size: 1.1em;
+    opacity: 0.95;
+}
+
+.vessel-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 12px;
+}
+
+.vessel-card {
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(10px);
+    border-radius: 6px;
+    padding: 15px;
+    border-left: 4px solid rgba(255, 255, 255, 0.5);
+}
+
+.vessel-name {
+    font-weight: bold;
+    font-size: 1.1em;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.vessel-stats {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.stat-label {
+    font-size: 0.8em;
+    opacity: 0.8;
+}
+
+.stat-value {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.total-stat {
+    border-left: 1px solid rgba(255, 255, 255, 0.3);
+    padding-left: 10px;
+}
+
+.total-stat .stat-value {
+    color: #ffd700;
+}
+
+
 .crew-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
@@ -1325,6 +1959,23 @@ export default {
     margin: 0;
 }
 
+.header-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.guest-card {
+    border-left-color: #ffc107 !important;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
+}
+
+.guest-card .crew-role {
+    color: #17a2b8;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.85em;
+}
+
 .vcard {
     border-radius: 6px;
     padding: 5px;
@@ -1708,5 +2359,4 @@ export default {
 
 .crew-subhead {
     color: #000;
-}
-</style>
+}</style>