sankalp
2435061423
Replace Django default templates with Tailwind‑styled layout, add reusable sidebar/topbar, integrate Alpine.js and HTMX for interactivity, include Chart.js placeholder, and streamline markup for authenticated views. New Features - Introduce Tailwind CSS via django‑tailwind‑cli for consistent styling - Add Alpine.js and HTMX for client‑side behavior - Add Chart.js script for future visualisation - Create reusable sidebar and topbar components for authenticated templates Enhancements - Refactor base.html to reduce duplication and improve maintainability - Add dynamic title block and extra_head/slots for extensibility - Adopt responsive layout with min‑h-screen and fixed navigation Bug Fixes- Remove stale static CSS reference that caused layout issues - Fix missing user role display and related styling - Correct viewport meta tag and charset handling
62 lines
7.1 KiB
HTML
62 lines
7.1 KiB
HTML
<aside class="fixed left-0 top-16 h-[calc(100vh-4rem)] w-64 bg-white border-r border-gray-200 transform transition-transform duration-300 z-20 lg:translate-x-0"
|
|
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
|
|
<div class="p-4 space-y-1 overflow-y-auto h-full">
|
|
<div class="mb-4">
|
|
<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3">Main</div>
|
|
</div>
|
|
<a href="{% url 'home' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if request.path == '/' %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
|
|
Dashboard
|
|
</a>
|
|
<a href="{% url 'project_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'projects' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
|
|
Projects
|
|
</a>
|
|
<a href="{% url 'board_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'board' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/></svg>
|
|
Kanban
|
|
</a>
|
|
<a href="{% url 'issue_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'issues' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Issues
|
|
</a>
|
|
<a href="{% url 'ticket_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'tickets' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg>
|
|
Tickets
|
|
</a>
|
|
<div class="mb-4 mt-6">
|
|
<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3">Finance</div>
|
|
</div>
|
|
<a href="{% url 'invoice_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'invoices' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
|
Invoices
|
|
</a>
|
|
<a href="{% url 'expense_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'expenses' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
|
Expenses
|
|
</a>
|
|
<a href="{% url 'payment_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'payments' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
|
Payments
|
|
</a>
|
|
<a href="{% url 'team_payment_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'team-payments' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
Payroll
|
|
</a>
|
|
{% if user.is_admin %}
|
|
<div class="mb-4 mt-6">
|
|
<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3">Admin</div>
|
|
</div>
|
|
<a href="{% url 'activity_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'activity' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Activity Log
|
|
</a>
|
|
<a href="{% url 'user_list' %}" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium {% if 'users' in request.path %}bg-blue-50 text-blue-700{% else %}text-gray-700 hover:bg-gray-100{% endif %} transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>
|
|
Users
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</aside>
|
|
<div class="fixed inset-0 bg-black/20 z-10 lg:hidden" x-show="sidebarOpen" @click="sidebarOpen = false" x-cloak></div>
|