nexstruct 1.0.0

package/templates/ui/mui/src/app/examples/page.tsx

@@ -0,0 +1,716 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Chip from '@mui/material/Chip';
+import TextField from '@mui/material/TextField';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Slider from '@mui/material/Slider';
+import LinearProgress from '@mui/material/LinearProgress';
+import Badge from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Tooltip from '@mui/material/Tooltip';
+import Paper from '@mui/material/Paper';
+import Divider from '@mui/material/Divider';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Checkbox from '@mui/material/Checkbox';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormLabel from '@mui/material/FormLabel';
+import CircularProgress from '@mui/material/CircularProgress';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContentText from '@mui/material/DialogContentText';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Snackbar from '@mui/material/Snackbar';
+import Skeleton from '@mui/material/Skeleton';
+import Rating from '@mui/material/Rating';
+import Stack from '@mui/material/Stack';
+import Fab from '@mui/material/Fab';
+import SpeedDial from '@mui/material/SpeedDial';
+import SpeedDialIcon from '@mui/material/SpeedDialIcon';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
+
+import AddIcon from '@mui/icons-material/Add';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import InfoIcon from '@mui/icons-material/Info';
+import SettingsIcon from '@mui/icons-material/Settings';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import ShareIcon from '@mui/icons-material/Share';
+import SendIcon from '@mui/icons-material/Send';
+import SaveIcon from '@mui/icons-material/Save';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import HomeIcon from '@mui/icons-material/Home';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+const sections = [
+  { id: 'overview', label: 'Overview' },
+  { id: 'buttons', label: 'Buttons' },
+  { id: 'inputs', label: 'Inputs' },
+  { id: 'displays', label: 'Display' },
+  { id: 'feedback', label: 'Feedback' },
+  { id: 'table', label: 'Table' },
+  { id: 'form', label: 'Form' },
+  { id: 'common', label: 'Common' },
+];
+
+const sampleData = Array.from({ length: 40 }, (_, i) => ({
+  id: String(i + 1), name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  role: ['Admin', 'Editor', 'Viewer'][i % 3],
+  status: ['Active', 'Inactive'][i % 2],
+}));
+
+const formSchema = z.object({
+  fullName: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Invalid email'),
+  age: z.coerce.number().min(18, 'Must be 18+').max(120),
+  bio: z.string().optional(),
+});
+
+export default function ShowcasePage() {
+  const [activeTab, setActiveTab] = useState(0);
+  const [activeSection, setActiveSection] = useState('overview');
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [snackOpen, setSnackOpen] = useState(false);
+  const [progress, setProgress] = useState(30);
+  const [sliderVal, setSliderVal] = useState(50);
+  const [switchOn, setSwitchOn] = useState(false);
+  const [tableLoading, setTableLoading] = useState(false);
+  const [tablePage, setTablePage] = useState(1);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [speedDialOpen, setSpeedDialOpen] = useState(false);
+  const perPage = 6;
+  const totalPages = Math.ceil(sampleData.length / perPage);
+  const paginatedData = sampleData.slice((tablePage - 1) * perPage, tablePage * perPage);
+
+  useEffect(() => {
+    const timer = setInterval(() => setProgress((old) => old >= 100 ? 0 : old + 10), 800);
+    return () => clearInterval(timer);
+  }, []);
+
+  const tableConfig = {
+    columns: [
+      { key: 'name', header: 'Name' },
+      { key: 'email', header: 'Email' },
+      {
+        key: 'role', header: 'Role',
+        render: (item: any) => (
+          <Chip label={item.role} size="small" color={item.role === 'Admin' ? 'primary' : item.role === 'Editor' ? 'warning' : 'default'} />
+        ),
+      },
+      {
+        key: 'status', header: 'Status',
+        render: (item: any) => (
+          <Chip label={item.status} size="small" color={item.status === 'Active' ? 'success' : 'default'} variant="outlined" />
+        ),
+      },
+    ],
+    emptyMessage: 'No users found',
+  };
+
+  const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { fullName: '', email: '', age: 18, bio: '' } });
+
+  const isRowSelected = (id: string) => selectedIds.includes(id);
+  const toggleRow = (id: string) => setSelectedIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
+  const toggleAll = () => setSelectedIds((prev) => prev.length === paginatedData.length ? [] : paginatedData.map((x) => x.id));
+
+  const scrollTo = (id: string) => {
+    setActiveSection(id);
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  const sectionHeader = (title: string, subtitle?: string) => (
+    <Box sx={{ mb: 4, textAlign: 'center' }}>
+      <Typography variant="h4" fontWeight={800} gutterBottom sx={{ background: 'linear-gradient(135deg, primary.main, secondary.main)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+        {title}
+      </Typography>
+      {subtitle && <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 600, mx: 'auto' }}>{subtitle}</Typography>}
+      <Divider sx={{ mt: 2, maxWidth: 80, mx: 'auto', borderWidth: 2, borderColor: 'primary.main', borderRadius: 2 }} />
+    </Box>
+  );
+
+  const demoCard = (children: React.ReactNode, label?: string) => (
+    <Card variant="outlined" sx={{ height: '100%', transition: 'all 0.2s', '&:hover': { boxShadow: 4, borderColor: 'primary.light' } }}>
+      {label && <Box sx={{ px: 2, pt: 1.5, pb: 0.5 }}><Chip label={label} size="small" color="primary" variant="outlined" /></Box>}
+      <CardContent sx={{ display: 'flex', flexWrap: 'wrap', gap: 1.5, alignItems: 'center' }}>
+        {children}
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+      {/* Sticky Nav */}
+      <Box sx={{ position: 'sticky', top: 0, zIndex: 100, bgcolor: 'background.paper', borderBottom: 1, borderColor: 'divider', backdropFilter: 'blur(12px)', transition: 'all 0.3s' }}>
+        <Container maxWidth="xl" sx={{ display: 'flex', alignItems: 'center', height: 64, gap: 0.5, overflow: 'auto', '&::-webkit-scrollbar': { display: 'none' } }}>
+          <Typography variant="subtitle2" fontWeight={700} sx={{ mr: 2, whiteSpace: 'nowrap', background: 'linear-gradient(135deg, #2563eb, #7c3aed)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
+            MUI Showcase
+          </Typography>
+          <Chip label="Material UI" size="small" color="primary" sx={{ mr: 2, fontWeight: 600 }} />
+          <Box sx={{ display: 'flex', gap: 0.5 }}>
+            {sections.map((s) => (
+              <Button key={s.id} size="small" variant={activeSection === s.id ? 'contained' : 'text'} onClick={() => scrollTo(s.id)} sx={{ minWidth: 'auto', px: 1.5, fontSize: '0.75rem', whiteSpace: 'nowrap' }}>
+                {s.label}
+              </Button>
+            ))}
+          </Box>
+        </Container>
+      </Box>
+
+      {/* Hero */}
+      <Box sx={{ background: 'linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #7c3aed 100%)', color: 'white', py: { xs: 8, md: 12 } }}>
+        <Container maxWidth="md" sx={{ textAlign: 'center' }}>
+          <Chip label="Material UI Component System" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.4)', mb: 3, fontWeight: 600, backdropFilter: 'blur(8px)', bgcolor: 'rgba(255,255,255,0.1)' }} />
+          <Typography variant="h2" fontWeight={800} sx={{ fontSize: { xs: '2rem', md: '3.5rem' }, lineHeight: 1.2 }}>Beautiful MUI Components</Typography>
+          <Typography variant="h6" sx={{ mt: 2, opacity: 0.9, fontWeight: 400, maxWidth: 600, mx: 'auto' }}>
+            A complete, production-ready component library built on Material UI with react-hook-form integration, dynamic tables, dialogs, and more.
+          </Typography>
+          <Stack direction="row" spacing={2} justifyContent="center" sx={{ mt: 4 }}>
+            <Button variant="contained" size="large" endIcon={<ArrowForwardIcon />} sx={{ bgcolor: 'white', color: '#2563eb', '&:hover': { bgcolor: 'rgba(255,255,255,0.9)' } }} onClick={() => scrollTo('buttons')}>Explore Components</Button>
+            <Button variant="outlined" size="large" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.4)', '&:hover': { borderColor: 'white', bgcolor: 'rgba(255,255,255,0.1)' } }} onClick={() => setSnackOpen(true)}>Quick Demo</Button>
+          </Stack>
+        </Container>
+      </Box>
+
+      <Container maxWidth="xl" sx={{ py: 6 }}>
+        {/* === BUTTONS === */}
+        <Box id="buttons" sx={{ scrollMarginTop: 80, mb: 8 }}>
+          {sectionHeader('Buttons', 'All variants, sizes, colors and states available in the Button component')}
+
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              {demoCard(
+                <><Button variant="contained">Contained</Button><Button variant="outlined">Outlined</Button><Button variant="text">Text</Button></>,
+                'Variants'
+              )}
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              {demoCard(
+                <><Button size="small">Small</Button><Button size="medium">Medium</Button><Button size="large">Large</Button></>,
+                'Sizes'
+              )}
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              {demoCard(
+                <><Button color="primary">Primary</Button><Button color="secondary">Secondary</Button><Button color="error">Error</Button><Button color="warning">Warning</Button><Button color="success">Success</Button><Button color="info">Info</Button></>,
+                'Colors'
+              )}
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              {demoCard(
+                <><Button variant="contained" startIcon={<AddIcon />}>Add</Button><Button variant="contained" endIcon={<SendIcon />}>Send</Button><Button variant="outlined" startIcon={<SaveIcon />}>Save</Button><Button variant="contained" startIcon={<CloudUploadIcon />}>Upload</Button></>,
+                'With Icons'
+              )}
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              {demoCard(
+                <><Button variant="contained" disabled>Disabled</Button><Button variant="outlined" disabled>Disabled</Button><Button variant="text" disabled>Disabled</Button></>,
+                'Disabled'
+              )}
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              {demoCard(
+                <><Button variant="contained" loading>Loading</Button><Button variant="outlined" loading>Loading</Button><Button variant="contained" loading loadingPosition="start" startIcon={<SaveIcon />}>Saving</Button></>,
+                'Loading'
+              )}
+            </Grid>
+          </Grid>
+        </Box>
+
+        {/* === INPUTS === */}
+        <Box id="inputs" sx={{ scrollMarginTop: 80, mb: 8 }}>
+          {sectionHeader('Inputs & Controls', 'Text fields, selects, toggles, and form controls')}
+
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                  <Chip label="Text Fields" size="small" color="primary" variant="outlined" sx={{ alignSelf: 'flex-start' }} />
+                  <TextField label="Standard" variant="outlined" fullWidth size="small" />
+                  <TextField label="With Helper" variant="outlined" fullWidth size="small" helperText="This is a helpful message" />
+                  <TextField label="Error" variant="outlined" fullWidth size="small" error helperText="This field is required" />
+                  <TextField label="Disabled" variant="outlined" fullWidth size="small" disabled value="Disabled content" />
+                  <TextField label="Multiline" variant="outlined" fullWidth multiline rows={2} size="small" />
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                  <Chip label="Select & Autocomplete" size="small" color="primary" variant="outlined" sx={{ alignSelf: 'flex-start' }} />
+                  <FormControl fullWidth size="small">
+                    <InputLabel>Role</InputLabel>
+                    <Select label="Role" defaultValue="">
+                      <MenuItem value=""><em>None</em></MenuItem>
+                      <MenuItem value="admin">Admin</MenuItem>
+                      <MenuItem value="editor">Editor</MenuItem>
+                      <MenuItem value="viewer">Viewer</MenuItem>
+                    </Select>
+                  </FormControl>
+                  <FormControl fullWidth size="small">
+                    <InputLabel>Country</InputLabel>
+                    <Select label="Country" defaultValue="">
+                      <MenuItem value="us">United States</MenuItem>
+                      <MenuItem value="uk">United Kingdom</MenuItem>
+                      <MenuItem value="ca">Canada</MenuItem>
+                      <MenuItem value="au">Australia</MenuItem>
+                    </Select>
+                  </FormControl>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 4 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Switches" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <FormControlLabel control={<Switch checked={switchOn} onChange={(_, v) => setSwitchOn(v)} />} label={switchOn ? 'Enabled' : 'Disabled'} />
+                  <FormControlLabel control={<Switch defaultChecked />} label="Notifications" />
+                  <FormControlLabel control={<Switch />} label="Dark Mode" disabled />
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 4 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Checkboxes" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <FormControlLabel control={<Checkbox />} label="Option A" />
+                  <FormControlLabel control={<Checkbox defaultChecked />} label="Option B" />
+                  <FormControlLabel control={<Checkbox />} label="Option C" disabled />
+                  <FormControlLabel control={<Checkbox defaultChecked indeterminate />} label="Indeterminate" />
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 4 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Radio Buttons" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <RadioGroup defaultValue="first">
+                    <FormControlLabel value="first" control={<Radio />} label="First Choice" />
+                    <FormControlLabel value="second" control={<Radio />} label="Second Choice" />
+                    <FormControlLabel value="third" control={<Radio />} label="Third Choice" disabled />
+                  </RadioGroup>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </Box>
+
+        {/* === DISPLAY === */}
+        <Box id="displays" sx={{ scrollMarginTop: 80, mb: 8 }}>
+          {sectionHeader('Display Components', 'Cards, avatars, badges, progress, and more')}
+
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Avatars" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack direction="row" spacing={1} alignItems="center">
+                    <Avatar sx={{ bgcolor: 'primary.main' }}>A</Avatar>
+                    <Avatar sx={{ bgcolor: 'secondary.main' }}>B</Avatar>
+                    <Avatar sx={{ bgcolor: 'success.main' }}>C</Avatar>
+                    <Avatar sx={{ bgcolor: 'warning.main' }}>D</Avatar>
+                    <Avatar sx={{ bgcolor: 'error.main' }}>E</Avatar>
+                    <AvatarGroup total={12}>
+                      <Avatar sx={{ bgcolor: 'primary.main' }}>U</Avatar>
+                      <Avatar sx={{ bgcolor: 'secondary.main' }}>S</Avatar>
+                      <Avatar sx={{ bgcolor: 'success.main' }}>E</Avatar>
+                      <Avatar sx={{ bgcolor: 'warning.main' }}>R</Avatar>
+                    </AvatarGroup>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Badges" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack direction="row" spacing={2} alignItems="center" flexWrap="wrap">
+                    <Badge badgeContent={4} color="primary"><NotificationsIcon color="action" /></Badge>
+                    <Badge badgeContent={99} color="error"><NotificationsIcon color="action" /></Badge>
+                    <Badge badgeContent="!" color="warning"><NotificationsIcon color="action" /></Badge>
+                    <Badge variant="dot" color="success"><NotificationsIcon color="action" /></Badge>
+                    <Chip label="Default" color="default" size="small" />
+                    <Chip label="Primary" color="primary" size="small" />
+                    <Chip label="Success" color="success" size="small" />
+                    <Chip label="Warning" color="warning" size="small" />
+                    <Chip label="Error" color="error" size="small" />
+                    <Chip label="Info" color="info" size="small" />
+                    <Chip label="Outlined" variant="outlined" size="small" />
+                    <Chip label="Deleted" onDelete={() => {}} size="small" />
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Progress" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack spacing={3}>
+                    <Box><Typography variant="caption" color="text.secondary" gutterBottom display="block">Indeterminate</Typography><LinearProgress /></Box>
+                    <Box><Typography variant="caption" color="text.secondary" gutterBottom display="block">Determinate — {progress}%</Typography><LinearProgress variant="determinate" value={progress} /></Box>
+                    <Box><Typography variant="caption" color="text.secondary" gutterBottom display="block">Circular</Typography><CircularProgress size={24} /></Box>
+                    <Box><Typography variant="caption" color="text.secondary" gutterBottom display="block">Slider — {sliderVal}</Typography><Slider value={sliderVal} onChange={(_, v) => setSliderVal(v as number)} /></Box>
+                    <Box><Typography variant="caption" color="text.secondary" gutterBottom display="block">Rating</Typography><Rating defaultValue={4} precision={0.5} /></Box>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Tooltips" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap">
+                    <Tooltip title="Top tooltip" placement="top"><Button variant="outlined" size="small">Top</Button></Tooltip>
+                    <Tooltip title="Bottom tooltip" placement="bottom"><Button variant="outlined" size="small">Bottom</Button></Tooltip>
+                    <Tooltip title="Left tooltip" placement="left"><Button variant="outlined" size="small">Left</Button></Tooltip>
+                    <Tooltip title="Right tooltip" placement="right"><Button variant="outlined" size="small">Right</Button></Tooltip>
+                    <Tooltip title={<><Typography variant="caption" fontWeight={700}>Rich Content</Typography><Typography variant="caption" display="block">With multiple lines</Typography></>}><Button variant="outlined" size="small">Rich</Button></Tooltip>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </Box>
+
+        {/* === FEEDBACK === */}
+        <Box id="feedback" sx={{ scrollMarginTop: 80, mb: 8 }}>
+          {sectionHeader('Feedback & Dialogs', 'Dialogs, alerts, snackbars, and skeleton loaders')}
+
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Alerts" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack spacing={1}>
+                    <Alert severity="success" onClose={() => {}}><AlertTitle>Success</AlertTitle>Operation completed successfully</Alert>
+                    <Alert severity="info"><AlertTitle>Info</AlertTitle>This is an informational message</Alert>
+                    <Alert severity="warning"><AlertTitle>Warning</AlertTitle>Please check your input</Alert>
+                    <Alert severity="error"><AlertTitle>Error</AlertTitle>Something went wrong</Alert>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Dialogs & Snackbars" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack spacing={1.5}>
+                    <Button variant="contained" onClick={() => setDialogOpen(true)} startIcon={<InfoIcon />}>Open Dialog</Button>
+                    <Button variant="outlined" onClick={() => setSnackOpen(true)} startIcon={<NotificationsIcon />}>Show Snackbar</Button>
+                  </Stack>
+                  <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
+                    <DialogTitle>Confirm Action</DialogTitle>
+                    <DialogContent><DialogContentText>This is a sample dialog with content. It demonstrates the Dialog component with title, content, and actions.</DialogContentText></DialogContent>
+                    <DialogActions><Button onClick={() => setDialogOpen(false)}>Cancel</Button><Button variant="contained" onClick={() => { setDialogOpen(false); setSnackOpen(true); }}>Confirm</Button></DialogActions>
+                  </Dialog>
+                  <Snackbar open={snackOpen} autoHideDuration={3000} onClose={() => setSnackOpen(false)} message="Action completed successfully!" action={<Button color="inherit" size="small" onClick={() => setSnackOpen(false)}>Close</Button>} />
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Skeleton" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack spacing={1}>
+                    <Skeleton variant="circular" width={40} height={40} />
+                    <Skeleton variant="rectangular" height={60} sx={{ borderRadius: 1 }} />
+                    <Skeleton variant="rounded" height={40} sx={{ borderRadius: 1 }} />
+                    <Skeleton width="60%" />
+                    <Skeleton width="80%" />
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Cards" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Card variant="outlined">
+                    <CardContent>
+                      <Typography variant="h6" fontWeight={600}>Card Title</Typography>
+                      <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+                        This is a card component showing how content can be structured with MUI Card, CardContent, and CardActions.
+                      </Typography>
+                    </CardContent>
+                    <CardActions sx={{ px: 2, pb: 2 }}>
+                      <Button size="small" variant="contained">Action</Button>
+                      <Button size="small">Cancel</Button>
+                    </CardActions>
+                  </Card>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </Box>
+
+        {/* === TABLE === */}
+        <Box id="table" sx={{ scrollMarginTop: 80, mb: 8 }}>
+          {sectionHeader('Dynamic Table', 'Config-driven table with loading, empty, checkbox selection, and pagination')}
+
+          <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+            <CardContent>
+              <Stack direction="row" spacing={1.5} sx={{ mb: 2 }} alignItems="center">
+                <Button variant={tableLoading ? 'outlined' : 'contained'} size="small" onClick={() => setTableLoading(!tableLoading)}>
+                  {tableLoading ? 'Stop Loading' : 'Simulate Loading'}
+                </Button>
+                <Button variant="outlined" size="small" onClick={() => setSelectedIds([])}>Clear Selection</Button>
+                <Typography variant="caption" color="text.secondary">{selectedIds.length > 0 ? `${selectedIds.length} selected` : 'No rows selected'}</Typography>
+              </Stack>
+              <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 2 }}>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell padding="checkbox"><Checkbox checked={paginatedData.length > 0 && paginatedData.every((x) => isRowSelected(x.id))} indeterminate={paginatedData.some((x) => isRowSelected(x.id)) && !paginatedData.every((x) => isRowSelected(x.id))} onChange={toggleAll} /></TableCell>
+                      <TableCell sx={{ fontWeight: 600 }}>Name</TableCell>
+                      <TableCell sx={{ fontWeight: 600 }}>Email</TableCell>
+                      <TableCell sx={{ fontWeight: 600 }}>Role</TableCell>
+                      <TableCell sx={{ fontWeight: 600 }}>Status</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {tableLoading ? (
+                      <TableRow>
+                        <TableCell colSpan={5} align="center" sx={{ py: 8 }}>
+                          <CircularProgress />
+                        </TableCell>
+                      </TableRow>
+                    ) : paginatedData.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={5} align="center" sx={{ py: 8 }}>
+                          <Typography color="text.secondary">No data available</Typography>
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      paginatedData.map((row) => (
+                        <TableRow key={row.id} hover selected={isRowSelected(row.id)}>
+                          <TableCell padding="checkbox"><Checkbox checked={isRowSelected(row.id)} onChange={() => toggleRow(row.id)} /></TableCell>
+                          <TableCell>{row.name}</TableCell>
+                          <TableCell>{row.email}</TableCell>
+                          <TableCell><Chip label={row.role} size="small" color={row.role === 'Admin' ? 'primary' : row.role === 'Editor' ? 'warning' : 'default'} /></TableCell>
+                          <TableCell><Chip label={row.status} size="small" color={row.status === 'Active' ? 'success' : 'default'} variant="outlined" /></TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+
+              {/* Pagination */}
+              {totalPages > 1 && !tableLoading && (
+                <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 0.5, mt: 2 }}>
+                  <IconButton size="small" disabled={tablePage <= 1} onClick={() => setTablePage((p) => Math.max(1, p - 1))}>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6" /></svg>
+                  </IconButton>
+                  {(() => {
+                    const pages: (number | 'ellipsis')[] = [1];
+                    const left = Math.max(2, tablePage - 1);
+                    const right = Math.min(totalPages - 1, tablePage + 1);
+                    if (left > 2) pages.push('ellipsis');
+                    for (let i = left; i <= right; i++) pages.push(i);
+                    if (right < totalPages - 1) pages.push('ellipsis');
+                    if (totalPages > 1) pages.push(totalPages);
+                    return pages.map((p, i) => p === 'ellipsis' ? <Typography key={`e-${i}`} variant="body2" color="text.secondary" sx={{ px: 0.5 }}>...</Typography> : <Button key={p} size="small" variant={tablePage === p ? 'contained' : 'outlined'} onClick={() => setTablePage(p)} sx={{ minWidth: 36, height: 36, p: 0 }}>{p}</Button>);
+                  })()}
+                  <IconButton size="small" disabled={tablePage >= totalPages} onClick={() => setTablePage((p) => Math.min(totalPages, p + 1))}>
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6" /></svg>
+                  </IconButton>
+                </Box>
+              )}
+            </CardContent>
+          </Card>
+        </Box>
+
+        {/* === FORM === */}
+        <Box id="form" sx={{ scrollMarginTop: 80, mb: 8 }}>
+          {sectionHeader('Form with Validation', 'React Hook Form + Zod validation with CustomField components')}
+
+          <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+            <CardContent>
+              <Grid container spacing={3}>
+                <Grid size={{ xs: 12, md: 6 }}>
+                  <form onSubmit={form.handleSubmit((data) => { alert(JSON.stringify(data, null, 2)); })}>
+                    <Stack spacing={2}>
+                      <TextField label="Full Name" variant="outlined" fullWidth size="small" error={!!form.formState.errors.fullName} helperText={form.formState.errors.fullName?.message as string} {...form.register('fullName')} />
+                      <TextField label="Email" variant="outlined" fullWidth size="small" error={!!form.formState.errors.email} helperText={form.formState.errors.email?.message as string} {...form.register('email')} />
+                      <TextField label="Age" variant="outlined" fullWidth size="small" type="number" error={!!form.formState.errors.age} helperText={form.formState.errors.age?.message as string} {...form.register('age', { valueAsNumber: true })} />
+                      <TextField label="Bio" variant="outlined" fullWidth size="small" multiline rows={2} {...form.register('bio')} />
+                      <FormControl fullWidth size="small">
+                        <InputLabel>Role</InputLabel>
+                        <Select label="Role" defaultValue="">
+                          <MenuItem value="admin">Admin</MenuItem>
+                          <MenuItem value="editor">Editor</MenuItem>
+                          <MenuItem value="viewer">Viewer</MenuItem>
+                        </Select>
+                      </FormControl>
+                      <FormControlLabel control={<Switch defaultChecked />} label="Email Notifications" />
+                      <FormControlLabel control={<Checkbox />} label="I accept the terms" />
+                      <Button type="submit" variant="contained" size="large" startIcon={<SendIcon />} fullWidth>Submit</Button>
+                    </Stack>
+                  </form>
+                </Grid>
+                <Grid size={{ xs: 12, md: 6 }}>
+                  <Paper variant="outlined" sx={{ p: 2, bgcolor: 'grey.50', height: '100%' }}>
+                    <Typography variant="subtitle2" fontWeight={600} gutterBottom>Form State</Typography>
+                    <Typography variant="caption" component="pre" sx={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap', fontSize: '0.7rem', color: 'text.secondary' }}>
+{JSON.stringify({ values: form.watch(), errors: form.formState.errors, isValid: form.formState.isValid, isDirty: form.formState.isDirty }, null, 2)}
+                    </Typography>
+                  </Paper>
+                </Grid>
+              </Grid>
+            </CardContent>
+          </Card>
+        </Box>
+
+        {/* === COMMON === */}
+        <Box id="common" sx={{ scrollMarginTop: 80, mb: 8 }}>
+          {sectionHeader('Common Compositions', 'Button groups, breadcrumbs, speed dial, and more')}
+
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Button Groups" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack spacing={2}>
+                    <ButtonGroup variant="contained" size="small">
+                      <Button>Left</Button>
+                      <Button>Center</Button>
+                      <Button>Right</Button>
+                    </ButtonGroup>
+                    <ButtonGroup variant="outlined" size="small">
+                      <Button>One</Button>
+                      <Button>Two</Button>
+                      <Button>Three</Button>
+                    </ButtonGroup>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Breadcrumbs" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Breadcrumbs>
+                    <Link underline="hover" color="inherit" href="#"><HomeIcon sx={{ mr: 0.5, fontSize: 16 }} />Home</Link>
+                    <Link underline="hover" color="inherit" href="#">Components</Link>
+                    <Typography color="text.primary">MUI Showcase</Typography>
+                  </Breadcrumbs>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="FAB & Speed Dial" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Stack direction="row" spacing={2} alignItems="center">
+                    <Fab color="primary" size="small"><AddIcon /></Fab>
+                    <Fab color="secondary" size="small"><EditIcon /></Fab>
+                    <SpeedDial
+                      ariaLabel="SpeedDial"
+                      icon={<SpeedDialIcon />}
+                      direction="right"
+                      open={speedDialOpen}
+                      onOpen={() => setSpeedDialOpen(true)}
+                      onClose={() => setSpeedDialOpen(false)}
+                      FabProps={{ size: 'small' }}
+                      sx={{ '& .MuiSpeedDial-actions': { gap: 0.5 } }}
+                    >
+                      <SpeedDialAction icon={<SaveIcon />} tooltipTitle="Save" onClick={() => setSpeedDialOpen(false)} />
+                      <SpeedDialAction icon={<ShareIcon />} tooltipTitle="Share" onClick={() => setSpeedDialOpen(false)} />
+                      <SpeedDialAction icon={<FavoriteIcon />} tooltipTitle="Favorite" onClick={() => setSpeedDialOpen(false)} />
+                    </SpeedDial>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Grid>
+
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Card variant="outlined" sx={{ '&:hover': { boxShadow: 4 } }}>
+                <CardContent>
+                  <Chip label="Tabs" size="small" color="primary" variant="outlined" sx={{ mb: 2 }} />
+                  <Box>
+                    <Tabs value={activeTab} onChange={(_, v) => setActiveTab(v)}>
+                      <Tab label="Details" />
+                      <Tab label="Settings" />
+                      <Tab label="Activity" />
+                    </Tabs>
+                    <Box sx={{ p: 2, border: 1, borderColor: 'divider', borderTop: 0, borderRadius: '0 0 8px 8px' }}>
+                      {activeTab === 0 && <Typography variant="body2" color="text.secondary">Details panel content goes here.</Typography>}
+                      {activeTab === 1 && <Typography variant="body2" color="text.secondary">Settings panel content goes here.</Typography>}
+                      {activeTab === 2 && <Typography variant="body2" color="text.secondary">Activity panel content goes here.</Typography>}
+                    </Box>
+                  </Box>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </Box>
+      </Container>
+
+      {/* Footer */}
+      <Box sx={{ bgcolor: 'grey.900', color: 'white', py: 6 }}>
+        <Container maxWidth="md" sx={{ textAlign: 'center' }}>
+          <Typography variant="h5" fontWeight={700} gutterBottom>MUI Component System</Typography>
+          <Typography variant="body2" sx={{ opacity: 0.7, mb: 3 }}>
+            Built with Material UI — a complete component library for production-ready Next.js applications.
+          </Typography>
+          <Stack direction="row" spacing={1} justifyContent="center" flexWrap="wrap">
+            <Chip label="Material UI" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.3)' }} variant="outlined" />
+            <Chip label="React Hook Form" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.3)' }} variant="outlined" />
+            <Chip label="Zod" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.3)' }} variant="outlined" />
+            <Chip label="Next.js 15" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.3)' }} variant="outlined" />
+            <Chip label="TypeScript" size="small" sx={{ color: 'white', borderColor: 'rgba(255,255,255,0.3)' }} variant="outlined" />
+          </Stack>
+          <Typography variant="caption" sx={{ mt: 3, opacity: 0.5, display: 'block' }}>
+            Scaffolded with Nexstruct
+          </Typography>
+        </Container>
+      </Box>
+    </Box>
+  );
+}