From 2c73d4d196c096942e4ea6ccc57c4e33188a7e52 Mon Sep 17 00:00:00 2001
From: ghaddaditw <40211818-ghaddaditw@users.noreply.replit.com>
Date: Sun, 8 Jun 2025 15:21:22 +0000
Subject: [PATCH] Add navigation button to return to dashboard from various
 pages

Introduces `PageHeader` component with a back-to-dashboard button and integrates it into AIPage, AnalyticsPage, FinancesPage, TasksPage, and VoicePage.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7e7c4e8-20cb-41c4-9d0e-79f48938fede
---
 client/src/components/ui/page-header.tsx |  50 ++++++++
 client/src/pages/AIPage.tsx              |   1 +
 client/src/pages/AnalyticsPage.tsx       |   1 +
 client/src/pages/FinancesPage.tsx        |   1 +
 client/src/pages/TasksPage.tsx           | 144 +++++++++++------------
 client/src/pages/VoicePage.tsx           |   1 +
 6 files changed, 126 insertions(+), 72 deletions(-)
 create mode 100644 client/src/components/ui/page-header.tsx

diff --git a/client/src/components/ui/page-header.tsx b/client/src/components/ui/page-header.tsx
new file mode 100644
index 0000000..4250860
--- /dev/null
+++ b/client/src/components/ui/page-header.tsx
@@ -0,0 +1,50 @@
+import { Link } from "wouter";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  showBackToDashboard?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function PageHeader({ 
+  title, 
+  description, 
+  showBackToDashboard = true, 
+  className,
+  children 
+}: PageHeaderProps) {
+  return (
+    <div className={cn("mb-6", className)}>
+      <div className="flex justify-between items-start mb-4">
+        <div className="flex-1">
+          {showBackToDashboard && (
+            <div className="mb-2">
+              <Link href="/dashboard">
+                <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  Back to Dashboard
+                </Button>
+              </Link>
+            </div>
+          )}
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{title}</h1>
+          {description && (
+            <p className="text-gray-600 dark:text-gray-300 mt-1">
+              {description}
+            </p>
+          )}
+        </div>
+        {children && (
+          <div className="flex items-center gap-2">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/pages/AIPage.tsx b/client/src/pages/AIPage.tsx
index d45e120..437c53d 100644
--- a/client/src/pages/AIPage.tsx
+++ b/client/src/pages/AIPage.tsx
@@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
+import { PageHeader } from "@/components/ui/page-header";
 import { useToast } from "@/hooks/use-toast";
 import Sidebar from "@/components/layout/Sidebar";
 import { Brain, MessageSquare, Lightbulb, Laugh, Send } from "lucide-react";
diff --git a/client/src/pages/AnalyticsPage.tsx b/client/src/pages/AnalyticsPage.tsx
index 54780c4..d321df7 100644
--- a/client/src/pages/AnalyticsPage.tsx
+++ b/client/src/pages/AnalyticsPage.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PageHeader } from "@/components/ui/page-header";
 import Header from "@/components/layout/Header";
 import Sidebar from "@/components/layout/Sidebar";
 import { BarChart3, TrendingUp, TrendingDown, Calendar, Target, DollarSign, Activity } from "lucide-react";
diff --git a/client/src/pages/FinancesPage.tsx b/client/src/pages/FinancesPage.tsx
index ecffffa..af18ead 100644
--- a/client/src/pages/FinancesPage.tsx
+++ b/client/src/pages/FinancesPage.tsx
@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
+import { PageHeader } from "@/components/ui/page-header";
 import { useToast } from "@/hooks/use-toast";
 import Sidebar from "@/components/layout/Sidebar";
 import { Plus, DollarSign, TrendingUp, TrendingDown } from "lucide-react";
diff --git a/client/src/pages/TasksPage.tsx b/client/src/pages/TasksPage.tsx
index 022b3f5..db5ffea 100644
--- a/client/src/pages/TasksPage.tsx
+++ b/client/src/pages/TasksPage.tsx
@@ -13,6 +13,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PageHeader } from "@/components/ui/page-header";
 import { useToast } from "@/hooks/use-toast";
 import Sidebar from "@/components/layout/Sidebar";
 import { 
@@ -294,78 +295,77 @@ export default function TasksPage() {
       <Sidebar className="w-64 border-r" />
       <div className="flex-1 overflow-auto">
         <div className="p-6">
-          {/* Header with Stats */}
-          <div className="mb-6">
-            <div className="flex justify-between items-start mb-4">
-              <div>
-                <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Tasks</h1>
-                <p className="text-gray-600 dark:text-gray-300">
-                  Manage your tasks and track your progress
-                </p>
-              </div>
-              <Dialog open={open} onOpenChange={setOpen}>
-                <DialogTrigger asChild>
-                  <Button>
-                    <Plus className="w-4 h-4 mr-2" />
-                    Add Task
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>Create New Task</DialogTitle>
-                    <DialogDescription>
-                      Add a new task to your todo list.
-                    </DialogDescription>
-                  </DialogHeader>
-                  <form onSubmit={handleCreateTask} className="space-y-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="title">Title</Label>
-                      <Input
-                        id="title"
-                        value={newTask.title}
-                        onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
-                        required
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="description">Description</Label>
-                      <Textarea
-                        id="description"
-                        value={newTask.description}
-                        onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
-                      />
-                    </div>
-                    <div className="grid grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <Label htmlFor="priority">Priority</Label>
-                        <Select value={newTask.priority} onValueChange={(value: any) => setNewTask({ ...newTask, priority: value })}>
-                          <SelectTrigger>
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="low">Low</SelectItem>
-                            <SelectItem value="medium">Medium</SelectItem>
-                            <SelectItem value="high">High</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                      <div className="space-y-2">
-                        <Label htmlFor="dueDate">Due Date</Label>
-                        <Input
-                          id="dueDate"
-                          type="date"
-                          value={newTask.dueDate}
-                          onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
-                        />
-                      </div>
-                    </div>
-                    <Button type="submit" disabled={createTaskMutation.isPending}>
-                      {createTaskMutation.isPending ? "Creating..." : "Create Task"}
-                    </Button>
-                  </form>
-                </DialogContent>
-              </Dialog>
-            </div>
+          <PageHeader
+            title="Tasks"
+            description="Manage your tasks and track your progress"
+          >
+            <Dialog open={open} onOpenChange={setOpen}>
+              <DialogTrigger asChild>
+                <Button>
+                  <Plus className="w-4 h-4 mr-2" />
+                  Add Task
+                </Button>
+              </DialogTrigger>
+            </Dialog>
+          </PageHeader>
+
+          {/* Task Creation Dialog */}
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Create New Task</DialogTitle>
+                <DialogDescription>
+                  Add a new task to your todo list.
+                </DialogDescription>
+              </DialogHeader>
+              <form onSubmit={handleCreateTask} className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="title">Title</Label>
+                  <Input
+                    id="title"
+                    value={newTask.title}
+                    onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="description">Description</Label>
+                  <Textarea
+                    id="description"
+                    value={newTask.description}
+                    onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="priority">Priority</Label>
+                    <Select value={newTask.priority} onValueChange={(value: any) => setNewTask({ ...newTask, priority: value })}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="low">Low</SelectItem>
+                        <SelectItem value="medium">Medium</SelectItem>
+                        <SelectItem value="high">High</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="dueDate">Due Date</Label>
+                    <Input
+                      id="dueDate"
+                      type="date"
+                      value={newTask.dueDate}
+                      onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
+                    />
+                  </div>
+                </div>
+                <Button type="submit" disabled={createTaskMutation.isPending}>
+                  {createTaskMutation.isPending ? "Creating..." : "Create Task"}
+                </Button>
+              </form>
+            </DialogContent>
+          </Dialog>
 
             {/* Statistics Cards */}
             <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
diff --git a/client/src/pages/VoicePage.tsx b/client/src/pages/VoicePage.tsx
index a3f869a..6e9ffa4 100644
--- a/client/src/pages/VoicePage.tsx
+++ b/client/src/pages/VoicePage.tsx
@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { PageHeader } from "@/components/ui/page-header";
 import { useToast } from "@/hooks/use-toast";
 import Sidebar from "@/components/layout/Sidebar";
 import { Mic, MicOff, Volume2, Settings, PlayCircle, StopCircle } from "lucide-react";