253 lines
12 KiB
HTML
253 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}ComplianceShield Dashboard{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
:root {
|
|
--ink: #0b0b0c;
|
|
--paper: #fbfaf7;
|
|
--line: rgba(11, 11, 12, .08);
|
|
--shadow: 0 18px 48px rgba(11, 11, 12, .10);
|
|
--shadow2: 0 10px 26px rgba(11, 11, 12, .10);
|
|
--radius: 22px;
|
|
--blue: #2563eb;
|
|
--blue2: #60a5fa;
|
|
--ice: #eaf2ff;
|
|
--ice2: #f6fbff;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
color: var(--ink);
|
|
background-color: #f7f9fc;
|
|
}
|
|
.panel {
|
|
border-radius: var(--radius);
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
box-shadow: var(--shadow2);
|
|
}
|
|
.chip {
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
background: #f8f9fa;
|
|
}
|
|
</style>
|
|
|
|
<div class="flex h-screen bg-gray-100">
|
|
<!-- Sidebar -->
|
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
|
|
<div class="p-6">
|
|
<a href="#" class="flex items-center gap-3">
|
|
<div class="h-10 w-10 rounded-2xl bg-[#0b0b0c] text-white flex items-center justify-center text-sm font-semibold">CS</div>
|
|
<div class="font-semibold tracking-tight">ComplianceShield</div>
|
|
</a>
|
|
</div>
|
|
<nav class="flex-1 px-4 py-2 space-y-2">
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-lg">
|
|
<i-o-home class="h-6 w-6 mr-3"></i-o-home>
|
|
Dashboard
|
|
</a>
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
|
<i-o-chart-bar class="h-6 w-6 mr-3"></i-o-chart-bar>
|
|
Reports
|
|
</a>
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
|
<i-o-calendar class="h-6 w-6 mr-3"></i-o-calendar>
|
|
Calendar
|
|
</a>
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
|
<i-o-user-group class="h-6 w-6 mr-3"></i-o-user-group>
|
|
Teams
|
|
</a>
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
|
<i-o-briefcase class="h-6 w-6 mr-3"></i-o-briefcase>
|
|
Projects
|
|
</a>
|
|
<a href="/admin" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
|
<i-o-cog class="h-6 w-6 mr-3"></i-o-cog>
|
|
Settings
|
|
</a>
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-lg">
|
|
<i-o-question-mark-circle class="h-6 w-6 mr-3"></i-o-question-mark-circle>
|
|
Help Center
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main content -->
|
|
<main class="flex-1 p-6 lg:p-10 overflow-y-auto">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-semibold text-gray-800">ComplianceShield Dashboard</h1>
|
|
<div class="flex-1 flex justify-center px-8">
|
|
<div class="relative w-full max-w-lg">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<i-o-magnifying-glass class="h-5 w-5 text-gray-500"></i-o-magnifying-glass>
|
|
</span>
|
|
<input type="text" placeholder="Search..." class="block w-full rounded-md border border-gray-200 bg-gray-50 py-2 pl-10 pr-4 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm">
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<i-o-bell class="h-6 w-6 text-gray-500"></i-o-bell>
|
|
<div class="flex items-center gap-2">
|
|
<div class="h-8 w-8 rounded-full bg-gray-400"></div>
|
|
<div>
|
|
<p class="font-semibold text-sm">Owner</p>
|
|
<p class="text-xs text-gray-500">Your Account Menu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel p-6 mb-8">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Ready to launch a new project?</h2>
|
|
<p class="text-sm text-gray-500">Create a new jobsite and start tracking compliance today.</p>
|
|
</div>
|
|
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold">Add New Project</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 col-span-2">
|
|
<div class="panel p-6">
|
|
<h3 class="text-sm font-semibold text-gray-500 flex items-center gap-2"><span class="h-2 w-2 bg-blue-500 rounded-full"></span> Ongoing Projects</h3>
|
|
<p class="text-3xl font-bold mt-2">08</p>
|
|
<p class="text-sm text-green-500">+3.0% From last month</p>
|
|
</div>
|
|
<div class="panel p-6">
|
|
<h3 class="text-sm font-semibold text-gray-500 flex items-center gap-2"><span class="h-2 w-2 bg-green-500 rounded-full"></span> Complete Projects</h3>
|
|
<p class="text-3xl font-bold mt-2">30</p>
|
|
<p class="text-sm text-red-500">-5.0% From last month</p>
|
|
</div>
|
|
<div class="panel p-6">
|
|
<h3 class="text-sm font-semibold text-gray-500 flex items-center gap-2"><span class="h-2 w-2 bg-gray-400 rounded-full"></span> On Hold Projects</h3>
|
|
<p class="text-3xl font-bold mt-2">03</p>
|
|
<p class="text-sm text-green-500">+8.0% From last month</p>
|
|
</div>
|
|
</div>
|
|
<div class="panel p-6 col-span-1">
|
|
<h3 class="font-semibold mb-4">Alert Overview Live</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start gap-4">
|
|
<div class="h-8 w-8 bg-red-100 text-red-600 flex items-center justify-center rounded-full"><i-o-exclamation-triangle class="h-5 w-5"></i-o-exclamation-triangle></div>
|
|
<div>
|
|
<p class="font-semibold text-sm">Fraud / anomaly alert</p>
|
|
<p class="text-xs text-gray-500">Project Manager — Eng. Rahim</p>
|
|
<p class="text-xs text-gray-500">Habiganj 9746tr — Ongoing</p>
|
|
<p class="text-xs mt-1">Material usage exceeded expected threshold.</p>
|
|
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
|
|
</div>
|
|
<button class="text-xs text-blue-600 font-semibold">Mark as solved</button>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="h-8 w-8 bg-yellow-100 text-yellow-600 flex items-center justify-center rounded-full"><i-o-exclamation-circle class="h-5 w-5"></i-o-exclamation-circle></div>
|
|
<div>
|
|
<p class="font-semibold text-sm">COI expiring soon</p>
|
|
<p class="text-xs text-gray-500">Subcontractor — R. Builders LLC</p>
|
|
<p class="text-xs mt-1">Certificate of Insurance Expires in 7 days — request renewal.</p>
|
|
<p class="text-xs text-gray-400 mt-1">Today</p>
|
|
</div>
|
|
<button class="text-xs text-blue-600 font-semibold">Send reminder</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
|
|
<div class="panel p-6 col-span-1">
|
|
<h3 class="font-semibold">Projects Map Overview</h3>
|
|
<div class="mt-4 bg-gray-200 rounded-lg h-48 flex items-center justify-center">
|
|
<p class="text-gray-500">Mock map</p>
|
|
</div>
|
|
<ul class="mt-4 space-y-2 text-sm">
|
|
<li class="flex items-center gap-2"><i-o-map-pin class="h-5 w-5 text-gray-400"></i-o-map-pin> Kukatata wt46tr</li>
|
|
<li class="flex items-center gap-2"><i-o-map-pin class="h-5 w-5 text-gray-400"></i-o-map-pin> Habiganj 9746tr</li>
|
|
<li class="flex items-center gap-2"><i-o-map-pin class="h-5 w-5 text-gray-400"></i-o-map-pin> Newmarket 746t</li>
|
|
</ul>
|
|
</div>
|
|
<div class="panel p-6 col-span-2">
|
|
<h3 class="font-semibold">Habiganj 9746tr — Ongoing</h3>
|
|
<div class="grid grid-cols-3 gap-4 text-sm mt-4">
|
|
<div><p class="text-gray-500">Location</p><p>Dhaka, Bangladesh</p></div>
|
|
<div><p class="text-gray-500">Planned</p><p>$2.5M</p></div>
|
|
<div><p class="text-gray-500">Actual</p><p>$2.0M (-12%)</p></div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<p class="text-gray-500 text-sm">Progress</p>
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
|
|
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
|
|
</div>
|
|
</div>
|
|
<button class="text-blue-600 font-semibold text-sm mt-4">View details</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
|
|
<div class="panel p-6 col-span-1">
|
|
<h3 class="font-semibold">Compliance Status</h3>
|
|
<div class="mt-4 space-y-4">
|
|
<div>
|
|
<p class="font-semibold">Daily Logs</p>
|
|
<p class="text-gray-500 text-sm">On-time: 92%</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold">Docs</p>
|
|
<p class="text-gray-500 text-sm">Valid: 128 • Expiring: 7</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold">Equipment</p>
|
|
<p class="text-gray-500 text-sm">Maintenance due: 3</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-semibold">Daily Activity Log</h2>
|
|
<div>
|
|
<button class="chip px-4 py-2 text-sm font-semibold bg-white">Today</button>
|
|
<button class="chip px-4 py-2 text-sm font-semibold">This week</button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 space-y-4">
|
|
<div class="panel p-6">
|
|
<h3 class="font-semibold">Floor Slab</h3>
|
|
<p class="text-sm text-gray-500">Project Manager — Eng. Rahim</p>
|
|
<p class="text-xs text-gray-500">Habiganj 9746tr — Ongoing</p>
|
|
<ul class="list-disc list-inside text-sm mt-2 space-y-1">
|
|
<li>Ensure rebar spacing matches BOQ specification.</li>
|
|
<li>Check curing process for foundation concrete.</li>
|
|
<li>Verify column alignment before pouring.</li>
|
|
</ul>
|
|
<div class="flex justify-between items-center mt-4 text-sm text-gray-500">
|
|
<span>Sep 17, 2025 — 06:45 PM</span>
|
|
<span class="flex items-center gap-2"><i-o-photo class="h-5 w-5"></i-o-photo> 2 photos</span>
|
|
</div>
|
|
</div>
|
|
<div class="panel p-6">
|
|
<h3 class="font-semibold">Safety Meeting</h3>
|
|
<p class="text-sm text-gray-500">Supervisor — T. Coleman</p>
|
|
<p class="text-xs text-gray-500">Kukatata wt46tr — Ongoing</p>
|
|
<ul class="list-disc list-inside text-sm mt-2 space-y-1">
|
|
<li>Toolbox talk completed (PPE + ladder safety)</li>
|
|
<li>Attendance captured with GPS check-in.</li>
|
|
<li>PPE checklist verified (helmets, vests).</li>
|
|
<li>Hazards documented with photo proof.</li>
|
|
</ul>
|
|
<div class="flex justify-between items-center mt-4 text-sm text-gray-500">
|
|
<span>Sep 17, 2025 — 08:10 AM</span>
|
|
<span class="flex items-center gap-2 text-green-600"><i-o-check-circle class="h-5 w-5"></i-o-check-circle> Completed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endblock %}
|