Frontend (Mantine) on Palmyra

1. Project setup

Mon, 01 Jan 0001 00:00:00 +0000

1. Project setup#

What this step does. Scaffolds a plain Vite + React + TypeScript app, adds Mantine and the three Palmyra frontend libraries, configures a dev-server proxy so /api lands on the SpringBoot backend, and sets up routing.

npm create vite@latest empmgmt-web -- --template react-ts
cd empmgmt-web

Install#

npm install react@19 react-dom@19 \
            @mantine/core@8 @mantine/hooks@8 @mantine/dates@8 \
            react-router-dom@7 react-toastify dayjs \
            @palmyralabs/palmyra-wire \
            @palmyralabs/rt-forms \
            @palmyralabs/rt-forms-mantine \
            @palmyralabs/template-tribble

@palmyralabs/template-tribble supplies SummaryGrid, DialogNewForm, and DialogEditForm — prebuilt templates that cut the repetitive grid / modal plumbing out of each page. This is the same pattern the thinxar/clinic reference uses.

2. Store factory + endpoints

Mon, 01 Jan 0001 00:00:00 +0000

2. Store factory + endpoints#

What this step does. Configures the single source of truth for network calls — every grid, form, and lookup on the frontend goes through this factory. Pages never import axios or fetch.

One factory, one error handler, one central endpoint config. Every page fetches through this.

Store factory#

// src/wire/StoreFactory.ts
import { PalmyraStoreFactory } from '@palmyralabs/palmyra-wire';
import { toast } from 'react-toastify';

const errorHandler = () => (error: any) => {
  const status = error?.response?.status;
  if (status === 401) { window.location.assign('/login'); return true; }
  if (status === 403) { toast.error("You don't have permission for this action."); return true; }
  if (status >= 500)  { toast.error('Server error. Please retry.'); return true; }
  return false;
};

const AppStoreFactory = new PalmyraStoreFactory({
  baseUrl: '/api',
  errorHandlerFactory: errorHandler,
});

export default AppStoreFactory;

baseUrl: '/api' matches the SpringBoot context path set in the backend setup.

3. Department screens

Mon, 01 Jan 0001 00:00:00 +0000

3. Department screens#

What this step does. Builds the first entity’s full UX with five small files — a list grid, a “New” modal, a detail page, a read-only view form, and an “Edit” modal. Nothing touches axios; the grid and forms resolve endpoints on their own through the store factory context from step 2.

Five files per entity, following the clinic’s masterdata layout: grid page + new-form dialog at the top level; detail page + view form + edit dialog under view/.

4. Employee screens

Mon, 01 Jan 0001 00:00:00 +0000

4. Employee screens#

What this step does. Repeats the Department five-file pattern for Employees, plus two idioms the first entity didn’t need: a dotted department.code column that reads the FK join inline, and a MantineServerLookup against /department that turns the Department dropdown into a live server query.

Same five-file layout as Department — grid + new-form at the top level, view subfolder for the detail page and its edit dialog. The interesting bits here are the flattened FK column in the grid and the MantineServerLookup against /department inside the form.