Add navigation workspace switcher v1

This commit is contained in:
A R R R Associates
2026-07-06 12:28:55 +05:30
parent 47f5080d43
commit bfb1fca43a
6 changed files with 235 additions and 20 deletions
@@ -0,0 +1,34 @@
{% extends "ui/templates/base/layout.html" %}
{% block content %}
<section class="mx-auto max-w-7xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
<div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">Navigation Centre</p>
<div class="mt-2 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
<div>
<h1 class="text-2xl font-bold text-slate-900">My Workspaces</h1>
<p class="mt-1 max-w-3xl text-sm text-slate-500">Open the workspace allowed for your role. This page does not replace any existing module; it only gives a clean entry point to dashboards and reports.</p>
</div>
<a href="/reports" class="inline-flex items-center justify-center rounded-2xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-800">Open Reports Centre</a>
</div>
</div>
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
{% for card in workspace_cards %}
<a href="{{ card.url }}" class="group rounded-3xl border {% if current_workspace_code == card.code %}border-brand-400 bg-brand-50{% else %}border-slate-200 bg-white{% endif %} p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-brand-300 hover:shadow-md">
<div class="flex items-start justify-between gap-3">
<div>
<span class="inline-flex rounded-full {% if current_workspace_code == card.code %}bg-brand-600 text-white{% else %}bg-slate-100 text-slate-600{% endif %} px-3 py-1 text-xs font-semibold">{{ card.badge }}</span>
<h2 class="mt-4 text-lg font-bold text-slate-900">{{ card.title }}</h2>
</div>
<span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-500 ring-1 ring-slate-200 group-hover:text-brand-700">Open</span>
</div>
<p class="mt-3 text-sm leading-6 text-slate-500">{{ card.description }}</p>
{% if current_workspace_code == card.code %}
<p class="mt-4 text-xs font-semibold uppercase tracking-wide text-brand-700">Current workspace</p>
{% endif %}
</a>
{% endfor %}
</div>
</section>
{% endblock %}