update dashboard max-width, create chatbot

This commit is contained in:
Rustico77
2026-04-15 18:20:33 +00:00
parent 737bbf9344
commit 3c4317b576
6 changed files with 841 additions and 502 deletions

View File

@@ -1,7 +1,7 @@
#root { #root {
max-width: 1280px; /* max-width: 1280px; */
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding-inline: 1rem;
text-align: center; text-align: center;
} }

View File

@@ -9,6 +9,7 @@ import {
LogOut, Menu, Sparkles, BarChart3, Mail, Users, LogOut, Menu, Sparkles, BarChart3, Mail, Users,
Shield, X, CalendarDays, Megaphone, Shield, X, CalendarDays, Megaphone,
} from 'lucide-react' } from 'lucide-react'
import { Divider } from './ui'
const NAV_ITEMS = [ const NAV_ITEMS = [
{ label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard }, { label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
@@ -36,7 +37,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
const initial = user?.email?.charAt(0).toUpperCase() || '?' const initial = user?.email?.charAt(0).toUpperCase() || '?'
return ( return (
<div className="flex h-screen bg-gray-50 overflow-hidden"> <div className="flex h-screen bg-gray-50 overflow-hidden shadow-2xl">
{/* Mobile backdrop */} {/* Mobile backdrop */}
{sidebarOpen && ( {sidebarOpen && (
<div <div
@@ -69,7 +70,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
</div> </div>
{/* Nav */} {/* Nav */}
<nav className="flex-1 px-3 py-3 space-y-0.5 overflow-y-auto"> <nav className="flex-1 px-3 py-3 space-y-4 overflow-y-auto">
{NAV_ITEMS.map(({ label, href, icon: Icon }) => { {NAV_ITEMS.map(({ label, href, icon: Icon }) => {
const active = location.pathname.startsWith(href) const active = location.pathname.startsWith(href)
return ( return (
@@ -78,7 +79,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
to={href} to={href}
onClick={() => setSidebarOpen(false)} onClick={() => setSidebarOpen(false)}
className={cn( className={cn(
'group flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium', 'group flex items-center px-3 py-2.5 rounded-xl text-sm font-medium',
'transition-all duration-150', 'transition-all duration-150',
active active
? 'bg-primary-50 text-primary-700' ? 'bg-primary-50 text-primary-700'
@@ -86,7 +87,7 @@ export const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children })
)} )}
> >
<Icon className={cn( <Icon className={cn(
'w-4 h-4 shrink-0 transition-transform duration-150', 'w-5 h-5 shrink-0 transition-transform duration-150',
active ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600', active ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600',
)} /> )} />
<span className="flex-1">{label}</span> <span className="flex-1">{label}</span>

View File

@@ -93,7 +93,7 @@ const IconInput: React.FC<{
rightElement?: React.ReactNode rightElement?: React.ReactNode
}> = ({ label, icon, rightElement, ...inputProps }) => ( }> = ({ label, icon, rightElement, ...inputProps }) => (
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<label className="text-sm font-medium text-gray-700">{label}</label> <label className="text-sm text-left font-medium text-gray-700">{label}</label>
<div className="relative"> <div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"> <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
{icon} {icon}

File diff suppressed because it is too large Load Diff

View File

@@ -57,11 +57,11 @@ export const DashboardPage: React.FC = () => {
} }
return ( return (
<div className="p-4 sm:p-6 max-w-7xl"> <div className="text-start p-4 sm:p-10 max-w-8xl">
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-3"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-3">
<div> <div>
<h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Dashboard</h1> <h1 className="text-xl sm:text-4xl font-bold text-gray-900 tracking-tight">Dashboard</h1>
<p className="text-sm text-gray-500 mt-0.5"> <p className="text-sm text-gray-500 mt-0.5">
{chatbots.length > 0 {chatbots.length > 0
? `${chatbots.length} chatbot${chatbots.length !== 1 ? 's' : ''}` ? `${chatbots.length} chatbot${chatbots.length !== 1 ? 's' : ''}`

View File

@@ -68,7 +68,7 @@ export const ForgotPasswordPage: React.FC = () => {
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
{/* Email input with icon */} {/* Email input with icon */}
<div className="flex flex-col gap-1.5"> <div className="flex flex-col gap-1.5">
<label className="text-sm font-medium text-gray-700">Email address</label> <label className="text-sm text-left font-medium text-gray-700">Email address</label>
<div className="relative"> <div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"> <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
<Mail className="w-4 h-4" /> <Mail className="w-4 h-4" />