@buerokratt-ria/common-gui-components 0.0.49 → 0.0.51

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.51] - 05.05.2026
+
+- History page header alignment
+
+## [0.0.50] - 04.05.2026
+
+- Added authenticated person column
+
 ## [0.0.49] - 29.04.2026
 
 - Fixed chat history XLSX download to use the S3 signed URL returned by the API instead of the previous base64 payload.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",

package/templates/history-page/src/History.scss

@@ -7,6 +7,12 @@
   width: 40%;
 }
 
+.header-container {
+    align-items: center;
+    display: flex;
+    gap: 24px;
+}
+
 .card-drawer-container {
   display: flex;
   width: 100%;
@@ -79,3 +85,7 @@
   overflow-y: auto;
   padding: get-spacing(haapsalu);
 }
+
+.spinner {
+  height: 24px;
+}

package/templates/history-page/src/index.tsx

@@ -739,21 +739,15 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 }
             ),
             columnHelper.accessor(
-                (row) => `${row.endUserFirstName} ${row.endUserLastName}`,
+                (row) => {
+                    const hasData = row.endUserFirstName || row.endUserLastName || row.endUserId || row.contactsMessage;
+                    return hasData ? t('global.yes') : '';
+                },
                 {
-                    id: `endUserName`,
-                    header: t('global.name') ?? '',
+                    id: 'authenticatedPerson',
+                    header: t('chat.history.authenticatedPerson') ?? '',
                 }
             ),
-            columnHelper.accessor('endUserId', {
-                id: 'endUserId',
-                header: t('global.idCode') ?? '',
-            }),
-            columnHelper.accessor('contactsMessage', {
-                id: 'contactsMessage',
-                header: t('chat.history.contact') ?? '',
-                cell: (props) => (props.getValue() ? t('global.yes') : t('global.no')),
-            }),
             columnHelper.accessor('comment', {
                 id: 'comment',
                 header: t('chat.history.comment') ?? '',
@@ -1044,18 +1038,26 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
 
     return (
         <>
-            {displayTitle && (
-                <h1>{t('chat.history.title')}{totalCount === null ? '' : ` (${totalCount.toLocaleString('et-EE')})`}</h1>
-            )}
+            <div className="header-container">
+                {displayTitle && (
+                    <h1>{t('chat.history.title')}{totalCount === null ? '' : ` (${totalCount.toLocaleString('et-EE')})`}</h1>
+                )}
 
-            {showDownload && (
-                <div>
-                    <Button appearance={"primary"} onClick={downloadChatHistory}>
-                        {loading && <CgSpinner className="spinner"/>}
-                        {!loading && t('files.download_xlsx')}
-                    </Button>
-                </div>
-            )}
+                {showDownload && (
+                    <div>
+                        <Button
+                            type="button"
+                            appearance={"secondary"}
+                            size="s"
+                            style={{ marginTop: '4px' }}
+                            onClick={downloadChatHistory}
+                        >
+                            {loading && <CgSpinner className="spinner" />}
+                            {!loading && t('files.download_xlsx')}
+                        </Button>
+                    </div>
+                )}
+            </div>
 
             <Card>
                 <Track gap={16}>

package/translations/en/common.json

@@ -162,6 +162,7 @@
       "endTime": "End time",
       "csaName": "Customer support name",
       "contact": "Contact",
+      "authenticatedPerson": "Authenticated person",
       "comment": "Comment",
       "label": "Label",
       "nps": "NPS",

package/translations/et/common.json

@@ -162,6 +162,7 @@
       "endTime": "Lõppaeg",
       "csaName": "Nõustaja nimi",
       "contact": "Kontaktandmed",
+      "authenticatedPerson": "Autenditud isik",
       "comment": "Kommentaar",
       "label": "Märksõna",
       "nps": "Soovitusindeks",

package/ui-components/Button/Button.scss

@@ -50,15 +50,17 @@
 
   &--secondary {
     background-color: get-color(white);
-    box-shadow: inset 0 0 0 2px get-color(black-coral-10);
-    color: get-color(black-coral-15);
+    box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
+    color: get-color(sapphire-blue-10);
 
     &:hover,
     &:active {
-      box-shadow: inset 0 0 0 2px get-color(black-coral-2);
+      background-color: get-color(sapphire-blue-0);
+      box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
     }
 
     &:focus {
+      background-color: get-color(sapphire-blue-0);
       box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
     }
 
@@ -145,6 +147,8 @@
   }
 
   &--s {
-    padding: 4.5px 24px;
+    font-size: $veera-font-size-80;
+    padding: 4px 14px;
+    font-weight: 700;
   }
 }