feat(client): replace Mantine's Table in the business trip report

.changeset/olive-otters-tap.md

@@ -0,0 +1,10 @@
+---
+'@accounter/client': patch
+---
+
+Replace Mantine's `Table`, `Paper`, `Popover`, `Grid`, `List` and `Text` in the business trip
+report's tables with `ui/table`, `ui/card`, `Tooltip` and Tailwind. The subtree no longer imports
+Mantine at all.
+
+`common/tooltip.tsx` now accepts a `ReactNode` for `content` as its type always claimed — React's
+RDFa `content?: string` attribute was narrowing it to strings.

eslint.config.mjs

@@ -306,7 +306,7 @@ export default [
       'packages/client/src/components/charge-matching/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/charge-matches/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/clients/**/*.{,c,m}{j,t}s{,x}',
-      'packages/client/src/components/common/business-trip-report/buttons/**/*.{,c,m}{j,t}s{,x}',
+      'packages/client/src/components/common/business-trip-report/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/contracts/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/financial-accounts/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/landing/**/*.{,c,m}{j,t}s{,x}',

packages/client/src/components/common/business-trip-report/parts/accommodations-row.tsx

@@ -11,6 +11,7 @@ import { useUpdateBusinessTripAccommodationsExpense } from '../../../../hooks/us
 import { Button } from '../../../ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../ui/form.js';
 import { Input } from '../../../ui/input.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { NumberInput, Tooltip } from '../../index.js';
 import { CategorizeIntoExistingExpense } from '../buttons/categorize-into-existing-expense.js';
 import { DeleteBusinessTripExpense } from '../buttons/delete-business-trip-expense.js';
@@ -75,15 +76,15 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
   };
 
   return (
-    <tr key={accommodationExpense.id}>
+    <TableRow key={accommodationExpense.id}>
       <CoreExpenseRow
         data={accommodationExpense}
         isEditMode={isEditMode}
         control={control as unknown as Control<UpdateBusinessTripFlightsExpenseInput, unknown>}
         businessTripId={businessTripId}
       />
 
-      <td>
+      <TableCell>
         <Form {...formManager}>
           <form id={`form ${accommodationExpense.id}`} onSubmit={handleSubmit(onSubmit)}>
             {isEditMode ? (
@@ -112,8 +113,8 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
             )}
           </form>
         </Form>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <div className="flex flex-col gap-2 justify-center">
           {isEditMode ? (
             <Form {...formManager}>
@@ -144,8 +145,8 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
             </div>
           )}
         </div>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {isEditMode ? (
           <Form {...formManager}>
             <AttendeesStayInput
@@ -167,8 +168,8 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
             )}
           </ul>
         )}
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {onChange && (
           <>
             <Tooltip content="Edit">
@@ -211,7 +212,7 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
             />
           </>
         )}
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };

packages/client/src/components/common/business-trip-report/parts/accommodations-table.tsx

@@ -1,7 +1,14 @@
 import type { ReactElement } from 'react';
-import { Table } from '@mantine/core';
 import { BusinessTripReportAccommodationsTableFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 import { AddAccommodationExpense } from '../buttons/add-accommodation-expense.js';
 import { AccommodationsRow } from './accommodations-row.js';
 import { CoreExpenseHeader } from './core-expense-row.js';
@@ -41,17 +48,17 @@ export const AccommodationsTable = ({
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
             <CoreExpenseHeader />
-            <th>Location</th>
-            <th>Nights</th>
-            <th>Attendees Stay</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+            <TableHead>Location</TableHead>
+            <TableHead>Nights</TableHead>
+            <TableHead>Attendees Stay</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {accommodationExpenses
             .sort((a, b) => {
               // sort by start date (if available, newest top) and then by name
@@ -71,13 +78,13 @@ export const AccommodationsTable = ({
               />
             ))}
           {onChange && (
-            <tr>
-              <td colSpan={6}>
+            <TableRow>
+              <TableCell colSpan={6}>
                 <AddAccommodationExpense businessTripId={businessTripId} onAdd={onChange} />
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
           )}
-        </tbody>
+        </TableBody>
       </Table>
     </div>
   );

packages/client/src/components/common/business-trip-report/parts/attendee-row.tsx

@@ -18,6 +18,7 @@ import {
   FormLabel,
   FormMessage,
 } from '../../../ui/form.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { ToggleExpansionButton, Tooltip } from '../../index.js';
 import { DatePickerInput } from '../../inputs/date-picker-input.js';
 import { DeleteAttendee } from '../buttons/delete-attendee.js';
@@ -75,9 +76,9 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
 
   return (
     <Form {...form}>
-      <tr key={attendee.id}>
-        <td>{attendee.name}</td>
-        <td>
+      <TableRow key={attendee.id}>
+        <TableCell>{attendee.name}</TableCell>
+        <TableCell>
           {isEditMode ? (
             <form id={`form ${attendee.id}`} onSubmit={handleSubmit(onSubmit)}>
               <FormField
@@ -114,8 +115,8 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
           ) : (
             attendee.arrivalDate
           )}
-        </td>
-        <td>
+        </TableCell>
+        <TableCell>
           {isEditMode ? (
             <FormField
               name="departureDate"
@@ -149,8 +150,8 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
           ) : (
             attendee.departureDate
           )}
-        </td>
-        <td className="flex items-center gap-2">
+        </TableCell>
+        <TableCell className="flex items-center gap-2">
           <Tooltip content="Edit">
             <Button
               disabled={updatingInProcess}
@@ -186,11 +187,11 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
           />
 
           <ToggleExpansionButton toggleExpansion={setIsExtended} isExpanded={isExtended} />
-        </td>
-      </tr>
+        </TableCell>
+      </TableRow>
       {isExtended && (
-        <tr key={`${attendee.id}-expension`}>
-          <td colSpan={4}>
+        <TableRow key={`${attendee.id}-expension`}>
+          <TableCell colSpan={4}>
             {/* Mantine's `Card shadow="sm" withBorder` carried its own 16px padding; shadcn's has
                 none. The radius and shadow are the house Card's now, so this panel matches the
                 app's other cards rather than Mantine's 4px corners. */}
@@ -217,8 +218,8 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
                 )}
               </div>
             </Card>
-          </td>
-        </tr>
+          </TableCell>
+        </TableRow>
       )}
     </Form>
   );

packages/client/src/components/common/business-trip-report/parts/attendees.tsx

@@ -1,7 +1,14 @@
 import type { ReactElement } from 'react';
-import { Table } from '@mantine/core';
 import { BusinessTripReportAttendeesFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 import { AddAttendee } from '../buttons/add-attendee.js';
 import { AttendeeRow } from './attendee-row.js';
 
@@ -31,16 +38,16 @@ export const Attendees = ({ data, onChange }: Props): ReactElement => {
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Arrival Date</th>
-            <th>Departure Date</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Arrival Date</TableHead>
+            <TableHead>Departure Date</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {attendees
             .sort((a, b) => (a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1))
             .map(attendee => (
@@ -51,12 +58,12 @@ export const Attendees = ({ data, onChange }: Props): ReactElement => {
                 key={attendee.id}
               />
             ))}
-          <tr>
-            <td colSpan={4}>
+          <TableRow>
+            <TableCell colSpan={4}>
               <AddAttendee businessTripId={id} onAdd={onChange} />
-            </td>
-          </tr>
-        </tbody>
+            </TableCell>
+          </TableRow>
+        </TableBody>
       </Table>
     </div>
   );

packages/client/src/components/common/business-trip-report/parts/car-rental-row.tsx

@@ -10,6 +10,7 @@ import { useUpdateBusinessTripCarRentalExpense } from '../../../../hooks/use-upd
 import { Button } from '../../../ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormLabel } from '../../../ui/form.js';
 import { Switch } from '../../../ui/switch.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { Tooltip } from '../../index.js';
 import { NumberInput } from '../../inputs/number-input.js';
 import { CategorizeIntoExistingExpense } from '../buttons/categorize-into-existing-expense.js';
@@ -56,15 +57,15 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
   };
 
   return (
-    <tr key={carRentalExpense.id}>
+    <TableRow key={carRentalExpense.id}>
       <CoreExpenseRow
         data={carRentalExpense}
         isEditMode={isEditMode}
         control={control}
         businessTripId={businessTripId}
       />
 
-      <td>
+      <TableCell>
         <Form {...form}>
           <form id={`form ${carRentalExpense.id}`} onSubmit={handleSubmit(onSubmit)}>
             <div className="flex flex-col gap-2 justify-center">
@@ -94,8 +95,8 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
             </div>
           </form>
         </Form>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {isEditMode ? (
           <Form {...form}>
             <FormField
@@ -123,8 +124,8 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
         ) : (
           <Car />
         )}
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <Tooltip content="Edit">
           <Button
             disabled={updatingInProcess}
@@ -163,7 +164,7 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
           businessTripExpenseId={carRentalExpense.id}
           onDelete={onChange}
         />
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };