WIP

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

@@ -188,6 +188,7 @@ function ActiveDrefTable(props: Props) {
                 'country',
                 strings.activeDrefTableCountryHeading,
                 (item) => item.country_details?.name,
+                { columnClassName: styles.country },
             ),
             createStringColumn<LatestDref, Key>(
                 'type_of_dref',

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

@@ -6,21 +6,22 @@
     }
 
     .table {
+        .type,
         .status,
         .date {
             width: 0%;
             min-width: 7rem;
         }
 
-        .type,
+        .country,
         .appeal-code {
             width: 0%;
             min-width: 8rem;
         }
 
         .title {
             width: 0%;
-            min-width: 8rem;
+            min-width: 11rem;
         }
 
         .actions,

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

@@ -0,0 +1,154 @@
+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';
+import { PartialDref } from '#views/DrefApplicationForm/schema';
+
+type FormFieldKeys = keyof PartialDref;
+interface FormField {
+    name: FormFieldKeys,
+    row: number,
+    label: string,
+}
+
+const formFields: FormField[] = [
+    {
+        name: 'national_society',
+        row: 2,
+        label: 'National Society',
+    },
+    {
+        name: 'country',
+        row: 3,
+        label: 'Country',
+    },
+];
+
+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('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: 'Form Name', key: 'name' },
+                    { header: 'Label', key: 'label' },
+                    { header: 'Value', key: 'value' },
+                ];
+
+                const nameColumn = overviewWorksheet.getColumn('name');
+                const labelColumn = overviewWorksheet.getColumn('label');
+                nameColumn.protection = {
+                    locked: true,
+                    hidden: true,
+                };
+
+                labelColumn.protection = { locked: true };
+                formFields.forEach((formField) => {
+                    const row = overviewWorksheet.getRow(formField.row);
+                    row.values = {
+                        name: formField.name,
+                        label: formField.label,
+                    };
+                    const nameCell = row.getCell('name');
+                    nameCell.protection = {
+                        locked: true,
+                        hidden: true,
+                    };
+
+                    const valueCell = row.getCell('value');
+                    valueCell.dataValidation = {
+                        type: 'list',
+                        allowBlank: false,
+                        formulae: ['"Nepal, India, China"'],
+                    };
+                });
+
+                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={(