oceanhelm 0.0.6 → 0.0.8

package/src/components/CrewManagement.vue

@@ -6,23 +6,14 @@
         <div class="crew-section">
             <div class="crew-section-header">
                 <h2>{{ sectionTitle }}</h2>
-                <button 
-                    class="btn btn-primary" 
-                    @click="handleToggleAddForm"
-                    v-if="canAddCrew"
-                >
+                <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"
-                >
+                <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>
@@ -41,37 +32,25 @@
 
             <!-- 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 v-for="member in filteredCrew" :key="member.id" class="crew-card"
+                    :class="{ 'unavailable': member.status === 'unavailable' }">
                     <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>
-                    
+
                     <!-- 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)"
-                        >
+                        <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>
+                        <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' }}
@@ -79,7 +58,7 @@
                     <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">
@@ -88,21 +67,13 @@
                         <div v-else class="status-unavailable crew-availability vcard">
                             Vessel: Unassigned
                         </div>
-                        <button 
-                            class="btn btn-primary"
-                            @click="handleAssignShift(member)"
-                            v-if="canAssignShift"
-                        >
+                        <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>
+                    <i class="bi bi-trash icon delete-icon" @click="handleDeleteCrew(member)" v-if="canDeleteCrew"></i>
                 </div>
             </div>
 
@@ -114,17 +85,12 @@
             <!-- 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 }"
-                        >
+                        <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">
@@ -135,13 +101,8 @@
                             </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;"
-                        >
+                        <input v-if="newCrew.role === 'Other'" type="text" placeholder="Enter custom role"
+                            v-model="newCrew.customRole" style="margin-top: 8px;">
                     </div>
                 </div>
 
@@ -156,12 +117,7 @@
                     </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 }"
-                        >
+                        <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>
@@ -180,18 +136,14 @@
                                 <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"
-                                >
+                                <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>
@@ -218,7 +170,7 @@
 <script>
 export default {
     name: 'CrewManagement',
-    
+
     props: {
         // Required props
         crew: {
@@ -234,7 +186,7 @@ export default {
             type: Object,
             default: () => ({ role: 'viewer' })
         },
-        
+
         // Optional props
         loading: {
             type: Boolean,
@@ -244,7 +196,7 @@ export default {
             type: Array,
             default: () => ['Captain', 'First Officer', 'Engineer', 'Deckhand', 'Mechanic', 'Cook']
         },
-        
+
         // Configuration props
         config: {
             type: Object,
@@ -258,7 +210,7 @@ export default {
             })
         }
     },
-    
+
     emits: [
         'crew-add',
         'crew-edit',
@@ -270,7 +222,7 @@ export default {
         'filter-changed',
         'access-denied'
     ],
-    
+
     data() {
         return {
             searchQuery: '',
@@ -290,55 +242,65 @@ export default {
             }
         }
     },
-    
+
     computed: {
         sectionTitle() {
             return this.vesselName ? `Current Crew for ${this.vesselName}` : 'All Fleet Crew'
         },
-        
+
         filteredCrew() {
             return this.crew.filter(member => {
-                const matchesSearch = this.searchQuery === '' || 
+                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 { role, vessel } = this.userProfile
+            const isVessel = vessel === this.vesselName
+
             const permissions = {
                 'owner': ['add', 'edit', 'delete', 'assign', 'view'],
                 'staff': ['add', 'edit', 'assign', 'view'],
-                'captain': ['assign', 'view'],
+                'captain': ['assign', 'view'], // default for captain
                 'viewer': ['view']
             }
-            return permissions[role]?.includes(action) || false
+
+            let rolePermissions = permissions[role] || []
+
+            // Special case: captain + isVessel = true
+            if (role === 'captain' && isVessel) {
+                rolePermissions = [...rolePermissions, 'add']
+            }
+
+            return rolePermissions.includes(action)
         },
-        
+
         // Event handlers
         handleToggleAddForm() {
             if (!this.canAddCrew) {
@@ -350,26 +312,26 @@ export default {
                 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 => 
+
+            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,
@@ -381,48 +343,48 @@ export default {
                 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 = {
@@ -438,53 +400,53 @@ export default {
             }
             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',
@@ -493,7 +455,7 @@ export default {
             }
             return statusMap[status] || ''
         },
-        
+
         getCertificationClass(expiryDate) {
             const status = this.getExpiryStatus(expiryDate)
             const classMap = {
@@ -503,7 +465,7 @@ export default {
             }
             return classMap[status] || ''
         },
-        
+
         getExpiryStatus(dateStr) {
             if (!dateStr) return 'none'