feat: start page after login with workspace grid, login redirect to /start
This commit is contained in:
Agent Zero
@@ -37,7 +37,7 @@ export function LoginPage() {
|
||||
try {
|
||||
await loginMutation.mutateAsync(data);
|
||||
addToast({ type: 'success', message: t('auth.login') + ' erfolgreich' });
|
||||
navigate('/dashboard');
|
||||
navigate('/start');
|
||||
} catch (error: any) {
|
||||
const msg = error.message || t('auth.loginFailed');
|
||||
setSubmitError(msg);
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* Start page — shown after login.
|
||||
* 2-column layout: left menu, right grid with workspace tiles.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
import { Settings, HelpCircle, LayoutGrid, ArrowRight, Plus } from 'lucide-react';
|
||||
|
||||
// Workspace tile definition
|
||||
interface WorkspaceTile {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
color: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
const DEFAULT_WORKSPACES: WorkspaceTile[] = [
|
||||
{
|
||||
id: 'main',
|
||||
name: 'Haupt-Workspace',
|
||||
description: 'Kontakte, Kalender, Mail und mehr',
|
||||
icon: <LayoutGrid className="w-8 h-8" strokeWidth={1.5} />,
|
||||
color: 'from-blue-500 to-blue-600',
|
||||
path: '/dashboard',
|
||||
},
|
||||
];
|
||||
|
||||
export function StartPage() {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const user = useAuthStore((state) => state.user);
|
||||
|
||||
const menuItems = [
|
||||
{ id: 'workspaces', label: 'Workspaces', icon: <LayoutGrid className="w-4 h-4" />, active: true },
|
||||
{ id: 'settings', label: 'Einstellungen', icon: <Settings className="w-4 h-4" />, onClick: () => navigate('/settings') },
|
||||
{ id: 'help', label: 'Hilfe', icon: <HelpCircle className="w-4 h-4" />, onClick: () => window.open('/docs', '_blank') },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex h-full overflow-hidden bg-secondary-50">
|
||||
{/* Left column — menu */}
|
||||
<aside className="w-56 bg-white border-r border-secondary-200 flex flex-col flex-shrink-0">
|
||||
<div className="h-[58px] flex items-center px-4 border-b border-secondary-200">
|
||||
<span className="text-xl font-bold text-secondary-900">leocrm</span>
|
||||
</div>
|
||||
<nav className="flex-1 overflow-y-auto py-4">
|
||||
<ul className="space-y-1 px-2">
|
||||
{menuItems.map((item) => (
|
||||
<li key={item.id}>
|
||||
<button
|
||||
onClick={item.onClick || (() => {})}
|
||||
className={`
|
||||
w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch
|
||||
transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500
|
||||
${item.active ? 'bg-primary-50 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}
|
||||
`}
|
||||
>
|
||||
{item.icon}
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
{/* User info at bottom */}
|
||||
<div className="px-4 py-3 border-t border-secondary-200">
|
||||
<p className="text-xs text-secondary-500 truncate">{user?.email}</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Right column — workspace grid */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="max-w-5xl mx-auto p-8">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-secondary-900">Willkommen{user?.first_name ? `, ${user.first_name}` : ''}!</h1>
|
||||
<p className="text-sm text-secondary-500 mt-1">Wähle einen Workspace aus</p>
|
||||
</div>
|
||||
|
||||
{/* Masonry-style grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{DEFAULT_WORKSPACES.map((ws) => (
|
||||
<button
|
||||
key={ws.id}
|
||||
onClick={() => navigate(ws.path)}
|
||||
className="
|
||||
group relative overflow-hidden rounded-xl border border-secondary-200 bg-white
|
||||
hover:border-primary-300 hover:shadow-lg transition-all duration-200
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500
|
||||
p-6 text-left
|
||||
"
|
||||
>
|
||||
{/* Gradient icon area */}
|
||||
<div className={`
|
||||
inline-flex items-center justify-center w-16 h-16 rounded-xl
|
||||
bg-gradient-to-br ${ws.color} text-white mb-4
|
||||
group-hover:scale-110 transition-transform duration-200
|
||||
`}>
|
||||
{ws.icon}
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-secondary-900 group-hover:text-primary-700 transition-colors">
|
||||
{ws.name}
|
||||
</h3>
|
||||
<p className="text-sm text-secondary-500 mt-1">{ws.description}</p>
|
||||
<div className="
|
||||
mt-4 inline-flex items-center gap-1 text-xs font-medium text-primary-600
|
||||
opacity-0 group-hover:opacity-100 transition-opacity
|
||||
">
|
||||
Öffnen
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Add workspace placeholder */}
|
||||
<button
|
||||
className="
|
||||
group flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-secondary-200
|
||||
hover:border-primary-300 hover:bg-primary-50/30 transition-all duration-200
|
||||
p-6 min-h-[180px]
|
||||
"
|
||||
>
|
||||
<Plus className="w-8 h-8 text-secondary-300 group-hover:text-primary-400 transition-colors" />
|
||||
<span className="text-sm text-secondary-400 group-hover:text-primary-600 mt-2 transition-colors">
|
||||
Workspace hinzufügen
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user