573 lines
17 KiB
HTML
573 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="theme-light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>FIN-042: Audited financials FY2024 — Dealspace</title>
|
||
<link rel="stylesheet" href="../static/themes.css">
|
||
<style>
|
||
/* Page-specific layout */
|
||
.page-layout {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
/* Back link */
|
||
.back-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
font-size: var(--text-sm);
|
||
color: var(--color-text-link);
|
||
text-decoration: none;
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.back-link:hover {
|
||
color: var(--color-text-link-hover);
|
||
}
|
||
|
||
/* Request header */
|
||
.request-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: var(--space-lg);
|
||
padding-bottom: var(--space-lg);
|
||
border-bottom: 1px solid var(--color-border-primary);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.request-header-main {
|
||
flex: 1;
|
||
}
|
||
|
||
.request-ref-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-md);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.request-ref {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
color: var(--color-text-secondary);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.request-title {
|
||
font-size: var(--text-2xl);
|
||
font-weight: 700;
|
||
color: var(--color-text-primary);
|
||
margin: 0 0 var(--space-sm) 0;
|
||
}
|
||
|
||
.request-meta {
|
||
font-size: var(--text-sm);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.request-priority {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.priority-dot {
|
||
width: 0.75rem;
|
||
height: 0.75rem;
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
.priority-dot.high { background: var(--color-priority-high); }
|
||
.priority-dot.normal { background: var(--color-priority-normal); }
|
||
.priority-dot.low { background: var(--color-priority-low); }
|
||
|
||
.priority-label {
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* Routing section */
|
||
.section-title {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.routing-section {
|
||
margin-bottom: var(--space-xl);
|
||
}
|
||
|
||
.routing-box {
|
||
padding: var(--space-lg);
|
||
background: var(--color-bg-secondary);
|
||
border: 1px solid var(--color-border-primary);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.routing-chain {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-md);
|
||
flex-wrap: wrap;
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.routing-step {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
font-size: var(--text-sm);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.routing-step.current {
|
||
padding: var(--space-xs) var(--space-sm);
|
||
background: var(--color-accent-light);
|
||
color: var(--color-accent);
|
||
font-weight: 600;
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.routing-arrow {
|
||
color: var(--color-text-tertiary);
|
||
}
|
||
|
||
.routing-return {
|
||
font-size: var(--text-sm);
|
||
color: var(--color-text-secondary);
|
||
padding-top: var(--space-md);
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
}
|
||
|
||
.routing-return strong {
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* Actions bar */
|
||
.actions-bar {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
/* Thread section */
|
||
.thread-section {
|
||
margin-bottom: var(--space-xl);
|
||
}
|
||
|
||
.thread-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
/* Response section */
|
||
.response-section {
|
||
margin-bottom: var(--space-xl);
|
||
}
|
||
|
||
.response-box {
|
||
padding: var(--space-lg);
|
||
background: var(--color-card-bg);
|
||
border: 1px solid var(--color-card-border);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.response-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: var(--space-md);
|
||
padding-top: var(--space-md);
|
||
border-top: 1px solid var(--color-border-secondary);
|
||
}
|
||
|
||
.response-tools {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.response-submit {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.icon-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
border: 1px solid var(--color-border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-bg-secondary);
|
||
color: var(--color-text-secondary);
|
||
cursor: pointer;
|
||
font-size: var(--text-lg);
|
||
}
|
||
|
||
.icon-btn:hover {
|
||
background: var(--color-bg-tertiary);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* Global nav area */
|
||
.global-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-lg);
|
||
margin-left: auto;
|
||
}
|
||
|
||
.inbox-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-sm) var(--space-md);
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
color: var(--color-text-inverse);
|
||
background: var(--color-accent);
|
||
border-radius: var(--radius-md);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.user-menu {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--color-bg-tertiary);
|
||
}
|
||
|
||
.user-name {
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
color: var(--color-header-text);
|
||
}
|
||
|
||
/* Theme switcher (demo only) */
|
||
.theme-switcher {
|
||
position: fixed;
|
||
bottom: var(--space-lg);
|
||
right: var(--space-lg);
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
padding: var(--space-sm);
|
||
background: var(--color-card-bg);
|
||
border: 1px solid var(--color-card-border);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.theme-switcher button {
|
||
padding: var(--space-sm) var(--space-md);
|
||
font-size: var(--text-sm);
|
||
border: 1px solid var(--color-border-primary);
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-bg-secondary);
|
||
color: var(--color-text-primary);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.theme-switcher button:hover {
|
||
background: var(--color-bg-tertiary);
|
||
}
|
||
|
||
/* Two-column layout on larger screens */
|
||
@media (min-width: 1024px) {
|
||
.request-content {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: var(--space-xl);
|
||
}
|
||
|
||
.request-main {
|
||
order: 1;
|
||
}
|
||
|
||
.request-sidebar {
|
||
order: 2;
|
||
}
|
||
}
|
||
|
||
/* Sidebar info card */
|
||
.info-card {
|
||
padding: var(--space-lg);
|
||
background: var(--color-bg-secondary);
|
||
border: 1px solid var(--color-border-primary);
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.info-card-title {
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: var(--space-sm) 0;
|
||
border-bottom: 1px solid var(--color-border-secondary);
|
||
}
|
||
|
||
.info-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: var(--text-sm);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.info-value {
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.info-value.overdue {
|
||
color: var(--color-error);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page-layout">
|
||
<!-- Global Header -->
|
||
<header class="global-header">
|
||
<div class="logo">Dealspace</div>
|
||
|
||
<select class="project-select" aria-label="Select project">
|
||
<option selected>Project Alpha — TargetCo Acquisition</option>
|
||
<option>Project Beta — MergeCo Deal</option>
|
||
</select>
|
||
|
||
<nav class="global-nav">
|
||
<a href="/inbox" class="inbox-link">
|
||
Inbox
|
||
<span class="badge">3</span>
|
||
</a>
|
||
<div class="user-menu">
|
||
<div class="avatar" role="img" aria-label="User avatar"></div>
|
||
<span class="user-name">S. Johnson</span>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="main-content container">
|
||
<!-- Back navigation -->
|
||
<a href="/inbox" class="back-link">
|
||
← Back to Inbox
|
||
</a>
|
||
|
||
<!-- Request header -->
|
||
<header class="request-header">
|
||
<div class="request-header-main">
|
||
<div class="request-ref-row">
|
||
<span class="request-ref">FIN-042</span>
|
||
<span class="status-badge assigned">Assigned</span>
|
||
</div>
|
||
<h1 class="request-title">Audited financials FY2024</h1>
|
||
<p class="request-meta">Project Alpha • Finance • Due: March 15, 2026</p>
|
||
</div>
|
||
<div class="request-priority">
|
||
<span class="priority-dot high" aria-hidden="true"></span>
|
||
<span class="priority-label">High Priority</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="request-content">
|
||
<div class="request-main">
|
||
<!-- Routing chain -->
|
||
<section class="routing-section">
|
||
<h2 class="section-title">Routing</h2>
|
||
<div class="routing-box">
|
||
<div class="routing-chain" role="navigation" aria-label="Request routing chain">
|
||
<span class="routing-step">
|
||
Acme Capital (Buyer)
|
||
</span>
|
||
<span class="routing-arrow" aria-hidden="true">→</span>
|
||
<span class="routing-step">
|
||
J. Smith (IB)
|
||
</span>
|
||
<span class="routing-arrow" aria-hidden="true">→</span>
|
||
<span class="routing-step">
|
||
M. Chen (CFO)
|
||
</span>
|
||
<span class="routing-arrow" aria-hidden="true">→</span>
|
||
<span class="routing-step current">
|
||
★ You
|
||
</span>
|
||
</div>
|
||
<div class="routing-return">
|
||
When done, returns to: <strong>M. Chen (CFO)</strong>
|
||
</div>
|
||
<div class="actions-bar">
|
||
<button class="btn btn-primary">Mark Done</button>
|
||
<button class="btn btn-secondary">Forward</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Thread -->
|
||
<section class="thread-section">
|
||
<h2 class="section-title">Thread</h2>
|
||
<div class="thread-list">
|
||
<!-- Message 1: Original request -->
|
||
<article class="thread-message">
|
||
<header class="thread-message-header">
|
||
<span class="thread-message-author">J. Smith (IB)</span>
|
||
<time class="thread-message-time">Feb 25, 2026, 10:30 AM</time>
|
||
</header>
|
||
<div class="thread-message-body">
|
||
<p>Please provide audited financial statements for FY2024.</p>
|
||
<p>We need the following documents:</p>
|
||
<ul>
|
||
<li>Income statement (P&L)</li>
|
||
<li>Balance sheet</li>
|
||
<li>Cash flow statement</li>
|
||
<li>Auditor's opinion letter</li>
|
||
</ul>
|
||
<p>Please ensure these are the final audited versions, not draft.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Message 2: CFO forwarding -->
|
||
<article class="thread-message">
|
||
<header class="thread-message-header">
|
||
<span class="thread-message-author">M. Chen (CFO)</span>
|
||
<time class="thread-message-time">Feb 26, 2026, 2:15 PM</time>
|
||
</header>
|
||
<div class="thread-message-body">
|
||
<p>@accountant Can you pull these from the ERP? The audit was finalized last month.</p>
|
||
<p>Attaching last year's format for reference so we maintain consistency.</p>
|
||
</div>
|
||
<a href="#" class="thread-message-attachment">
|
||
📎 fy2023-financials-format.xlsx
|
||
</a>
|
||
</article>
|
||
|
||
<!-- Message 3: Prior update -->
|
||
<article class="thread-message">
|
||
<header class="thread-message-header">
|
||
<span class="thread-message-author">S. Johnson (You)</span>
|
||
<time class="thread-message-time">Feb 27, 2026, 9:45 AM</time>
|
||
</header>
|
||
<div class="thread-message-body">
|
||
<p>On it. Just waiting for the auditor to send the final signed opinion letter. Should have everything by EOD Thursday.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Response box -->
|
||
<section class="response-section">
|
||
<h2 class="section-title">Your Response</h2>
|
||
<div class="response-box">
|
||
<textarea
|
||
class="textarea"
|
||
placeholder="Write a message or upload files..."
|
||
aria-label="Response message"
|
||
></textarea>
|
||
<div class="response-actions">
|
||
<div class="response-tools">
|
||
<button class="icon-btn" title="Attach file" aria-label="Attach file">
|
||
📎
|
||
</button>
|
||
<button class="icon-btn" title="Format text" aria-label="Format text">
|
||
𝐁
|
||
</button>
|
||
</div>
|
||
<div class="response-submit">
|
||
<button class="btn btn-secondary">Save Draft</button>
|
||
<button class="btn btn-primary">Send & Mark Done</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<aside class="request-sidebar">
|
||
<!-- Request details card -->
|
||
<div class="info-card">
|
||
<h3 class="info-card-title">Details</h3>
|
||
<div class="info-row">
|
||
<span class="info-label">Status</span>
|
||
<span class="status-badge assigned">Assigned</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">Priority</span>
|
||
<span class="info-value">High</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">Due Date</span>
|
||
<span class="info-value overdue">Mar 15, 2026 (Overdue)</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">Workstream</span>
|
||
<span class="info-value">Finance</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">Created</span>
|
||
<span class="info-value">Feb 25, 2026</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">Assigned to</span>
|
||
<span class="info-value">S. Johnson</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Related requests card -->
|
||
<div class="info-card">
|
||
<h3 class="info-card-title">Related Requests</h3>
|
||
<div style="padding: var(--space-sm) 0;">
|
||
<a href="#" style="font-size: var(--text-sm); color: var(--color-text-link); text-decoration: none;">
|
||
FIN-041 — Audited financials FY2023
|
||
</a>
|
||
<span class="status-badge published" style="margin-left: var(--space-sm);">Published</span>
|
||
</div>
|
||
<div style="padding: var(--space-sm) 0;">
|
||
<a href="#" style="font-size: var(--text-sm); color: var(--color-text-link); text-decoration: none;">
|
||
FIN-045 — Revenue recognition policy
|
||
</a>
|
||
<span class="status-badge assigned" style="margin-left: var(--space-sm);">Assigned</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Theme Switcher (demo/testing only) -->
|
||
<div class="theme-switcher" aria-label="Theme switcher">
|
||
<button onclick="document.documentElement.className='theme-light'">Light</button>
|
||
<button onclick="document.documentElement.className='theme-dark'">Dark</button>
|
||
<button onclick="document.documentElement.className='theme-contrast'">Contrast</button>
|
||
</div>
|
||
</body>
|
||
</html>
|