adds statistics

2026-02-16 19:15:23 +01:00
parent 2311cd8265
commit 9206453394
12 changed files with 613 additions and 58 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,7 @@ import { DashboardPage } from "./pages/DashboardPage";
 import { TimeEntriesPage } from "./pages/TimeEntriesPage";
 import { ClientsPage } from "./pages/ClientsPage";
 import { ProjectsPage } from "./pages/ProjectsPage";
+import { StatisticsPage } from "./pages/StatisticsPage";

 function App() {
  return (
@@ -31,6 +32,7 @@ function App() {
          <Route path="time-entries" element={<TimeEntriesPage />} />
          <Route path="clients" element={<ClientsPage />} />
          <Route path="projects" element={<ProjectsPage />} />
+          <Route path="statistics" element={<StatisticsPage />} />
        </Route>
      </Routes>
    </AuthProvider>
--- a/frontend/src/api/auth.ts
+++ b/frontend/src/api/auth.ts
@@ -1,7 +1,8 @@
 import axios from "axios";
 import type { User } from "@/types";

-const AUTH_BASE = import.meta.env.VITE_API_URL + "/auth";
+const AUTH_BASE =
+  (import.meta.env.VITE_API_URL || `${window.location.origin}/api`) + "/auth";

 export const authApi = {
  login: (): void => {
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosError } from "axios";

 const apiClient = axios.create({
-  baseURL: import.meta.env.VITE_API_URL,
+  baseURL: import.meta.env.VITE_API_URL || `${window.location.origin}/api`,
  headers: {
    "Content-Type": "application/json",
  },
--- a/frontend/src/api/timeEntries.ts
+++ b/frontend/src/api/timeEntries.ts
@@ -5,6 +5,8 @@ import type {
  CreateTimeEntryInput,
  UpdateTimeEntryInput,
  TimeEntryFilters,
+  TimeStatistics,
+  StatisticsFilters,
 } from '@/types';

 export const timeEntriesApi = {
@@ -15,6 +17,13 @@ export const timeEntriesApi = {
    return data;
  },

+  getStatistics: async (filters?: StatisticsFilters): Promise<TimeStatistics> => {
+    const { data } = await apiClient.get<TimeStatistics>('/time-entries/statistics', {
+      params: filters,
+    });
+    return data;
+  },
+
  create: async (input: CreateTimeEntryInput): Promise<TimeEntry> => {
    const { data } = await apiClient.post<TimeEntry>('/time-entries', input);
    return data;
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,15 +1,23 @@
-import { NavLink } from 'react-router-dom';
-import { Clock, List, Briefcase, FolderOpen, LogOut } from 'lucide-react';
-import { useAuth } from '@/contexts/AuthContext';
+import { NavLink } from "react-router-dom";
+import {
+  Clock,
+  List,
+  Briefcase,
+  FolderOpen,
+  BarChart3,
+  LogOut,
+} from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";

 export function Navbar() {
  const { user, logout } = useAuth();

  const navItems = [
-    { to: '/dashboard', label: 'Dashboard', icon: Clock },
-    { to: '/time-entries', label: 'Time Entries', icon: List },
-    { to: '/clients', label: 'Clients', icon: Briefcase },
-    { to: '/projects', label: 'Projects', icon: FolderOpen },
+    { to: "/dashboard", label: "Dashboard", icon: Clock },
+    { to: "/time-entries", label: "Time Entries", icon: List },
+    { to: "/statistics", label: "Statistics", icon: BarChart3 },
+    { to: "/clients", label: "Clients", icon: Briefcase },
+    { to: "/projects", label: "Projects", icon: FolderOpen },
  ];

  return (
@@ -19,7 +27,9 @@ export function Navbar() {
          <div className="flex">
            <div className="flex-shrink-0 flex items-center">
              <Clock className="h-8 w-8 text-primary-600" />
-              <span className="ml-2 text-xl font-bold text-gray-900">TimeTracker</span>
+              <span className="ml-2 text-xl font-bold text-gray-900">
+                TimeTracker
+              </span>
            </div>
            <div className="hidden sm:ml-8 sm:flex sm:space-x-4">
              {navItems.map((item) => (
@@ -29,8 +39,8 @@ export function Navbar() {
                  className={({ isActive }) =>
                    `inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
                      isActive
-                        ? 'text-primary-600 bg-primary-50'
-                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
+                        ? "text-primary-600 bg-primary-50"
+                        : "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
                    }`
                  }
                >
@@ -63,7 +73,7 @@ export function Navbar() {
              to={item.to}
              className={({ isActive }) =>
                `flex flex-col items-center p-2 text-xs font-medium rounded-md ${
-                  isActive ? 'text-primary-600' : 'text-gray-600'
+                  isActive ? "text-primary-600" : "text-gray-600"
                }`
              }
            >
@@ -75,4 +85,4 @@ export function Navbar() {
      </div>
    </nav>
  );
-}
+}
--- a/frontend/src/hooks/useTimeEntries.ts
+++ b/frontend/src/hooks/useTimeEntries.ts
@@ -1,19 +1,24 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { timeEntriesApi } from '@/api/timeEntries';
-import type { CreateTimeEntryInput, UpdateTimeEntryInput, TimeEntryFilters } from '@/types';
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { timeEntriesApi } from "@/api/timeEntries";
+import type {
+  CreateTimeEntryInput,
+  UpdateTimeEntryInput,
+  TimeEntryFilters,
+  StatisticsFilters,
+} from "@/types";

 export function useTimeEntries(filters?: TimeEntryFilters) {
  const queryClient = useQueryClient();

  const { data, isLoading, error } = useQuery({
-    queryKey: ['timeEntries', filters],
+    queryKey: ["timeEntries", filters],
    queryFn: () => timeEntriesApi.getAll(filters),
  });

  const createTimeEntry = useMutation({
    mutationFn: (input: CreateTimeEntryInput) => timeEntriesApi.create(input),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+      queryClient.invalidateQueries({ queryKey: ["timeEntries"] });
    },
  });

@@ -21,14 +26,14 @@ export function useTimeEntries(filters?: TimeEntryFilters) {
    mutationFn: ({ id, input }: { id: string; input: UpdateTimeEntryInput }) =>
      timeEntriesApi.update(id, input),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+      queryClient.invalidateQueries({ queryKey: ["timeEntries"] });
    },
  });

  const deleteTimeEntry = useMutation({
    mutationFn: (id: string) => timeEntriesApi.delete(id),
    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+      queryClient.invalidateQueries({ queryKey: ["timeEntries"] });
    },
  });

@@ -40,4 +45,17 @@ export function useTimeEntries(filters?: TimeEntryFilters) {
    updateTimeEntry,
    deleteTimeEntry,
  };
-}
+}
+
+export function useStatistics(filters?: StatisticsFilters) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["statistics", filters],
+    queryFn: () => timeEntriesApi.getStatistics(filters),
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+  };
+}
--- a/frontend/src/pages/StatisticsPage.tsx
+++ b/frontend/src/pages/StatisticsPage.tsx
@@ -0,0 +1,259 @@
+import { useState } from "react";
+import {
+  BarChart3,
+  Calendar,
+  Building2,
+  FolderOpen,
+  Clock,
+} from "lucide-react";
+import { useStatistics } from "@/hooks/useTimeEntries";
+import { useClients } from "@/hooks/useClients";
+import { useProjects } from "@/hooks/useProjects";
+import { formatDuration } from "@/utils/dateUtils";
+import type { StatisticsFilters } from "@/types";
+
+export function StatisticsPage() {
+  const [filters, setFilters] = useState<StatisticsFilters>({});
+  const { data: statistics, isLoading } = useStatistics(filters);
+  const { clients } = useClients();
+  const { projects } = useProjects();
+
+  const handleFilterChange = (
+    key: keyof StatisticsFilters,
+    value: string | undefined,
+  ) => {
+    setFilters((prev) => ({
+      ...prev,
+      [key]: value || undefined,
+    }));
+  };
+
+  const clearFilters = () => {
+    setFilters({});
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900">Statistics</h1>
+        <p className="mt-1 text-sm text-gray-600">
+          View your working hours with filters
+        </p>
+      </div>
+
+      {/* Filters */}
+      <div className="card">
+        <div className="flex items-center gap-2 mb-4">
+          <BarChart3 className="h-5 w-5 text-primary-600" />
+          <h2 className="text-lg font-semibold text-gray-900">Filters</h2>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {/* Date Range */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              <span className="flex items-center gap-1">
+                <Calendar className="h-4 w-4" />
+                From Date
+              </span>
+            </label>
+            <input
+              type="date"
+              value={filters.startDate ? filters.startDate.split("T")[0] : ""}
+              onChange={(e) =>
+                handleFilterChange(
+                  "startDate",
+                  e.target.value ? `${e.target.value}T00:00:00` : undefined,
+                )
+              }
+              className="input"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              <span className="flex items-center gap-1">
+                <Calendar className="h-4 w-4" />
+                To Date
+              </span>
+            </label>
+            <input
+              type="date"
+              value={filters.endDate ? filters.endDate.split("T")[0] : ""}
+              onChange={(e) =>
+                handleFilterChange(
+                  "endDate",
+                  e.target.value ? `${e.target.value}T23:59:59` : undefined,
+                )
+              }
+              className="input"
+            />
+          </div>
+
+          {/* Client Filter */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              <span className="flex items-center gap-1">
+                <Building2 className="h-4 w-4" />
+                Client
+              </span>
+            </label>
+            <select
+              value={filters.clientId || ""}
+              onChange={(e) =>
+                handleFilterChange("clientId", e.target.value || undefined)
+              }
+              className="input"
+            >
+              <option value="">All Clients</option>
+              {clients?.map((client) => (
+                <option key={client.id} value={client.id}>
+                  {client.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Project Filter */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              <span className="flex items-center gap-1">
+                <FolderOpen className="h-4 w-4" />
+                Project
+              </span>
+            </label>
+            <select
+              value={filters.projectId || ""}
+              onChange={(e) =>
+                handleFilterChange("projectId", e.target.value || undefined)
+              }
+              className="input"
+            >
+              <option value="">All Projects</option>
+              {projects?.map((project) => (
+                <option key={project.id} value={project.id}>
+                  {project.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        {/* Clear Filters Button */}
+        {(filters.startDate ||
+          filters.endDate ||
+          filters.clientId ||
+          filters.projectId) && (
+          <div className="mt-4">
+            <button onClick={clearFilters} className="btn btn-secondary">
+              Clear Filters
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Total Hours Display */}
+      <div className="card bg-gradient-to-br from-primary-50 to-primary-100 border-primary-200">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium text-primary-700">
+              Total Working Time
+            </p>
+            <p className="text-4xl font-bold text-primary-900 mt-1">
+              {isLoading ? (
+                <span className="text-2xl">Loading...</span>
+              ) : (
+                formatDuration(statistics?.totalSeconds || 0)
+              )}
+            </p>
+          </div>
+          <div className="p-4 bg-primary-200 rounded-full">
+            <Clock className="h-8 w-8 text-primary-700" />
+          </div>
+        </div>
+        <p className="mt-2 text-sm text-primary-600">
+          {statistics?.entryCount || 0} time entries
+        </p>
+      </div>
+
+      {/* Breakdown by Project */}
+      {statistics && statistics.byProject.length > 0 && (
+        <div className="card">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            By Project
+          </h3>
+          <div className="space-y-3">
+            {statistics.byProject.map((project) => (
+              <div
+                key={project.projectId}
+                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+              >
+                <div className="flex items-center gap-3">
+                  <div
+                    className="w-3 h-3 rounded-full"
+                    style={{
+                      backgroundColor: project.projectColor || "#6b7280",
+                    }}
+                  />
+                  <span className="font-medium text-gray-900">
+                    {project.projectName}
+                  </span>
+                  <span className="text-sm text-gray-500">
+                    ({project.entryCount} entries)
+                  </span>
+                </div>
+                <span className="font-mono font-semibold text-gray-900">
+                  {formatDuration(project.totalSeconds)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Breakdown by Client */}
+      {statistics && statistics.byClient.length > 0 && (
+        <div className="card">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            By Client
+          </h3>
+          <div className="space-y-3">
+            {statistics.byClient.map((client) => (
+              <div
+                key={client.clientId}
+                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+              >
+                <div className="flex items-center gap-3">
+                  <Building2 className="h-4 w-4 text-gray-400" />
+                  <span className="font-medium text-gray-900">
+                    {client.clientName}
+                  </span>
+                  <span className="text-sm text-gray-500">
+                    ({client.entryCount} entries)
+                  </span>
+                </div>
+                <span className="font-mono font-semibold text-gray-900">
+                  {formatDuration(client.totalSeconds)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!isLoading && statistics && statistics.entryCount === 0 && (
+        <div className="card text-center py-12">
+          <BarChart3 className="h-12 w-12 text-gray-300 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900">
+            No data available
+          </h3>
+          <p className="text-gray-500 mt-1">
+            No time entries found for the selected filters.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -56,6 +56,41 @@ export interface TimeEntryFilters {
  limit?: number;
 }

+export interface StatisticsFilters {
+  startDate?: string;
+  endDate?: string;
+  projectId?: string;
+  clientId?: string;
+}
+
+export interface ProjectStatistics {
+  projectId: string;
+  projectName: string;
+  projectColor: string | null;
+  totalSeconds: number;
+  entryCount: number;
+}
+
+export interface ClientStatistics {
+  clientId: string;
+  clientName: string;
+  totalSeconds: number;
+  entryCount: number;
+}
+
+export interface TimeStatistics {
+  totalSeconds: number;
+  entryCount: number;
+  byProject: ProjectStatistics[];
+  byClient: ClientStatistics[];
+  filters: {
+    startDate: string | null;
+    endDate: string | null;
+    projectId: string | null;
+    clientId: string | null;
+  };
+}
+
 export interface PaginatedTimeEntries {
  entries: TimeEntry[];
  pagination: {
@@ -102,4 +137,4 @@ export interface UpdateTimeEntryInput {
  endTime?: string;
  description?: string;
  projectId?: string;
-}
+}