oceanhelm 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oceanhelm",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Oceanhelm's highly customizable library",
   "private": false,
   "type": "module",

package/src/components/VesselList.vue

@@ -43,7 +43,7 @@
     </div>
 
     <h4 class="mb-4"><i class="bi bi-ship me-2"></i>Registered Vessels</h4>
-    
+
     <!-- Loading State -->
     <div v-if="loading" class="text-center py-4">
         <div class="spinner-border text-primary" role="status">
@@ -51,7 +51,7 @@
         </div>
         <p class="mt-2">Loading vessels...</p>
     </div>
-    
+
     <!-- Empty State -->
     <div v-else-if="!vessels.length" class="alert alert-primary" role="alert">
         <h4 class="alert-heading">Empty Fleet!</h4>
@@ -59,7 +59,7 @@
         <hr>
         <p class="mb-0">Click on the add vessel button above, to start adding vessels to your fleet</p>
     </div>
-    
+
     <!-- Vessel Cards -->
     <div v-else class="row">
         <div class="col-lg-6" v-for="vessel in vessels" :key="vessel.registrationNumber || vessel.id">
@@ -78,9 +78,24 @@
                                 <small class="text-muted">Registration #:</small>
                                 <p class="mb-0">{{ vessel.registrationNumber }}</p>
                             </div>
-                            <div class="col-6">
-                                <small class="text-muted">Next Maintenance:</small>
-                                <p class="mb-0">{{ vessel.nextMaintenance || 'Not scheduled' }}</p>
+
+                            <div class="col-6" v-if="vessel.date">
+                                <template v-if="vessel.status === 'Active'">
+                                    <small class="text-muted">Active Duration:</small>
+                                    <p class="mb-0">{{ getDuration(vessel.date, vessel.registrationNumber) }}</p>
+                                </template>
+                                <template v-else>
+                                    <small class="text-muted">Inactive Duration:</small>
+                                    <p class="mb-0">{{ getDuration(vessel.date, vessel.registrationNumber) }}</p>
+                                </template>
+                            </div>
+
+                            <div class="col-6" v-else>
+                                <small class="text-muted">{{ vessel.status}} Duration:</small>
+                                <button type="button" class="btn btn-outline-primary btn-sm mt-1"
+                                @click.stop="setVesselDate(vessel.registrationNumber)">
+                                    Set Date
+                                </button>
                             </div>
                         </div>
                     </div>
@@ -99,7 +114,7 @@
 <script>
 export default {
     name: 'VesselList',
-    
+
     props: {
         // Required props
         vessels: {
@@ -112,7 +127,7 @@ export default {
             required: true,
             default: () => ({ role: 'viewer', vessel: null })
         },
-        
+
         // Optional props
         loading: {
             type: Boolean,
@@ -122,7 +137,7 @@ export default {
             type: String,
             default: 'dashboard' // 'dashboard', 'maintenanceroute', 'crewroute'
         },
-        
+
         // Configuration props
         config: {
             type: Object,
@@ -135,32 +150,33 @@ export default {
             })
         }
     },
-    
+
     emits: [
         'vessel-add',
-        'vessel-click', 
+        'vessel-click',
         'vessel-edit',
         'vessel-delete',
         'vessel-toggle-status',
         'vessel-navigate',
-        'access-denied'
+        'access-denied',
+        'date-change'
     ],
-    
+
     computed: {
         activeVesselsCount() {
             return this.vessels.filter(vessel => vessel.status === "Active").length;
         },
-        
+
         inactiveVesselsCount() {
             return this.vessels.filter(vessel => vessel.status === "Inactive").length;
         },
-        
+
         canAddVessel() {
-            return this.config.enableAdd && 
-                   (this.userProfile.role === 'owner' || this.userProfile.role === 'staff');
+            return this.config.enableAdd &&
+                (this.userProfile.role === 'owner' || this.userProfile.role === 'staff');
         }
     },
-    
+
     methods: {
         // Event handlers that emit to parent
         handleAddVessel() {
@@ -170,7 +186,7 @@ export default {
             }
             this.$emit('vessel-add');
         },
-        
+
         handleVesselClick(vessel) {
             const navigationData = {
                 vessel,
@@ -178,74 +194,105 @@ export default {
                 id: vessel.registrationNumber,
                 name: vessel.name
             };
-            
+
             if (this.currentRoute === 'dashboard') {
                 this.$emit('vessel-click', vessel);
             } else {
                 this.$emit('vessel-navigate', navigationData);
             }
         },
-        
+
         handleDeleteVessel(vessel) {
             if (!this.grantAccess(vessel)) {
                 this.handleAccessDenied('delete vessel');
                 return;
             }
-            
+
             if (!this.config.enableDelete) {
                 return;
             }
-            
+
             this.$emit('vessel-delete', vessel);
         },
-        
+
         handleToggleStatus(vessel) {
             if (!this.grantAccess(vessel)) {
                 this.handleAccessDenied('change vessel status');
                 return;
             }
-            
+
             if (!this.config.enableStatusToggle) {
                 return;
             }
-            
+
             this.$emit('vessel-toggle-status', vessel);
         },
-        
+
         handleEditVessel(vessel) {
             if (!this.grantAccess(vessel)) {
                 this.handleAccessDenied('edit vessel');
                 return;
             }
-            
+
             if (!this.config.enableEdit) {
                 return;
             }
-            
+
             this.$emit('vessel-edit', vessel);
         },
-        
+
         handleAccessDenied(action) {
             this.$emit('access-denied', { action, userProfile: this.userProfile });
         },
-        
+
         // Utility methods (keep these in component as they're UI-related)
         statusClass(status) {
             const normalized = status?.toLowerCase() || '';
             return `status-${normalized}`;
         },
-        
+
+        getDuration(date, registrationNumber) {
+            const now = new Date();
+            const inputDate = new Date(date);
+
+            // difference in milliseconds
+            const diffMs = now - inputDate;
+
+            if (diffMs < 0) return "Invalid (future date)";
+
+            // convert to hours
+            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+
+            const days = Math.floor(diffHours / 24);
+            const hours = diffHours % 24;
+
+            let result = "";
+
+            if (days > 0) {
+                result += `${days} day${days > 1 ? "s" : ""}`;
+            }
+            if (hours > 0) {
+                result += (result ? " " : "") + `${hours} hr${hours > 1 ? "s" : ""}`;
+            }
+
+            return result || '0 hr'
+        },
+
+        setVesselDate(registrationNumber) {
+            this.$emit('date-change', registrationNumber);
+        },
+
         grantAccess(vessel) {
             const { role, vessel: userVessel } = this.userProfile;
-            
-            return role === 'owner' || 
-                   role === 'staff' || 
-                   (role === 'captain' && userVessel === vessel.name);
+
+            return role === 'owner' ||
+                role === 'staff' ||
+                (role === 'captain' && userVessel === vessel.name);
         },
-        
+
         getDaysToExpiry(expiry_date) {
             if (!expiry_date) return null;
-            
+
             const today = new Date();
             const expiry = new Date(expiry_date);
             const diffTime = expiry - today;

package/src/utils/sidebarConfig.js

@@ -71,6 +71,12 @@ export const defaultMenuItems = [
         icon: 'fas fa-ship',
         action: 'coming-soon'
     },
+    {
+        type: 'button',
+        label: 'Vessel Log',
+        icon: 'bi bi-file-ruled',
+        action: 'vessel-log'
+    },
     {
         type: 'button',
         label: 'Settings',