Add DEMO feature to the project

This commit is contained in:
Urtzi Alfaro
2025-10-03 14:09:34 +02:00
parent 1243c2ca6d
commit dc8221bd2f
77 changed files with 6251 additions and 1074 deletions

View File

@@ -3,9 +3,11 @@ import { clsx } from 'clsx';
import { useAuthUser, useIsAuthenticated } from '../../../stores';
import { useTheme } from '../../../contexts/ThemeContext';
import { useTenantInitializer } from '../../../stores/useTenantInitializer';
import { useHasAccess } from '../../../hooks/useAccessControl';
import { Header } from '../Header';
import { Sidebar } from '../Sidebar';
import { Footer } from '../Footer';
import { DemoBanner } from '../DemoBanner';
export interface AppShellProps {
children: React.ReactNode;
@@ -74,10 +76,10 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
loadingComponent,
errorBoundary: ErrorBoundary,
}, ref) => {
const isAuthenticated = useIsAuthenticated();
const authLoading = false; // Since we're in a protected route, auth loading should be false
const { resolvedTheme } = useTheme();
const hasAccess = useHasAccess(); // Check both authentication and demo mode
// Initialize tenant data for authenticated users
useTenantInitializer();
@@ -196,12 +198,12 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
return <ErrorBoundary error={error}>{children}</ErrorBoundary>;
}
const shouldShowSidebar = showSidebar && isAuthenticated && !fullScreen;
const shouldShowSidebar = showSidebar && hasAccess && !fullScreen;
const shouldShowHeader = showHeader && !fullScreen;
const shouldShowFooter = showFooter && !fullScreen;
return (
<div
<div
className={clsx(
'min-h-screen bg-[var(--bg-primary)] flex flex-col',
resolvedTheme,
@@ -209,6 +211,9 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
)}
data-testid="app-shell"
>
{/* Demo Banner */}
<DemoBanner />
{/* Header */}
{shouldShowHeader && (
<Header
@@ -250,8 +255,8 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
// Add header offset
shouldShowHeader && 'pt-[var(--header-height)]',
// Adjust margins based on sidebar state
shouldShowSidebar && isAuthenticated && !isSidebarCollapsed && 'lg:ml-[var(--sidebar-width)]',
shouldShowSidebar && isAuthenticated && isSidebarCollapsed && 'lg:ml-[var(--sidebar-collapsed-width)]',
shouldShowSidebar && hasAccess && !isSidebarCollapsed && 'lg:ml-[var(--sidebar-width)]',
shouldShowSidebar && hasAccess && isSidebarCollapsed && 'lg:ml-[var(--sidebar-collapsed-width)]',
// Add padding to content
padded && 'px-4 lg:px-6 pb-4 lg:pb-6'
)}
@@ -269,8 +274,8 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
showPrivacyLinks={true}
className={clsx(
'transition-all duration-300 ease-in-out',
shouldShowSidebar && isAuthenticated && !isSidebarCollapsed && 'lg:ml-[var(--sidebar-width)]',
shouldShowSidebar && isAuthenticated && isSidebarCollapsed && 'lg:ml-[var(--sidebar-collapsed-width)]'
shouldShowSidebar && hasAccess && !isSidebarCollapsed && 'lg:ml-[var(--sidebar-width)]',
shouldShowSidebar && hasAccess && isSidebarCollapsed && 'lg:ml-[var(--sidebar-collapsed-width)]'
)}
/>
)}