fix(routine): resolove routine blocker logic bug and white screen

feat(gamification): add streak bonuses, tooltip, and improved history details

fix(ep): resolve double counting ep bug

ui: update app icon and translations

client/src/App.tsx

@@ -50,6 +50,8 @@ import AiChatPage from "@/pages/AiChatPage";
 import FocusRoutinePage from "@/pages/FocusRoutinePage";
 
 
+import { useRoutineBlocker } from './components/RoutineBlocker';
+
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { User } from "@shared/schema";
 import { Loader2 } from "lucide-react";
@@ -58,6 +60,7 @@ import { Loader2 } from "lucide-react";
 function App() {
   const { t } = useTranslation();
   const [, setLocation] = useLocation();
+  const isBlocked = useRoutineBlocker();
 
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isTaskDetailsOpen, setIsTaskDetailsOpen] = useState(false);
@@ -263,207 +266,231 @@ function App() {
   }
 
   if (!user) {
+    // Redirect to setup if no admin user exists
+    if (setupStatus && !setupStatus.isSetup) {
+      return (
+        <Switch>
+          <Route path="/setup" component={SetupWizard} />
+          <Route component={SetupWizard} />
+        </Switch>
+      );
+    }
+
+    if (isBlocked) {
+      return (
+        <div className="min-h-screen bg-background w-full">
+          <Switch>
+            <Route path="/focus/routine/:type" component={FocusRoutinePage} />
+            {/* Catch all redirects to nothing, the hook handles the push to routine page */}
+            <Route component={() => <div />} />
+          </Switch>
+          <Toaster />
+        </div>
+      );
+    }
+
     return (
-      <Switch>
-        <Route path="/forgot-password" component={ForgotPasswordPage} />
-        <Route path="/reset-password" component={ResetPasswordPage} />
-        <Route component={AuthPage} />
-      </Switch>
+      <TooltipProvider>
+        <SidebarProvider>
+          <AppSidebar user={user} />
+          <SidebarInset>
+            <div className="min-h-screen bg-background flex flex-col">
+              {user && (
+                <header className="flex h-16 shrink-0 items-center gap-2 border-b pl-4 pr-6">
+                  <SidebarTrigger />
+                  <div className="flex-1" />
+                  <div className="flex items-center gap-2">
+                    <Button variant="ghost" size="icon" onClick={() => setLocation('/notifications')}>
+                      {/* Bell icon would go here */}
+                    </Button>
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-yellow-500 font-bold">★ {user.xp}</span>
+                      <span className="text-sm text-orange-500 font-bold">🔥 {user.currentStreak}</span>
+                    </div>
+                  </div>
+                </header>
+              )}
+
+              <main className="flex-1 p-4 md:p-6 max-w-screen-2xl mx-auto w-full relative">
+                <Switch>
+                  <Route path="/">
+                    <FocusMode
+                      tasks={tasks}
+                      onTaskUpdate={handleTaskUpdate}
+                      onTaskEdit={handleTaskClick}
+                      onTaskDelete={handleTaskDelete}
+                      onStartTimer={startTimer}
+                      onStopTimer={stopTimer}
+                      onNavigateToTasks={() => setLocation('/tasks')}
+                    />
+                  </Route>
+                  <Route path="/tasks">
+                    <TasksWithCalendar
+                      tasks={tasks}
+                      onTaskUpdate={handleTaskUpdate}
+                      onTaskEdit={handleTaskClick}
+                      onTaskDelete={handleTaskDelete}
+                      onStartTimer={startTimer}
+                      onStopTimer={stopTimer}
+                    />
+                  </Route>
+                  <Route path="/calendar">
+                    <CalendarView
+                      tasks={tasks}
+                      onTaskDrop={handleTaskDrop}
+                      onTaskClick={handleTaskClick}
+                      onDateSelect={(date) => console.log('Date selected:', date.toLocaleDateString())}
+                      onTaskUpdate={handleTaskUpdate}
+                      onTaskEdit={handleTaskClick}
+                      onTaskDelete={handleTaskDelete}
+                      onStartTimer={startTimer}
+                      onStopTimer={stopTimer}
+                    />
+                  </Route>
+                  <Route path="/kanban">
+                    <KanbanBoard
+                      tasks={tasks}
+                      onTaskStatusChange={handleTaskStatusChange}
+                      onTaskUpdate={handleTaskUpdate}
+                      onTaskClick={handleTaskClick}
+                      onTaskDelete={handleTaskDelete}
+                      onStartTimer={startTimer}
+                      onStopTimer={stopTimer}
+                    />
+                  </Route>
+                  <Route path="/weeklist">
+                    <WeekListView
+                      tasks={tasks}
+                      onTaskUpdate={handleTaskUpdate}
+                      onTaskEdit={handleTaskClick}
+                      onTaskDelete={handleTaskDelete}
+                      onStartTimer={startTimer}
+                      onStopTimer={stopTimer}
+                    />
+                  </Route>
+                  <Route path="/templates">
+                    <ProjectTemplate
+                      onCreateFromTemplate={handleCreateFromTemplate}
+                      onCreateTasks={(newTasks) => {
+                        queryClient.setQueryData(['/api/tasks'], (old: Task[] = []) => [...old, ...newTasks]);
+                        queryClient.invalidateQueries({ queryKey: ['/api/tasks'] });
+                      }}
+                      onNavigateToSettings={() => setLocation('/settings')}
+                    />
+                  </Route>
+                  <Route path="/achievements">
+                    {user ? <AchievementsPage user={user} /> : <AuthPage />}
+                  </Route>
+
+                  <Route path="/unscheduled">
+                    {user ? (
+                      <UnscheduledTasksPage
+                        user={user}
+                        onToggleCompletion={(taskId, currentStatus) => handleTaskStatusChange(taskId, currentStatus === 'done' ? 'todo' : 'done')}
+                        onDelete={(id) => setDeleteTaskId(id)}
+                        onUpdate={handleTaskUpdate}
+                        onSelect={setSelectedTask}
+                      />
+                    ) : (
+                      <AuthPage />
+                    )}
+                  </Route>
+                  <Route path="/leaderboard">
+                    <LeaderboardPage />
+                  </Route>
+                  <Route path="/ai">
+                    <AiChatPage />
+                  </Route>
+                  <Route path="/settings">
+                    <Settings onNavigateToTemplates={() => setLocation('/templates')} />
+                  </Route>
+
+                  {/* Admin Route */}
+                  {user.role === 'admin' && (
+                    <>
+                      <Route path="/admin/users" component={AdminUserManagement} />
+                      <Route path="/admin/settings" component={AdminSettings} />
+                    </>
+                  )}
+
+                  <Route path="/focus/routine/:type" component={FocusRoutinePage} />
+                  <Route component={NotFound} />
+                </Switch>
+              </main>
+
+              {/* Floating Action Button */}
+              <div className="fixed bottom-8 right-8 z-[100]">
+                <Button
+                  size="icon"
+                  className="h-14 w-14 rounded-full shadow-2xl bg-gradient-to-r from-violet-600 to-indigo-600 hover:scale-110 transition-transform duration-200"
+                  onClick={() => setIsCreateModalOpen(true)}
+                  data-testid="fab-create-task"
+                >
+                  <Plus className="h-6 w-6 text-white" />
+                </Button>
+              </div>
+              <CommandPalette
+                onNavigate={(path) => setLocation(path.startsWith('/') ? path : `/${path}`)}
+                onCreateTask={() => setIsCreateModalOpen(true)}
+              />
+
+              <PomodoroOverlay
+                isOpen={showPomodoro}
+                onClose={() => setShowPomodoro(false)}
+                taskId={activePomodoroTaskId}
+                taskTitle={tasks.find(t => t.id === activePomodoroTaskId)?.title || 'Quick Focus'}
+                onCompleteTask={(id) => handleTaskUpdate(id, { status: 'done', isTracking: false })}
+              />
+
+              <Toaster />
+
+              <TaskCreationModal
+                isOpen={isCreateModalOpen}
+                onClose={() => setIsCreateModalOpen(false)}
+                onSave={handleCreateTask}
+              />
+
+              <TaskDetailsModal
+                isOpen={isTaskDetailsOpen}
+                onClose={handleTaskDetailsClose}
+                task={selectedTask}
+                onSave={handleTaskDetailsSave}
+                labels={labels}
+                onNavigate={(id) => {
+                  const t = tasks.find(x => x.id === id);
+                  if (t) setSelectedTask(t);
+                }}
+              />
+
+              <AlertDialog open={deleteTaskId !== null} onOpenChange={(open) => !open && setDeleteTaskId(null)}>
+                <AlertDialogContent data-testid="dialog-delete-confirmation">
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>{t('deleteConfirmation.title')}</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      {t('deleteConfirmation.description')}
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel data-testid="button-cancel-delete">
+                      {t('deleteConfirmation.cancel')}
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={confirmTaskDelete}
+                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                      data-testid="button-confirm-delete"
+                    >
+                      {t('deleteConfirmation.confirm')}
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          </SidebarInset>
+        </SidebarProvider>
+      </TooltipProvider>
     );
   }
-
-  return (
-    <TooltipProvider>
-      <SidebarProvider>
-        <AppSidebar user={user} />
-        <SidebarInset>
-          <div className="flex flex-col min-h-screen bg-background">
-            {/* Mobile Header trigger */}
-            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 md:hidden">
-              <SidebarTrigger className="-ml-1" />
-              <div className="font-semibold">{t('app.title')}</div>
-            </header>
-
-            {/* Main Content */}
-            <main className="flex-1 p-4 md:p-6 max-w-screen-2xl mx-auto w-full relative">
-              <Switch>
-                <Route path="/">
-                  <FocusMode
-                    tasks={tasks}
-                    onTaskUpdate={handleTaskUpdate}
-                    onTaskEdit={handleTaskClick}
-                    onTaskDelete={handleTaskDelete}
-                    onStartTimer={startTimer}
-                    onStopTimer={stopTimer}
-                    onNavigateToTasks={() => setLocation('/tasks')}
-                  />
-                </Route>
-                <Route path="/tasks">
-                  <TasksWithCalendar
-                    tasks={tasks}
-                    onTaskUpdate={handleTaskUpdate}
-                    onTaskEdit={handleTaskClick}
-                    onTaskDelete={handleTaskDelete}
-                    onStartTimer={startTimer}
-                    onStopTimer={stopTimer}
-                  />
-                </Route>
-                <Route path="/calendar">
-                  <CalendarView
-                    tasks={tasks}
-                    onTaskDrop={handleTaskDrop}
-                    onTaskClick={handleTaskClick}
-                    onDateSelect={(date) => console.log('Date selected:', date.toLocaleDateString())}
-                    onTaskUpdate={handleTaskUpdate}
-                    onTaskEdit={handleTaskClick}
-                    onTaskDelete={handleTaskDelete}
-                    onStartTimer={startTimer}
-                    onStopTimer={stopTimer}
-                  />
-                </Route>
-                <Route path="/kanban">
-                  <KanbanBoard
-                    tasks={tasks}
-                    onTaskStatusChange={handleTaskStatusChange}
-                    onTaskUpdate={handleTaskUpdate}
-                    onTaskClick={handleTaskClick}
-                    onTaskDelete={handleTaskDelete}
-                    onStartTimer={startTimer}
-                    onStopTimer={stopTimer}
-                  />
-                </Route>
-                <Route path="/weeklist">
-                  <WeekListView
-                    tasks={tasks}
-                    onTaskUpdate={handleTaskUpdate}
-                    onTaskEdit={handleTaskClick}
-                    onTaskDelete={handleTaskDelete}
-                    onStartTimer={startTimer}
-                    onStopTimer={stopTimer}
-                  />
-                </Route>
-                <Route path="/templates">
-                  <ProjectTemplate
-                    onCreateFromTemplate={handleCreateFromTemplate}
-                    onCreateTasks={(newTasks) => {
-                      queryClient.setQueryData(['/api/tasks'], (old: Task[] = []) => [...old, ...newTasks]);
-                      queryClient.invalidateQueries({ queryKey: ['/api/tasks'] });
-                    }}
-                    onNavigateToSettings={() => setLocation('/settings')}
-                  />
-                </Route>
-                <Route path="/achievements">
-                  {user ? <AchievementsPage user={user} /> : <AuthPage />}
-                </Route>
-
-                <Route path="/unscheduled">
-                  {user ? (
-                    <UnscheduledTasksPage
-                      user={user}
-                      onToggleCompletion={(taskId, currentStatus) => handleTaskStatusChange(taskId, currentStatus === 'done' ? 'todo' : 'done')}
-                      onDelete={(id) => setDeleteTaskId(id)}
-                      onUpdate={handleTaskUpdate}
-                      onSelect={setSelectedTask}
-                    />
-                  ) : (
-                    <AuthPage />
-                  )}
-                </Route>
-                <Route path="/leaderboard">
-                  <LeaderboardPage />
-                </Route>
-                <Route path="/ai">
-                  <AiChatPage />
-                </Route>
-                <Route path="/settings">
-                  <Settings onNavigateToTemplates={() => setLocation('/templates')} />
-                </Route>
-
-                {/* Admin Route */}
-                {user.role === 'admin' && (
-                  <>
-                    <Route path="/admin/users" component={AdminUserManagement} />
-                    <Route path="/admin/settings" component={AdminSettings} />
-                  </>
-                )}
-
-                <Route path="/focus/routine/:type" component={FocusRoutinePage} />
-                <Route component={NotFound} />
-              </Switch>
-            </main>
-
-            {/* Floating Action Button */}
-            <div className="fixed bottom-8 right-8 z-[100]">
-              <Button
-                size="icon"
-                className="h-14 w-14 rounded-full shadow-2xl bg-gradient-to-r from-violet-600 to-indigo-600 hover:scale-110 transition-transform duration-200"
-                onClick={() => setIsCreateModalOpen(true)}
-                data-testid="fab-create-task"
-              >
-                <Plus className="h-6 w-6 text-white" />
-              </Button>
-            </div>
-          </div>
-        </SidebarInset>
-      </SidebarProvider>
-
-      <CommandPalette
-        onNavigate={(path) => setLocation(path.startsWith('/') ? path : `/${path}`)}
-        onCreateTask={() => setIsCreateModalOpen(true)}
-      />
-
-      <PomodoroOverlay
-        isOpen={showPomodoro}
-        onClose={() => setShowPomodoro(false)}
-        taskId={activePomodoroTaskId}
-        taskTitle={tasks.find(t => t.id === activePomodoroTaskId)?.title || 'Quick Focus'}
-        onCompleteTask={(id) => handleTaskUpdate(id, { status: 'done', isTracking: false })}
-      />
-
-      <Toaster />
-
-      <TaskCreationModal
-        isOpen={isCreateModalOpen}
-        onClose={() => setIsCreateModalOpen(false)}
-        onSave={handleCreateTask}
-      />
-
-      <TaskDetailsModal
-        isOpen={isTaskDetailsOpen}
-        onClose={handleTaskDetailsClose}
-        task={selectedTask}
-        onSave={handleTaskDetailsSave}
-        labels={labels}
-        onNavigate={(id) => {
-          const t = tasks.find(x => x.id === id);
-          if (t) setSelectedTask(t);
-        }}
-      />
-
-      <AlertDialog open={deleteTaskId !== null} onOpenChange={(open) => !open && setDeleteTaskId(null)}>
-        <AlertDialogContent data-testid="dialog-delete-confirmation">
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t('deleteConfirmation.title')}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t('deleteConfirmation.description')}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel data-testid="button-cancel-delete">
-              {t('deleteConfirmation.cancel')}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmTaskDelete}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              data-testid="button-confirm-delete"
-            >
-              {t('deleteConfirmation.confirm')}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </TooltipProvider>
-  );
 }
 
 export default App;
+