oceanhelm 0.0.9 → 0.0.11

package/src/components/DashHead.vue

@@ -51,4 +51,14 @@ export default {
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 15px;
 }
+
+.btn-outline-primary {
+    border: 1px solid #0d6efd !important;
+}
+
+.btn-outline-primary:hover {
+    background-color: #0d6efd !important;
+    border-color: #0d6efd !important;
+    color: white !important;
+}
 </style>

package/src/components/Reports.vue

@@ -0,0 +1,612 @@
+<template>
+    <div class="reports-container">
+        <div class="page-header d-flex justify-content-between align-items-center">
+            <h4 style="margin-left: 20px;">Reports</h4>
+            <div class="d-flex">
+                <button class="btn btn-primary" @click="showNewFolderModal = true">
+                    <i class="bi bi-folder-plus"></i> New Folder
+                </button>
+            </div>
+        </div>
+
+        <!-- Folders List -->
+        <div class="folders-section" v-if="folders.length > 0">
+            <div class="folder-card" 
+                 v-for="folder in folders" 
+                 :key="folder.id"
+                 @mouseenter="showPreview(folder.id)"
+                 @mouseleave="hidePreview">
+                <div class="folder-content" @click="toggleFolder(folder.id)">
+                    <i class="bi bi-folder-fill text-warning" style="font-size: 2.5rem;"></i>
+                    <div class="folder-name">{{ folder.name }}</div>
+                    <small class="text-muted">{{ folder.files.length }} file(s)</small>
+                </div>
+                
+                <div class="folder-actions-overlay">
+                    <button class="btn btn-sm btn-icon" @click.stop="selectFolder(folder)" title="Add Files">
+                        <i class="bi bi-file-earmark-plus"></i>
+                    </button>
+                    <button class="btn btn-sm btn-icon" @click.stop="deleteFolder(folder.id)" title="Delete Folder">
+                        <i class="bi bi-trash"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Empty State -->
+        <div class="empty-state text-center" v-else>
+            <i class="bi bi-folder2-open" style="font-size: 4rem; color: #ccc;"></i>
+            <h5 class="mt-3 text-muted">No folders yet</h5>
+            <p class="text-muted">Create a folder to start organizing your reports</p> 
+        </div>
+
+        <!-- Expanded Folder Modal (Click to Open) -->
+        <div class="folder-modal-overlay" v-if="expandedFolders.length > 0" @click="closeAllFolders">
+            <div class="folder-expanded" @click.stop>
+                <div class="expanded-header">
+                    <strong>{{ getExpandedFolder().name }}</strong>
+                    <button class="btn btn-sm btn-close-expanded" @click="closeAllFolders">
+                        <i class="bi bi-x-lg"></i>
+                    </button>
+                </div>
+                
+                <div class="files-list" v-if="getExpandedFolder().files.length > 0">
+                    <div class="file-item d-flex justify-content-between align-items-center" 
+                         v-for="file in getExpandedFolder().files" :key="file.id">
+                        <div class="file-info d-flex align-items-center">
+                            <i class="bi bi-file-earmark-text me-2"></i>
+                            <span>{{ file.name }}</span>
+                            <small class="text-muted ms-2">({{ formatFileSize(file.size) }})</small>
+                        </div>
+                        <button class="btn btn-sm btn-outline-danger" @click="removeFile(getExpandedFolder().id, file.id)">
+                            <i class="bi bi-x-circle"></i>
+                        </button>
+                    </div>
+                </div>
+                <div v-else class="empty-folder-message">
+                    <i class="bi bi-inbox"></i>
+                    <p>No files in this folder</p>
+                    <button class="btn btn-sm btn-primary" @click="selectFolder(getExpandedFolder())">
+                        <i class="bi bi-file-earmark-plus"></i> Add Files
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- New Folder Modal -->
+        <div class="modal" :class="{ 'show': showNewFolderModal }" @click.self="showNewFolderModal = false">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Create New Folder</h5>
+                        <button type="button" class="btn-close" @click="showNewFolderModal = false"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                            <label class="form-label">Folder Name</label>
+                            <input 
+                                type="text" 
+                                class="form-control" 
+                                v-model="newFolderName"
+                                @keyup.enter="createFolder"
+                                placeholder="Enter folder name"
+                            />
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" @click="showNewFolderModal = false">Cancel</button>
+                        <button type="button" class="btn btn-primary" @click="createFolder" :disabled="!newFolderName.trim()">
+                            Create Folder
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- File Input (Hidden) -->
+        <input 
+            ref="fileInput" 
+            type="file" 
+            multiple 
+            style="display: none;" 
+            @change="handleFileSelection"
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Reports',
+    
+    data() {
+        return {
+            folders: [],
+            showNewFolderModal: false,
+            newFolderName: '',
+            selectedFolder: null,
+            expandedFolders: [],
+            previewFolder: null
+        }
+    },
+
+    emits: [
+        'folder-created',
+        'files-added',
+        'file-removed',
+        'folder-deleted',
+        'data-updated'
+    ],
+
+    methods: {
+        createFolder() {
+            if (!this.newFolderName.trim()) return;
+
+            const newFolder = {
+                id: Date.now(),
+                name: this.newFolderName.trim(),
+                files: [],
+                createdAt: new Date()
+            };
+
+            this.folders.push(newFolder);
+            this.$emit('folder-created', newFolder);
+            this.$emit('data-updated', { folders: this.folders, allFiles: this.getAllFilesData() });
+            
+            this.newFolderName = '';
+            this.showNewFolderModal = false;
+        },
+
+        selectFolder(folder) {
+            this.selectedFolder = folder;
+            this.$refs.fileInput.click();
+        },
+
+        handleFileSelection(event) {
+            const files = Array.from(event.target.files);
+            
+            if (!this.selectedFolder || files.length === 0) return;
+
+            const newFiles = files.map(file => ({
+                id: Date.now() + Math.random(),
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                file: file,
+                addedAt: new Date()
+            }));
+
+            this.selectedFolder.files.push(...newFiles);
+            
+            this.$emit('files-added', {
+                folderId: this.selectedFolder.id,
+                files: newFiles
+            });
+            this.$emit('data-updated', { folders: this.folders, allFiles: this.getAllFilesData() });
+
+            // Reset file input
+            event.target.value = '';
+            this.selectedFolder = null;
+        },
+
+        removeFile(folderId, fileId) {
+            const folder = this.folders.find(f => f.id === folderId);
+            if (folder) {
+                const fileIndex = folder.files.findIndex(f => f.id === fileId);
+                if (fileIndex > -1) {
+                    const removedFile = folder.files.splice(fileIndex, 1)[0];
+                    this.$emit('file-removed', {
+                        folderId,
+                        file: removedFile
+                    });
+                    this.$emit('data-updated', { folders: this.folders, allFiles: this.getAllFilesData() });
+                }
+            }
+        },
+
+        deleteFolder(folderId) {
+            if (confirm('Are you sure you want to delete this folder and all its files?')) {
+                const folderIndex = this.folders.findIndex(f => f.id === folderId);
+                if (folderIndex > -1) {
+                    const deletedFolder = this.folders.splice(folderIndex, 1)[0];
+                    this.$emit('folder-deleted', deletedFolder);
+                    this.$emit('data-updated', { folders: this.folders, allFiles: this.getAllFilesData() });
+                }
+            }
+        },
+
+        formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+        },
+
+        getAllFilesData() {
+            return this.folders.flatMap(folder => 
+                folder.files.map(file => ({
+                    ...file,
+                    folderName: folder.name,
+                    folderId: folder.id
+                }))
+            );
+        },
+
+        toggleFolder(folderId) {
+            const index = this.expandedFolders.indexOf(folderId);
+            if (index > -1) {
+                this.expandedFolders.splice(index, 1);
+            } else {
+                this.expandedFolders = [folderId]; // Only one folder expanded at a time
+            }
+        },
+
+        closeAllFolders() {
+            this.expandedFolders = [];
+        },
+
+        getExpandedFolder() {
+            if (this.expandedFolders.length > 0) {
+                return this.folders.find(f => f.id === this.expandedFolders[0]) || { files: [], name: '' };
+            }
+            return { files: [], name: '' };
+        },
+
+        showPreview(folderId) {
+            this.previewFolder = folderId;
+        },
+
+        hidePreview() {
+            this.previewFolder = null;
+        }
+    }
+}
+</script>
+
+<style scoped>
+.reports-container {
+    padding: 20px;
+}
+
+.page-header {
+    margin-bottom: 30px;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 15px;
+}
+
+.folders-section {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 20px;
+    padding: 10px;
+}
+
+@media (max-width: 768px) {
+    .folders-section {
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+        gap: 15px;
+    }
+}
+
+@media (min-width: 1400px) {
+    .folders-section {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    }
+}
+
+.folder-card {
+    position: relative;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 15px;
+    background-color: #fff;
+    transition: all 0.2s;
+    cursor: pointer;
+    aspect-ratio: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.folder-card:hover {
+    border-color: #0d6efd;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    transform: translateY(-2px);
+}
+
+/* Hover Preview Popup */
+.folder-preview {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    border: 2px solid #0d6efd;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+    padding: 0;
+    z-index: 100;
+    min-width: 280px;
+    max-width: 320px;
+    pointer-events: none;
+}
+
+.preview-header {
+    background: #f8f9fa;
+    padding: 12px 15px;
+    border-bottom: 1px solid #e0e0e0;
+    border-radius: 6px 6px 0 0;
+}
+
+.preview-header strong {
+    font-size: 0.95rem;
+    color: #333;
+}
+
+.preview-content {
+    padding: 10px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.preview-file {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    font-size: 0.85rem;
+    color: #495057;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.preview-file:last-child {
+    border-bottom: none;
+}
+
+.preview-file i {
+    color: #6c757d;
+    font-size: 0.9rem;
+}
+
+.preview-file span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.preview-more {
+    text-align: center;
+    padding: 8px;
+    font-size: 0.8rem;
+    color: #6c757d;
+    font-style: italic;
+}
+
+.preview-empty {
+    padding: 30px 20px;
+    text-align: center;
+    color: #adb5bd;
+}
+
+.preview-empty i {
+    font-size: 2rem;
+    display: block;
+    margin-bottom: 8px;
+}
+
+.folder-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+}
+
+.folder-name {
+    margin-top: 10px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    word-break: break-word;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.folder-actions-overlay {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    display: flex;
+    gap: 5px;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.folder-card:hover .folder-actions-overlay {
+    opacity: 1;
+}
+
+.btn-icon {
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+}
+
+.btn-icon:hover {
+    background: #f8f9fa;
+    border-color: #0d6efd;
+}
+
+.btn-icon i {
+    font-size: 0.85rem;
+}
+
+/* Expanded Folder Modal (Click to Open) */
+.folder-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.folder-expanded {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    width: 90%;
+    max-width: 700px;
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.expanded-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 25px;
+    border-bottom: 2px solid #f0f0f0;
+    background: #f8f9fa;
+}
+
+.expanded-header strong {
+    font-size: 1.3rem;
+    color: #333;
+}
+
+.btn-close-expanded {
+    background: transparent;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 5px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s;
+}
+
+.btn-close-expanded:hover {
+    color: #dc3545;
+}
+
+.files-list {
+    padding: 20px;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.file-item {
+    padding: 12px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    margin-bottom: 8px;
+}
+
+.file-item:last-child {
+    margin-bottom: 0;
+}
+
+.empty-folder-message {
+    padding: 40px 20px;
+    text-align: center;
+    color: #6c757d;
+}
+
+.empty-folder-message i {
+    font-size: 3rem;
+    color: #dee2e6;
+}
+
+.empty-folder-message p {
+    margin: 15px 0;
+}
+
+.empty-state {
+    padding: 60px 20px;
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1050;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: rgba(0,0,0,0.5);
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.show {
+    display: flex;
+}
+
+.modal-dialog {
+    max-width: 500px;
+    margin: 1.75rem auto;
+}
+
+.modal-content {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+}
+
+.modal-header {
+    padding: 1rem;
+    border-bottom: 1px solid #dee2e6;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-body {
+    padding: 1rem;
+}
+
+.modal-footer {
+    padding: 1rem;
+    border-top: 1px solid #dee2e6;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+.btn-close {
+    background: transparent;
+    border: none;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #000;
+    opacity: 0.5;
+    cursor: pointer;
+}
+
+.btn-close:hover {
+    opacity: 0.75;
+}
+</style>

package/src/index.js

@@ -2,6 +2,7 @@
 import ConfigurableSidebar from './components/ConfigurableSidebar.vue'
 import VesselList from './components/VesselList.vue'
 import DashHead from './components/DashHead.vue' 
+import Reports from './components/Reports.vue' 
 import OceanHelmMaintenance from './components/OceanHelmMaintenance.vue'
 import ActivityLogs from './components/ActivityLogs.vue'
 import CrewManagement from './components/CrewManagement.vue'
@@ -11,7 +12,7 @@ import { createSidebarConfig, defaultMenuItems } from './utils/sidebarConfig'
 import { defaultPermissionChecker } from './utils/permissions'
 
 // Export main components
-export { ConfigurableSidebar, VesselList, DashHead, CrewManagement, ActivityLogs, OceanHelmMaintenance, RequisitionSystem }
+export { ConfigurableSidebar, VesselList, DashHead, Reports, CrewManagement, ActivityLogs, OceanHelmMaintenance, RequisitionSystem }
 
 // Export utilities
 export { createSidebarConfig, defaultMenuItems, defaultPermissionChecker }
@@ -25,6 +26,7 @@ export default {
     app.component('ConfigurableSidebar', ConfigurableSidebar)
     app.component('VesselLists', VesselList)
     app.component('DashHead', DashHead)
+    app.component('Reports', Reports)
     app.component('ActivityLogs', ActivityLogs)
     app.component('CrewManagement', CrewManagement)
     app.component('RequisitionSystem', RequisitionSystem)