nurosys-agents 2.0.0

package/.agent/frontend/skills/vuexy-component-guide/examples.md

@@ -0,0 +1,662 @@
+# Vuexy Component Examples
+
+Ready-to-use interface patterns from the codebase.
+
+---
+
+## Example 1: Multi-Step Form (Stepper + Validation)
+
+See `src/views/forms/form-wizard/StepperLinearWithValidation.tsx` for the full source.
+
+### Pattern Overview
+
+Each step has its own `useForm` instance with independent `valibotResolver`. Use `StepperCustomDot` from `@components/stepper-dot` as the step icon, wrapped in `StepperWrapper` from `@core/styles/stepper`.
+
+### Components Used
+
+- Stepper (styled), Step, StepLabel, MuiStepper (`@mui/material`)
+- StepperCustomDot (`@components/stepper-dot`)
+- StepperWrapper (`@core/styles/stepper`)
+- CustomTextField (`@core/components/mui/TextField`)
+- Grid, Card, CardContent, Button, Divider, Typography
+
+### Key Pattern
+
+```tsx
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { valibotResolver } from '@hookform/resolvers/valibot'
+import { object, string, nonEmpty, minLength, pipe } from 'valibot'
+import { styled } from '@mui/material/styles'
+import MuiStepper from '@mui/material/Stepper'
+import Step from '@mui/material/Step'
+import StepLabel from '@mui/material/StepLabel'
+import Grid from '@mui/material/Grid'
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Divider from '@mui/material/Divider'
+import CustomTextField from '@core/components/mui/TextField'
+import StepperWrapper from '@core/styles/stepper'
+import StepperCustomDot from '@components/stepper-dot'
+import DirectionalIcon from '@components/DirectionalIcon'
+
+const Stepper = styled(MuiStepper)(({ theme }) => ({
+  justifyContent: 'center',
+  '& .MuiStep-root': {
+    '&:first-of-type': { paddingInlineStart: 0 },
+    '&:last-of-type': { paddingInlineEnd: 0 }
+  }
+}))
+
+const steps = [
+  { title: 'Account Details', subtitle: 'Enter your account details' },
+  { title: 'Personal Info', subtitle: 'Setup Information' }
+]
+
+const schema = object({
+  email: pipe(string(), nonEmpty('This field is required'), minLength(1))
+})
+
+// Separate useForm per step
+const { control, handleSubmit, formState: { errors } } = useForm({
+  resolver: valibotResolver(schema),
+  defaultValues: { email: '' }
+})
+
+// Form body
+return (
+  <Card>
+    <CardContent>
+      <StepperWrapper>
+        <Stepper activeStep={activeStep}>
+          {steps.map((step, i) => (
+            <Step key={i}>
+              <StepLabel slots={{ stepIcon: StepperCustomDot }}>
+                <Typography className='step-number'>{`0${i + 1}`}</Typography>
+                <Typography className='step-title'>{step.title}</Typography>
+                <Typography>{step.subtitle}</Typography>
+              </StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+      </StepperWrapper>
+    </CardContent>
+    <Divider />
+    <CardContent>
+      {/* Render step content */}
+    </CardContent>
+  </Card>
+)
+```
+
+---
+
+## Example 2: Add/Edit User Dialog (Form in Dialog)
+
+Used in `src/components/dialogs/add-edit-address/`, `src/components/dialogs/role-dialog/`, `src/views/apps/user/list/AddUserDrawer.tsx`.
+
+### Components Used
+
+- Dialog, DialogTitle, DialogContent, DialogActions
+- CustomTextField, Grid, Button, Switch, FormControlLabel, Typography
+- DialogCloseButton (`@/components/dialogs/DialogCloseButton`)
+
+### Pattern
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+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 Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid'
+import CustomTextField from '@core/components/mui/TextField'
+import Switch from '@mui/material/Switch'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import MenuItem from '@mui/material/MenuItem'
+import DialogCloseButton from '@/components/dialogs/DialogCloseButton'
+
+export default function AddEditAddressDialog() {
+  const [open, setOpen] = useState(false)
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    reset
+  } = useForm({
+    defaultValues: { address: '', city: '', state: '', zip: '', checked: false }
+  })
+
+  const onSubmit = (data: any) => {
+    toast.success('Address saved')
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Button variant='contained' onClick={() => setOpen(true)}>Open Dialog</Button>
+      <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth='sm'>
+        <DialogTitle className='flex justify-between items-center'>
+          Add Address
+          <DialogCloseButton onClick={() => setOpen(false)} />
+        </DialogTitle>
+        <DialogContent className='overflow-visible pbs-0'>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <Grid container spacing={6}>
+              <Grid size={{ xs: 12 }}>
+                <Controller
+                  name='address'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      {...field}
+                      fullWidth
+                      label='Address Line'
+                      {...(errors.address && { error: true, helperText: 'This field is required.' })}
+                    />
+                  )}
+                />
+              </Grid>
+              <Grid size={{ xs: 12, sm: 6 }}>
+                <Controller
+                  name='city'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField {...field} fullWidth label='City' />
+                  )}
+                />
+              </Grid>
+              <Grid size={{ xs: 12, sm: 6 }}>
+                <Controller
+                  name='state'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <CustomTextField
+                      select
+                      fullWidth
+                      label='State'
+                      {...field}
+                    >
+                      <MenuItem value='California'>California</MenuItem>
+                      <MenuItem value='New York'>New York</MenuItem>
+                      <MenuItem value='Texas'>Texas</MenuItem>
+                    </CustomTextField>
+                  )}
+                />
+              </Grid>
+              <Grid size={{ xs: 12 }}>
+                <FormControlLabel control={<Switch />} label='Use as a billing address' />
+              </Grid>
+            </Grid>
+          </form>
+        </DialogContent>
+        <DialogActions className='dialog-actions-dense'>
+          <Button variant='tonal' color='secondary' onClick={() => { setOpen(false); reset() }}>Cancel</Button>
+          <Button variant='contained' onClick={handleSubmit(onSubmit)}>Submit</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+```
+
+---
+
+## Example 3: Role/Permission Dialog (Checkbox Groups)
+
+Used in `src/components/dialogs/role-dialog/`, `src/components/dialogs/permission-dialog/`.
+
+### Components Used
+
+- Dialog, DialogTitle, DialogContent, DialogActions
+- Checkbox, FormGroup, FormControlLabel
+- Alert, AlertTitle
+- Typography
+
+### Pattern
+
+```tsx
+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 Checkbox from '@mui/material/Checkbox'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Alert from '@mui/material/Alert'
+import AlertTitle from '@mui/material/AlertTitle'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+const modulePermissions = {
+  'User Management': ['View', 'Add', 'Edit', 'Delete'],
+  'Content Management': ['View', 'Add', 'Edit', 'Publish'],
+  'Settings': ['View', 'Edit']
+}
+
+Object.entries(modulePermissions).map(([module, permissions]) => (
+  <div key={module} className='mbe-4'>
+    <Typography className='font-medium'>{module}</Typography>
+    <FormGroup>
+      {permissions.map(perm => (
+        <FormControlLabel
+          key={perm}
+          control={<Checkbox defaultChecked />}
+          label={perm}
+        />
+      ))}
+    </FormGroup>
+  </div>
+))
+
+<Alert severity='warning' className='mbs-6'>
+  <AlertTitle>Warning!</AlertTitle>
+  You cannot uncheck the "Read" permission, it is required for security.
+</Alert>
+```
+
+---
+
+## Example 4: Pricing Card with Switch
+
+Used in `src/components/pricing/index.tsx`, `src/views/front-pages/pricing/`.
+
+### Components Used
+
+- Card, CardContent
+- Chip (CustomChip)
+- Button
+- Typography
+- Switch, FormControlLabel
+- InputLabel, Grid
+
+### Pattern
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import Switch from '@mui/material/Switch'
+import InputLabel from '@mui/material/InputLabel'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Button from '@mui/material/Button'
+import Chip from '@mui/material/Chip'
+import CardContent from '@mui/material/CardContent'
+
+const [isAnnual, setIsAnnual] = useState(true)
+
+// Toggle switch
+<Grid container spacing={4} className='mbe-12 items-center justify-center'>
+  <Grid size='auto'>
+    <InputLabel htmlFor='pricing'>Monthly</InputLabel>
+  </Grid>
+  <Grid size='auto'>
+    <Switch id='pricing' checked={isAnnual} onChange={() => setIsAnnual(!isAnnual)} />
+  </Grid>
+  <Grid size='auto'>
+    <InputLabel htmlFor='pricing'>Annually</InputLabel>
+  </Grid>
+</Grid>
+
+// Plan card
+<CardContent>
+  <Typography variant='h5'>$29{isAnnual ? '/mo' : '/mo'}</Typography>
+  <Typography variant='body2' color='text.secondary'>
+    per user
+  </Typography>
+  <div className='mbs-4 mbe-6'>
+    <Chip label='Popular' color='primary' size='small' />
+  </div>
+  <Button fullWidth variant='contained'>
+    Get Started
+  </Button>
+</CardContent>
+```
+
+---
+
+## Example 5: Data Table with Selection
+
+Used in `src/views/apps/invoice/list/InvoiceListTable.tsx`, `src/views/apps/ecommerce/customers/list/`.
+
+### Components Used
+
+- Card, CardContent
+- Table, TableHead, TableBody, TableRow, TableCell
+- Checkbox
+- IconButton
+- Tooltip
+- Chip (CustomChip)
+- Typography
+- Button
+- TablePagination
+
+### Pattern
+
+```tsx
+const [selected, setSelected] = useState(new Set<number>())
+const [selectAll, setSelectAll] = useState(false)
+
+<Card>
+  <CardContent>
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell padding='checkbox'>
+            <Checkbox
+              checked={selectAll}
+              onChange={e => {
+                setSelectAll(e.target.checked)
+                if (e.target.checked) {
+                  setSelected(new Set(invoices.map(i => i.id)))
+                } else {
+                  setSelected(new Set())
+                }
+              }}
+            />
+          </TableCell>
+          <TableCell>Invoice ID</TableCell>
+          <TableCell>Client</TableCell>
+          <TableCell>Status</TableCell>
+          <TableCell align='right'>Balance</TableCell>
+          <TableCell align='right'>Actions</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {invoices.map(invoice => (
+          <TableRow key={invoice.id} className={selected.has(invoice.id) ? 'selected' : ''}>
+            <TableCell padding='checkbox'>
+              <Checkbox
+                checked={selected.has(invoice.id)}
+                onChange={() => {
+                  const newSelected = new Set(selected)
+                  selected.has(invoice.id) ? newSelected.delete(invoice.id) : newSelected.add(invoice.id)
+                  setSelected(newSelected)
+                }}
+              />
+            </TableCell>
+            <TableCell>
+              <Typography color='text.primary'>
+                <Link href={`/apps/invoice/preview/${invoice.id}`}>#{invoice.id}</Link>
+              </Typography>
+            </TableCell>
+            <TableCell>{invoice.clientName}</TableCell>
+            <TableCell>
+              <CustomChip
+                round='true'
+                size='small'
+                skin='light'
+                color={invoice.status === 'Paid' ? 'success' : 'warning'}
+                label={invoice.status}
+              />
+            </TableCell>
+            <TableCell align='right'>{invoice.balance}</TableCell>
+            <TableCell align='right'>
+              <Tooltip title='Send Mail'>
+                <IconButton onClick={() => handleSend(invoice.id)}>
+                  <i className='tabler-mail' />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title='Preview'>
+                <IconButton onClick={() => handlePreview(invoice.id)}>
+                  <i className='tabler-eye' />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title='Delete'>
+                <IconButton onClick={() => handleDelete(invoice.id)}>
+                  <i className='tabler-trash' />
+                </IconButton>
+              </Tooltip>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  </CardContent>
+  <TablePagination
+    component='div'
+    count={totalItems}
+    page={page}
+    rowsPerPage={rowsPerPage}
+    onPageChange={(_, newPage) => setPage(newPage)}
+    onRowsPerPageChange={e => { setRowsPerPage(+e.target.value); setPage(0) }}
+  />
+</Card>
+```
+
+---
+
+## Example 6: Stats Cards
+
+Used across all dashboards.
+
+```tsx
+import CardStatsVertical from '@components/card-statistics/Vertical'
+
+<Grid container spacing={6}>
+  <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+    <CardStatsVertical
+      title='Total Revenue'
+      stats='$45.2K'
+      chipText='+18%'
+      chipType='success'
+      avatarIcon='tabler-currency-dollar'
+      avatarColor='primary'
+    />
+  </Grid>
+  <Grid size={{ xs: 12, sm: 6, md: 3 }}>
+    <CardStatsVertical
+      title='Total Orders'
+      stats='1,234'
+      chipText='+6.2%'
+      chipType='success'
+      avatarIcon='tabler-shopping-cart'
+      avatarColor='info'
+    />
+  </Grid>
+</Grid>
+```
+
+---
+
+## Example 7: Profile/Account Settings (Tabs + Forms)
+
+```tsx
+'use client'
+
+import { useState } from 'react'
+import TabContext from '@mui/lab/TabContext'
+import TabPanel from '@mui/lab/TabPanel'
+import Tab from '@mui/material/Tab'
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CustomTabList from '@core/components/mui/TabList'
+import CustomTextField from '@core/components/mui/TextField'
+import CustomAvatar from '@core/components/mui/Avatar'
+import Button from '@mui/material/Button'
+import AvatarGroup from '@mui/material/AvatarGroup'
+import Typography from '@mui/material/Typography'
+import Chip from '@mui/material/Chip'
+import Divider from '@mui/material/Divider'
+
+export default function AccountSettings() {
+  const [tabValue, setTabValue] = useState('account')
+
+  return (
+    <TabContext value={tabValue}>
+      <Grid container spacing={6}>
+        <Grid size={12}>
+          <Card>
+            <CardContent>
+              <CustomTabList
+                onChange={(_, v) => setTabValue(v)}
+                variant='scrollable'
+                pill='true'
+                color='primary'
+              >
+                <Tab label='Account' value='account' />
+                <Tab label='Security' value='security' />
+                <Tab label='Billing' value='billing' />
+              </CustomTabList>
+            </CardContent>
+          </Card>
+        </Grid>
+        <Grid size={12}>
+          <TabPanel value='account'>
+            <Card>
+              <CardContent>
+                <form>
+                  <Grid container spacing={6}>
+                    <Grid size={{ xs: 12, sm: 6 }}>
+                      <CustomTextField fullWidth label='First Name' placeholder='John' />
+                    </Grid>
+                    <Grid size={{ xs: 12, sm: 6 }}>
+                      <CustomTextField fullWidth label='Last Name' placeholder='Doe' />
+                    </Grid>
+                    <Grid size={{ xs: 12 }}>
+                      <Button variant='contained' type='submit'>Save Changes</Button>
+                    </Grid>
+                  </Grid>
+                </form>
+              </CardContent>
+            </Card>
+          </TabPanel>
+        </Grid>
+      </Grid>
+    </TabContext>
+  )
+}
+```
+
+---
+
+## Example 8: Timeline (@mui/lab)
+
+```tsx
+import Timeline from '@mui/lab/Timeline'
+import TimelineItem from '@mui/lab/TimelineItem'
+import TimelineSeparator from '@mui/lab/TimelineSeparator'
+import TimelineConnector from '@mui/lab/TimelineConnector'
+import TimelineContent from '@mui/lab/TimelineContent'
+import TimelineDot from '@mui/lab/TimelineDot'
+import Typography from '@mui/material/Typography'
+
+<Timeline position='alternate'>
+  <TimelineItem>
+    <TimelineSeparator>
+      <TimelineDot color='primary' />
+      <TimelineConnector />
+    </TimelineSeparator>
+    <TimelineContent>
+      <Typography color='text.primary'>12 Invoices have been sent</Typography>
+      <Typography variant='body2' color='text.secondary'>01 Jan 2025</Typography>
+    </TimelineContent>
+  </TimelineItem>
+</Timeline>
+```
+
+---
+
+## Example 9: Two-Factor Auth Dialog
+
+Used in `src/components/dialogs/two-factor-auth/`.
+
+```tsx
+import Alert from '@mui/material/Alert'
+import AlertTitle from '@mui/material/AlertTitle'
+import Grid from '@mui/material/Grid'
+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 Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+
+<Alert severity='info'>
+  <AlertTitle>Two-Factor Authentication</AlertTitle>
+  Add a secondary phone to get login notifications
+</Alert>
+
+<Dialog open={open} onClose={handleClose}>
+  <DialogTitle>Enable Two-Factor Authentication</DialogTitle>
+  <DialogContent>
+    <Alert severity='warning'>
+      After this process is complete, you will be required to enter a code each time you log in.
+    </Alert>
+  </DialogContent>
+  <DialogActions className='dialog-actions-dense'>
+    <Button variant='tonal' color='secondary' onClick={handleClose}>Cancel</Button>
+    <Button variant='contained'>Enable</Button>
+  </DialogActions>
+</Dialog>
+```
+
+---
+
+## Example 10: Responsive Design with useMediaQuery
+
+```tsx
+'use client'
+
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { useTheme } from '@mui/material/styles'
+
+const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down('sm'))
+const isMediumScreen = useMediaQuery(theme => theme.breakpoints.down('md'))
+
+{isSmallScreen ? (
+  <VerticalLayout>
+    mobile-only content
+  </VerticalLayout>
+) : (
+  <HorizontalLayout>
+    desktop content
+  </HorizontalLayout>
+)}
+```
+
+---
+
+## Quick Reference: Which Component for What?
+
+| I need... | Use this | Import from |
+|-----------|----------|-------------|
+| Text input | `CustomTextField` | `@core/components/mui/TextField` |
+| Dropdown select | `CustomTextField` with `select` + `MenuItem` | `@core/components/mui/TextField` + `@mui/material/MenuItem` |
+| Number/Email/Password | `CustomTextField` with `type` prop | `@core/components/mui/TextField` |
+| Date picker | `AppReactDatepicker` with `CustomTextField` as `customInput` | `@/libs/styles/AppReactDatepicker` |
+| Avatar with color | `CustomAvatar` with `color` + `skin` | `@core/components/mui/Avatar` |
+| Badge with light bg | `CustomBadge` with `tonal='true'` | `@core/components/mui/Badge` |
+| Status label | `CustomChip` | `@core/components/mui/Chip` |
+| Card container | `Card` + `CardHeader` + `CardContent` | `@mui/material/` |
+| Dialog overlay | `Dialog` + `DialogTitle/Content/Actions` | `@mui/material/` |
+| Slide-in panel | `Drawer` with `variant='temporary'` | `@mui/material/Drawer` |
+| Tabs navigation | `TabContext` + `CustomTabList` + `TabPanel` | `@mui/lab` + `@core/components/mui/TabList` |
+| Multi-step form | `Stepper` + `Step` + `StepLabel` | `@mui/material/` |
+| Timeline | `Timeline` + `TimelineItem/Dot/Connector` | `@mui/lab/` |
+| Alert message | `Alert` + `AlertTitle` | `@mui/material/` |
+| Loading spinner | `CircularProgress` | `@mui/material/CircularProgress` |
+| Toast notification | `toast.success()/error()/warning()` | `react-toastify` |
+| Table rows | `Table` + `TableHead` + `TableBody` + `TableRow` + `TableCell` | `@mui/material/` |
+| Pagination | `TablePagination` or `Pagination` | `@mui/material/` |
+| Button (primary action) | `Button` with `variant='contained'` | `@mui/material/Button` |
+| Button (secondary action) | `Button` with `variant='tonal'` | `@mui/material/Button` |
+| Icon button | `IconButton` | `@mui/material/IconButton` |
+| Tooltip | `Tooltip` with `title` + `arrow` | `@mui/material/Tooltip` |
+| Grid layout | `Grid` with `size={{ xs: 12, sm: 6 }}` | `@mui/material/Grid` |
+| Responsive check | `useMediaQuery(theme.breakpoints.down('sm'))` | `@mui/material/useMediaQuery` |
+| Form with validation | `useForm` + `Controller` + `CustomTextField` | `react-hook-form` + valibot resolver + custom textfield |