WIP

app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx

@@ -189,16 +189,19 @@ function ActiveDrefTable(props: Props) {
                 'country',
                 strings.activeDrefTableCountryHeading,
                 (item) => item.country_details?.name,
+                { columnClassName: styles.country },
             ),
             createStringColumn<LatestDref, Key>(
                 'type_of_dref',
                 strings.activeDrefTableTypeOfDrefHeading,
                 (item) => item.type_of_dref_display,
+                { columnClassName: styles.type },
             ),
             createStringColumn<LatestDref, Key>(
                 'status',
                 strings.activeDrefTableStatusHeading,
                 (item) => item.status_display,
+                { columnClassName: styles.status },
             ),
             createElementColumn<LatestDref, Key, DrefTableActionsProps>(
                 'actions',
@@ -259,6 +262,7 @@ function ActiveDrefTable(props: Props) {
                         onPublishSuccess: refetchActiveDref,
                     };
                 },
+                { columnClassName: styles.actions },
             ),
         ]),
         [

app/src/views/AccountMyFormsDref/ActiveDrefTable/styles.module.css

@@ -6,10 +6,7 @@
     }
 
     .table {
-        .date {
-            width: 7rem;
-        }
-
+        .country,
         .appeal-code {
             width: 8rem;
         }
@@ -19,8 +16,15 @@
             min-width: 8rem;
         }
 
+        .actions,
         .stage {
-            width: 8rem;
+            width: 9rem;
+        }
+
+        .date,
+        .type,
+        .status {
+            width: 7rem;
         }
 
         .sub-cell {

app/src/views/AccountMyFormsDref/DownloadImportTemplateButton/index.tsx

@@ -0,0 +1,121 @@
+import {
+    useCallback,
+    useState,
+} from 'react';
+import { Button } from '@ifrc-go/ui';
+import xlsx from 'exceljs';
+import FileSaver from 'file-saver';
+
+import ifrcLogoFile from '#assets/icons/ifrc-square.png';
+import useNationalSociety from '#hooks/domain/useNationalSociety';
+import { COLOR_RED } from '#utils/constants';
+
+const fieldNameToCellAddressMap = {
+    national_society: {
+        row: 6,
+    },
+};
+
+function DownloadImportTemplateButton() {
+    const [generationPending, setGenerationPending] = useState(false);
+    const nationalSocieties = useNationalSociety();
+
+    const handleClick = useCallback(
+        () => {
+            async function generateTemplate() {
+                const workbook = new xlsx.Workbook();
+                const now = new Date();
+                workbook.created = now;
+                const response = await fetch(ifrcLogoFile);
+                const buffer = await response.arrayBuffer();
+
+                const ifrcLogo = workbook.addImage({
+                    buffer,
+                    extension: 'png',
+                });
+
+                const coverWorksheet = workbook.addWorksheet('DREF Import');
+
+                const overviewWorksheet = workbook.addWorksheet('Operation Overview');
+                const eventDetailsWorksheet = workbook.addWorksheet('Event Detail');
+                const actionsNeedsWorksheet = workbook.addWorksheet('Actions-Needs');
+                const operationWorksheet = workbook.addWorksheet('Operation');
+                const timeframeAndContactsWorksheet = workbook.addWorksheet('Operational timeframes and contacts');
+
+                coverWorksheet.addImage(ifrcLogo, 'A1:B6');
+                coverWorksheet.getCell('C1').value = 'DISASTER RESPONSE EMERGENCY FUND';
+                coverWorksheet.mergeCells('C1:L3');
+                coverWorksheet.getCell('C1:L3').style = {
+                    font: {
+                        name: 'Montserrat',
+                        family: 2,
+                        bold: true,
+                        size: 20,
+                        color: { argb: COLOR_RED },
+                    },
+                    alignment: { horizontal: 'center', vertical: 'middle' },
+                };
+                coverWorksheet.addRow('');
+                coverWorksheet.addRow('');
+                coverWorksheet.addRow('');
+                coverWorksheet.addRow('');
+                coverWorksheet.mergeCells('C4:L6');
+                coverWorksheet.getCell('C4').value = 'Import template';
+                coverWorksheet.getCell('C4').style = {
+                    font: {
+                        bold: true, size: 18, name: 'Montserrat', family: 2,
+                    },
+                    alignment: { horizontal: 'center', vertical: 'middle' },
+                };
+
+                overviewWorksheet.columns = [
+                    { header: 'ID', key: 'id' },
+                    { header: 'Field', key: 'field' },
+                    { header: 'Value', key: 'value' },
+                ];
+
+                const idColumn = overviewWorksheet.getColumn('id');
+                const fieldColumn = overviewWorksheet.getColumn('field');
+                idColumn.protection = {
+                    locked: true,
+                    hidden: true,
+                };
+                fieldColumn.protection = { locked: true };
+                overviewWorksheet.addRow({
+                    values: {
+                        id: 'country',
+                        field: 'Country',
+                    },
+                });
+
+                await workbook.xlsx.writeBuffer().then((sheet) => FileSaver.saveAs(
+                    new Blob([sheet], { type: 'application/vnd.ms-excel;charset=utf-8' }),
+                    `DREF import template ${now.toLocaleString()}.xlsx`,
+                ));
+
+                setGenerationPending(false);
+            }
+
+            setGenerationPending((alreadyGenerating) => {
+                if (!alreadyGenerating) {
+                    generateTemplate();
+                }
+
+                return true;
+            });
+        },
+        [nationalSocieties],
+    );
+
+    return (
+        <Button
+            onClick={handleClick}
+            name={undefined}
+            disabled={generationPending}
+        >
+            Download Import Template
+        </Button>
+    );
+}
+
+export default DownloadImportTemplateButton;

app/src/views/AccountMyFormsDref/index.tsx

@@ -10,6 +10,7 @@ import Link from '#components/Link';
 
 import ActiveDrefTable from './ActiveDrefTable';
 import CompletedDrefTable from './CompletedDrefTable';
+import DownloadImportTemplateButton from './DownloadImportTemplateButton';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -32,6 +33,9 @@ export function Component() {
                     {strings.drefFeedbackForm}
                 </Link>
             </div>
+            <div className={styles.actions}>
+                <DownloadImportTemplateButton />
+            </div>
             {currentView === 'active' && (
                 <ActiveDrefTable
                     actions={(

app/src/views/CountryPreparedness/DocumentCard/styles.module.css

@@ -14,7 +14,7 @@
 
         .name {
             display: flex;
-            word-break: break-all;
+            word-break: break-word;
         }
     }
 

packages/ui/src/components/Table/TableBodyContent/styles.module.css

@@ -2,7 +2,7 @@
     .cell {
         padding: var(--go-ui-spacing-sm);
         overflow: hidden;
-        word-break: break-all;
+        word-break: break-word;
     }
 
     &:hover {