mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-02-07 04:38:50 -06:00
3c3faf13d4
Migrate frontend from custom CSS to Tailwind CSS framework with comprehensive template updates and improved component structure. Breaking Changes: - Remove legacy CSS files (base.css, calendar.css, ui.css, etc.) - Replace with Tailwind-based styling system New Features: - Add Tailwind CSS configuration with PostCSS pipeline - Create new template components for admin, clients, invoices, projects, reports - Add form-bridge.css for smooth transition between legacy and Tailwind styles - Add default avatar SVG asset - Implement Tailwind-based kanban board template - Add comprehensive UI quick wins documentation Infrastructure: - Add package.json with Tailwind dependencies - Configure PostCSS and Tailwind build pipeline - Update .gitignore for Node modules and build artifacts Testing: - Add template rendering tests (test_tasks_templates.py) - Add UI component tests (test_ui_quick_wins.py) Templates Added: - Admin: dashboard, settings, system info, user management - Clients: list and detail views - Invoices: full CRUD templates with payment recording - Projects: list, detail, and Tailwind kanban views - Reports: comprehensive reporting templates - Timer: manual entry interface This commit represents the first phase of the UI redesign initiative, maintaining backward compatibility where needed while establishing the foundation for modern, responsive interfaces.
57 lines
3.2 KiB
HTML
57 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">Settings</h1>
|
|
<p class="text-text-muted-light dark:text-text-muted-dark">Configure system-wide application settings.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
|
|
<form method="POST">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
|
|
<div class="space-y-8">
|
|
<!-- General Settings -->
|
|
<div class="border-b border-border-light dark:border-border-dark pb-6">
|
|
<h2 class="text-lg font-semibold mb-4">General</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="timezone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Timezone</label>
|
|
<input type="text" name="timezone" id="timezone" value="{{ settings.timezone }}" required class="form-input">
|
|
</div>
|
|
<div>
|
|
<label for="currency" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Currency</label>
|
|
<input type="text" name="currency" id="currency" value="{{ settings.currency }}" required class="form-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timer Settings -->
|
|
<div class="border-b border-border-light dark:border-border-dark pb-6">
|
|
<h2 class="text-lg font-semibold mb-4">Timers</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="rounding_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Rounding (Minutes)</label>
|
|
<input type="number" name="rounding_minutes" id="rounding_minutes" value="{{ settings.rounding_minutes }}" required class="form-input">
|
|
</div>
|
|
<div>
|
|
<label for="idle_timeout_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Idle Timeout (Minutes)</label>
|
|
<input type="number" name="idle_timeout_minutes" id="idle_timeout_minutes" value="{{ settings.idle_timeout_minutes }}" required class="form-input">
|
|
</div>
|
|
<div class="md:col-span-2 flex items-center">
|
|
<input type="checkbox" name="single_active_timer" id="single_active_timer" {% if settings.single_active_timer %}checked{% endif %} class="h-4 w-4 rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
<label for="single_active_timer" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Allow only one active timer per user</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 pt-6 flex justify-end">
|
|
<button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg">Save Settings</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|