oceanhelm 0.0.1

package/src/components/CrewManagement.vue

@@ -0,0 +1,746 @@
+<template>
+    <div class="crew-management">
+        <!-- Wave background -->
+        <div class="wave-bg" v-if="config.showWaveBackground"></div>
+
+        <div class="crew-section">
+            <div class="section-header">
+                <h2>{{ sectionTitle }}</h2>
+                <button 
+                    class="btn btn-primary" 
+                    @click="handleToggleAddForm"
+                    v-if="canAddCrew"
+                >
+                    {{ showAddForm ? 'Cancel' : '+ Add Crew Member' }}
+                </button>
+            </div>
+
+            <!-- Search and Filter -->
+            <div class="search-filter">
+                <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>
+                    <option value="available">Available</option>
+                    <option value="onduty">On Duty</option>
+                    <option value="unavailable">Unavailable</option>
+                </select>
+            </div>
+
+            <!-- Loading State -->
+            <div v-if="loading" class="loading-state">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="visually-hidden">Loading crew...</span>
+                </div>
+                <p>Loading crew members...</p>
+            </div>
+
+            <!-- Crew Grid -->
+            <div class="crew-grid" v-else-if="filteredCrew.length > 0">
+                <div 
+                    v-for="member in filteredCrew" 
+                    :key="member.id" 
+                    class="crew-card"
+                    :class="{ 'unavailable': member.status === 'unavailable' }"
+                >
+                    <div :class="['status-badge', getStatusClass(member.status)]">
+                        {{ formatStatus(member.status) }}
+                    </div>
+                    
+                    <div class="crew-name">{{ member.name }}</div>
+                    <div class="crew-role">{{ member.role }}</div>
+                    
+                    <!-- Certifications -->
+                    <div class="crew-certifications">
+                        <div 
+                            v-for="cert in member.certifications" 
+                            :key="cert.name" 
+                            class="certification-tag" 
+                            :class="getCertificationClass(cert.expiryDate)"
+                            @click="handleViewCertification(cert, member)"
+                        >
+                            {{ cert.name }}
+                        </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' }}
+                    </div>
+                    <div class="crew-availability">
+                        <strong>Expected Days Onboard (in days):</strong> {{ member.onBoard || 'Not Scheduled' }}
+                    </div>
+                    
+                    <!-- Action Buttons -->
+                    <div class="action-buttons">
+                        <div v-if="member.vessel" class="status-available crew-availability vcard">
+                            Vessel: {{ member.vessel }}
+                        </div>
+                        <div v-else class="status-unavailable crew-availability vcard">
+                            Vessel: Unassigned
+                        </div>
+                        <button 
+                            class="btn btn-primary"
+                            @click="handleAssignShift(member)"
+                            v-if="canAssignShift"
+                        >
+                            Assign Shift
+                        </button>
+                    </div>
+                    
+                    <!-- Delete Button -->
+                    <i 
+                        class="bi bi-trash icon delete-icon" 
+                        @click="handleDeleteCrew(member)"
+                        v-if="canDeleteCrew"
+                    ></i>
+                </div>
+            </div>
+
+            <!-- No Results -->
+            <div v-else-if="!loading" class="no-results">
+                {{ crew.length === 0 ? 'No crew members found.' : 'No crew members found matching your search criteria.' }}
+            </div>
+
+            <!-- Add Crew Form -->
+            <div class="add-crew-form" v-if="showAddForm">
+                <h2>Add New Crew Member</h2>
+                
+                <!-- Basic Information -->
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="crew-name">Full Name *</label>
+                        <input 
+                            type="text" 
+                            id="crew-name" 
+                            v-model="newCrew.name"
+                            :class="{ 'error': formErrors.name }"
+                        >
+                        <div v-if="formErrors.name" class="error-message">{{ formErrors.name }}</div>
+                    </div>
+                    <div class="form-group">
+                        <label for="crew-role">Role/Position *</label>
+                        <select id="crew-role" v-model="newCrew.role">
+                            <option v-for="role in availableRoles" :key="role" :value="role">
+                                {{ role }}
+                            </option>
+                            <option value="Other">Other</option>
+                        </select>
+                        <input 
+                            v-if="newCrew.role === 'Other'" 
+                            type="text" 
+                            placeholder="Enter custom role" 
+                            v-model="newCrew.customRole"
+                            style="margin-top: 8px;"
+                        >
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="crew-status">Status *</label>
+                        <select id="crew-status" v-model="newCrew.status">
+                            <option value="available">Available</option>
+                            <option value="onduty">On Duty</option>
+                            <option value="unavailable">Unavailable</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="crew-email">Email Address *</label>
+                        <input 
+                            type="email" 
+                            id="crew-email" 
+                            v-model="newCrew.email"
+                            :class="{ 'error': formErrors.email }"
+                        >
+                        <div v-if="formErrors.email" class="error-message">{{ formErrors.email }}</div>
+                    </div>
+                </div>
+
+                <!-- Certifications Section -->
+                <div class="certification-section">
+                    <h3>Certifications</h3>
+                    <div v-for="(cert, index) in newCrew.certifications" :key="index" class="certification-entry">
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label>Certification Name</label>
+                                <input type="text" v-model="cert.name" placeholder="Enter certification name">
+                            </div>
+                            <div class="form-group">
+                                <label>Expiry Date</label>
+                                <input type="date" v-model="cert.expiryDate">
+                            </div>
+                            <div class="form-group">
+                                <button 
+                                    type="button" 
+                                    class="btn btn-danger btn-sm" 
+                                    @click="removeCertification(index)" 
+                                    v-if="newCrew.certifications.length > 1"
+                                >
+                                    Remove
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <button type="button" class="btn btn-secondary btn-sm" @click="addCertificationEntry">
+                        + Add More Certification
+                    </button>
+                </div>
+
+                <!-- Notes -->
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="crew-notes">Notes</label>
+                        <textarea id="crew-notes" rows="3" v-model="newCrew.notes"></textarea>
+                    </div>
+                </div>
+
+                <!-- Form Actions -->
+                <div class="form-actions">
+                    <button class="btn btn-secondary" @click="handleCancelForm">Cancel</button>
+                    <button class="btn btn-primary" @click="handleAddCrewMember">Add Crew Member</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CrewManagement',
+    
+    props: {
+        // Required props
+        crew: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        vesselName: {
+            type: String,
+            default: ''
+        },
+        userProfile: {
+            type: Object,
+            default: () => ({ role: 'viewer' })
+        },
+        
+        // Optional props
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        availableRoles: {
+            type: Array,
+            default: () => ['Captain', 'First Officer', 'Engineer', 'Deckhand', 'Mechanic', 'Cook']
+        },
+        
+        // Configuration props
+        config: {
+            type: Object,
+            default: () => ({
+                showWaveBackground: true,
+                enableAdd: true,
+                enableEdit: true,
+                enableDelete: true,
+                enableAssignShift: true,
+                enableCertificationManagement: true
+            })
+        }
+    },
+    
+    emits: [
+        'crew-add',
+        'crew-edit',
+        'crew-delete',
+        'crew-assign-shift',
+        'crew-add-certification',
+        'crew-view-certification',
+        'search-changed',
+        'filter-changed',
+        'access-denied'
+    ],
+    
+    data() {
+        return {
+            searchQuery: '',
+            filterStatus: 'all',
+            showAddForm: false,
+            formErrors: {},
+            newCrew: {
+                name: '',
+                role: 'Deckhand',
+                customRole: '',
+                status: 'available',
+                nextShift: '',
+                certifications: [{ name: '', expiryDate: '' }],
+                notes: '',
+                email: '',
+                onBoard: ''
+            }
+        }
+    },
+    
+    computed: {
+        sectionTitle() {
+            return this.vesselName ? `Current Crew for ${this.vesselName}` : 'All Fleet Crew'
+        },
+        
+        filteredCrew() {
+            return this.crew.filter(member => {
+                const matchesSearch = this.searchQuery === '' || 
+                    member.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+                    member.role.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+                    (member.vessel && member.vessel.toLowerCase().includes(this.searchQuery.toLowerCase()))
+                
+                const matchesStatus = this.filterStatus === 'all' || member.status === this.filterStatus
+                
+                return matchesSearch && matchesStatus
+            })
+        },
+        
+        canAddCrew() {
+            return this.config.enableAdd && this.hasPermission('add')
+        },
+        
+        canEditCrew() {
+            return this.config.enableEdit && this.hasPermission('edit')
+        },
+        
+        canDeleteCrew() {
+            return this.config.enableDelete && this.hasPermission('delete')
+        },
+        
+        canAssignShift() {
+            return this.config.enableAssignShift && this.hasPermission('assign')
+        }
+    },
+    
+    methods: {
+        // Permission checking
+        hasPermission(action) {
+            const { role } = this.userProfile
+            const permissions = {
+                'owner': ['add', 'edit', 'delete', 'assign', 'view'],
+                'staff': ['add', 'edit', 'assign', 'view'],
+                'captain': ['assign', 'view'],
+                'viewer': ['view']
+            }
+            return permissions[role]?.includes(action) || false
+        },
+        
+        // Event handlers
+        handleToggleAddForm() {
+            if (!this.canAddCrew) {
+                this.$emit('access-denied', { action: 'add crew', userProfile: this.userProfile })
+                return
+            }
+            this.showAddForm = !this.showAddForm
+            if (!this.showAddForm) {
+                this.resetForm()
+            }
+        },
+        
+        handleSearch() {
+            this.$emit('search-changed', this.searchQuery)
+        },
+        
+        handleFilter() {
+            this.$emit('filter-changed', this.filterStatus)
+        },
+        
+        handleAddCrewMember() {
+            if (!this.validateForm()) {
+                return
+            }
+            
+            const validCertifications = this.newCrew.certifications.filter(cert => 
+                cert.name.trim() !== '' && cert.expiryDate !== ''
+            )
+            
+            const finalRole = this.newCrew.role === 'Other' ? this.newCrew.customRole : this.newCrew.role
+            
+            const newMember = {
+                name: this.newCrew.name,
+                role: finalRole,
+                status: this.newCrew.status,
+                certifications: validCertifications,
+                notes: this.newCrew.notes,
+                vessel: this.vesselName,
+                email: this.newCrew.email,
+                onBoard: this.newCrew.onBoard,
+                nextShift: this.newCrew.nextShift
+            }
+            
+            this.$emit('crew-add', newMember)
+            this.resetForm()
+            this.showAddForm = false
+        },
+        
+        handleCancelForm() {
+            this.showAddForm = false
+            this.resetForm()
+        },
+        
+        handleDeleteCrew(member) {
+            if (!this.canDeleteCrew) {
+                this.$emit('access-denied', { action: 'delete crew', userProfile: this.userProfile })
+                return
+            }
+            
+            this.$emit('crew-delete', member)
+        },
+        
+        handleAssignShift(member) {
+            if (!this.canAssignShift) {
+                this.$emit('access-denied', { action: 'assign shift', userProfile: this.userProfile })
+                return
+            }
+            
+            this.$emit('crew-assign-shift', member)
+        },
+        
+        handleAddCertification(member) {
+            if (!this.canEditCrew) {
+                this.$emit('access-denied', { action: 'add certification', userProfile: this.userProfile })
+                return
+            }
+            
+            this.$emit('crew-add-certification', member)
+        },
+        
+        handleViewCertification(certification, member) {
+            this.$emit('crew-view-certification', { certification, member })
+        },
+        
+        // Form management
+        resetForm() {
+            this.newCrew = {
+                name: '',
+                role: 'Deckhand',
+                customRole: '',
+                status: 'available',
+                nextShift: '',
+                certifications: [{ name: '', expiryDate: '' }],
+                notes: '',
+                email: '',
+                onBoard: ''
+            }
+            this.formErrors = {}
+        },
+        
+        validateForm() {
+            this.formErrors = {}
+            
+            const requiredFields = {
+                name: 'Full Name',
+                email: 'Email Address'
+            }
+            
+            // Check required fields
+            Object.keys(requiredFields).forEach(field => {
+                if (!this.newCrew[field] || this.newCrew[field].trim() === '') {
+                    this.formErrors[field] = `${requiredFields[field]} is required`
+                }
+            })
+            
+            // Validate email format
+            if (this.newCrew.email && !this.isValidEmail(this.newCrew.email)) {
+                this.formErrors.email = 'Please enter a valid email address'
+            }
+            
+            // Validate custom role
+            if (this.newCrew.role === 'Other' && (!this.newCrew.customRole || this.newCrew.customRole.trim() === '')) {
+                this.formErrors.customRole = 'Custom role is required when "Other" is selected'
+            }
+            
+            return Object.keys(this.formErrors).length === 0
+        },
+        
+        isValidEmail(email) {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+            return emailRegex.test(email)
+        },
+        
+        addCertificationEntry() {
+            this.newCrew.certifications.push({ name: '', expiryDate: '' })
+        },
+        
+        removeCertification(index) {
+            this.newCrew.certifications.splice(index, 1)
+        },
+        
+        // Utility methods
+        formatStatus(status) {
+            return status ? status.charAt(0).toUpperCase() + status.slice(1) : ''
+        },
+        
+        getStatusClass(status) {
+            const statusMap = {
+                'available': 'status-available',
+                'onduty': 'status-onduty',
+                'unavailable': 'status-unavailable'
+            }
+            return statusMap[status] || ''
+        },
+        
+        getCertificationClass(expiryDate) {
+            const status = this.getExpiryStatus(expiryDate)
+            const classMap = {
+                'expired': 'text-danger',
+                'expiringSoon': 'text-warning',
+                'valid': 'text-success'
+            }
+            return classMap[status] || ''
+        },
+        
+        getExpiryStatus(dateStr) {
+            if (!dateStr) return 'none'
+
+            const expiry = new Date(dateStr)
+            const today = new Date()
+            const oneMonthFromNow = new Date()
+            oneMonthFromNow.setMonth(today.getMonth() + 1)
+
+            if (expiry <= today) return 'expired'
+            if (expiry <= oneMonthFromNow) return 'expiringSoon'
+            return 'valid'
+        }
+    }
+}
+</script>
+
+<style>
+h1,
+h2 {
+    color: #005792;
+}
+
+.crew-section {
+    margin-bottom: 30px;
+}
+
+.crew-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.crew-card {
+    background-color: #f8f9fa;
+    border-radius: 6px;
+    padding: 15px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
+    border-left: 4px solid #00a8e8;
+    position: relative;
+}
+
+.crew-card.unavailable {
+    border-left-color: #dc3545;
+    opacity: 0.8;
+}
+
+.crew-name {
+    font-weight: bold;
+    font-size: 1.1em;
+    margin-bottom: 5px;
+    color: #005792;
+}
+
+.crew-role {
+    color: #6c757d;
+    font-size: 0.9em;
+    margin-bottom: 10px;
+}
+
+.crew-certifications,
+.crew-availability {
+    font-size: 0.85em;
+    margin: 5px 0;
+}
+
+.certification-tag {
+    display: inline-block;
+    background-color: #e6f7ff;
+    color: #005792;
+    border-radius: 4px;
+    padding: 2px 8px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    font-size: 0.85em;
+}
+
+.status-badge {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    font-size: 0.75em;
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-weight: bold;
+}
+
+.status-available {
+    background-color: #d4edda;
+    color: #155724;
+}
+
+.status-unavailable {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+.status-onduty {
+    background-color: #cce5ff;
+    color: #004085;
+}
+
+.action-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 15px;
+}
+
+.btn {
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: background-color 0.2s;
+}
+
+.btn-primary {
+    background-color: #005792;
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: #004675;
+}
+
+.btn-secondary {
+    background-color: #e9ecef;
+    color: #495057;
+}
+
+.btn-secondary:hover {
+    background-color: #dde2e6;
+}
+
+.search-filter {
+    display: flex;
+    margin-bottom: 20px;
+    gap: 10px;
+}
+
+.search-filter input,
+.search-filter select {
+    padding: 8px 12px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+}
+
+.search-filter input {
+    flex-grow: 1;
+}
+
+.search-filter select {
+    width: 30%;
+}
+
+.add-crew-form {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 6px;
+    margin-top: 30px;
+}
+
+.form-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.form-group {
+    flex: 1;
+    min-width: 200px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #495057;
+}
+
+.text-danger {
+    color: red;
+    font-weight: bolder;
+}
+
+.text-warning {
+    color: orange;
+    font-weight: bolder;
+}
+
+.text-success {
+    color: green;
+    font-weight: bolder;
+}
+
+.icon {
+    font-size: 20px;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.no-results {
+    text-align: center;
+    padding: 20px;
+    color: #6c757d;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.vcard {
+    border-radius: 6px;
+    padding: 5px;
+}
+
+#content.active {
+    margin-left: var(--sidebar-width);
+    width: calc(100% - var(--sidebar-width));
+}
+</style>