328 donation page updates

apps/frontend/src/app/components/DataTable.tsx

@@ -89,7 +89,7 @@ export default function DataTable<T>({
   ];
 
   return (
-    <Table.Root variant={variant} width="100%">
+    <Table.Root variant={variant} width="100%" tableLayout={hasWidths ? 'fixed' : undefined}>
       {hasWidths && (
         <Table.ColumnGroup>
           {selection && <Table.Column width="48px" />}
@@ -182,7 +182,13 @@ export default function DataTable<T>({
                 </Table.Cell>
               )}
               {columns.map((column) => (
-                <Table.Cell key={column.key} textAlign={column.align}>
+                <Table.Cell
+                  key={column.key}
+                  textAlign={column.align}
+                  overflow="hidden"
+                  whiteSpace="nowrap"
+                  textOverflow="ellipsis"
+                >
                   {column.cell(row)}
                 </Table.Cell>
               ))}

apps/frontend/src/app/components/DropdownSelector.tsx

@@ -95,8 +95,7 @@ export default function DropdownSelector({
 
         <Portal>
           <Select.Positioner style={{ width: 'var(--reference-width)', left:"3px" }}>
-            <Select.Content className="!rounded !border !border-black-200 !bg-core-white !shadow-none !p-0 !mt-0.5 !font-body !text-body">
-              {collection.items.map((item) =>
+          <Select.Content className="!rounded !border !border-black-200 !bg-core-white !shadow-none !p-0 !mt-0.5 !font-body !text-body !max-h-[176px] !overflow-y-auto">              {collection.items.map((item) =>
                 multiSelect ? (
                   <Select.Item
                     key={item.value}

apps/frontend/src/app/components/TextInputField.tsx

@@ -19,6 +19,8 @@ interface TextInputFieldProps {
   rows?: number;
   /** Rendered before the value, e.g. `$` on the budget field. */
   prefix?: string;
+  /** Rendered before the value as an icon, e.g. a mail icon on the email field. Mutually exclusive with `prefix`. */
+  icon?: React.ReactNode;
   inputMode?: 'text' | 'decimal' | 'numeric';
 }
 
@@ -35,6 +37,7 @@ export default function TextInputField({
   multiline = false,
   rows = 4,
   prefix,
+  icon,
   inputMode,
 }: TextInputFieldProps) {
   const [internalValue, setInternalValue] = useState('');
@@ -64,6 +67,8 @@ export default function TextInputField({
 
   const sharedClass = `!w-full !rounded !px-3 !py-2 !bg-core-white focus:!outline-none focus:!ring-0 !shadow-none !border !font-body !text-body placeholder:font-body ${inputClass}`;
 
+  const hasLeftAdornment = Boolean(prefix) || Boolean(icon);
+
   return (
     <Field.Root gap="0" className="!w-full font-body text-body">
       <Field.Label
@@ -97,8 +102,18 @@ export default function TextInputField({
               {prefix}
             </span>
           )}
+          {icon && (
+            <span
+              aria-hidden
+              className={`pointer-events-none absolute left-3 top-1/2 z-10 flex -translate-y-1/2 items-center ${
+                isError ? 'text-error-red' : 'text-black-700'
+              }`}
+            >
+              {icon}
+            </span>
+          )}
           <Input
-            className={`${sharedClass} !h-10 ${prefix ? '!pl-7' : ''}`}
+            className={`${sharedClass} !h-10 ${hasLeftAdornment ? '!pl-9' : ''}`}
             value={currentValue}
             onChange={handleChange}
             placeholder={placeholder}
@@ -115,4 +130,4 @@ export default function TextInputField({
       )}
     </Field.Root>
   );
-}
+}

apps/frontend/src/app/donations/page.tsx

@@ -38,7 +38,7 @@ export default function DonationsPage() {
   const [currentPage, setCurrentPage] = useState(1);
   const [search, setSearch] = useState('');
   const [showFilter, setShowFilter] = useState(false);
-  const [selectedDonor, setSelectedDonor] = useState<string>('');
+  const [selectedDonors, setSelectedDonors] = useState<string[]>([]);
   const [showSort, setShowSort] = useState(false);
   const [selectedSort, setSelectedSort] = useState<string>('');
 
@@ -98,9 +98,9 @@ export default function DonationsPage() {
         )
       : rows;
 
-    if (selectedDonor) {
-      matching = matching.filter((row) => String(row.donor_id) === selectedDonor);
-    }
+      if (selectedDonors.length > 0) {
+        matching = matching.filter((row) => selectedDonors.includes(String(row.donor_id)));
+      }
 
     if (selectedSort === 'Amount') {
       return [...matching].sort((a, b) => Number(b.amount) - Number(a.amount));
@@ -111,7 +111,7 @@ export default function DonationsPage() {
       );
     }
     return matching;
-  }, [rows, search, selectedDonor, selectedSort]);
+  }, [rows, search, selectedDonors, selectedSort]);
 
   const totalPages = Math.max(1, Math.ceil(filtered.length / ROWS_PER_PAGE));
   const page = Math.min(currentPage, totalPages);
@@ -128,29 +128,22 @@ export default function DonationsPage() {
       cell: (donation) => formatDateNumeric(donation.donated_at) || '—',
       skeleton: { width: '70%' },
     },
-    {
-      key: 'donor',
-      header: 'Donor ID',
-      width: '15%',
-      cell: (donation) => `#${String(donation.donor_id).padStart(6, '0')}`,
-      skeleton: { width: '80%' },
-    },
     {
       key: 'donor_name',
-      header: 'Donor',
-      width: '20%',
+      header: 'Donor Name',
+      width: '30%',
       cell: (donation) => donation.donor_name,
     },
     {
       key: 'project',
       header: 'Project Name',
-      width: '25%',
+      width: '30%',
       cell: (donation) => donation.project_name,
     },
     {
       key: 'amount',
       header: 'Amount',
-      width: '15%',
+      width: '20%',
       cell: (donation) => formatCurrencyPrecise(donation.amount),
       skeleton: { width: '55%' },
     },
@@ -198,7 +191,6 @@ export default function DonationsPage() {
     setSaving(true);
     setSaveError(null);
     try {
-      // Previously this only closed the dialog, so nothing was ever persisted.
       await api.post('/donors/donations', {
         donor_id: Number(newDonor),
         project_id: Number(newProject),
@@ -255,15 +247,17 @@ export default function DonationsPage() {
                   onClick={() => setShowFilter((prev) => !prev)}
                 >
                   Filter By Donor
+                  {selectedDonors.length > 0 && ` (${selectedDonors.length})`}
                 </Button>
                 {showFilter && (
                   <div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10 }}>
                     <DropdownSelector
                       options={donorOptions}
                       placeholder="Filter by donor..."
-                      value={selectedDonor}
+                      multiSelect={true}
+                      value={selectedDonors}
                       onChange={(val: string | string[]) => {
-                        setSelectedDonor(val as string);
+                        setSelectedDonors(val as string[]);
                         setCurrentPage(1);
                       }}
                     />
@@ -468,4 +462,4 @@ export default function DonationsPage() {
       </main>
     </div>
   );
-}
+}

apps/frontend/src/lib/api.ts

@@ -3,6 +3,7 @@ const SERVICE_PORTS: Record<string, string> = {
   users: '3001',
   projects: '3002',
   donors: '3003',
+  donations: '3003',
   expenditures: '3004',
   reports: '3005',
 };

apps/frontend/test/components/Donations.test.tsx

@@ -22,7 +22,7 @@ describe('Donations Page Component', () => {
     it('renders the table with correct headers', () => {
         render(<Donations />);
         expect(screen.getByText('Date')).toBeInTheDocument();
-        expect(screen.getByText('Donor ID')).toBeInTheDocument();
+        expect(screen.getByText('Donor Name')).toBeInTheDocument();
         expect(screen.getByText('Project Name')).toBeInTheDocument();
         expect(screen.getByText('Amount')).toBeInTheDocument();
     });