duzo zmian ux

static/css/style.css

@@ -123,4 +123,14 @@ input[type="checkbox"]:disabled::before {
 }
 input[type="checkbox"]:disabled {
   cursor: not-allowed;
+}
+
+#tempToggle {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+input.form-control {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }

static/js/expenses.js

@@ -0,0 +1,93 @@
+document.addEventListener("DOMContentLoaded", function() {
+    let expensesChart = null;
+    const rangeLabel = document.getElementById("chartRangeLabel");
+
+    function loadExpenses(range = "monthly", startDate = null, endDate = null) {
+        let url = '/admin/expenses_data?range=' + range;
+        if (startDate && endDate) {
+            url += `&start_date=${startDate}&end_date=${endDate}`;
+        }
+
+        fetch(url, {cache: "no-store"})
+        .then(response => response.json())
+        .then(data => {
+            const ctx = document.getElementById('expensesChart').getContext('2d');
+
+            if (expensesChart) {
+                expensesChart.destroy();
+            }
+
+            expensesChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: data.labels,
+                    datasets: [{
+                        label: 'Suma wydatków [PLN]',
+                        data: data.expenses,
+                        backgroundColor: '#0d6efd'
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+
+            if (startDate && endDate) {
+                rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
+            } else {
+                let labelText = "";
+                if (range === "monthly") labelText = "Widok: miesięczne";
+                else if (range === "quarterly") labelText = "Widok: kwartalne";
+                else if (range === "halfyearly") labelText = "Widok: półroczne";
+                else if (range === "yearly") labelText = "Widok: roczne";
+                rangeLabel.textContent = labelText;
+            }
+
+        })
+        .catch(error => {
+            console.error("Błąd pobierania danych:", error);
+        });
+    }
+
+    document.getElementById('loadExpensesBtn').addEventListener('click', function() {
+        loadExpenses();
+    });
+
+    document.querySelectorAll('.range-btn').forEach(btn => {
+        btn.addEventListener('click', function() {
+            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+            this.classList.add('active');
+            const range = this.getAttribute('data-range');
+            loadExpenses(range);
+        });
+    });
+
+    document.getElementById('customRangeBtn').addEventListener('click', function() {
+        const startDate = document.getElementById('startDate').value;
+        const endDate = document.getElementById('endDate').value;
+        if (startDate && endDate) {
+            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+            loadExpenses('custom', startDate, endDate);
+        } else {
+            alert("Proszę wybrać obie daty!");
+        }
+    });
+});
+
+document.addEventListener("DOMContentLoaded", function() {
+    const startDateInput = document.getElementById("startDate");
+    const endDateInput = document.getElementById("endDate");
+
+    const today = new Date();
+    const threeDaysAgo = new Date(today);
+    threeDaysAgo.setDate(today.getDate() - 7);
+
+    const formatDate = (d) => d.toISOString().split('T')[0];
+
+    startDateInput.value = formatDate(threeDaysAgo);
+    endDateInput.value = formatDate(today);
+});

static/js/toggle_button.js

@@ -0,0 +1,32 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const toggleBtn = document.getElementById("tempToggle");
+    const hiddenInput = document.getElementById("temporaryHidden");
+
+    // Inicjalizacja tooltipa
+    const tooltip = new bootstrap.Tooltip(toggleBtn);
+
+    // Funkcja aktualizująca wygląd
+    function updateToggle(isActive) {
+        if (isActive) {
+            toggleBtn.classList.remove("btn-outline-secondary");
+            toggleBtn.classList.add("btn-success");
+            toggleBtn.textContent = "Tymczasowa ✔️";
+        } else {
+            toggleBtn.classList.remove("btn-success");
+            toggleBtn.classList.add("btn-outline-secondary");
+            toggleBtn.textContent = "Tymczasowa";
+        }
+    }
+
+    // Inicjalizacja stanu
+    let active = toggleBtn.getAttribute("data-active") === "1";
+    updateToggle(active);
+
+    // Obsługa kliknięcia
+    toggleBtn.addEventListener("click", function() {
+        active = !active;
+        toggleBtn.setAttribute("data-active", active ? "1" : "0");
+        hiddenInput.value = active ? "1" : "0";
+        updateToggle(active);
+    });
+});