Enhance even more front-end
This commit is contained in:
NoeBerdoz
@ -6,12 +6,24 @@
|
||||
<title>Onboarding Dossier Review</title>
|
||||
<script type="module" src="./js/main.js" defer></script>
|
||||
<style>
|
||||
.document-viewer iframe {
|
||||
min-height: 600px; /* Ensure iframe takes up space */
|
||||
.document-viewer iframe,
|
||||
.document-viewer img {
|
||||
min-height: 600px; /* Ensure iframe/img takes up space */
|
||||
width: 100%;
|
||||
border: 1px solid #dee2e6; /* Bootstrap border color */
|
||||
border-radius: 0.375rem; /* Bootstrap border radius */
|
||||
}
|
||||
.document-viewer pre {
|
||||
min-height: 600px;
|
||||
max-height: 70vh; /* Limit height for long text */
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sticky-top-column {
|
||||
position: sticky;
|
||||
@ -54,55 +66,76 @@
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs" id="docTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="doc1-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#doc1-pane" type="button" role="tab" aria-controls="doc1-pane"
|
||||
aria-selected="true">Passport
|
||||
</button>
|
||||
<button class="nav-link active" id="passport-tab" data-bs-toggle="tab"
|
||||
data-bs-target="#passport-pane" type="button" role="tab" aria-controls="passport-pane"
|
||||
aria-selected="true">Passport (PNG)</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="doc2-tab" data-bs-toggle="tab" data-bs-target="#doc2-pane"
|
||||
type="button" role="tab" aria-controls="doc2-pane" aria-selected="false">Account
|
||||
Overview
|
||||
</button>
|
||||
<button class="nav-link" id="account-pdf-tab" data-bs-toggle="tab" data-bs-target="#account-pdf-pane"
|
||||
type="button" role="tab" aria-controls="account-pdf-pane" aria-selected="false">Account (PDF)</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="doc3-tab" data-bs-toggle="tab" data-bs-target="#doc3-pane"
|
||||
type="button" role="tab" aria-controls="doc3-pane" aria-selected="false">Proof of
|
||||
Address
|
||||
</button>
|
||||
<button class="nav-link" id="profile-docx-tab" data-bs-toggle="tab" data-bs-target="#profile-docx-pane"
|
||||
type="button" role="tab" aria-controls="profile-docx-pane" aria-selected="false">Profile (DOCX)</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="doc4-tab" data-bs-toggle="tab" data-bs-target="#doc4-pane"
|
||||
type="button" role="tab" aria-controls="doc4-pane" aria-selected="false">Additional
|
||||
Doc
|
||||
</button>
|
||||
<button class="nav-link" id="description-txt-tab" data-bs-toggle="tab" data-bs-target="#description-txt-pane"
|
||||
type="button" role="tab" aria-controls="description-txt-pane" aria-selected="false">Description (TXT)</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-3 document-viewer" id="docTabContent">
|
||||
<div class="tab-pane fade show active" id="doc1-pane" role="tabpanel" aria-labelledby="doc1-tab"
|
||||
tabindex="0">
|
||||
<div x-data="pdfViewer()" x-init="loadPdf()">
|
||||
<template x-if="pdfUrl">
|
||||
<iframe :src="pdfUrl" type="application/pdf"></iframe>
|
||||
</template>
|
||||
<template x-if="!pdfUrl">
|
||||
<div class="alert alert-secondary">Loading document...</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab-content pt-3 document-viewer" id="docTabContent">
|
||||
<div class="tab-pane fade show active" id="passport-pane" role="tabpanel" aria-labelledby="passport-tab" tabindex="0">
|
||||
<template x-if="passportSrc">
|
||||
<img :src="passportSrc" class="img-fluid border rounded" alt="Passport Document">
|
||||
</template>
|
||||
<template x-if="!passportSrc && gameData?.client_data">
|
||||
<div class="alert alert-secondary">Passport document not available.</div>
|
||||
</template>
|
||||
<template x-if="!gameData?.client_data && !isLoading"> <div class="alert alert-secondary">Loading document...</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="doc2-pane" role="tabpanel" aria-labelledby="doc2-tab"
|
||||
tabindex="0">
|
||||
<div class="alert alert-secondary">Document 2 placeholder. Needs dynamic loading logic based
|
||||
on `gameData.client_data.documents`.
|
||||
</div>
|
||||
<div class="tab-pane fade" id="account-pdf-pane" role="tabpanel" aria-labelledby="account-pdf-tab" tabindex="0">
|
||||
<template x-if="accountSrc">
|
||||
<iframe :src="accountSrc" type="application/pdf"></iframe>
|
||||
</template>
|
||||
<template x-if="!accountSrc && gameData?.client_data">
|
||||
<div class="alert alert-secondary">Account PDF document not available.</div>
|
||||
</template>
|
||||
<template x-if="!gameData?.client_data && !isLoading">
|
||||
<div class="alert alert-secondary">Loading document...</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="doc3-pane" role="tabpanel" aria-labelledby="doc3-tab"
|
||||
tabindex="0">
|
||||
<div class="alert alert-secondary">Document 3 placeholder.</div>
|
||||
<div class="tab-pane fade" id="profile-docx-pane" role="tabpanel" aria-labelledby="profile-docx-tab" tabindex="0">
|
||||
<template x-if="profileSrc">
|
||||
<div class="alert alert-info d-flex align-items-center" role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-circle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Info:">
|
||||
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
DOCX files cannot be previewed directly. Please download the file.
|
||||
</div>
|
||||
</div>
|
||||
<a :href="profileSrc" :download="(gameData?.client_id || 'client') + '_profile.docx'" class="btn btn-primary mt-2">
|
||||
Download Profile Document (.docx)
|
||||
</a>
|
||||
</template>
|
||||
<template x-if="!profileSrc && gameData?.client_data">
|
||||
<div class="alert alert-secondary">Profile document not available.</div>
|
||||
</template>
|
||||
<template x-if="!gameData?.client_data && !isLoading">
|
||||
<div class="alert alert-secondary">Loading document...</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="doc4-pane" role="tabpanel" aria-labelledby="doc4-tab"
|
||||
tabindex="0">
|
||||
<div class="alert alert-secondary">Document 4 placeholder.</div>
|
||||
<div class="tab-pane fade" id="description-txt-pane" role="tabpanel" aria-labelledby="description-txt-tab" tabindex="0">
|
||||
<template x-if="descriptionText !== null">
|
||||
<pre x-text="descriptionText"></pre>
|
||||
</template>
|
||||
<template x-if="descriptionText === null && gameData?.client_data">
|
||||
<div class="alert alert-secondary">Description document not available.</div>
|
||||
</template>
|
||||
<template x-if="!gameData?.client_data && !isLoading">
|
||||
<div class="alert alert-secondary">Loading document...</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -111,18 +144,16 @@
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="sticky-top-column">
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Game Information</h5>
|
||||
</div>
|
||||
<h5 class="mb-0">Dossier Information</h5> </div>
|
||||
<div class="card-body">
|
||||
<p class="mb-1"><strong>Client ID:</strong> <code x-text="gameData?.client_id || 'N/A'"></code></p>
|
||||
<p class="mb-1"><strong>Session ID:</strong> <code x-text="gameData?.session_id || 'N/A'"></code></p>
|
||||
<p class="mb-1"><strong>Client ID to process:</strong> <code x-text="gameData?.client_id || 'N/A'"></code></p>
|
||||
<p class="mb-1"><strong>Status:</strong> <span class="badge bg-info" x-text="gameData?.status || 'N/A'"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">AI Recommendation</h5>
|
||||
</div>
|
||||
@ -141,8 +172,7 @@
|
||||
<p class="small mt-2 mb-0" x-text="gameData?.client_data?.ai_explanation || ''"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Your Decision</h5>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user