dlmw/julius_baer_onboarding
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhance even more front-end

Browse Source
This commit is contained in:
NoeBerdoz
2025-04-12 22:31:49 +02:00
parent dde607d1a8
commit b7293dffe9
2 changed files with 172 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
frontend/src/index.html
View File

@ -6,12 +6,24 @@
<title>Onboarding Dossier Review</title> <title>Onboarding Dossier Review</title>
<script type="module" src="./js/main.js" defer></script> <script type="module" src="./js/main.js" defer></script>
<style> <style>
.document-viewer iframe { .document-viewer iframe,
min-height: 600px; /* Ensure iframe takes up space */ .document-viewer img {
min-height: 600px; /* Ensure iframe/img takes up space */
width: 100%; width: 100%;
border: 1px solid #dee2e6; /* Bootstrap border color */ border: 1px solid #dee2e6; /* Bootstrap border color */
border-radius: 0.375rem; /* Bootstrap border radius */ 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 { .sticky-top-column {
position: sticky; position: sticky;
@ -54,55 +66,76 @@
<div class="card-body"> <div class="card-body">
<ul class="nav nav-tabs" id="docTab" role="tablist"> <ul class="nav nav-tabs" id="docTab" role="tablist">
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link active" id="doc1-tab" data-bs-toggle="tab" <button class="nav-link active" id="passport-tab" data-bs-toggle="tab"
data-bs-target="#doc1-pane" type="button" role="tab" aria-controls="doc1-pane" data-bs-target="#passport-pane" type="button" role="tab" aria-controls="passport-pane"
aria-selected="true">Passport aria-selected="true">Passport (PNG)</button>
</button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="doc2-tab" data-bs-toggle="tab" data-bs-target="#doc2-pane" <button class="nav-link" id="account-pdf-tab" data-bs-toggle="tab" data-bs-target="#account-pdf-pane"
type="button" role="tab" aria-controls="doc2-pane" aria-selected="false">Account type="button" role="tab" aria-controls="account-pdf-pane" aria-selected="false">Account (PDF)</button>
Overview
</button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="doc3-tab" data-bs-toggle="tab" data-bs-target="#doc3-pane" <button class="nav-link" id="profile-docx-tab" data-bs-toggle="tab" data-bs-target="#profile-docx-pane"
type="button" role="tab" aria-controls="doc3-pane" aria-selected="false">Proof of type="button" role="tab" aria-controls="profile-docx-pane" aria-selected="false">Profile (DOCX)</button>
Address
</button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
<button class="nav-link" id="doc4-tab" data-bs-toggle="tab" data-bs-target="#doc4-pane" <button class="nav-link" id="description-txt-tab" data-bs-toggle="tab" data-bs-target="#description-txt-pane"
type="button" role="tab" aria-controls="doc4-pane" aria-selected="false">Additional type="button" role="tab" aria-controls="description-txt-pane" aria-selected="false">Description (TXT)</button>
Doc
</button>
</li> </li>
</ul> </ul>
<div class="tab-content pt-3 document-viewer" id="docTabContent"> <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" <div class="tab-pane fade show active" id="passport-pane" role="tabpanel" aria-labelledby="passport-tab" tabindex="0">
tabindex="0"> <template x-if="passportSrc">
<div x-data="pdfViewer()" x-init="loadPdf()"> <img :src="passportSrc" class="img-fluid border rounded" alt="Passport Document">
<template x-if="pdfUrl"> </template>
<iframe :src="pdfUrl" type="application/pdf"></iframe> <template x-if="!passportSrc && gameData?.client_data">
</template> <div class="alert alert-secondary">Passport document not available.</div>
<template x-if="!pdfUrl"> </template>
<div class="alert alert-secondary">Loading document...</div> <template x-if="!gameData?.client_data && !isLoading"> <div class="alert alert-secondary">Loading document...</div>
</template> </template>
</div>
</div> </div>
<div class="tab-pane fade" id="doc2-pane" role="tabpanel" aria-labelledby="doc2-tab" <div class="tab-pane fade" id="account-pdf-pane" role="tabpanel" aria-labelledby="account-pdf-tab" tabindex="0">
tabindex="0"> <template x-if="accountSrc">
<div class="alert alert-secondary">Document 2 placeholder. Needs dynamic loading logic based <iframe :src="accountSrc" type="application/pdf"></iframe>
on `gameData.client_data.documents`. </template>
</div> <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>
<div class="tab-pane fade" id="doc3-pane" role="tabpanel" aria-labelledby="doc3-tab" <div class="tab-pane fade" id="profile-docx-pane" role="tabpanel" aria-labelledby="profile-docx-tab" tabindex="0">
tabindex="0"> <template x-if="profileSrc">
<div class="alert alert-secondary">Document 3 placeholder.</div> <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>
<div class="tab-pane fade" id="doc4-pane" role="tabpanel" aria-labelledby="doc4-tab" <div class="tab-pane fade" id="description-txt-pane" role="tabpanel" aria-labelledby="description-txt-tab" tabindex="0">
tabindex="0"> <template x-if="descriptionText !== null">
<div class="alert alert-secondary">Document 4 placeholder.</div> <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> </div>
</div> </div>
@ -111,18 +144,16 @@
<div class="col-lg-4"> <div class="col-lg-4">
<div class="sticky-top-column"> <div class="sticky-top-column">
<div class="card shadow-sm mb-3"> <div class="card shadow-sm mb-3">
<div class="card-header"> <div class="card-header">
<h5 class="mb-0">Game Information</h5> <h5 class="mb-0">Dossier Information</h5> </div>
</div>
<div class="card-body"> <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>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> <p class="mb-1"><strong>Status:</strong> <span class="badge bg-info" x-text="gameData?.status || 'N/A'"></span></p>
</div> </div>
</div> </div>
<div class="card shadow-sm mb-3">
<div class="card shadow-sm mb-3">
<div class="card-header"> <div class="card-header">
<h5 class="mb-0">AI Recommendation</h5> <h5 class="mb-0">AI Recommendation</h5>
</div> </div>
@ -141,8 +172,7 @@
<p class="small mt-2 mb-0" x-text="gameData?.client_data?.ai_explanation || ''"></p> <p class="small mt-2 mb-0" x-text="gameData?.client_data?.ai_explanation || ''"></p>
</div> </div>
</div> </div>
<div class="card shadow-sm mb-3">
<div class="card shadow-sm mb-3">
<div class="card-header"> <div class="card-header">
<h5 class="mb-0">Your Decision</h5> <h5 class="mb-0">Your Decision</h5>
</div> </div>

160
frontend/src/js/main.js
View File

File diff suppressed because one or more lines are too long