@inceptionbg/iui 2.0.10 → 2.0.12

package/src/styles/components/_header.scss

@@ -21,6 +21,7 @@
   }
 }
 
+///// Modules /////
 .module-name {
   display: flex;
   align-items: center;
@@ -32,15 +33,25 @@
     background-color: var(--neutral-hover);
   }
 }
-.module-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-  padding: 8px;
-  border-radius: 8px;
-  .menu-item-label {
-    font-weight: 600;
+.modules-menu {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  padding: 8px !important;
+  @media #{bp.$mobile} {
+    grid-template-columns: 1fr;
+  }
+  .module-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    padding: 8px;
+    border-radius: 8px;
+    .menu-item-label {
+      font-weight: 600;
+      white-space: pre-line;
+      text-align: center;
+    }
   }
 }
 .module-item .menu-item-icon,
@@ -59,6 +70,7 @@
   }
 }
 
+///// User Box /////
 .user-box {
   display: flex;
   align-items: center;

package/src/styles/components/_list.scss

@@ -0,0 +1,40 @@
+.iui-list {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .iui-list-item {
+    border: var(--border);
+    border-radius: 8px;
+    padding: 12px 16px;
+    p {
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .iui-list-item-desc {
+      display: flex;
+      line-height: 1.5;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--neutral);
+      margin-top: 4px;
+    }
+    &.disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+    &:not(.disabled) {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--neutral-hover);
+      }
+      &.active {
+        background-color: var(--primary);
+        color: var(--text-inverse);
+        .iui-list-item-desc {
+          color: var(--neutral-300);
+        }
+      }
+    }
+  }
+}

package/src/styles/components/_loader.scss

@@ -35,8 +35,10 @@
 }
 
 .empty-loader {
-  height: 60px;
   width: 100%;
+  .loader {
+    min-height: fit-content;
+  }
 }
 
 .full-page-loader {

package/src/styles/components/_menu.scss

@@ -22,6 +22,24 @@
 }
 
 .iui-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  user-select: none;
+  .menu-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text);
+    svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+  .menu-item-label {
+    width: 100%;
+  }
   &.clickable:hover:not(:disabled):not(.disabled):not(.active) {
     background-color: var(--neutral-hover);
   }
@@ -29,30 +47,13 @@
     transition: none;
     background-color: var(--primary);
     color: var(--text-inverse);
-    .menu-item-content .menu-item-icon {
+    .menu-item-icon {
       color: var(--text-inverse);
     }
   }
   &.with-devider:not(:last-child) {
     border-bottom: var(--border);
   }
-  .menu-item-content {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    user-select: none;
-    .menu-item-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--text);
-      svg {
-        height: 16px;
-        width: 16px;
-      }
-    }
-  }
   .menu-item-badge {
     top: -3px;
     right: -3px;

package/src/styles/components/_print.scss

@@ -1,14 +1,6 @@
-.iui-print-dialog {
-  position: absolute;
-  z-index: 2000;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  min-height: 100vh;
-  width: 100%;
-  animation: fade-in 200ms forwards;
-  & > .content {
+.iui-print {
+  padding: 0 !important;
+  & > .print-content {
     background: #fefefe;
     padding: 10px 50px 60px 50px;
     p,
@@ -24,46 +16,17 @@
       margin-bottom: 5px;
     }
   }
-  @media print {
-    .content {
-      padding: 0;
-    }
-  }
-}
-.iui-print-actions {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 50px;
-  background-color: #fefefe;
-  box-shadow: var(--container-shadow);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .print-table {
-  @media print and (orientation: landscape) {
-    width: 842pt;
-  }
-  @media print and (orientation: portrait) {
-    width: 595pt;
-  }
-  // font-size: 10pt;
+  border-spacing: 0px;
+  border-collapse: collapse;
   thead tr {
     background: #f1f1f1;
   }
-  th {
-    padding: 5px;
-    border: 1px solid silver;
-    p {
-      // font-size: 10pt;
-      padding: 4px 8px !important;
-    }
-  }
+  th,
   td {
-    padding: 3px;
+    padding: 4px;
     border: 1px solid silver;
   }
 }
@@ -72,14 +35,41 @@
   @page {
     margin: 6.5mm;
   }
+
+  @media (orientation: landscape) {
+    .iui-print {
+      width: 842pt;
+    }
+  }
+  @media (orientation: portrait) {
+    .iui-print {
+      width: 595pt;
+    }
+  }
+  .pullover {
+    position: static !important;
+    overflow: visible !important;
+  }
+  .iui-print {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    background: white !important;
+    overflow: visible !important;
+    .print-content {
+      padding: 0 !important;
+      height: auto !important;
+      overflow: visible !important;
+    }
+  }
   #root,
   .no-print {
-    display: none;
+    display: none !important;
   }
   body {
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
-    //   overflow: visible !important;
+    overflow: visible !important;
   }
   tbody td {
     white-space: pre-wrap !important;

package/src/styles/components/_progressBar.scss

@@ -0,0 +1,83 @@
+.progress-bar-container {
+  width: 100%;
+  max-width: 400px;
+  margin: auto;
+}
+
+.progress-label {
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: var(--text);
+}
+
+.progress-bar-bg {
+  position: relative;
+  width: 100%;
+  height: 32px;
+  background: var(--neutral-200);
+  border-radius: 16px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-bar-fill {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--primary-400) 0%, var(--primary-600) 100%);
+  transition: width 0.3s cubic-bezier(0.67, 0.01, 0.83, 0.98);
+  overflow: hidden;
+
+  // Subtle shimmer animation to show activity
+  &.loading::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 80%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.3) 50%,
+      transparent 100%
+    );
+    animation: shimmer 2s ease-in-out infinite;
+  }
+}
+
+.progress-bar-text {
+  width: 100%;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--text);
+  border-radius: 32px;
+  padding: 0 8px;
+  pointer-events: none;
+  z-index: 1;
+  position: relative;
+
+  // White text overlay that shows only where progress bar is
+  &::after {
+    content: var(--progress-text, '');
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    clip-path: polygon(
+      0 0,
+      var(--progress-clip, 0%) 0%,
+      var(--progress-clip, 0%) 100%,
+      0 100%
+    );
+    transition: clip-path 0.3s cubic-bezier(0.67, 0.01, 0.83, 0.98);
+  }
+}

package/src/styles/components/_table.scss

@@ -2,19 +2,19 @@
 
 table {
   border-spacing: 0px;
-  border-collapse: collapse;
+  // border-collapse: collapse;
 }
 .iui-table {
   //// Header ////
   thead {
     z-index: 2;
-    background-color: var(--primary-100);
+    background-color: var(--neutral-200);
+    tr:first-child th {
+      border-top: var(--border);
+    }
   }
   th {
     padding: 4px 12px;
-    border-left: var(--border);
-    border-right: var(--border);
-
     font-weight: bold;
     p {
       font-size: 12px;
@@ -33,22 +33,13 @@ table {
     top: 0;
     z-index: 1;
   }
-  .border-row {
-    background-color: var(--border-color);
-    height: 1px;
-    padding: 0;
-  }
 
   //// Body ////
-  // tbody.no-last-border tr:last-child td {
-  //   border: none;
-  // }
   // Row
   tr {
     scroll-snap-align: start;
   }
   tbody tr {
-    // border-bottom: var(--border);
     &.clickable:hover,
     &.selected {
       background-color: rgba(0, 0, 0, 0.05);
@@ -64,18 +55,14 @@ table {
   // Cell
   th,
   td {
-    // 1px solid #f2f4f7;
+    border-bottom: var(--border);
     // Cell colors
     &.secondary {
       background-color: rgba(0, 0, 0, 0.04);
-      // border-bottom: 1px solid #d3d3d3;
     }
   }
   td {
-    border: var(--border);
-    border-top: none;
     font-size: 14px;
-    box-sizing: border-box;
     height: 48px;
     padding: 6px 12px;
     &.s {
@@ -96,7 +83,6 @@ table {
     align-items: center;
     justify-content: center;
     padding: 0 4px;
-    // gap: 8px;
   }
 
   //// Footer ////
@@ -106,7 +92,6 @@ table {
     width: 100%;
     padding: 8px;
     font-size: var(--fs-m);
-    box-sizing: border-box;
     .pagination {
       display: flex;
       align-items: center;
@@ -149,6 +134,13 @@ table {
   }
 
   @media #{bp.$landscape} {
+    td,
+    th {
+      border-right: var(--border);
+      &:first-child:not(.not-first-cell) {
+        border-left: var(--border);
+      }
+    }
     .select-col,
     .actions-col {
       padding: 0;
@@ -168,7 +160,6 @@ table {
     }
     tr {
       padding-bottom: 20px;
-      border-top: var(--border);
     }
     td {
       display: flex;
@@ -210,6 +201,9 @@ table {
   }
 }
 
+.table-sort-item {
+  flex-direction: row-reverse;
+}
 // .dual-list-container {
 //   .dual-list-content {
 //     display: grid;

package/src/types/IHeader.ts

@@ -2,6 +2,7 @@ import { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
 import { IButtonColor } from '../components/Button/Button';
 import { IMenuItem } from './IMenu';
 import { FC } from 'react';
+import { IPopupControl } from './IPopup';
 
 export interface IHeaderAction {
   label: string;
@@ -20,15 +21,20 @@ export type IHeaderUserMenuProps = {
   setIsOpen: (isOpen: boolean) => void;
   userName?: string;
   organizationName?: string;
+  menuItems: IMenuItem[];
   showBadge?: boolean;
-  menuItems?: IMenuItem[];
-
+  controls: {
+    myAccountControl: IPopupControl;
+    changeOrgControl: IPopupControl;
+    orgInvitesControl: IPopupControl;
+  };
+  refetchOrganizationInvites?: () => void;
   HeaderUserMenuDialogs: FC<{
-    openedDialog: string | null;
-    setOpenedDialog: (dialog: string | null) => void;
+    controls: {
+      myAccountControl: IPopupControl;
+      changeOrgControl: IPopupControl;
+      orgInvitesControl: IPopupControl;
+    };
     refetchOrganizationInvites?: () => void;
   }>;
-  openedDialog: string | null;
-  setOpenedDialog: (dialog: string | null) => void;
-  refetchOrganizationInvites?: () => void;
 };

package/src/types/IPopup.ts

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

package/src/types/ITable.ts

@@ -1,13 +1,12 @@
 import { Dispatch, MouseEvent, ReactElement, ReactNode, SetStateAction } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IAnyObject, ISimpleObject } from './IBasic';
 import { ITableKeyboardActionsBase } from './IKeyboard';
+import { IPopupControl } from './IPopup';
 
-export interface ITable {
+export interface ITable<T = unknown> {
   columns: ITableColumn[];
   // setColumns?: (data: ITableColumn[]) => void;
   // withColumnsSearch?: boolean;
-  customHeader?: ITableColumn[][];
   data: ITableDataItem[];
   dataActions?: {
     edit?: {
@@ -23,11 +22,6 @@ export interface ITable {
       hasAccess: boolean;
     }[];
   };
-  sumRows?: ITableDataItem[];
-  isLoading?: boolean;
-
-  headerWrap?: boolean;
-  selectedRowUuid?: string;
   rowSelect?: {
     selectedRows: Set<string>;
     setSelectedRows: Dispatch<SetStateAction<Set<string>>>;
@@ -35,14 +29,18 @@ export interface ITable {
   };
   filterData?: ITableFilterData;
   sortData?: ITableSortData;
-  // printData?: IPrintData;
-  // customPrintData?: ICustomPrintData;
-  // additionsalOptions?: ReactNode;
+  printData?: IPrintData<T>;
+  sumRows?: ITableDataItem[];
   editable?: ITableEdit;
+  selectedRowUuid?: string;
   keyboard?: {
     enabled: boolean;
     actions: ITableKeyboardActionsBase;
   };
+  headerWrap?: boolean;
+  customHeader?: ITableColumn[][];
+  // customPrintData?: ICustomPrintData;
+  // additionsalOptions?: ReactNode;
   footer?: {
     paginationControl?: IPaginationControl;
     customPagination?: {
@@ -51,22 +49,35 @@ export interface ITable {
     };
     totalRows?: number;
     // noTotalRows?: boolean;
-    footerAction?: {
-      icon?: IconDefinition;
-      onClick: () => void;
-    };
+    refetch?: () => void;
   };
-
+  isLoading?: boolean;
   className?: string;
   rowHeight?: 'xs' | 's' | 'm';
   maxHeight?: string;
-  // templates?: {
-  //   identifier: string;
-  //   data: IReportTemplateData;
-  //   setTemplateName?: (templateName: string) => void;
-  //   onClearFilters: () => void;
-  //   allowPublicCreate?: boolean;
-  // };
+  templates?: {
+    identifier: string;
+    setSearch?: (search: string) => void;
+    items: {
+      uuid: string;
+      name: string;
+      //   identifier: string;
+      //   filterValues?: IReportTemplateFilterValue[];
+      //   columns: string[];
+      //   organization?: ISimpleObject;
+      //   subsystem?: IModule;
+      //   sorts?: string[];
+      //   isPublic?: boolean;
+      //   isDefault?: boolean;
+      //   order?: number;
+      //   createdAt?: string;
+      //   createdBy?: ISimpleObject;
+    }[];
+    // data: IReportTemplateData;
+    // setTemplateName?: (templateName: string) => void;
+    // onClearFilters: () => void;
+    // allowPublicCreate?: boolean;
+  };
 }
 
 export interface ITableColumn {
@@ -87,6 +98,7 @@ export interface ITableColumn {
     desc: string;
     label: string;
   };
+  notFirstCell?: boolean;
   // code?: string;
   className?: string;
 }
@@ -193,19 +205,30 @@ export interface IBasePrintData {
   };
   saveXlsx?: () => void;
 }
-export interface ICustomPrintData extends IBasePrintData {
-  content: ReactNode;
-}
-export interface IPrintData extends IBasePrintData {
+
+export type IGetPrintData<T> = (props: {
+  pagination: IPagination;
+  noTotalRows?: boolean;
+}) => Promise<{ items: T[]; totalRows?: number }>;
+
+export interface IPrintData<T = unknown> extends IBasePrintData {
+  printPopupControl: IPopupControl;
+  customHeader?: ITableColumn[][];
+  excludeColumnIds?: string[];
+  isLoading?: boolean;
+  progress?: number;
+  tableData?: ITableDataItem[];
+  items?: T[];
+  paginationControl?: IPaginationControl;
+  totals?: ITableDataItem;
   optionalNode?: {
     aboveTable?: ReactNode;
     bellowTable?: ReactNode;
   };
-  customHeader?: ITableColumn[][];
-  excludeColumns?: string[];
-  getPrintData: (pagination: IPagination) => Promise<{ data: any[]; totalRows?: number }>;
-  formatPrintData: (data: any) => ITableDataItem[];
-  totals?: ITableDataItem;
+}
+
+export interface ICustomPrintData extends IBasePrintData {
+  content: ReactNode;
 }
 ///////////////
 

package/src/utils/i18n/i18nIUICyrilic.ts

@@ -13,7 +13,7 @@ export const i18nIUICyrilic = {
   Close: 'Затвори',
   Confirm: 'Потврди',
   Create: 'Креирај',
-  Delete: 'Избриши',
+  Delete: 'Обриши',
   Edit: 'Измени',
   FreeText: 'Слободан унос',
   from: 'од',
@@ -32,6 +32,7 @@ export const i18nIUICyrilic = {
   Title: 'Наслов',
   to: 'до',
   Yes: 'Да',
+  LoadingProgress: 'Учитавање...',
 
   ////// TABLE //////
   RefreshData: 'Освежи податке',