bender/98c2fbcb-01d1-4bb5-86cf-9a658ea56616
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Add dashboard page

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-21 15:29:17 +00:00
parent 5457f9e247
commit f0ee8659be
4 changed files with 115 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import HomePage from './pages/HomePage';
import DashboardPage from "@/pages/DashboardPage";
export default function App() {
return (
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<HomePage />} />
<Route path="/dashboard" element={<DashboardPage />} />
</Route>
</Routes>
);

4
src/components/Layout.tsx
View File

@@ -34,7 +34,9 @@ export default function Layout() {
{
"name": "Testimonials",
"href": "#testimonials"
}
},
{ name: "Dashboard", href: "/dashboard" },
];
return (

109
src/pages/DashboardPage.tsx Normal file
View File

@@ -0,0 +1,109 @@
import React from "react";
import { routes } from "@/routes";
import NavbarCentered from "@/components/ui/NavbarCentered";
import Card from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import CheckList from "@/components/ui/CheckList";
import AnimatedBarChart from "@/components/ui/AnimatedBarChart";
import Tag from "@/components/ui/Tag";
export default function DashboardPage() {
return (
<div className="min-h-screen bg-background text-foreground font-sans">
<NavbarCentered
logo="Entrepreneur Path"
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
ctaButton={{ text: "Upgrade Pro", href: "/pricing" }}
/>
<main className="max-w-7xl mx-auto px-6 pt-32 pb-16">
<header className="mb-8">
<h1 className="text-3xl font-bold tracking-tight mb-2">Welcome back, Founder</h1>
<p className="text-muted-foreground mb-4">Your AI Coach is ready to help you execute your roadmap.</p>
<div className="flex gap-2 flex-wrap">
<Tag text="Goal: $1k/mo" className="bg-card border-border" />
<Tag text="Time: 2hrs/day" className="bg-card border-border" />
<Tag text="Level: Beginner" className="bg-card border-border" />
</div>
</header>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* AI Coach Chat Window */}
<Card className="col-span-1 lg:col-span-2 flex flex-col h-[600px] p-0 overflow-hidden border-border bg-card">
<div className="p-4 border-b border-border flex items-center gap-3 bg-background/50">
<div className="w-10 h-10 rounded-full bg-primary-cta flex items-center justify-center text-background font-bold text-sm">AI</div>
<div>
<h2 className="font-semibold text-foreground">Coach Atlas</h2>
<p className="text-xs text-muted-foreground">Online • Ready to strategize</p>
</div>
</div>
<div className="flex-1 overflow-y-auto p-4 space-y-4">
<div className="flex flex-col gap-1 items-start max-w-[80%]">
<div className="bg-background border border-border rounded-2xl rounded-tl-sm p-3 text-sm text-foreground">
Based on your goal to reach $1,000/month, I've updated your 30-day roadmap. Today's focus is validating your core offer. Ready to start?
</div>
<span className="text-[10px] text-muted-foreground ml-1">10:00 AM</span>
</div>
<div className="flex flex-col gap-1 items-end max-w-[80%] ml-auto">
<div className="bg-primary-cta text-background rounded-2xl rounded-tr-sm p-3 text-sm">
Yes, let's analyze my top 3 ideas. I have a few concepts for B2B SaaS tools.
</div>
<span className="text-[10px] text-muted-foreground mr-1">10:02 AM</span>
</div>
<div className="flex flex-col gap-1 items-start max-w-[80%]">
<div className="bg-background border border-border rounded-2xl rounded-tl-sm p-3 text-sm text-foreground">
Great. Paste your ideas below, and I'll run them through our validation framework focusing on market demand, your current skills, and time-to-revenue.
</div>
<span className="text-[10px] text-muted-foreground ml-1">10:03 AM</span>
</div>
</div>
<div className="p-4 border-t border-border bg-background/50 flex gap-2">
<Input placeholder="Type your message to Coach Atlas..." className="flex-1 bg-background" />
<Button text="Send" variant="primary" />
</div>
</Card>
{/* Sidebar: Progress & Actions */}
<div className="space-y-6">
<Card className="p-5 border-border bg-card">
<h3 className="font-semibold text-foreground mb-4">Quick Actions</h3>
<div className="space-y-3">
<Button text="Analyze New Ideas" variant="secondary" className="w-full justify-start" />
<Button text="Generate Concepts" variant="secondary" className="w-full justify-start" />
<Button text="View 30-Day Plan" variant="primary" className="w-full justify-start" />
</div>
</Card>
<Card className="p-5 border-border bg-card">
<div className="flex justify-between items-center mb-4">
<h3 className="font-semibold text-foreground">Roadmap Progress</h3>
<span className="text-xs font-medium text-primary-cta">Phase 1</span>
</div>
<div className="h-32 mb-4 w-full">
<AnimatedBarChart />
</div>
<p className="text-sm text-muted-foreground text-center">Validation & Research (40% Complete)</p>
</Card>
<Card className="p-5 border-border bg-card">
<h3 className="font-semibold text-foreground mb-4">Daily Action Plan</h3>
<CheckList
items={[
"Define target audience persona",
"Draft 3 value propositions",
"Set up landing page waitlist"
]}
className="text-sm text-muted-foreground"
/>
</Card>
</div>
</div>
</main>
</div>
);
}

1
src/routes.ts
View File

@@ -6,4 +6,5 @@ export interface Route {
export const routes: Route[] = [
{ path: '/', label: 'Home', pageFile: 'HomePage' },
{ path: '/dashboard', label: 'Dashboard', pageFile: 'DashboardPage' },
];