From aaa8f39e503c8e4061846199811c47dfdc7b2cb0 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Mon, 8 Apr 2024 00:39:18 +0200
Subject: [PATCH] feat: add section label to import mapping

---
 packages/server/resources/locales/en.json            |  1 +
 .../containers/Import/ImportFileMapping.module.scss  | 12 +++++++++++-
 .../src/containers/Import/ImportFileMapping.tsx      | 10 +++++-----
 .../src/containers/Import/ImportFileProvider.tsx     |  2 +-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/server/resources/locales/en.json b/packages/server/resources/locales/en.json
index f5cd5ba8e..13fc8a174 100644
--- a/packages/server/resources/locales/en.json
+++ b/packages/server/resources/locales/en.json
@@ -295,6 +295,7 @@
   "invoice.field.status.draft": "Draft",
   "invoice.field.created_at": "Created at",
   "invoice.field.currency": "Currency",
+  "invoice.field.entries": "Entries",
   "estimate.field.amount": "Amount",
   "estimate.field.estimate_number": "Estimate number",
   "estimate.field.customer": "Customer",
diff --git a/packages/webapp/src/containers/Import/ImportFileMapping.module.scss b/packages/webapp/src/containers/Import/ImportFileMapping.module.scss
index 4885aeb34..156da57fb 100644
--- a/packages/webapp/src/containers/Import/ImportFileMapping.module.scss
+++ b/packages/webapp/src/containers/Import/ImportFileMapping.module.scss
@@ -1,6 +1,16 @@
+.group {
+  margin-top: 1.4rem;
+}
+
+.groupTitle {
+  margin-bottom: 1.2rem;
+  color: #738091;
+  font-weight: 700;
+  padding: 0 11px;
+}
+
 .table {
   width: 100%;
-  margin-top: 1.4rem;
 
   th.label,
   td.label{
diff --git a/packages/webapp/src/containers/Import/ImportFileMapping.tsx b/packages/webapp/src/containers/Import/ImportFileMapping.tsx
index ecd422c13..7efae0340 100644
--- a/packages/webapp/src/containers/Import/ImportFileMapping.tsx
+++ b/packages/webapp/src/containers/Import/ImportFileMapping.tsx
@@ -27,7 +27,7 @@ export function ImportFileMapping() {
           {entityColumns.map((entityColumn, index) => (
             <ImportFileMappingGroup
               groupKey={entityColumn.groupKey}
-              groupName={entityColumn.groupName}
+              groupLabel={entityColumn.groupLabel}
               fields={entityColumn.fields}
             />
           ))}
@@ -40,7 +40,7 @@ export function ImportFileMapping() {
 
 interface ImportFileMappingGroupProps {
   groupKey: string;
-  groupName: string;
+  groupLabel: string;
   fields: any;
 }
 
@@ -50,12 +50,12 @@ interface ImportFileMappingGroupProps {
  */
 function ImportFileMappingGroup({
   groupKey,
-  groupName,
+  groupLabel,
   fields,
 }: ImportFileMappingGroupProps) {
   return (
-    <Box>
-      {groupName && <h3>{groupName}</h3>}
+    <Box className={styles.group}>
+      {groupLabel && <h3 className={styles.groupTitle}>{groupLabel}</h3>}
 
       <table className={clsx('bp4-html-table', styles.table)}>
         <thead>
diff --git a/packages/webapp/src/containers/Import/ImportFileProvider.tsx b/packages/webapp/src/containers/Import/ImportFileProvider.tsx
index 14490a0db..0e41410b5 100644
--- a/packages/webapp/src/containers/Import/ImportFileProvider.tsx
+++ b/packages/webapp/src/containers/Import/ImportFileProvider.tsx
@@ -17,7 +17,7 @@ export type EntityColumnField = {
 
 export interface EntityColumn {
   groupKey: string;
-  groupName: string;
+  groupLabel: string;
   fields: EntityColumnField[];
 }
 export type SheetColumn = string;