oceanhelm 0.0.11 → 0.0.13

package/src/components/RequisitionSystem.vue

@@ -19,7 +19,7 @@
                 <div class="form-grid">
                     <div class="form-group">
                         <label>Requestor Name *</label>
-                        <input type="text" :value="userProfile.full_name" readonly required class="form-control" />
+                        <input type="text" :value="userProfile?.full_name" readonly required class="form-control" />
                     </div>
                     <div class="form-group">
                         <label>Department *</label>
@@ -39,7 +39,7 @@
                     </div>
                     <div class="form-group">
                         <label>Date Needed *</label>
-                        <input type="date" v-model="form.neededDate" required />
+                        <input type="date" v-model="form.neededDate" :min="today" required />
                     </div>
                 </div>
 
@@ -76,7 +76,7 @@
                             </div>
                             <div class="form-group">
                                 <label>Est. Unit Cost *</label>
-                                <input type="number" v-model.number="item.cost" step="0.01" placeholder="0.00" required />
+                                <input type="number" v-model.number="item.cost" step="0.01" min="0" placeholder="0.00" required />
                             </div>
                             <button type="button" class="remove-item-btn" @click="removeItem(index)">Remove</button>
                         </div>
@@ -84,7 +84,9 @@
                 </div>
 
                 <div class="action-buttons">
-                    <button type="submit" class="btn btn-primary-req">Submit Requisition</button>
+                    <button type="submit" class="btn btn-primary-req" :disabled="isSubmitting">
+                        {{ isSubmitting ? 'Submitting...' : 'Submit Requisition' }}
+                    </button>
                 </div>
             </form>
         </div>
@@ -270,23 +272,23 @@
                         <h3>Vendor Information</h3>
                         <div class="info-row">
                             <span class="info-label">Company:</span>
-                            <span class="info-value">{{ vendorInfo.company || poDetails.vendorInfo?.company }} </span>
+                            <span class="info-value">{{ vendorInfo.company || poDetails.vendorInfo?.company || 'N/A' }} </span>
                         </div>
                         <div class="info-row">
                             <span class="info-label">Contact:</span>
-                            <span class="info-value">{{ vendorInfo.contact || poDetails.vendorInfo?.contact }}</span>
+                            <span class="info-value">{{ vendorInfo.contact || poDetails.vendorInfo?.contact || 'N/A' }}</span>
                         </div>
                         <div class="info-row">
                             <span class="info-label">Email:</span>
-                            <span class="info-value">{{ vendorInfo.email || poDetails.vendorInfo?.email }}</span>
+                            <span class="info-value">{{ vendorInfo.email || poDetails.vendorInfo?.email || 'N/A' }}</span>
                         </div>
                         <div class="info-row">
                             <span class="info-label">Phone:</span>
-                            <span class="info-value">{{ vendorInfo.phone || poDetails.vendorInfo?.phone }}</span>
+                            <span class="info-label">{{ vendorInfo.phone || poDetails.vendorInfo?.phone || 'N/A' }}</span>
                         </div>
                         <div class="info-row">
                             <span class="info-label">Address:</span>
-                            <span class="info-value">{{ vendorInfo.address || poDetails.vendorInfo?.address }}</span>
+                            <span class="info-value">{{ vendorInfo.address || poDetails.vendorInfo?.address || 'N/A' }}</span>
                         </div>
                     </div>
 
@@ -298,19 +300,19 @@
                         </div>
                         <div class="info-row">
                             <span class="info-label">Date:</span>
-                            <span class="info-value">{{ vendorInfo.poDate || poDetails.vendorInfo?.poDate }}</span>
+                            <span class="info-value">{{ vendorInfo.poDate || poDetails.vendorInfo?.poDate || formatDate(new Date()) }}</span>
                         </div>
                         <div class="info-row">
                             <span class="info-label">Requested By:</span>
-                            <span class="info-value">{{ vendorInfo.poApproved || poDetails.vendorInfo?.poApproved }}</span>
+                            <span class="info-value">{{ vendorInfo.poApproved || poDetails.vendorInfo?.poApproved || 'N/A' }}</span>
                         </div>
                         <div class="info-row">
                             <span class="info-label">Department:</span>
-                            <span class="info-value">PO-{{ poDetails.department }}</span>
+                            <span class="info-value">PO-{{ poDetails.department || 'N/A' }}</span>
                         </div>
                         <div class="info-row">
                             <span class="info-label">Delivery Date:</span>
-                            <span class="info-value">{{ poDetails.neededDate }}</span>
+                            <span class="info-value">{{ poDetails.neededDate || 'N/A' }}</span>
                         </div>
                     </div>
                 </div>
@@ -330,18 +332,18 @@
                         </thead>
                         <tbody>
                             <tr v-for="(item, index) in poDetails.items || []" :key="index">
-                                <td>{{ item.itemNumber }}</td>
+                                <td>{{ item.itemNumber || (index + 1) }}</td>
                                 <td>{{ item.desc }}</td>
                                 <td>{{ item.qty }}</td>
                                 <td>
                                     <span v-if="!item.editing">
-                                        ${{ item.cost.toFixed(2) }}
-                                        <span v-if="item.cost !== item.unitPrice" class="price-change-indicator">!</span>
+                                        ${{ (item.unitPrice || item.cost || 0).toFixed(2) }}
+                                        <span v-if="item.cost !== item.unitPrice && item.unitPrice" class="price-change-indicator">!</span>
                                     </span>
-                                    <input v-else v-model.number="item.tempPrice" type="number" step="0.01"
+                                    <input v-else v-model.number="item.tempPrice" type="number" step="0.01" min="0"
                                         class="price-input" :class="{ 'price-changed': item.cost !== item.tempPrice }">
                                 </td>
-                                <td>${{ (item.unitPrice * item.qty).toFixed(2) }}</td>
+                                <td>${{ ((item.unitPrice || item.cost || 0) * (item.qty || 0)).toFixed(2) }}</td>
                                 <td v-if="!isPrinting">
                                     <button v-if="!item.editing" @click="startEdit(index)" class="edit-btn">
                                         Edit Price
@@ -357,7 +359,7 @@
 
                     <div v-for="(item, index) in poDetails.items || []" :key="'note-' + index">
                         <div v-if="item.justification" class="justification-note">
-                            <strong>Price Change Justification (Item {{ item.itemNumber }}):</strong> {{ item.justification
+                            <strong>Price Change Justification (Item {{ item.itemNumber || (index + 1) }}):</strong> {{ item.justification
                             }}
                         </div>
                     </div>
@@ -368,8 +370,8 @@
                             <span>${{ subTotal.toFixed(2) }}</span>
                         </div>
                         <div class="total-row">
-                            <span>Tax (%):</span>
-                            <span>${{ getOptional(vendorInfo.tax) }}</span>
+                            <span>Tax ({{ vendorInfo.tax || poDetails.vendorInfo?.tax || 0 }}%):</span>
+                            <span>${{ calculateTax().toFixed(2) }}</span>
                         </div>
                         <div class="total-row">
                             <span>Shipping:</span>
@@ -377,8 +379,7 @@
                         </div>
                         <div class="total-row grand-total">
                             <span>Grand Total:</span>
-                            <span>${{ (subTotal + getOptional(vendorInfo.tax) + getOptional(vendorInfo.shipping)).toFixed(2)
-                            }}</span>
+                            <span>${{ grandTotal.toFixed(2) }}</span>
                         </div>
                     </div>
                 </div>
@@ -499,6 +500,7 @@ export default {
             activeTab: 'workflow',
             isPrinting: false,
             infoResponse: '',
+            isSubmitting: false,
 
             // Tabs with visibility rules
             tabs: [
@@ -536,7 +538,7 @@ export default {
                 { label: 'Department', value: req => req.department },
                 { label: 'Project', value: req => req.project || 'N/A' },
                 { label: 'Submitted', value: req => req.submittedDate },
-                { label: 'Items', value: req => `${req.items.length} item(s)` }
+                { label: 'Items', value: req => `${req.items?.length || 0} item(s)` }
             ],
 
             // Fields for My Requisitions display
@@ -573,26 +575,35 @@ export default {
     },
 
     computed: {
+        today() {
+            return new Date().toISOString().split('T')[0];
+        },
+
         visibleTabs() {
-            return this.tabs.filter(tab => tab.roles.includes(this.userRole))
+            return this.tabs.filter(tab => tab.roles.includes(this.userRole));
         },
 
         subTotal() {
             return (this.poDetails.items || []).reduce((sum, item) => {
-                return sum + (item.unitPrice * item.qty);
+                const unitPrice = item.unitPrice || item.cost || 0;
+                return sum + (unitPrice * (item.qty || 0));
             }, 0);
         },
 
+        grandTotal() {
+            return this.subTotal + this.calculateTax() + parseFloat(this.getOptional(this.vendorInfo.shipping));
+        },
+
         reviewRequisitions() {
-            return this.requisitions.filter(r => r.status === 'under-review');
+            return (this.requisitions || []).filter(r => r.status === 'under-review');
         },
 
         poRequisitions() {
-            return this.requisitions.filter(r => r.status === 'approved');
+            return (this.requisitions || []).filter(r => r.status === 'approved');
         },
 
         awaitingDelivery() {
-            return this.requisitions.filter(r => r.status === 'po-created');
+            return (this.requisitions || []).filter(r => r.status === 'po-created');
         },
 
         currentItem() {
@@ -600,8 +611,8 @@ export default {
         },
 
         myRequisitions() {
-            const userId = this.userProfile.id || this.userProfile.profile_id;
-            return this.requisitions.filter(req => req.profile_id == userId);
+            const userId = this.userProfile?.id || this.userProfile?.profile_id;
+            return (this.requisitions || []).filter(req => req.profile_id == userId);
         }
     },
 
@@ -610,8 +621,19 @@ export default {
             this.activeTab = tabName;
         },
 
+        formatDate(dateString) {
+            if (!dateString) return 'N/A';
+            const date = new Date(dateString);
+            return date.toLocaleDateString();
+        },
+
+        calculateTax() {
+            const taxRate = parseFloat(this.vendorInfo.tax || this.poDetails.vendorInfo?.tax || 0);
+            return (this.subTotal * taxRate) / 100;
+        },
+
         getOptional(value) {
-            return typeof value === 'number' ? value.toFixed(2) : '0.00';
+            return typeof value === 'number' ? value.toFixed(2) : (parseFloat(value) || 0).toFixed(2);
         },
 
         getRequisitionFields(req) {
@@ -626,21 +648,21 @@ export default {
                 qty: 1,
                 unit: 'Pieces',
                 cost: 0
-            })
+            });
         },
 
         removeItem(index) {
-            this.form.items.splice(index, 1)
+            this.form.items.splice(index, 1);
         },
 
         startEdit(index) {
             this.poDetails.items[index].editing = true;
-            this.poDetails.items[index].tempPrice = this.poDetails.items[index].unitPrice;
+            this.poDetails.items[index].tempPrice = this.poDetails.items[index].unitPrice || this.poDetails.items[index].cost;
         },
 
         cancelEdit(index) {
             this.poDetails.items[index].editing = false;
-            this.poDetails.items[index].tempPrice = this.poDetails.items[index].unitPrice;
+            this.poDetails.items[index].tempPrice = this.poDetails.items[index].unitPrice || this.poDetails.items[index].cost;
         },
 
         savePrice(index) {
@@ -679,9 +701,19 @@ export default {
 
         // Event handlers that emit to parent
         handleSubmitRequisition() {
+            if (this.form.items.length === 0) {
+                alert('Please add at least one item to the requisition.');
+                return;
+            }
+
+            this.isSubmitting = true;
             const requisition = this.collectFormData('under-review');
             this.$emit('submit-requisition', requisition);
-            this.resetForm();
+            
+            setTimeout(() => {
+                this.resetForm();
+                this.isSubmitting = false;
+            }, 1000);
         },
 
         handleSubmitInfoResponse(req) {
@@ -724,7 +756,7 @@ export default {
         collectFormData(status) {
             return {
                 id: 'REQ-' + Date.now(),
-                requestor: this.userProfile.full_name,
+                requestor: this.userProfile?.full_name || 'Unknown',
                 department: this.form.department,
                 project: this.form.project,
                 neededDate: this.form.neededDate,
@@ -732,8 +764,8 @@ export default {
                 items: this.form.items.map(item => ({ ...item })),
                 status,
                 submittedDate: new Date().toLocaleDateString(),
-                profile_id: this.userProfile.id || this.userProfile.profile_id
-            }
+                profile_id: this.userProfile?.id || this.userProfile?.profile_id
+            };
         },
 
         resetForm() {
@@ -744,24 +776,24 @@ export default {
                 neededDate: '',
                 justification: '',
                 items: []
-            }
+            };
             // Add initial item row again
-            this.addItem()
+            this.addItem();
         },
 
         // Methods for updating PO details from parent
         updatePODetails(details) {
-            this.poDetails = details;
+            this.poDetails = { ...details };
             this.getNumber();
-            for (let item of this.poDetails.items) {
-                item.tempPrice = item.cost;
-                item.unitPrice = item.cost;
-                item.subTotal = item.unitPrice * item.qty;
+            for (let item of this.poDetails.items || []) {
+                item.tempPrice = item.cost || 0;
+                item.unitPrice = item.unitPrice || item.cost || 0;
+                item.subTotal = item.unitPrice * (item.qty || 0);
             }
         },
 
         updateVendorInfo(info) {
-            this.vendorInfo = info;
+            this.vendorInfo = { ...info };
         },
 
         setPrintingMode(isPrinting) {
@@ -771,13 +803,13 @@ export default {
         getNumber() {
             return (this.poDetails.items || []).map((item, index) => {
                 return item.itemNumber = index + 1;
-            })
+            });
         }
     },
 
     created() {
         // Initialize form with one item row
-        this.addItem()
+        this.addItem();
     }
 }
 </script>
@@ -814,16 +846,11 @@ export default {
     background: #f8fafc;
     border-bottom: 2px solid #e2e8f0;
     overflow-x: auto;
-    /* enable horizontal scroll */
     white-space: nowrap;
-    /* prevent wrapping */
     -webkit-overflow-scrolling: touch;
-    /* smooth scrolling on mobile */
     scrollbar-width: thin;
-    /* optional: thinner scrollbar in Firefox */
 }
 
-/* Optional: style the scrollbar (Webkit browsers only) */
 .nav-tabs::-webkit-scrollbar {
     height: 6px;
 }
@@ -1002,14 +1029,11 @@ export default {
 
 .item-list li {
     background: #f1f5f9;
-    /* Light blue-gray background */
     margin-bottom: 0.5rem;
     padding: 0.5rem 0.75rem;
     border-radius: 0.375rem;
-    /* Rounded corners */
     font-size: 0.95rem;
     color: #1e293b;
-    /* Dark text */
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -1276,7 +1300,10 @@ export default {
     border-top: 2px solid #e5e7eb;
 }
 
-/*.btn {
+.btn-primary-req {
+    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
     padding: 12px 25px;
     border: none;
     border-radius: 10px;
@@ -1284,20 +1311,18 @@ export default {
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
-    min-width: 120px;
-}*/
-
-.btn-primary-req {
-    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
-    color: white;
-    box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
 }
 
-.btn-primary-req:hover {
+.btn-primary-req:hover:not(:disabled) {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4);
 }
 
+.btn-primary-req:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
 .btn-secondary {
     background: #6b7280;
     color: white;
@@ -1597,6 +1622,11 @@ export default {
     margin-right: 5px;
 }
 
+.save-btn:disabled {
+    background: #95a5a6;
+    cursor: not-allowed;
+}
+
 .cancel-btn {
     background: #e74c3c;
     color: white;

package/src/utils/sidebarConfig.js

@@ -13,7 +13,7 @@ export const defaultMenuItems = [
     {
         type: 'link',
         label: 'Home',
-        icon: 'bi bi-speedometer2',
+        icon: 'bi bi-house',
         roles: ['owner', 'staff', 'captain'],
         href: '/app/dashboard',
         active: true
@@ -23,22 +23,21 @@ export const defaultMenuItems = [
         label: 'Guide',
         icon: 'bi bi-compass',
         action: 'guide',
-        // roles: ['crew']
-
+        roles: ['crew']
     },
     {
         type: 'link',
         label: 'Activity Log',
         icon: 'bi bi-activity',
         href: '/activity-log',
-        roles: ['owner'] // Role-based visibility
+        roles: ['owner']
     },
     {
         type: 'link',
         label: 'People Manager',
         icon: 'bi bi-person-plus',
         href: '/app/people-manager',
-        roles: ['owner'] // Role-based visibility
+        roles: ['owner']
     },
     {
         type: 'text',
@@ -49,28 +48,51 @@ export const defaultMenuItems = [
         label: 'Compliance',
         roles: ['owner', 'staff', 'captain'],
         icon: 'bi bi-list-ul',
+        children: [
+            { label: 'Vessel Certification', action: 'vessel-cert' },
+            { label: 'Reports',              action: 'reports' },
+            { label: 'Crew Certification',   action: 'crew-cert' },
+            { label: 'QHSE Compliance',      action: 'qhse' },
+            { label: 'Track Garbage',        action: 'garbage' },
+        ]
+    },
+    {
+        // ── HR MODULE ──────────────────────────────────────────────────────────
+        // Clock-in/out is office-only (owner + staff roles).
+        // Payroll and appraisal will also cover crew in a later release.
+        type: 'dropdown',
+        label: 'HR',
+        icon: 'bi bi-people-fill',
+        roles: ['owner', 'staff'],       
         children: [
             {
-                label: 'Vessel Certification',
-                action: 'vessel-cert',
+                label: 'Attendance',         
+                action: 'hr-attendance',
+                roles: ['owner', 'staff'],
             },
             {
-                type: 'separator'
+                label: 'Payroll',            
+                action: 'hr-payroll',
+                roles: ['owner', 'staff'],
             },
             {
-                label: 'Reports',
-                action: 'reports'
+                label: 'Appraisals',        
+                action: 'hr-appraisals',
+                roles: ['owner', 'staff'],
+            },
+            {
+                label: 'Leave Management',
+                action: 'hr-leave',
+                roles: ['owner', 'staff'],
+            },
+            {
+                label: 'Disciplinary Log',   // Coming next
+                action: 'hr-disciplinary',
+                roles: ['owner'],
             },
         ]
     },
-    /* 
-    {
-        type: 'link',
-        label: 'Business Intelligence',
-        icon: 'bi bi-graph-up-arrow',
-        href: '/app/analytics'
-    },
-    */
+    /* ── end HR MODULE ── */
     {
         type: 'button',
         label: 'Maintenance',
@@ -84,26 +106,20 @@ export const defaultMenuItems = [
         icon: 'bi bi-people',
         roles: ['owner', 'staff', 'captain'],
         children: [
-            {
-                label: 'All Crew',
-                action: 'crew-all',
-                roles: ['owner', 'staff']
-            },
-            {
-                type: 'separator'
-            },
-            {
-                label: 'Get Crew by Vessel',
-                action: 'crew-by-vessel'
-            }
+            { label: 'All Crew',          action: 'crew-all',       roles: ['owner', 'staff'] },
+            { label: 'Get Crew by Vessel', action: 'crew-by-vessel' },
+            { label: 'Schedule',          action: 'schedule' },
         ]
     },
     {
-        type: 'link',
+        type: 'dropdown',
         label: 'Inventory Management',
         icon: 'bi bi-clipboard-data',
-        href: '/app/inventory',
-        roles: ['owner', 'staff', 'captain']
+        roles: ['owner', 'staff', 'captain'],
+        children: [
+            { label: 'Parts Inventory', action: 'inventory', roles: ['owner', 'staff', 'captain'] },
+            { label: 'Bunkering',       action: 'fuel',      roles: ['owner', 'staff', 'captain'] },
+        ]
     },
     {
         type: 'link',
@@ -118,36 +134,34 @@ export const defaultMenuItems = [
         icon: 'fas fa-ship',
         action: 'coming-soon',
         roles: ['owner', 'staff', 'captain']
-
     },
     {
         type: 'button',
         label: 'Vessel Log',
         icon: 'bi bi-file-ruled',
-        action: 'vessel-log',
+        action: 'coming-soon',
         roles: ['owner', 'staff', 'captain']
     },
-    {
-        type: 'button',
-        label: 'Settings',
-        icon: 'bi bi-gear',
-        action: 'settings',
-        roles: ['owner', 'staff']
-    },
     {
         type: 'button',
         label: 'Profile',
         icon: 'bi bi-people',
         action: 'crew-profile',
-        // roles: ['crew']
-
+        roles: ['crew']
+    },
+    {
+        type: 'button',
+        label: 'Training',
+        icon: 'bi bi-book',
+        action: 'crew-training',
+        roles: ['crew']
     },
     {
         type: 'button',
-        label: 'Schedule',
-        icon: 'bi bi-card-checklist',
-        action: 'schedule',
-        // roles: ['crew']
+        label: 'Settings',
+        icon: 'bi bi-gear',
+        action: 'settings',
+        roles: ['owner', 'staff']
     },
     {
         type: 'button',