update

backend/prisma/migrations/20260218150104_add_user_full_name/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "full_name" VARCHAR(255);

backend/prisma/schema.prisma

@@ -10,6 +10,7 @@ datasource db {
 model User {
   id        String   @id @db.VarChar(255)
   username  String   @db.VarChar(255)
+  fullName  String?  @db.VarChar(255) @map("full_name")
   email     String   @db.VarChar(255)
   createdAt DateTime @default(now()) @map("created_at")
   updatedAt DateTime @updatedAt @map("updated_at")

backend/src/auth/oidc.ts

@@ -92,6 +92,7 @@ export async function getUserInfo(tokenSet: TokenSet): Promise<AuthenticatedUser
   const id = String(claims.sub);
   const username = String(userInfo.preferred_username || claims.preferred_username || claims.name || id);
   const email = String(userInfo.email || claims.email || '');
+  const fullName = String(userInfo.name || claims.name || '') || null;
   
   if (!email) {
     throw new Error('Email not provided by OIDC provider');
@@ -100,6 +101,7 @@ export async function getUserInfo(tokenSet: TokenSet): Promise<AuthenticatedUser
   return {
     id,
     username,
+    fullName,
     email,
   };
 }

backend/src/middleware/auth.ts

@@ -32,11 +32,13 @@ export async function syncUser(user: AuthenticatedUser): Promise<void> {
     where: { id: user.id },
     update: {
       username: user.username,
+      fullName: user.fullName,
       email: user.email,
     },
     create: {
       id: user.id,
       username: user.username,
+      fullName: user.fullName,
       email: user.email,
     },
   });

backend/src/types/index.ts

@@ -3,6 +3,7 @@ import { Request } from 'express';
 export interface AuthenticatedUser {
   id: string;
   username: string;
+  fullName: string | null;
   email: string;
 }
 

frontend/src/components/Layout.tsx

@@ -6,8 +6,8 @@ export function Layout() {
   return (
     <div className="min-h-screen bg-gray-50">
       <Navbar />
-      <main className="pt-4 pb-24 px-4 sm:px-6 lg:px-8">
+      <main className="pt-4 pb-24">
-        <div className="max-w-7xl mx-auto">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <Outlet />
         </div>
       </main>

frontend/src/components/Navbar.tsx

@@ -114,8 +114,8 @@ export function Navbar() {
             </div>
           </div>
           <div className="flex items-center space-x-4">
-            <span className="text-sm text-gray-600 hidden sm:block">
+            <span className="text-sm font-medium text-gray-600 hidden sm:block">
-              {user?.username}
+              {user?.fullName || user?.username}
             </span>
             <button
               onClick={logout}

frontend/src/components/TimerWidget.tsx

@@ -80,8 +80,8 @@ export function TimerWidget() {
 
   if (isLoading) {
     return (
-      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg">
+      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-4 shadow-lg">
-        <div className="max-w-7xl mx-auto flex items-center justify-center">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center">
           <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
         </div>
       </div>
@@ -89,8 +89,8 @@ export function TimerWidget() {
   }
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg z-50">
+    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-4 shadow-lg z-50">
-      <div className="max-w-7xl mx-auto flex flex-wrap sm:flex-nowrap items-center gap-2 sm:justify-between">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-wrap sm:flex-nowrap items-center gap-2 sm:justify-between">
         {ongoingTimer ? (
           <>
             {/* Row 1 (mobile): timer + stop side by side. On sm+ dissolves into the parent flex row via contents. */}
@@ -183,7 +183,7 @@ export function TimerWidget() {
       </div>
 
       {error && (
-        <div className="max-w-7xl mx-auto mt-2">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-2">
           <p className="text-sm text-red-600">{error}</p>
         </div>
       )}

frontend/src/pages/StatisticsPage.tsx

@@ -19,14 +19,20 @@ export function StatisticsPage() {
   const { clients } = useClients();
   const { projects } = useProjects();
 
+  const filteredProjects = filters.clientId
+    ? (projects ?? []).filter((p) => p.clientId === filters.clientId)
+    : projects;
+
   const handleFilterChange = (
     key: keyof StatisticsFilters,
     value: string | undefined,
   ) => {
-    setFilters((prev) => ({
+    setFilters((prev) => {
-      ...prev,
+      const next = { ...prev, [key]: value || undefined };
-      [key]: value || undefined,
+      // When client changes, clear any project selection that may belong to a different client
-    }));
+      if (key === 'clientId') next.projectId = undefined;
+      return next;
+    });
   };
 
   const clearFilters = () => {
@@ -132,7 +138,7 @@ export function StatisticsPage() {
               className="input"
             >
               <option value="">All Projects</option>
-              {projects?.map((project) => (
+              {filteredProjects?.map((project) => (
                 <option key={project.id} value={project.id}>
                   {project.name}
                 </option>

frontend/src/types/index.ts

@@ -1,6 +1,7 @@
 export interface User {
   id: string;
   username: string;
+  fullName: string | null;
   email: string;
 }