Initial commit
This commit is contained in:
Kwesi Banson Jnr
323
resources/views/documents_vault/index.blade.php
Normal file
323
resources/views/documents_vault/index.blade.php
Normal file
@@ -0,0 +1,323 @@
|
||||
@extends('layouts.masterbeta')
|
||||
|
||||
@section('title', 'Nexus ERP - Document Vault')
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.file-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1.25rem; }
|
||||
.icon-pdf { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; }
|
||||
.icon-word { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; }
|
||||
.icon-img { background-color: rgba(16, 185, 129, 0.1); color: #10b981; }
|
||||
|
||||
.sync-badge { font-size: 0.7rem; padding: 0.25rem 0.5rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('breadcrumbs')
|
||||
<a href="{{ url('/') }}" class="text-secondary text-decoration-none"><i class="bi bi-house me-2"></i></a>
|
||||
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
||||
<a href="#" class="text-secondary text-decoration-none me-2" style="font-size: 0.95rem;">Resources</a>
|
||||
<i class="bi bi-chevron-right text-secondary me-2" style="font-size: 0.8rem;"></i>
|
||||
<span class="fw-bold" style="font-size: 0.95rem;">Document Vault</span>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">Document Vault</h4>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage corporate files, SLA agreements, and compliance records.</p>
|
||||
</div>
|
||||
<button class="btn text-white fw-bold d-flex align-items-center" style="background-color: #5c4df0; border-radius: 8px;" id="btnOpenDocModal">
|
||||
<i class="bi bi-cloud-upload me-2"></i> Upload File
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="content-card p-3 h-100 border-0">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="text-secondary fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">TOTAL FILES</div>
|
||||
<i class="bi bi-files text-secondary"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-0">1,248</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="content-card p-3 h-100 border-0">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="text-secondary fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">STORAGE USED</div>
|
||||
<i class="bi bi-hdd-network text-primary"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-0">4.2 GB <span class="fs-6 fw-normal text-secondary">/ 50 GB</span></h3>
|
||||
<div class="progress mt-2" style="height: 4px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 8.4%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="content-card p-3 h-100 border-0">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="text-secondary fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">PAPERLESS-NGX SYNC</div>
|
||||
<i class="bi bi-box-arrow-up-right text-success"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-0">892 <span class="fs-6 fw-normal text-secondary">Archived</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="content-card p-3 h-100 border-0 bg-primary bg-opacity-10">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="text-primary fw-bold" style="font-size: 0.75rem; letter-spacing: 0.5px;">PENDING REVIEW</div>
|
||||
<i class="bi bi-clock-history text-primary"></i>
|
||||
</div>
|
||||
<h3 class="fw-bold text-primary mb-0">14</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card">
|
||||
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-5">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control bg-white border-start-0 ps-0" placeholder="Search filenames, tags, or entities...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select class="form-select bg-white">
|
||||
<option value="">All Document Types</option>
|
||||
<option value="contract">Contracts & SLAs</option>
|
||||
<option value="kyc">KYC & Identity</option>
|
||||
<option value="invoice">Invoices</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select class="form-select bg-white">
|
||||
<option value="">Status: All</option>
|
||||
<option value="synced">Archived in Paperless</option>
|
||||
<option value="local">Local Only</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<button class="btn btn-secondary w-100"><i class="bi bi-funnel"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File Details</th>
|
||||
<th>Related Entity</th>
|
||||
<th>Category</th>
|
||||
<th>Size / Date</th>
|
||||
<th>Archive Status</th>
|
||||
<th class="text-end">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="file-icon icon-pdf me-3"><i class="bi bi-file-earmark-pdf-fill"></i></div>
|
||||
<div>
|
||||
<div class="fw-bold text-dark">MTN_SIP_Trunk_SLA_2026.pdf</div>
|
||||
<div class="text-secondary" style="font-size: 0.75rem;">ID: DOC-9942</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-dark bg-opacity-10 text-dark border"><i class="bi bi-broadcast-pin me-1"></i>MNO: MTN Ghana</span></td>
|
||||
<td><span class="badge bg-primary bg-opacity-10 text-primary">SLA Contract</span></td>
|
||||
<td>
|
||||
<div class="text-dark fw-semibold" style="font-size: 0.85rem;">2.4 MB</div>
|
||||
<div class="text-secondary" style="font-size: 0.75rem;">Jun 15, 2026</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="sync-badge bg-success bg-opacity-10 text-success border border-success-subtle">
|
||||
<i class="bi bi-check-circle-fill"></i> Synced to Paperless
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-light text-secondary me-1" title="Download"><i class="bi bi-download"></i></button>
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-edit-doc"
|
||||
data-id="1" data-filename="MTN_SIP_Trunk_SLA_2026.pdf" data-entity="mno_1" data-type="contract" data-notes="Signed copy for 2026 SIP links.">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="file-icon icon-word me-3"><i class="bi bi-file-earmark-word-fill"></i></div>
|
||||
<div>
|
||||
<div class="fw-bold text-dark">ClickTech_Hosting_Proposal_Draft.docx</div>
|
||||
<div class="text-secondary" style="font-size: 0.75rem;">ID: DOC-9943</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-info bg-opacity-10 text-info border border-info-subtle"><i class="bi bi-people me-1"></i>Client: Click Tech</span></td>
|
||||
<td><span class="badge bg-secondary bg-opacity-10 text-secondary">Draft / Proposal</span></td>
|
||||
<td>
|
||||
<div class="text-dark fw-semibold" style="font-size: 0.85rem;">850 KB</div>
|
||||
<div class="text-secondary" style="font-size: 0.75rem;">Jun 18, 2026</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="sync-badge bg-secondary bg-opacity-10 text-secondary border">
|
||||
<i class="bi bi-hdd"></i> Local Storage Only
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-light text-secondary me-1" title="Download"><i class="bi bi-download"></i></button>
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-edit-doc"
|
||||
data-id="2" data-filename="ClickTech_Hosting_Proposal_Draft.docx" data-entity="client_1" data-type="draft" data-notes="Awaiting feedback before finalizing.">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('modals')
|
||||
<div class="modal fade" id="docModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light">
|
||||
<h5 class="modal-title fw-bold" id="docModalTitle">Upload Document</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<form id="docForm" enctype="multipart/form-data">
|
||||
<div class="modal-body p-4">
|
||||
<input type="hidden" id="docId" name="id">
|
||||
<input type="hidden" id="docMethod" name="_method" value="POST">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Select File</label>
|
||||
<input class="form-control" type="file" id="docFile" name="file">
|
||||
<div class="form-text" id="fileHelpText">Max size: 10MB. Allowed: PDF, DOCX, PNG, JPG.</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Document Type *</label>
|
||||
<select class="form-select" id="docType" name="type" required>
|
||||
<option value="" selected disabled>Select...</option>
|
||||
<option value="contract">SLA / Contract</option>
|
||||
<option value="draft">Draft Proposal</option>
|
||||
<option value="kyc">KYC / Identity</option>
|
||||
<option value="invoice">Invoice</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Related Entity</label>
|
||||
<select class="form-select" id="docEntity" name="entity_id">
|
||||
<option value="">General (None)</option>
|
||||
<optgroup label="MNO Partners">
|
||||
<option value="mno_1">MTN Ghana</option>
|
||||
<option value="mno_2">Telecel Ghana</option>
|
||||
</optgroup>
|
||||
<optgroup label="Clients">
|
||||
<option value="client_1">Click Tech Corp</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Notes & Description</label>
|
||||
<textarea class="form-control" id="docNotes" name="notes" rows="2" placeholder="Optional context about this file..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-light rounded border border-secondary-subtle">
|
||||
<div class="form-check form-switch d-flex align-items-center mb-0">
|
||||
<input class="form-check-input mt-0 me-3" type="checkbox" role="switch" id="pushToPaperless" name="push_to_paperless" value="1" style="width: 2.5em; height: 1.25em;">
|
||||
<label class="form-check-label" for="pushToPaperless">
|
||||
<span class="fw-bold text-dark d-block" style="font-size: 0.85rem;">Archive to Paperless-Ngx</span>
|
||||
<span class="text-secondary" style="font-size: 0.75rem;">Automatically map tags and push this file to the OCR server in the background.</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer bg-light">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitDoc">
|
||||
Upload File
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
const docModal = new bootstrap.Modal(document.getElementById('docModal'));
|
||||
const $form = $('#docForm');
|
||||
|
||||
// --- OPEN MODAL FOR CREATE ---
|
||||
$('#btnOpenDocModal').on('click', function() {
|
||||
$form[0].reset();
|
||||
$('#docId').val('');
|
||||
$('#docMethod').val('POST');
|
||||
|
||||
$('#docModalTitle').text('Upload Document');
|
||||
$('#btnSubmitDoc').html('<i class="bi bi-cloud-upload me-2"></i>Upload File');
|
||||
$('#docFile').prop('required', true);
|
||||
$('#fileHelpText').text('Max size: 10MB. Allowed: PDF, DOCX, PNG, JPG.');
|
||||
|
||||
docModal.show();
|
||||
});
|
||||
|
||||
// --- OPEN MODAL FOR EDIT ---
|
||||
$('.btn-edit-doc').on('click', function() {
|
||||
const data = $(this).data();
|
||||
|
||||
$form[0].reset();
|
||||
$('#docId').val(data.id);
|
||||
$('#docMethod').val('PUT');
|
||||
|
||||
$('#docType').val(data.type);
|
||||
$('#docEntity').val(data.entity);
|
||||
$('#docNotes').val(data.notes);
|
||||
|
||||
$('#docModalTitle').text('Edit Document Info');
|
||||
$('#btnSubmitDoc').html('<i class="bi bi-save me-2"></i>Save Changes');
|
||||
$('#docFile').prop('required', false); // File is optional on edit
|
||||
$('#fileHelpText').html('Leave blank to keep existing file: <strong class="text-dark">' + data.filename + '</strong>');
|
||||
|
||||
docModal.show();
|
||||
});
|
||||
|
||||
// --- HANDLE FORM SUBMISSION ---
|
||||
$form.on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const $btn = $('#btnSubmitDoc');
|
||||
const originalText = $btn.html();
|
||||
|
||||
$btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Processing...');
|
||||
$btn.prop('disabled', true);
|
||||
|
||||
let formData = new FormData(this);
|
||||
const isPaperless = formData.get('push_to_paperless') === '1';
|
||||
|
||||
setTimeout(() => {
|
||||
$btn.html(originalText).prop('disabled', false);
|
||||
docModal.hide();
|
||||
|
||||
if (isPaperless) {
|
||||
alert('File saved locally and queued for Paperless-Ngx sync!');
|
||||
} else {
|
||||
alert('File metadata updated successfully!');
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user