# nucleus-frontend

## Commands

```bash
npm start          # Dev server (CRACO)
npm run build      # Production build
npm test           # Run tests
npm run lint       # ESLint check
npm run lint:fix   # ESLint auto-fix
npm run format     # Prettier formatting
```

## Architecture

**Stack:** React 17 + Redux Toolkit + Ant Design 4 + React Router v6 + CRACO

**Folder structure:**
```
src/
  app/
    store.js        # Redux store (45+ slices)
    history.js      # Custom history for imperative navigation
  common/           # Shared reusable components
  features/         # Feature modules (see below)
  utilities/
    apiClient.js    # Custom fetch wrapper (base URL, auth headers, error handling)
```

**Styling:** LESS CSS Modules. Component-scoped `.module.less` files alongside components.

**Routing:** Role-based routing defined in `src/App.js`. Routes are conditionally rendered based on user role from Redux auth state.

## Feature Module Pattern

Each feature follows this structure:

```
features/{name}/
  redux/
    slice.js        # createSlice with reducers + createAsyncThunk actions
    api.js          # API calls using apiClient
  components/       # Feature-specific components
  index.js          # Public exports
```

## Forms

- Use Ant Design `Form.useForm()` hook
- Validation via the `rules` prop on `Form.Item` — no external validation library
- Example pattern:

```jsx
const [form] = Form.useForm();

<Form form={form} onFinish={handleSubmit}>
  <Form.Item name="field" rules={[{ required: true, message: 'Required' }]}>
    <Input />
  </Form.Item>
</Form>
```

## Modals

Use the `CustomModal` wrapper from `src/common/CustomModal/` — do not use `Modal` from antd directly.

```jsx
import CustomModal from 'common/CustomModal';

<CustomModal title="..." visible={open} onCancel={handleClose}>
  {/* content */}
</CustomModal>
```

## Tables

Use `CustomTable` from `src/common/Content/CustomTable/` — wraps antd `Table` with consistent pagination,showPaginationMeta, loading states, and styling.

```jsx
import CustomTable from 'common/Content/CustomTable';

<CustomTable columns={columns} dataSource={data} loading={loading} />
```

## State Management

- Redux Toolkit `createSlice` for all feature state
- `createAsyncThunk` for async API calls
- Selectors defined inline or at the bottom of slice files
- Access store in components via `useSelector` / `useDispatch`

## Auth

- Auth state stored in `localStorage` under key `Gravity_user`
- 10-hour session expiry checked on app load
- Do not access `localStorage` directly in feature code — go through the auth utilities in `src/utilities/`

## Navigation

Use the custom history object for imperative navigation outside React components:

```js
import history from 'app/history';
history.push('/some-path');
```

Inside components, prefer the `useNavigate` hook from React Router v6.

## API Client

All API calls go through `src/utilities/apiClient.js`. It handles:
- Base URL injection
- Auth header attachment
- Error normalization

Do not use `fetch` or `axios` directly — always use `apiClient`.

---

## Industry Best Practices (Future Work)

These are improvements to consider for new code. Do not refactor existing code solely to adopt these — apply them as areas are touched.

### Co-locate component helper
Place helper file next to the component: they helper file will have all the helper (constants,function,config like table etc)
```
components/
  MyComponent.jsx
  MyComponent.helper.js   # co-located, not in a separate __helper__ dir
```
### Graceful user expericence
1.whenever we create a new component or inproving existing component always make it user graceful expereince by adding loaders(screen level, dropdown, buttons when linked to apis), disable submission button till the api settles
2. toasters on api submissions. 
3. placeholders examples (like input fields,dropdowns,texts etc)

## Core Principles

- *Simplicity First*: Make every change as simple as possible. Impact minimal code.
- *No Laziness*: Find root causes. No temporary fixes. Senior developer standards.
- *Minimal Impact*: Changes should only touch what's necessary. Avoid introducing bugs.