Merge version_4_1783198072949 into main #4
@@ -1,46 +1,255 @@
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import { useState } from "react";
|
||||
import { Activity, Users, Phone, DollarSign, CheckSquare, BarChart } from "lucide-react";
|
||||
import { routes } from "@/routes";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
|
||||
import FeaturesBento from "@/components/sections/features/FeaturesBento";
|
||||
import Card from "@/components/ui/Card";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [activeTab, setActiveTab] = useState("Command Center");
|
||||
|
||||
const tabs = [
|
||||
{ name: "Command Center", icon: Activity },
|
||||
{ name: "CRM", icon: Users },
|
||||
{ name: "Payroll", icon: DollarSign },
|
||||
{ name: "Cold Calling", icon: Phone },
|
||||
{ name: "Tasks", icon: CheckSquare },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-webild-section="HeroSplitKpi"><HeroSplitKpi
|
||||
tag="Owner Dashboard"
|
||||
title="Command Center Overview"
|
||||
description="Monitor real-time performance across all teams. Track revenue, analyze AI lead conversions, and manage your entire operational footprint from one unified interface."
|
||||
primaryButton={{"text":"View Reports","href":"/reports"}}
|
||||
secondaryButton={{"text":"Manage Roles","href":"/settings/roles"}}
|
||||
kpis={[{"value":"$1.2M","label":"Monthly Revenue"},{"value":"4,250","label":"Active Leads"},{"value":"8.4%","label":"AI Conversion Rate"}]}
|
||||
imageSrc="https://img.freepik.com/free-photo/business-people-analyzing-statistics-financial-data-working-with-graphs-charts-screen-office_482257-88487.jpg"
|
||||
textAnimation="fade-blur"
|
||||
/></div>
|
||||
<div data-webild-section="MetricsSimpleCards"><section aria-label="Metrics section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>System Overview</p></div><TextAnimation text="Performance at a Glance" variant="fade-blur" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Real-time insights across all teams, revenue streams, and AI lead generation." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="View Full Report" href="/reports" variant="primary" /><Button text="Manage Teams" href="/teams" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="slide-up"><GridOrCarousel><div key="$450k" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">$450k</span><p className="text-base leading-snug text-balance">Net Profit (Monthly)</p></div>
|
||||
<div key="4,250" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">4,250</span><p className="text-base leading-snug text-balance">AI Leads Generated</p></div>
|
||||
<div key="342" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">342</span><p className="text-base leading-snug text-balance">Meetings Booked</p></div>
|
||||
<div key="$12.5k" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">$12.5k</span><p className="text-base leading-snug text-balance">Avg Employee Earnings</p></div></GridOrCarousel></ScrollReveal></div></section></div>
|
||||
<div data-webild-section="MetricsIconCards"><MetricsIconCards
|
||||
tag="Performance Overview"
|
||||
title="Business Operations Dashboard"
|
||||
description="Real-time insights into team performance, revenue generation, and AI lead conversion rates across the organization."
|
||||
primaryButton={{"text":"View Reports","href":"/reports"}}
|
||||
secondaryButton={{"text":"Manage Team","href":"/team"}}
|
||||
metrics={[{"icon":"TrendingUp","title":"Monthly Revenue","value":"$1.2M"},{"icon":"Users","title":"Active Employees","value":"42"},{"icon":"PhoneCall","title":"Calls Made","value":"12,450"},{"icon":"Bot","title":"AI Leads Generated","value":"4,250"}]}
|
||||
textAnimation="fade-blur"
|
||||
/></div>
|
||||
<div data-webild-section="FeaturesBento"><FeaturesBento
|
||||
tag="Role-Based Access"
|
||||
title="Tailored Dashboards for Every Role"
|
||||
description="Atlas provides customized views for Owners, Partners, and Employees, ensuring everyone has the exact tools and metrics they need to succeed."
|
||||
primaryButton={{"text":"View Live Demo","href":"/demo"}}
|
||||
secondaryButton={{"text":"Manage Roles","href":"/settings/roles"}}
|
||||
textAnimation="fade-blur"
|
||||
features={[{"title":"Executive Overview","description":"Owners get full visibility into company-wide revenue, profit margins, and operational efficiency.","bentoComponent":"animated-bar-chart"},{"title":"Partner Metrics","description":"Track cold calling team performance, conversion rates, and profit metrics in real-time.","bentoComponent":"info-card-marquee","infoCards":[{"icon":"PhoneCall","label":"Calls Made","value":"12,450"},{"icon":"TrendingUp","label":"Conversion","value":"8.4%"},{"icon":"DollarSign","label":"Profit","value":"$450k"},{"icon":"Users","label":"Active Reps","value":"42"}]},{"title":"AI Lead Assistant","description":"Employees interact with our AI to qualify leads, handle objections, and close deals faster.","bentoComponent":"chat-marquee","aiIcon":"Bot","userIcon":"User","exchanges":[{"userMessage":"Lead objected to pricing.","aiResponse":"Highlight our ROI and flexible payment plans."},{"userMessage":"What's the next step?","aiResponse":"Send the contract via Atlas Sign."}],"placeholder":"Ask AI for guidance..."},{"title":"Script Viewer & Goals","description":"Follow the proven sales script step-by-step and track personal earnings progress.","bentoComponent":"checklist-timeline","heading":"Sales Script","subheading":"Standard Cold Call","checklistItems":[{"label":"Introduction","detail":"State name and company clearly."},{"label":"Value Prop","detail":"Explain how Atlas saves them time."},{"label":"Call to Action","detail":"Book a 15-minute demo."}],"completedLabel":"Script Completed"}]}
|
||||
/></div>
|
||||
</>
|
||||
<div className="min-h-svh bg-background text-foreground">
|
||||
<main className="w-content-width mx-auto flex flex-col md:flex-row gap-8 pt-8">
|
||||
{/* Sidebar / Sub-nav */}
|
||||
<aside className="w-full md:w-64 shrink-0 flex flex-col gap-2">
|
||||
<div className="mb-6 px-4 md:px-0">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="backdrop-blur-xl bg-white/10 border border-white/20 shadow-lg rounded-full px-3 py-1 flex items-center gap-2">
|
||||
<div className="relative flex h-2 w-2">
|
||||
<span className="absolute animate-ping bg-green-400 opacity-75 rounded-full h-full w-full"></span>
|
||||
<span className="relative bg-green-500 rounded-full h-2 w-2"></span>
|
||||
</div>
|
||||
<span className="text-xs font-medium tracking-wider uppercase text-foreground">System Live</span>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Atlas v1.0</h1>
|
||||
<p className="text-sm text-foreground/70 mt-1">Executive Terminal</p>
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-col gap-2">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = activeTab === tab.name;
|
||||
return (
|
||||
<button
|
||||
key={tab.name}
|
||||
onClick={() => setActiveTab(tab.name)}
|
||||
className={cls(
|
||||
"flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 text-sm font-medium whitespace-nowrap cursor-pointer",
|
||||
isActive
|
||||
? "primary-button text-primary-cta-text shadow-lg"
|
||||
: "text-foreground hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{tab.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 min-w-0 px-4 md:px-0">
|
||||
{activeTab === "Command Center" && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<h2 className="text-3xl font-bold">Command Center</h2>
|
||||
<Button text="Generate Report" variant="secondary" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="p-6 flex flex-col gap-2">
|
||||
<p className="text-sm text-foreground/70 uppercase tracking-wider">Total Revenue</p>
|
||||
<p className="text-4xl font-bold">$2.4M</p>
|
||||
<p className="text-sm text-green-400">+14.5% from last month</p>
|
||||
</Card>
|
||||
<Card className="p-6 flex flex-col gap-2">
|
||||
<p className="text-sm text-foreground/70 uppercase tracking-wider">Active Leads</p>
|
||||
<p className="text-4xl font-bold">8,432</p>
|
||||
<p className="text-sm text-green-400">+2.1% conversion rate</p>
|
||||
</Card>
|
||||
<Card className="p-6 flex flex-col gap-2">
|
||||
<p className="text-sm text-foreground/70 uppercase tracking-wider">System Load</p>
|
||||
<p className="text-4xl font-bold">24%</p>
|
||||
<p className="text-sm text-foreground/70">Optimal performance</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<Card className="p-6 h-80 flex flex-col">
|
||||
<h3 className="text-lg font-semibold mb-4">Revenue Velocity</h3>
|
||||
<div className="flex-1 border border-white/10 rounded-lg bg-white/5 flex items-center justify-center">
|
||||
<BarChart className="w-12 h-12 text-foreground/30" />
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-6 h-80 flex flex-col">
|
||||
<h3 className="text-lg font-semibold mb-4">Global Operations</h3>
|
||||
<div className="flex-1 border border-white/10 rounded-lg bg-white/5 flex items-center justify-center">
|
||||
<Activity className="w-12 h-12 text-foreground/30" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "CRM" && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<h2 className="text-3xl font-bold">AI-Powered CRM</h2>
|
||||
<Button text="Import Leads" variant="secondary" />
|
||||
</div>
|
||||
<Card className="p-0 overflow-hidden">
|
||||
<div className="p-4 border-b border-white/10 bg-white/5 flex justify-between items-center">
|
||||
<h3 className="font-semibold">High-Priority Targets</h3>
|
||||
<Tag text="AI Scored" />
|
||||
</div>
|
||||
<div className="divide-y divide-white/10">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div key={i} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-white/5 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center shrink-0">
|
||||
<Users className="w-5 h-5 text-foreground/70" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Enterprise Prospect {i}</p>
|
||||
<p className="text-sm text-foreground/70">Last contact: 2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-green-400 text-sm font-medium">98% Match</span>
|
||||
<Button text="Engage" variant="primary" className="h-8 px-4 text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "Payroll" && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<h2 className="text-3xl font-bold">Automated Payroll</h2>
|
||||
<Button text="Run Cycle" variant="primary" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-2">Next Payout</h3>
|
||||
<p className="text-4xl font-bold mb-4">$482,150</p>
|
||||
<p className="text-sm text-foreground/70">Scheduled for Friday, 12:00 AM EST</p>
|
||||
</Card>
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-2">Active Employees</h3>
|
||||
<p className="text-4xl font-bold mb-4">142</p>
|
||||
<p className="text-sm text-foreground/70">All compliance checks passed</p>
|
||||
</Card>
|
||||
</div>
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Recent Transactions</h3>
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center justify-between p-3 rounded bg-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<DollarSign className="w-5 h-5 text-foreground/70" />
|
||||
<span>Executive Bonus Pool Q{i}</span>
|
||||
</div>
|
||||
<span className="font-medium text-green-400">Completed</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "Cold Calling" && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<h2 className="text-3xl font-bold">Dialer Workspace</h2>
|
||||
<div className="flex gap-2">
|
||||
<Button text="End Session" variant="secondary" />
|
||||
<Button text="Next Lead" variant="primary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 flex flex-col gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
||||
<h3 className="text-lg font-semibold">Active Script: Enterprise Pitch</h3>
|
||||
<Tag text="Live Sentiment: Positive" />
|
||||
</div>
|
||||
<div className="p-4 rounded-lg bg-white/5 border border-white/10 text-lg leading-relaxed text-foreground/70 h-64 overflow-y-auto">
|
||||
<p className="mb-4">"Hi [Name], this is [Agent] from Atlas. I noticed your team is currently scaling operations across multiple regions."</p>
|
||||
<p className="mb-4 text-foreground font-medium">"We've helped similar enterprise clients reduce operational overhead by 24% using our unified command center."</p>
|
||||
<p>"Would you be open to a brief technical overview this Thursday?"</p> </div> </Card> </div> <div className="flex flex-col gap-6">
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Current Target</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-foreground/70">Name</p>
|
||||
<p className="font-medium">Sarah Jenkins</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/70">Role</p>
|
||||
<p className="font-medium">VP of Operations</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground/70">Company</p>
|
||||
<p className="font-medium">TechFlow Global</p>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Button text="Call Now" variant="primary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "Tasks" && (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<h2 className="text-3xl font-bold">Task Management</h2>
|
||||
<Button text="New Task" variant="primary" />
|
||||
</div>
|
||||
<Card className="p-0 overflow-hidden">
|
||||
<div className="divide-y divide-white/10">
|
||||
{[
|
||||
{ title: "Review Q3 Performance Metrics", status: "High Priority", time: "Due Today" },
|
||||
{ title: "Approve Payroll Run #402", status: "Pending", time: "Tomorrow" },
|
||||
{ title: "Update Cold Calling Scripts", status: "In Progress", time: "Next Week" },
|
||||
{ title: "Onboard New Sales VP", status: "Scheduled", time: "Oct 15" }
|
||||
].map((task, i) => (
|
||||
<div key={i} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-white/5 transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-6 h-6 rounded border border-white/20 flex items-center justify-center cursor-pointer hover:bg-white/10 shrink-0">
|
||||
<CheckSquare className="w-4 h-4 text-transparent hover:text-white/50" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">{task.title}</p>
|
||||
<p className="text-sm text-foreground/70">{task.time}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Tag text={task.status} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user