233 lines
11 KiB
PHP
233 lines
11 KiB
PHP
<?php
|
|
error_reporting(E_ALL);
|
|
ini_set('display_errors', 1);
|
|
session_start();
|
|
|
|
// Simple auth check
|
|
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
|
|
// Redirect to login page if not logged in
|
|
// header('Location: login.php');
|
|
// exit;
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>FinMox — Portal</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css">
|
|
</head>
|
|
<body class="bg-warm">
|
|
<main class="max-w-7xl mx-auto p-6">
|
|
<!-- PORTAL / DASHBOARD PAGE -->
|
|
<section id="page-portal" class="page fade">
|
|
<section class="panel-strong p-8 lg:p-10">
|
|
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
|
|
<!-- Left: Welcome + controls -->
|
|
<div class="lg:max-w-xl">
|
|
<div class="chip inline-flex px-3 py-1 text-xs">Portal</div>
|
|
<h1 class="mt-5 text-4xl font-extrabold tracking-tight">FinMox Workspace</h1>
|
|
<p class="mt-4 text-gray-700">
|
|
Review hiring execution, decision trails, and audit-ready outputs. Your access is aligned to your plan.
|
|
</p>
|
|
<!-- top actions -->
|
|
<div class="mt-6 flex flex-wrap gap-3">
|
|
<a href="index.php" class="chip px-5 py-3 rounded-2xl text-sm hoverlift">
|
|
← Back to Website
|
|
</a>
|
|
<a href="#pricing" onclick="openPage('pricing'); return false;" class="bg-black text-white px-5 py-3 rounded-2xl text-sm hoverlift">
|
|
Upgrade / Downgrade
|
|
</a>
|
|
</div>
|
|
<!-- Plan card -->
|
|
<div class="mt-7 panel p-6">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<div class="text-sm font-semibold">Plan</div>
|
|
<div class="text-sm text-gray-600 mt-1">
|
|
<span class="chip px-2 py-1 text-xs">Growth</span>
|
|
<span class="ml-2 text-xs text-gray-500">Demo placeholder</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="chip px-4 py-2 rounded-2xl text-sm hoverlift" onclick="openPage('pricing')">
|
|
Manage Plan
|
|
</button>
|
|
</div>
|
|
<!-- limits -->
|
|
<div class="mt-5 grid sm:grid-cols-3 gap-3">
|
|
<div class="panel-strong p-4">
|
|
<div class="text-xs text-gray-500">Roles / month</div>
|
|
<div class="mt-2 text-xl font-extrabold">10</div>
|
|
</div>
|
|
<div class="panel-strong p-4">
|
|
<div class="text-xs text-gray-500">Audit exports</div>
|
|
<div class="mt-2 text-xl font-extrabold">25</div>
|
|
</div>
|
|
<div class="panel-strong p-4">
|
|
<div class="text-xs text-gray-500">Automation</div>
|
|
<div class="mt-2 text-xl font-extrabold">On</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Portal modules -->
|
|
<div class="flex-1">
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<!-- Module: Roles -->
|
|
<div class="panel p-6">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<h3 class="font-semibold">Open Roles</h3>
|
|
<span class="chip px-3 py-1 text-xs" id="kpiRoles">0</span>
|
|
</div>
|
|
<div id="roles-list" class="mt-4 space-y-3">
|
|
<!-- JS will render roles here -->
|
|
</div>
|
|
</div>
|
|
<!-- Module: Candidates -->
|
|
<div class="panel p-6">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<h3 class="font-semibold">Active Candidates</h3>
|
|
<span class="chip px-3 py-1 text-xs" id="kpiCandidates">0</span>
|
|
</div>
|
|
<div id="candidates-list" class="mt-4 space-y-3">
|
|
<!-- JS will render candidates here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 panel p-6">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<h3 class="font-semibold">Execution Feed</h3>
|
|
<span class="chip px-3 py-1 text-xs">Live</span>
|
|
</div>
|
|
<div id="events-list" class="mt-4 space-y-3 text-sm">
|
|
<!-- JS will render events here -->
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 panel p-6">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<h3 class="font-semibold">Execution Risks (SLAs)</h3>
|
|
<span class="chip px-3 py-1 text-xs" id="kpiSla">0</span>
|
|
</div>
|
|
<div id="sla-list" class="mt-4 space-y-3">
|
|
<!-- JS will render SLA risks here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const pages = ['home','problem','why','features','how','roi','pricing','who','trust','roadmap','faq','signin','apply','portal'];
|
|
|
|
const demo = {
|
|
roles: [
|
|
{ role: 'Account Executive', status: 'Open', criteria: 'Locked v2', candidates: 128, owner: 'People Ops' },
|
|
{ role: 'Sales Engineer', status: 'Open', criteria: 'Locked v1', candidates: 64, owner: 'RevOps' },
|
|
{ role: 'Gov Account Manager', status: 'Pilot', criteria: 'Draft', candidates: 22, owner: 'Hiring Lead' },
|
|
],
|
|
candidates: [
|
|
{ name: 'Jordan M.', role: 'Account Executive', score: 92, stage: 'Final', status: 'On track' },
|
|
{ name: 'Ariana K.', role: 'Sales Engineer', score: 88, stage: 'Panel', status: 'SLA risk' },
|
|
{ name: 'Devin R.', role: 'Account Executive', score: 83, stage: 'Screen', status: 'On track' },
|
|
{ name: 'Mina S.', role: 'Gov Account Manager', score: 79, stage: 'Intake', status: 'Waiting' },
|
|
],
|
|
events: [
|
|
{ time: 'Today 9:42a', event: 'CRITERIA_LOCKED', entity: 'Account Executive', actor: 'People Ops', notes: 'Locked v2 (scope freeze).' },
|
|
{ time: 'Today 10:05a', event: 'SCORE_SUBMITTED', entity: 'Jordan M.', actor: 'Interviewer', notes: 'Score 92 + notes captured.' },
|
|
{ time: 'Today 11:12a', event: 'STAGE_CHANGED', entity: 'Jordan M.', actor: 'FinMox', notes: 'Moved to Final (automation).' },
|
|
{ time: 'Today 12:01p', event: 'SLA_NUDGE_SENT', entity: 'Ariana K.', actor: 'FinMox', notes: 'Feedback overdue → nudge.' },
|
|
],
|
|
sla: [
|
|
{ title: 'Feedback overdue', detail: 'Sales Engineer · Panel interview', risk: 'High' },
|
|
{ title: 'Schedule pending', detail: 'Account Executive · Final', risk: 'Medium' },
|
|
{ title: 'Criteria draft', detail: 'Gov Account Manager · Needs lock', risk: 'Medium' },
|
|
]
|
|
};
|
|
|
|
function renderDemo() {
|
|
// KPIs
|
|
const kpiRoles = document.getElementById('kpiRoles');
|
|
const kpiCandidates = document.getElementById('kpiCandidates');
|
|
const kpiSla = document.getElementById('kpiSla');
|
|
|
|
if (kpiRoles) kpiRoles.textContent = demo.roles.length;
|
|
if (kpiCandidates) kpiCandidates.textContent = demo.candidates.length;
|
|
if (kpiSla) kpiSla.textContent = demo.sla.filter(x => x.risk === 'High' || x.risk === 'Medium').length;
|
|
|
|
// Roles List
|
|
const rolesList = document.getElementById('roles-list');
|
|
if (rolesList) {
|
|
rolesList.innerHTML = demo.roles.map(r => `
|
|
<div class="panel-strong p-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="font-semibold">${r.role}</div>
|
|
<div class="text-xs chip ${r.status === 'Open' ? '' : 'bg-gray-200'}">${r.status}</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-600">
|
|
Criteria: ${r.criteria} · Candidates: ${r.candidates} · Owner: ${r.owner}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Candidates List
|
|
const candidatesList = document.getElementById('candidates-list');
|
|
if (candidatesList) {
|
|
candidatesList.innerHTML = demo.candidates.map(c => `
|
|
<div class="panel-strong p-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="font-semibold">${c.name}</div>
|
|
<div class="text-xs font-bold">${c.score}</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-600">
|
|
${c.role} · Stage: ${c.stage} · Status: ${c.status}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Events List
|
|
const eventsList = document.getElementById('events-list');
|
|
if(eventsList) {
|
|
eventsList.innerHTML = demo.events.map(e => `
|
|
<div class="panel-strong p-3">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="font-semibold">${e.event}</span>
|
|
<span class="text-gray-600"> · ${e.entity}</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500">${e.time}</div>
|
|
</div>
|
|
<div class="mt-1 text-xs text-gray-700">${e.notes}</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// SLA List
|
|
const slaList = document.getElementById('sla-list');
|
|
if(slaList) {
|
|
slaList.innerHTML = demo.sla.map(s => `
|
|
<div class="panel-strong p-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="font-semibold">${s.title}</div>
|
|
<div class="text-xs chip ${s.risk === 'High' ? 'bg-red-200' : 'bg-yellow-200'}">${s.risk}</div>
|
|
</div>
|
|
<div class="mt-1 text-xs text-gray-600">${s.detail}</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// This will render the demo data on the portal page
|
|
renderDemo();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|