@attabot/complaint-app

Complaint Management UI as an npm package. Built with atomic design (atoms → molecules → organisms) so the parent app can mount a ready dashboard that uses the parent’s auth token and API base URL.

Installation

npm install @attabot/complaint-app

Peer dependencies:

npm install react react-dom react-redux @reduxjs/toolkit

Usage

import ComplaintApp from '@attabot/complaint-app';
import '@attabot/complaint-app/style.css';
import brandTheme from './brandTheme.json'; // static theme file

function App() {
  const [darkMode, setDarkMode] = useState(false); // owned by parent

  return (
    <ComplaintApp
      apiUrl="https://your-api.example.com"
      authToken={sessionToken}
      theme={brandTheme}
      darkMode={darkMode}
      systemsEndpoint="/api/v1/complaint-systems"
      onCreateForm={() => navigate('/forms/new')}
      onConfigure={(system) => navigate(`/systems/${system.id}`)}
    />
  );
}

Theme & dark mode (parent-controlled)

Pass a static theme file (JSON/JS) and toggle darkMode from the parent. The package applies CSS variables across the whole UI.

import brandTheme from './brandTheme.json';

<ComplaintApp theme={brandTheme} darkMode={isDark} />

Theme file shape:

{
  "light": { "colors": { "primary": "#2D64B8", "background": "#F5F5F5" } },
  "dark":  { "colors": { "primary": "#5B8DEF", "background": "#0F1115" } }
}

Or pass flat overrides (merged into both modes):

<ComplaintApp theme={{ colors: { primary: '#0F766E' } }} darkMode={false} />

Helpers / defaults are exported: lightTheme, darkTheme, defaultThemeFile, useTheme.

Pass data from the parent (no fetch)

<ComplaintApp
  apiUrl={apiUrl}
  authToken={authToken}
  useDemoData={false}
  systems={[
    {
      id: 'qms',
      title: 'QMS - Query Management System',
      status: 'active',
      description: 'Description of the template',
      departments: 3,
      workflows: 12,
      fields: 55,
      formsFilled: 234,
      updatedOn: '12 Mar 2024',
      titleAsLink: true,
    },
  ]}
  onCreateForm={handleCreate}
  onConfigure={handleConfigure}
/>

Props

Atomic structure

src/components/
  atoms/       Button, Input, Typography, StatusBadge, Divider, Icons, Loading
  molecules/   SearchBar, DataPoint, CardHeader, CardFooter
  organisms/   PageHeader, SystemCard, SystemCardGrid

Named exports are available for reuse in the parent:

import { Button, SearchBar, SystemCard, api } from '@attabot/complaint-app';

Auth & API

1. Parent passes apiUrl + authToken into ComplaintApp / ApiProvider.
2. Package axios client (api) keeps the passed token in memory and attaches Authorization: Bearer … immediately before every request. It does not overwrite the parent app's auth cookie.
3. Optional token refresh against POST /api/v1/auth/refresh when a refreshToken cookie exists.
4. No product/business APIs are hardcoded — provide systems or systemsEndpoint.

Redux and router integration

When mounted inside a parent react-redux Provider, ComplaintApp automatically reuses that Provider instead of adding a second competing Redux context. When used standalone it falls back to its own store. Pass the store prop only when you explicitly want an isolated store.

The same rule applies to React Router: an existing parent router is reused; a BrowserRouter is only created for standalone use.

Development

npm install
npm run dev      # preview Complaint Management UI
npm run build    # emit dist/ for publishing

License

MIT

Parent-owned catalogs

Pass roleList, userList, and storeList from the parent application (for example, its Redux selectors). Each entry has an id and a name or label. The parent loads these catalogs; the package uses roles and users in category/workflow selectors and stores in Store ID controls in the complaint form and preview. Updates to the props are reflected on rerender. Store controls submit IDs. Complaint types, workflows, fields, statuses, and complaint submissions continue using the complaint API. Pass the signed-in user as currentUser; when the company prop is omitted, the package also uses currentUser.company for company-specific location labels.

<ComplaintApp apiUrl={complaintApiUrl} authToken={token}
  roleList={roleList} storeList={storeList} useDemoData={false} />

The legacy rolelist prop remains an alias; roleList takes precedence. Missing roles default to an empty list. If storeList is omitted, Store ID fields retain their API-defined controls/options; an explicitly supplied empty array renders an empty store selector. The package keeps its own Redux provider unless an explicit store is supplied.

Company context

Pass the parent company object using company={company}. If omitted, the package uses currentUser.company when available. The package forwards the resolved object with page props and synchronizes it to state.appDetails.details.company, so nested components can read it through the existing package Redux provider. Parent updates replace the company object; passing null clears it. The package does not fetch company details.

Visible location labels use company.level4 (for example, Branch ID and Select Branch). Missing or blank names fall back to Store. Field keys, IDs, saved data, and dependency values retain their original values.