@inceptionbg/iui 2.0.16 → 2.0.19

package/src/styles/components/_badge.scss

@@ -18,6 +18,12 @@
     border: 2px solid var(--background);
     background-color: var(--primary);
   }
+  &.header-btn-badge {
+    border: 1px solid var(--primary);
+    background-color: var(--danger);
+    right: 4px;
+    top: 4px;
+  }
   // SIZES
   &.s {
     font-size: 10px;
@@ -36,6 +42,7 @@
   border-radius: 20px;
   width: fit-content;
   font-size: 12px;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
   &.success {
     background-color: var(--success-200);
   }

package/src/styles/components/_header.scss

@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px 0 8px;
+  padding-left: 8px;
   box-sizing: border-box;
   z-index: 2;
   .header-button {
@@ -20,8 +20,14 @@
     circle {
       fill: var(--white);
     }
+    svg {
+      height: 24px !important;
+      width: 24px !important;
+      color: var(--white);
+    }
     &:hover,
     &.active {
+      // background-color: var(--primary-600);
       background-color: var(--neutral-hover);
       circle {
         fill: var(--primary);
@@ -91,6 +97,10 @@
   gap: 8px;
   height: var(--header-height);
   position: relative;
+  border-radius: 32px;
+  padding-left: 8px;
+  // margin-left: -8px;
+  padding-right: 24px;
   cursor: pointer;
   user-select: none;
   -webkit-user-drag: none;
@@ -123,6 +133,9 @@
     background-color: var(--danger);
     right: -5px;
   }
+  &:hover {
+    background-color: var(--primary-600);
+  }
 }
 .header-user-menu {
   top: var(--header-height) !important;

package/src/styles/components/_notifications.scss

@@ -0,0 +1,71 @@
+.notification-button svg {
+  color: var(--primary);
+  .fa-secondary {
+    opacity: 1;
+    fill: #ffaa33;
+    stroke: #544417;
+    stroke-width: 30px;
+    stroke-opacity: 0.5;
+  }
+}
+
+.notifications {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100dvh - var(--header-height) - 40px);
+  padding: 16px;
+  max-width: min(500px, 90vw);
+  .notifications-content-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 16px;
+    .iui-input-container {
+      width: unset;
+    }
+  }
+  .notifications-options {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    border-bottom: var(--border);
+    margin-bottom: 8px;
+    padding-bottom: 4px;
+  }
+  .notifications-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .notification {
+    cursor: default;
+    padding: 12px;
+    border-radius: 8px;
+    .notification-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 16px;
+      .title {
+        color: var(--primary-dark);
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .date {
+        color: var(--neutral);
+        font-size: 11px;
+        margin: 4px 0;
+      }
+    }
+    .desc {
+      font-size: 13px;
+    }
+    &:hover:not(:has(button:hover:not(:disabled))) {
+      background-color: var(--neutral-100);
+    }
+  }
+}

package/src/styles/components/_page.scss

@@ -48,6 +48,7 @@
   min-height: 55px;
   max-height: 55px;
   box-shadow: var(--container-shadow);
+  z-index: 10;
 
   @media #{bp.$mobileTablet} {
     .breadcrumbs {

package/src/styles/components/_pullover.scss

@@ -22,7 +22,6 @@ $fixedWidth: (500, 600);
       display: flex;
       flex-direction: column;
       height: 100dvh;
-      overflow: auto;
       overscroll-behavior: none;
     }
   }
@@ -74,6 +73,7 @@ $fixedWidth: (500, 600);
     z-index: 2;
   }
   .pullover-header {
+    padding-right: 16px;
     justify-content: space-between;
     .search-input {
       width: min(250px, 50vw);

package/src/styles/components/_sidebar.scss

@@ -21,14 +21,12 @@
     right: -16px;
     border-radius: 50%;
     background-color: white;
-    height: 32px;
-    width: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.15s ease-in-out;
     border: 1px solid var(--primary);
-    z-index: 2;
+    z-index: 11;
     &:active {
       transform: translateY(2px);
     }

package/src/styles/components/_table.scss

@@ -18,13 +18,15 @@ table {
   th {
     padding: 4px 12px;
     font-weight: bold;
+    height: 40px;
     p {
       font-size: 12px;
     }
   }
   .table-container {
     overflow: auto;
-    scroll-snap-type: y proximity;
+    // scroll-snap-type: x proximity;
+    // scroll-snap-type: y proximity;
     // box-shadow: var(--container-shadow);
     &::-webkit-scrollbar {
       width: 8px;
@@ -35,23 +37,32 @@ table {
     top: 0;
     z-index: 1;
   }
-
   //// Body ////
   // Row
-  tr {
-    scroll-snap-align: start;
-  }
+  // tr,
+  // td {
+  //   scroll-snap-align: start;
+  // }
   tbody tr {
     &.clickable:hover,
     &.selected {
-      background-color: rgba(0, 0, 0, 0.05);
+      background-color: #f2f2f2;
+      .sticky-column {
+        background-color: #f2f2f2;
+      }
     }
     &:has(.iui-icon-btn:hover),
     &:has(a:hover) {
       background-color: transparent !important;
+      .sticky-column {
+        background-color: var(--background) !important;
+      }
     }
     &.focused {
       background-color: var(--primary-100);
+      .sticky-column {
+        background-color: var(--primary-100);
+      }
     }
     &.loading {
       opacity: 0.5;
@@ -71,6 +82,7 @@ table {
     font-size: 14px;
     height: 48px;
     padding: 6px 12px;
+    // background-color: var(--background);
     &.s {
       height: 40px;
       padding: 2px 12px;
@@ -80,8 +92,8 @@ table {
       padding: 2px 12px;
     }
   }
-  .clickable-column:hover {
-    background-color: var(--primary-o10) !important;
+  .clickable-cell:hover {
+    background-color: var(--primary-100) !important;
   }
   // Item Actions
   .table-item-actions {
@@ -140,13 +152,30 @@ table {
   }
 
   @media #{bp.$landscape} {
+    thead {
+      box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.2);
+    }
     td,
     th {
       border-right: var(--border-light);
       &:first-child:not(.not-first-cell) {
         border-left: var(--border-light);
       }
+      &.sticky-column {
+        position: sticky;
+        left: 0;
+        transition: background-color 250ms;
+        // box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.2);
+      }
+    }
+    th.sticky-column {
+      top: 0;
+      background-color: var(--neutral-100);
     }
+    td.sticky-column {
+      background-color: var(--background);
+    }
+
     .select-col,
     .actions-col {
       padding: 0;
@@ -210,54 +239,73 @@ table {
 .table-sort-item {
   flex-direction: row-reverse;
 }
-.dual-list-container {
-  .dual-list-content {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    gap: 16px 12px;
+
+.column-pullover {
+  .pullover-content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
-  .list-box {
-    border: var(--border-light);
-    border-radius: 8px;
-    padding: 8px;
-    user-select: none;
-    & > .item {
+  .dual-list-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    .dual-list-content {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      grid-template-rows: auto auto 1fr;
+      gap: 16px 12px;
+      flex: 1;
+      min-height: 0;
+    }
+    .list-box {
+      border: var(--border-light);
+      border-radius: 8px;
+      padding: 8px;
+      user-select: none;
+      overflow-y: auto;
+
+      & > .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px;
+        font-size: 14px;
+        svg {
+          color: var(--text);
+          margin-left: 1rem;
+        }
+        &:hover {
+          background-color: var(--primary-o10);
+        }
+        &:active {
+          background-color: var(--primary-o25);
+        }
+        &.dragging {
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          background-color: #fff !important;
+        }
+      }
+    }
+    .exchange-icon {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: 8px;
-      font-size: 14spx;
       svg {
-        color: var(--text);
-        margin-left: 1rem;
-      }
-      &:hover {
-        background-color: var(--primary-o10);
-      }
-      &:active {
-        background-color: var(--primary-o25);
-      }
-      &.dragging {
-        transform: scale(1.02);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        background-color: #fff !important;
+        height: 20px;
+        width: 20px;
       }
     }
   }
-  .exchange-icon {
-    display: flex;
-    align-items: center;
-    svg {
-      height: 20px;
-      width: 20px;
-    }
-  }
 }
 
 .edit-row {
   background: var(--neutral-100);
   td {
-    padding: 4px;
+    &.editable {
+      padding: 4px;
+    }
     .iui-input-wrapper-field {
       // border: none;
       // border-radius: 0;
@@ -269,16 +317,10 @@ table {
   }
 }
 
-// .primary-row {
-//   background-color: var(--primary-100);
-// }
+.primary-row {
+  background-color: var(--primary-100);
+}
+
 // .secondary-row {
 //   background-color: #f1f1f1;
 // }
-
-// .table-options {
-//   display: flex;
-//   align-items: center;
-//   justify-content: space-between;
-//   padding: 8px;
-// }

package/src/types/IKeyboard.ts

@@ -13,11 +13,6 @@ export interface IKeyboardAction {
 export interface ITableKeyboardActionsBase {
   moveDisabled?: boolean;
   editDisabled?: boolean;
-  delete?: {
-    enabled: boolean;
-    setItemToDeleteUuids: (itemUuids: string[]) => void;
-    onAction?: () => void;
-  };
   additional?: (props: {
     focusedRow: ITableDataItem | null;
     isEditing: boolean;

package/src/types/IMenu.ts

@@ -1,5 +1,5 @@
-import { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
-import { MouseEventHandler } from 'react';
+import type { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
+import type { MouseEventHandler } from 'react';
 
 export type IMenuPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 

package/src/types/INotifications.ts

@@ -0,0 +1,15 @@
+export interface INotification {
+  uuid: string;
+  type: INotificationType;
+  values?: {
+    key: string;
+    value: string;
+    url?: string;
+    format?: 'TRANSLATE' | 'DATE' | 'DATE_TIME';
+  }[];
+  seen: boolean;
+  event: string;
+  organization?: string;
+  createdAt: string;
+}
+export type INotificationType = 'WEB' | 'EMAIL';

package/src/types/IPopup.ts

@@ -1,12 +1,12 @@
 import { RefObject } from 'react';
 
-export interface PopupControlRef {
+export interface IPopupControlRef {
   onOpen: () => void;
   onClose: () => void;
 }
 
 export interface ILocalPopupControl {
-  controlRef: RefObject<PopupControlRef | null>;
+  controlRef: RefObject<IPopupControlRef | null>;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
 }

package/src/types/ISelect.ts

@@ -43,6 +43,7 @@ export interface AsyncSelectProps extends BaseSelectProps {
   variant: 'async';
   loadOptions: any;
   defaultData?: ISelectData[];
+  refresh?: any[];
 }
 
 export interface CreatableSelectProps extends BaseSelectProps {

package/src/types/ITable.ts

@@ -6,23 +6,24 @@ import { IPopupControl } from './IPopup';
 export interface ITable<T = unknown> {
   id?: string;
   columnData: ITableColumnsData;
-  data: ITableDataItem[];
-  dataActions?: ITableDataActions;
+  data: ITableDataItem<T>[];
+  dataActions?: ITableDataActions<T>;
   rowSelect?: {
     selectedRows: Set<string>;
     setSelectedRows: Dispatch<SetStateAction<Set<string>>>;
-    actions: ITableSelectedAction[];
+    actions?: ITableSelectedAction[];
   };
   filterData?: ITableFilterData;
   sortData?: ITableSortData;
   templateData?: ITableTemplateData;
   printData?: IPrintData<T>;
-  sumRows?: ITableDataItem[];
-  editable?: ITableEdit;
+  sumRows?: ITableDataItem<T>[];
+  editable?: ITableEdit<T>;
   selectedRowUuid?: string;
+  itemDeleteData?: ITableItemDeleteData;
   keyboard?: {
     enabled: boolean;
-    actions: ITableKeyboardActionsBase;
+    actions?: ITableKeyboardActionsBase;
   };
   headerWrap?: boolean;
   customHeader?: ITableColumn[][];
@@ -49,14 +50,16 @@ export interface ITableColumn {
   label?: string | ReactElement;
   labelForFilter?: string;
   align?: 'center' | 'left' | 'right' | 'justify' | undefined;
-  hidden?: boolean;
   unavailable?: boolean;
+  hidden?: boolean;
+  printHidden?: boolean;
   width?: string;
   minWidth?: string;
   colSpan?: number;
   rowSpan?: number;
   break?: boolean;
   color?: 'secondary';
+  sticky?: boolean;
   sortOptions?: {
     asc: string;
     desc: string;
@@ -67,11 +70,11 @@ export interface ITableColumn {
   className?: string;
 }
 
-export interface ITableDataItem {
+export interface ITableDataItem<T = unknown> {
   uuid: string;
   onRowClick?: (event?: MouseEvent<HTMLTableRowElement>) => void;
   className?: string;
-  item?: Record<string, any>;
+  item?: T;
   disableSelect?: boolean;
   cells: ITableDataItemCells;
   extendable?: {
@@ -93,18 +96,13 @@ export interface ITableDataItemCells {
   };
 }
 
-export interface ITableDataActions {
-  edit?: {
-    hasAccess: boolean;
-  };
-  delete?: {
-    onClick: (itemUuid: string) => void;
-    hasAccess: boolean;
-  };
-  actions?: {
+export interface ITableDataActions<T = unknown> {
+  hasEditAccess: boolean;
+  actions?: (item?: T) => {
     label: string;
-    onClick: (item: ITableDataItem) => void;
+    onClick: () => void;
     hasAccess: boolean;
+    disabled?: boolean;
   }[];
 }
 export interface ITableFilterData {
@@ -156,25 +154,23 @@ export interface ITableSelectedAction {
 export interface ITableTemplateData {
   identifier: string;
   popupController: IPopupControl;
+  defaultTemplate?: IReportTemplate;
   items: IReportTemplate[];
   isLoading?: boolean;
   isFetching?: boolean;
   setSearch?: (search: string) => void;
-  initiateCreate: () => void;
-  initiateCreateDefault: () => void;
   setItemToDeleteUuids: (itemUuids: string[]) => void;
-
-  // data: IReportTemplateData;
-  // setTemplateName?: (templateName: string) => void;
-  // onClearFilters: () => void;
-
-  allowPublicCreate?: boolean;
-  TemplateNode: ReactNode;
+  DeleteDialog: ReactNode;
+  createItem: {
+    allowPublicCreate?: boolean;
+    onCreate: (data: Partial<IReportTemplate>) => void;
+    onCreateDefault: () => void;
+  };
 }
 ///// EDIT /////
-export interface ITableEdit<T = any> {
-  selectedItem: T | null;
-  setSelectedItem: (item: T | null) => void;
+export interface ITableEdit<T = unknown> {
+  selectedItem: ITableDataItem<T> | null;
+  setSelectedItem: (item: ITableDataItem<T> | null) => void;
   editData: Partial<T>;
   setEditData: Dispatch<SetStateAction<Partial<T>>>;
   onSubmit: (data: T, onSubmitCallback: () => void) => void;
@@ -186,6 +182,14 @@ export interface ITableEdit<T = any> {
   keepEditOnSubmit?: boolean;
 }
 
+///// DELETE /////
+export interface ITableItemDeleteData {
+  hasAccess: boolean;
+  itemToDeleteUuids: string[];
+  setItemToDeleteUuids: Dispatch<SetStateAction<string[]>>;
+  DeleteDialog: ReactNode;
+}
+
 ///// PRINT /////
 export interface IBasePrintData {
   label: string;
@@ -211,7 +215,6 @@ export type IGetPrintData<T> = (props: {
 export interface IPrintData<T = unknown> extends IBasePrintData {
   printPopupControl: IPopupControl;
   customHeader?: ITableColumn[][];
-  excludeColumnIds?: string[];
   isLoading?: boolean;
   progress?: number;
   tableData?: ITableDataItem[];

package/src/utils/i18n/i18nIUICyrilic.ts

@@ -91,6 +91,18 @@ export const i18nIUICyrilic = {
   ErrorMessage: 'Дошло је до грешке!',
   TryAgain: 'Покушај поново',
 
+  ////// NOTIFICATIONS //////
+  InApp: 'U aplikaciji',
+  MarkAllAsRead: 'Означи све као прочитано',
+  NoNewNotifications: 'Немате нове нотификације',
+  Notifications: 'Нотификације',
+  NotificationsAll: 'Све',
+  NotificationsUnread: 'Непрочитане',
+  NotificationsRead: 'Прочитане',
+  NotificationSound: 'Звук нотификације',
+  // NTitleADD_DOC: 'Додат је документ на платформу',
+  // NContentADD_DOC: 'Документ са бројем <documentNumber>{{- documentNumber}}</documentNumber> је додат на платформу',
+
   ////// PAGES //////
   ReturnToHomepage: 'Повратак на почетну страну',
   FooterText: `Инцептион ЦА је акредитовано сертификационо тело за квалификовану електронску доставу,

package/src/utils/i18n/i18nIUILatin.ts

@@ -91,6 +91,19 @@ export const i18nIUILatin = {
   ErrorMessage: 'Došlo je do greške!',
   TryAgain: 'Pokušaj ponovo',
 
+  ////// NOTIFICATIONS //////
+  InApp: 'In-app',
+  // MarkAsRead: 'Označi kao pročitano',
+  MarkAllAsRead: 'Označi sve kao pročitano',
+  NoNewNotifications: 'Nemate nove notifikacije',
+  Notifications: 'Notifikacije',
+  NotificationsAll: 'Sve',
+  NotificationsUnread: 'Nepročitane',
+  NotificationsRead: 'Pročitane',
+  NotificationSound: 'Zvuk notifikacije',
+  // NTitleADD_DOC: 'Dodat je dokument na platformu',
+  // NContentADD_DOC: 'Dokument sa brojem <documentNumber>{{- documentNumber}}</documentNumber> je dodat na platformu',
+
   ////// PAGES //////
   ReturnToHomepage: 'Povratak na početnu stranu',
   FooterText: `Inception CA je akreditovano sertifikaciono telo za kvalifikovanu elektronsku dostavu,

package/src/utils/i18n/i18nIUIMe.ts

@@ -90,6 +90,18 @@ export const i18nIUIMe = {
   ErrorMessage: 'Došlo je do greške!',
   TryAgain: 'Pokušajte ponovo',
 
+  ////// NOTIFICATIONS //////
+  InApp: 'In-app',
+  MarkAllAsRead: 'Označi sve kao pročitano',
+  NoNewNotifications: 'Nemate nove notifikacije',
+  Notifications: 'Notifikacije',
+  NotificationsAll: 'Sve',
+  NotificationsUnread: 'Nepročitane',
+  NotificationsRead: 'Pročitane',
+  NotificationSound: 'Zvuk notifikacije',
+  // NTitleADD_DOC: 'Dodat je dokument na platformu',
+  // NContentADD_DOC: 'Dokument sa brojem <documentNumber>{{- documentNumber}}</documentNumber> je dodat na platformu',
+
   ////// PAGES //////
   ReturnToHomepage: 'Povratak na početnu stranicu',
   FooterText: '',