oceanhelm 0.0.1

package/src/components/VesselList.vue

@@ -0,0 +1,348 @@
+<template>
+    <!-- Fleet Summary -->
+    <div class="row mb-3">
+        <div class="col-md-4">
+            <div class="card border-0 shadow-sm">
+                <div class="card-body d-flex align-items-center">
+                    <div class="rounded-circle bg-primary bg-opacity-10 p-3 me-3">
+                        <i class="bi bi-check-circle-fill text-primary fs-4"></i>
+                    </div>
+                    <div>
+                        <h6 class="mb-0">Active Vessels</h6>
+                        <h3 class="mt-2 mb-0">{{ activeVesselsCount }}</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card border-0 shadow-sm">
+                <div class="card-body d-flex align-items-center">
+                    <div class="rounded-circle bg-secondary bg-opacity-10 p-3 me-3">
+                        <i class="bi bi-pause-circle-fill text-secondary fs-4"></i>
+                    </div>
+                    <div>
+                        <h6 class="mb-0">Inactive</h6>
+                        <h3 class="mt-2 mb-0">{{ inactiveVesselsCount }}</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Register New Fleet -->
+        <div class="col-md-4" v-if="canAddVessel">
+            <div class="card border-0 shadow-sm" @click="handleAddVessel">
+                <div class="card-body d-flex align-items-center">
+                    <div class="rounded-circle bg-success bg-opacity-10 p-3 me-3">
+                        <i class="bi bi-patch-plus-fill text-success fs-4"></i>
+                    </div>
+                    <div>
+                        <h6 class="mb-0">Add New Vessel</h6>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </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">
+            <span class="visually-hidden">Loading...</span>
+        </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>
+        <p>You have an empty fleet, you have not added any vessel yet.</p>
+        <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">
+            <div class="vessel-card" @click="handleVesselClick(vessel)">
+                <div class="card-body d-flex align-items-center">
+                    <div class="vessel-icon left">
+                        <i class="fas fa-ship"></i>
+                    </div>
+                    <div class="flex-grow-1">
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <h5 class="card-title mb-0">{{ vessel.name }}</h5>
+                            <span :class="['vessel-status', statusClass(vessel.status)]">{{ vessel.status }}</span>
+                        </div>
+                        <div class="row">
+                            <div class="col-6">
+                                <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>
+                        </div>
+                    </div>
+                </div>
+                <div class="action-icon left delete">
+                    <i class="bi bi-trash" @click.stop="handleDeleteVessel(vessel)"></i>
+                </div>
+                <button class="btn btn-primary" @click.stop="handleToggleStatus(vessel)">
+                    {{ vessel.status === 'Active' ? 'Mark Inactive' : 'Mark Active' }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'VesselList',
+    
+    props: {
+        // Required props
+        vessels: {
+            type: Array,
+            required: true,
+            default: () => []
+        },
+        userProfile: {
+            type: Object,
+            required: true,
+            default: () => ({ role: 'viewer', vessel: null })
+        },
+        
+        // Optional props
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        currentRoute: {
+            type: String,
+            default: 'dashboard' // 'dashboard', 'maintenanceroute', 'crewroute'
+        },
+        
+        // Configuration props
+        config: {
+            type: Object,
+            default: () => ({
+                enableAdd: true,
+                enableEdit: true,
+                enableDelete: true,
+                enableStatusToggle: true,
+                showCertifications: true
+            })
+        }
+    },
+    
+    emits: [
+        'vessel-add',
+        'vessel-click', 
+        'vessel-edit',
+        'vessel-delete',
+        'vessel-toggle-status',
+        'vessel-navigate',
+        'access-denied'
+    ],
+    
+    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');
+        }
+    },
+    
+    methods: {
+        // Event handlers that emit to parent
+        handleAddVessel() {
+            if (!this.canAddVessel) {
+                this.handleAccessDenied('add vessel');
+                return;
+            }
+            this.$emit('vessel-add');
+        },
+        
+        handleVesselClick(vessel) {
+            const navigationData = {
+                vessel,
+                route: this.currentRoute,
+                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}`;
+        },
+        
+        grantAccess(vessel) {
+            const { role, vessel: userVessel } = this.userProfile;
+            
+            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;
+            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+            return diffDays;
+        },
+
+        getExpiryClass(expiry_date) {
+            const days = this.getDaysToExpiry(expiry_date);
+            if (days === null) return '';
+            if (days < 30) return 'cert-critical';
+            if (days < 90) return 'cert-warning';
+            return '';
+        }
+    }
+}
+</script>
+
+<style>
+.left {
+    margin-left: 20px;
+}
+
+.vessel-card {
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 8px 16px rgba(0, 105, 192, 0.15);
+    transition: all 0.3s ease;
+    margin-bottom: 20px;
+    overflow: hidden;
+    border-left: 4px solid var(--accent-color);
+}
+
+.vessel-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 20px rgba(0, 105, 192, 0.2);
+}
+
+.vessel-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    background-color: #e3f2fd;
+    border-radius: 10px;
+    color: var(--accent-color);
+    font-size: 24px;
+    margin-right: 15px;
+}
+
+.black {
+    color: black !important;
+}
+
+.action-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 20px;
+    color: var(--accent-color);
+    font-size: 16px;
+    margin-right: 15px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+.delete {
+    background-color: var(--danger);
+}
+
+.edit {
+    background-color: var(--success);
+}
+
+.vessel-status {
+    display: inline-block;
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.status-active {
+    background-color: #e8f5e9;
+    color: #2e7d32;
+}
+
+.status-maintenance {
+    background-color: #fff8e1;
+    color: #f57f17;
+}
+
+.status-inactive {
+    background-color: #f5f5f5;
+    color: #757575;
+}
+</style>

package/src/index.js

@@ -0,0 +1,33 @@
+// src/index.js - Library entry point
+import ConfigurableSidebar from './components/ConfigurableSidebar.vue'
+import VesselList from './components/VesselList.vue'
+import DashHead from './components/DashHead.vue' 
+import OceanHelmMaintenance from './components/OceanHelmMaintenance.vue'
+import ActivityLogs from './components/ActivityLogs.vue'
+import CrewManagement from './components/CrewManagement.vue'
+import { createSidebarConfig, defaultMenuItems } from './utils/sidebarConfig'
+import { defaultPermissionChecker } from './utils/permissions'
+
+// Export main components
+export { ConfigurableSidebar, VesselList, DashHead, CrewManagement, ActivityLogs, OceanHelmMaintenance }
+
+// Export utilities
+export { createSidebarConfig, defaultMenuItems, defaultPermissionChecker }
+
+// Export types for TypeScript users
+export * from './types'
+
+// Default export for plugin-style usage
+export default {
+  install(app, options = {}) {
+    app.component('ConfigurableSidebar', ConfigurableSidebar)
+    app.component('VesselList', VesselList)
+    app.component('DashHead', DashHead)
+    app.component('ActivityLogs', ActivityLogs)
+    app.component('CrewManagement', CrewManagement)
+    app.component('DashHead', OceanHelmMaintenance)
+
+    // Provide global configuration
+    app.provide('sidebarConfig', options)
+  }
+}

package/src/main.js

@@ -0,0 +1,11 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

package/src/router/index.js

@@ -0,0 +1,8 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [],
+})
+
+export default router

package/src/types/index.js

@@ -0,0 +1,33 @@
+// ===== src/types/index.js (JSDoc type definitions) =====
+
+/**
+ * @typedef {Object} MenuItem
+ * @property {'link'|'button'|'dropdown'|'text'|'separator'} type - Type of menu item
+ * @property {string} [label] - Display label for the item
+ * @property {string} [icon] - CSS class for icon
+ * @property {string} [href] - Link URL for 'link' type items
+ * @property {string} [action] - Action identifier for 'button' type items
+ * @property {string[]} [roles] - Required user roles to see this item
+ * @property {boolean} [active] - Whether item is currently active
+ * @property {boolean} [external] - Whether link opens in new tab
+ * @property {boolean} [preventDefault] - Whether to prevent default navigation
+ * @property {MenuItem[]} [children] - Child items for dropdown type
+ */
+
+/**
+ * @typedef {Object} UserProfile
+ * @property {string} role - User's role
+ * @property {*} [key] - Any additional user properties
+ */
+
+/**
+ * @typedef {Object} SidebarConfig
+ * @property {string} [brandName] - Brand name to display
+ * @property {string} [logoIcon] - CSS class for logo icon
+ * @property {boolean} [showLogo] - Whether to show logo section
+ * @property {boolean} [responsive] - Whether to enable responsive behavior
+ * @property {string} [customClasses] - Additional CSS classes
+ */
+
+// Export empty object to make this a module
+export {}

package/src/utils/permissions.js

@@ -0,0 +1,10 @@
+// ===== src/utils/permissions.js =====
+export const defaultPermissionChecker = (item, userProfile) => {
+    // No role restrictions
+    if (!item.roles || item.roles.length === 0) {
+        return true
+    }
+
+    // Check if user role is in allowed roles
+    return item.roles.includes(userProfile?.role)
+}

package/src/utils/sidebarConfig.js

@@ -0,0 +1,87 @@
+// ===== src/utils/sidebarConfig.js =====
+export const createSidebarConfig = (options = {}) => {
+    return {
+        brandName: options.brandName || 'OceanHelm',
+        logoIcon: options.logoIcon || 'bi bi-water',
+        showLogo: options.showLogo !== false,
+        responsive: options.responsive !== false,
+        ...options
+    }
+}
+
+export const defaultMenuItems = [
+    {
+        type: 'link',
+        label: 'Dashboard',
+        icon: 'bi bi-speedometer2',
+        href: '/app/dashboard',
+        active: true
+    },
+    {
+        type: 'link',
+        label: 'Activity Log',
+        icon: 'bi bi-activity',
+        href: '/activity-log',
+        roles: ['owner'] // Role-based visibility
+    },
+    {
+        type: 'text',
+        label: 'Services'
+    },
+    {
+        type: 'button',
+        label: 'Maintenance',
+        icon: 'bi bi-tools',
+        action: 'maintenance'
+    },
+    {
+        type: 'dropdown',
+        label: 'Crew Management',
+        icon: 'bi bi-people',
+        children: [
+            {
+                label: 'All Crew',
+                action: 'crew-all',
+                roles: ['owner', 'staff']
+            },
+            {
+                type: 'separator'
+            },
+            {
+                label: 'Get Crew by Vessel',
+                action: 'crew-by-vessel'
+            }
+        ]
+    },
+    {
+        type: 'link',
+        label: 'Inventory Management',
+        icon: 'bi bi-clipboard-data',
+        href: '/app/inventory'
+    },
+    {
+        type: 'link',
+        label: 'Requisition Processing',
+        icon: 'bi bi-calendar-check',
+        href: '/app/requisition'
+    },
+    {
+        type: 'button',
+        label: 'Voyage Manager',
+        icon: 'fas fa-ship',
+        action: 'coming-soon'
+    },
+    {
+        type: 'button',
+        label: 'Settings',
+        icon: 'bi bi-gear',
+        action: 'settings',
+        roles: ['owner', 'staff']
+    },
+    {
+        type: 'button',
+        label: 'Help & Support',
+        icon: 'bi bi-question-circle',
+        action: 'help'
+    }
+]