georges/menassit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add navigation button to return to dashboard from various pages

Browse Source 
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
This commit is contained in:
ghaddaditw
2025-06-08 15:21:22 +00:00
parent fbdc1ff1da
commit 2c73d4d196
6 changed files with 126 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/ui/page-header.tsx
+50
View File
@@ -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>
);
}
client/src/pages/AIPage.tsx
+1
View File
@@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { PageHeader } from "@/components/ui/page-header";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import Sidebar from "@/components/layout/Sidebar"; import Sidebar from "@/components/layout/Sidebar";
import { Brain, MessageSquare, Lightbulb, Laugh, Send } from "lucide-react"; import { Brain, MessageSquare, Lightbulb, Laugh, Send } from "lucide-react";
client/src/pages/AnalyticsPage.tsx
+1
View File
@@ -1,6 +1,7 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PageHeader } from "@/components/ui/page-header";
import Header from "@/components/layout/Header"; import Header from "@/components/layout/Header";
import Sidebar from "@/components/layout/Sidebar"; import Sidebar from "@/components/layout/Sidebar";
import { BarChart3, TrendingUp, TrendingDown, Calendar, Target, DollarSign, Activity } from "lucide-react"; import { BarChart3, TrendingUp, TrendingDown, Calendar, Target, DollarSign, Activity } from "lucide-react";
client/src/pages/FinancesPage.tsx
+1
View File
@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { PageHeader } from "@/components/ui/page-header";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import Sidebar from "@/components/layout/Sidebar"; import Sidebar from "@/components/layout/Sidebar";
import { Plus, DollarSign, TrendingUp, TrendingDown } from "lucide-react"; import { Plus, DollarSign, TrendingUp, TrendingDown } from "lucide-react";
client/src/pages/TasksPage.tsx
+72 -72
View File
@@ -13,6 +13,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PageHeader } from "@/components/ui/page-header";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import Sidebar from "@/components/layout/Sidebar"; import Sidebar from "@/components/layout/Sidebar";
import { import {
@@ -294,78 +295,77 @@ export default function TasksPage() {
<Sidebar className="w-64 border-r" /> <Sidebar className="w-64 border-r" />
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-auto">
<div className="p-6"> <div className="p-6">
{/* Header with Stats */} <PageHeader
<div className="mb-6"> title="Tasks"
<div className="flex justify-between items-start mb-4"> description="Manage your tasks and track your progress"
<div> >
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Tasks</h1> <Dialog open={open} onOpenChange={setOpen}>
<p className="text-gray-600 dark:text-gray-300"> <DialogTrigger asChild>
Manage your tasks and track your progress <Button>
</p> <Plus className="w-4 h-4 mr-2" />
</div> Add Task
<Dialog open={open} onOpenChange={setOpen}> </Button>
<DialogTrigger asChild> </DialogTrigger>
<Button> </Dialog>
<Plus className="w-4 h-4 mr-2" /> </PageHeader>
Add Task
</Button> {/* Task Creation Dialog */}
</DialogTrigger> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Create New Task</DialogTitle> <DialogTitle>Create New Task</DialogTitle>
<DialogDescription> <DialogDescription>
Add a new task to your todo list. Add a new task to your todo list.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleCreateTask} className="space-y-4"> <form onSubmit={handleCreateTask} className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="title">Title</Label> <Label htmlFor="title">Title</Label>
<Input <Input
id="title" id="title"
value={newTask.title} value={newTask.title}
onChange={(e) => setNewTask({ ...newTask, title: e.target.value })} onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
required required
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="description">Description</Label> <Label htmlFor="description">Description</Label>
<Textarea <Textarea
id="description" id="description"
value={newTask.description} value={newTask.description}
onChange={(e) => setNewTask({ ...newTask, description: e.target.value })} onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="priority">Priority</Label> <Label htmlFor="priority">Priority</Label>
<Select value={newTask.priority} onValueChange={(value: any) => setNewTask({ ...newTask, priority: value })}> <Select value={newTask.priority} onValueChange={(value: any) => setNewTask({ ...newTask, priority: value })}>
<SelectTrigger> <SelectTrigger>
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="low">Low</SelectItem> <SelectItem value="low">Low</SelectItem>
<SelectItem value="medium">Medium</SelectItem> <SelectItem value="medium">Medium</SelectItem>
<SelectItem value="high">High</SelectItem> <SelectItem value="high">High</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="dueDate">Due Date</Label> <Label htmlFor="dueDate">Due Date</Label>
<Input <Input
id="dueDate" id="dueDate"
type="date" type="date"
value={newTask.dueDate} value={newTask.dueDate}
onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })} onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
/> />
</div> </div>
</div> </div>
<Button type="submit" disabled={createTaskMutation.isPending}> <Button type="submit" disabled={createTaskMutation.isPending}>
{createTaskMutation.isPending ? "Creating..." : "Create Task"} {createTaskMutation.isPending ? "Creating..." : "Create Task"}
</Button> </Button>
</form> </form>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div>
{/* Statistics Cards */} {/* Statistics Cards */}
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6"> <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
client/src/pages/VoicePage.tsx
+1
View File
@@ -3,6 +3,7 @@ import { useQuery } from "@tanstack/react-query";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { PageHeader } from "@/components/ui/page-header";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import Sidebar from "@/components/layout/Sidebar"; import Sidebar from "@/components/layout/Sidebar";
import { Mic, MicOff, Volume2, Settings, PlayCircle, StopCircle } from "lucide-react"; import { Mic, MicOff, Volume2, Settings, PlayCircle, StopCircle } from "lucide-react";