183 lines
9.0 KiB
HTML
183 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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 */
|
|
width: 100%;
|
|
border: 1px solid #dee2e6; /* Bootstrap border color */
|
|
border-radius: 0.375rem; /* Bootstrap border radius */
|
|
}
|
|
|
|
.sticky-top-column {
|
|
position: sticky;
|
|
top: 1rem; /* Adjust based on your navbar height if any */
|
|
height: calc(100vh - 2rem); /* Example height, adjust as needed */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Ensure templates don't cause layout shifts when hidden */
|
|
template {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body x-data="gameManager" class="bg-light">
|
|
|
|
<div class="container-fluid p-3">
|
|
|
|
<template x-if="isLoading">
|
|
<div class="alert alert-info position-absolute top-50 start-50 translate-middle z-index-master" role="alert">
|
|
<div class="spinner-border spinner-border-sm me-2" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
Loading Dossier Data...
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="error && !isLoading">
|
|
<div class="alert alert-danger position-absolute top-50 start-50 translate-middle z-index-master" role="alert"
|
|
x-text="error"></div>
|
|
</template>
|
|
|
|
<div x-show="gameData && !isLoading && !error" class="row g-3">
|
|
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Client Documents</h5>
|
|
</div>
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="sticky-top-column">
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Game Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<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-header">
|
|
<h5 class="mb-0">AI Recommendation</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<template x-if="gameData?.client_data?.ai_recommendation === 'Accept'">
|
|
<div class="alert alert-success p-2 mb-0"
|
|
x-text="gameData.client_data.ai_recommendation"></div>
|
|
</template>
|
|
<template x-if="gameData?.client_data?.ai_recommendation === 'Reject'">
|
|
<div class="alert alert-danger p-2 mb-0"
|
|
x-text="gameData.client_data.ai_recommendation"></div>
|
|
</template>
|
|
<template x-if="!gameData?.client_data?.ai_recommendation">
|
|
<div class="alert alert-warning p-2 mb-0">Processing...</div>
|
|
</template>
|
|
<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-header">
|
|
<h5 class="mb-0">Your Decision</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<template x-if="gameData?.status !== 'gameover'">
|
|
<div><p class="card-text">Review the documents and AI recommendation before making a
|
|
decision.</p>
|
|
<div class="d-grid gap-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-success"
|
|
@click="submitDecision('Accept')"
|
|
:disabled="isLoading">
|
|
Accept Dossier
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-danger"
|
|
@click="submitDecision('Reject')"
|
|
:disabled="isLoading">
|
|
Reject Dossier
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template x-if="gameData?.status === 'gameover'">
|
|
<div class="alert alert-warning mb-0">
|
|
All dossiers processed!
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |