327 Update Donors Page to match figma

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" />}
@@ -99,34 +99,34 @@ export default function DataTable<T>({
         </Table.ColumnGroup>
       )}
 
-      <Table.Header>
-        <Table.Row backgroundColor="var(--color-primary-800)">
-          {selection && (
-            <Table.ColumnHeader width="48px" paddingY="12px">
-              <Checkbox.Root
-                checked={
-                  selection.allSelected ? true : selection.someSelected ? 'indeterminate' : false
-                }
-                onCheckedChange={selection.onToggleAll}
-                disabled={selection.disabled}
-                aria-label={selection.label ?? 'Select all rows'}
-              >
-                <Checkbox.HiddenInput />
-                <Checkbox.Control borderRadius="md" css={CHECKBOX_CONTROL_CSS} />
-              </Checkbox.Root>
-            </Table.ColumnHeader>
-          )}
-          {columns.map((column) => (
-            <Table.ColumnHeader
-              key={column.key}
-              color="var(--color-core-white)"
-              textAlign={column.align}
+    <Table.Header>
+      <Table.Row backgroundColor="var(--color-primary-800)">
+        {selection && (
+          <Table.ColumnHeader width="48px" paddingY="12px">
+            <Checkbox.Root
+              checked={
+                selection.allSelected ? true : selection.someSelected ? 'indeterminate' : false
+              }
+              onCheckedChange={selection.onToggleAll}
+              disabled={selection.disabled}
+              aria-label={selection.label ?? 'Select all rows'}
             >
-              <h5>{column.header}</h5>
-            </Table.ColumnHeader>
-          ))}
-        </Table.Row>
-      </Table.Header>
+              <Checkbox.HiddenInput />
+              <Checkbox.Control borderRadius="md" css={CHECKBOX_CONTROL_CSS} />
+            </Checkbox.Root>
+          </Table.ColumnHeader>
+        )}
+        {columns.map((column) => (
+          <Table.ColumnHeader
+            key={column.key}
+            color="var(--color-core-white)"
+            textAlign={column.align}
+          >
+            <h5>{column.header}</h5>
+          </Table.ColumnHeader>
+        ))}
+      </Table.Row>
+    </Table.Header>
 
       <Table.Body>
         {isLoading ? (
@@ -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/TextInputField.tsx

@@ -19,6 +19,7 @@ interface TextInputFieldProps {
   rows?: number;
   /** Rendered before the value, e.g. `$` on the budget field. */
   prefix?: string;
+  icon?: React.ReactNode;
   inputMode?: 'text' | 'decimal' | 'numeric';
 }
 
@@ -35,6 +36,7 @@ export default function TextInputField({
   multiline = false,
   rows = 4,
   prefix,
+  icon,
   inputMode,
 }: TextInputFieldProps) {
   const [internalValue, setInternalValue] = useState('');
@@ -97,9 +99,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' : ''}`}
-            value={currentValue}
+            className={`${sharedClass} !h-10 ${prefix || icon ? '!pl-9' : ''}`}            value={currentValue}
             onChange={handleChange}
             placeholder={placeholder}
             disabled={disabled}

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

@@ -8,6 +8,7 @@ import Button from '../components/Button';
 import { CiFilter } from 'react-icons/ci';
 import { LuArrowDownUp } from 'react-icons/lu';
 import { FaPlus } from 'react-icons/fa';
+import { MdOutlineMail } from 'react-icons/md';
 import DropdownSelector from '../components/DropdownSelector';
 import DataTable, { type DataTableColumn } from '../components/DataTable';
 import RowDeleteButton from '../components/RowDeleteButton';
@@ -43,7 +44,7 @@ export default function DonorsPage() {
   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>('');
 
@@ -116,8 +117,8 @@ export default function DonorsPage() {
         )
       : 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 === '# of Projects') {
@@ -129,7 +130,7 @@ export default function DonorsPage() {
       );
     }
     return matching;
-  }, [rows, search, selectedDonor, selectedSort]);
+  }, [rows, search, selectedDonors, selectedSort]);
 
   const donorOptions = donors.map((d) => ({
     label: d.organization,
@@ -215,7 +216,6 @@ export default function DonorsPage() {
     setSaving(true);
     setSaveError(null);
     try {
-      // Previously this only closed the dialog, so nothing was ever persisted.
       await api.post('/donors', {
         organization: newOrganization.trim(),
         contact_name: newContactName.trim(),
@@ -262,15 +262,17 @@ export default function DonorsPage() {
                   onClick={() => setShowFilter((prev) => !prev)}
                 >
                   Filter By
+                  {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);
                       }}
                     />
@@ -354,6 +356,7 @@ export default function DonorsPage() {
                       <TextInputField
                         label="Contact Email*"
                         placeholder="Contact email"
+                        icon={<MdOutlineMail />}
                         value={newContactEmail}
                         onChange={(val) => {
                           setNewContactEmail(val);
@@ -441,4 +444,4 @@ export default function DonorsPage() {
       </main>
     </div>
   );
-}
+}