Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 1x 1x 1x 1x 1x 1x 4x 4x 5x 3x 3x 3x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x | /**
* @file Home.tsx
* @description
* Landing hub for the root route (/):
* - If authenticated, redirect to /dashboard.
* - If not authenticated, show a small landing card with:
* • “Sign in” → /login
* • “Continue in Demo Mode” → starts a local DEMO session and opens /analytics/overview
* - While auth state is hydrating, show a loading spinner.
*
* @enterprise
* - Uses useAuth() to access auth state and start a DEMO session.
* - Keeps history clean on redirects via <Navigate replace>.
* - Minimal dependencies; no HTTP or side-effects beyond starting demo.
*/
import * as React from 'react';
import { Navigate, useNavigate } from 'react-router-dom';
import { Box, Card, CardContent, CardHeader, Stack, Button, CircularProgress, Typography } from '@mui/material';
import { useAuth } from '../../hooks/useAuth';
import { useTranslation } from 'react-i18next';
/**
* Home component
*/
const Home: React.FC = () => {
const { user, loading, loginAsDemo } = useAuth();
const navigate = useNavigate();
const { t } = useTranslation<'auth'>('auth');
// While auth state is hydrating, show a loading spinner
if (loading) {
return (
<Box sx={{ minHeight: '70vh', display: 'grid', placeItems: 'center' }}>
<CircularProgress />
</Box>
);
}
// If already authenticated, redirect to dashboard
if (user) return <Navigate to="/dashboard" replace />;
// Unauthenticated → show landing card with sign-in and demo options
const handleDemo = () => {
loginAsDemo();
navigate('/dashboard', { replace: true });
};
return (
<Box sx={{ minHeight: '70vh', display: 'grid', placeItems: 'center', px: 2 }}>
<Card sx={{ width: 480, maxWidth: '94vw' }}>
{/* Card header with branding */}
<CardHeader
title="SmartSupplyPro"
subheader={t('welcome')}
/>
<CardContent>
<Stack spacing={2}>
{/* Divider text */}
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
{t('or')}
</Typography>
{/* Action buttons: Sign in or Demo mode */}
<Stack direction="row" spacing={2} justifyContent="center">
<Button variant="contained" onClick={() => navigate('/login')}>
{t('signIn')}
</Button>
<Button variant="outlined" onClick={handleDemo}>
{t('continueDemo', 'Continue in Demo Mode')}
</Button>
</Stack>
{/* SSO hint text */}
<Typography variant="caption" color="text.secondary" sx={{ textAlign: 'center' }}>
{t('ssoHint')}
</Typography>
</Stack>
</CardContent>
</Card>
</Box>
);
};
export default Home;
|