- added main layout, sidebar, toolbar;

- started dashboard page, added first widget;
- created new theme 'gepafin' - styles for the app;

src/assets/scss/theme-base/components/panel/_accordion.scss

@@ -0,0 +1,118 @@
+.p-accordion {
+    .p-accordion-header {
+        .p-accordion-header-link {
+            padding: $accordionHeaderPadding;
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            font-weight: $accordionHeaderFontWeight;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+
+            .p-accordion-toggle-icon {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &:not(.p-disabled) {
+            .p-accordion-header-link {
+                &:focus-visible {
+                    @include focused();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-accordion-header-link {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-accordion-header-link {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover {
+                .p-accordion-header-link {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-accordion-content {
+        padding: $accordionContentPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    .p-accordion-tab {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-accordion-header {
+                .p-accordion-header-link {
+                    border-radius: 0;
+                }
+            }
+
+            .p-accordion-content {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-accordion-header-link {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-accordion-header:not(.p-highlight) {
+                    .p-accordion-header-link {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+
+                    .p-accordion-content {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+            }
+        } 
+    }
+}

src/assets/scss/theme-base/components/panel/_card.scss

@@ -0,0 +1,30 @@
+.p-card {
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    box-shadow: $cardShadow;
+    border-radius: $borderRadius;
+
+    .p-card-body {
+        padding: $cardBodyPadding;
+    }
+
+    .p-card-title {
+        font-size: $cardTitleFontSize;
+        font-weight: $cardTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+    }
+
+    .p-card-subtitle {
+        font-weight: $cardSubTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+        color: $cardSubTitleColor;
+    }
+
+    .p-card-content {
+        padding: $cardContentPadding;
+    }
+
+    .p-card-footer {
+        padding: $cardFooterPadding;
+    }
+}

src/assets/scss/theme-base/components/panel/_divider.scss

@@ -0,0 +1,31 @@
+.p-divider {
+    .p-divider-content {
+        background-color: $panelContentBg;
+    }
+
+    &.p-divider-horizontal {
+        margin: $dividerHorizontalMargin;
+        padding: $dividerHorizontalPadding;
+
+        &:before {
+            border-top: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: 0 $inlineSpacing;
+        }
+    }
+
+    &.p-divider-vertical {
+        margin: $dividerVerticalMargin;
+        padding: $dividerVerticalPadding;
+
+        &:before {
+            border-left: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: $inlineSpacing 0;
+        }
+    }
+}

src/assets/scss/theme-base/components/panel/_fieldset.scss

@@ -0,0 +1,47 @@
+.p-fieldset {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border-radius: $borderRadius;
+
+    .p-fieldset-legend {
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        background: $panelHeaderBg;
+        font-weight: $panelHeaderFontWeight;
+        border-radius: $borderRadius;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            padding: 0;
+            transition: $actionIconTransition;
+
+            a {
+                padding: $panelHeaderPadding;
+                color: $panelHeaderTextColor;
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+
+                .p-fieldset-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:focus-visible {
+                    @include focused();
+                }
+            }
+
+            &:hover {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}

src/assets/scss/theme-base/components/panel/_panel.scss

@@ -0,0 +1,42 @@
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-top: 0 none;
+    }
+}

src/assets/scss/theme-base/components/panel/_scrollpanel.scss

@@ -0,0 +1,10 @@
+.p-scrollpanel {
+	.p-scrollpanel-bar {
+		background: $scrollPanelTrackBg;
+		border: $scrollPanelTrackBorder;
+
+		&:focus-visible {
+			@include focused();
+		}
+	}
+}

src/assets/scss/theme-base/components/panel/_splitter.scss

@@ -0,0 +1,23 @@
+.p-splitter {
+	border: $panelContentBorder;
+	background: $panelContentBg;
+	border-radius: $borderRadius;
+	color: $panelContentTextColor;
+
+	.p-splitter-gutter {
+		transition: $actionIconTransition;
+		background: $splitterGutterBg;
+
+		.p-splitter-gutter-handle {
+			background: $splitterGutterHandleBg;
+
+			&:focus-visible {
+				@include focused();
+			}
+		}
+	}
+
+	.p-splitter-gutter-resizing {
+		background: $splitterGutterHandleBg;
+	}
+}

src/assets/scss/theme-base/components/panel/_stepper.scss

@@ -0,0 +1,136 @@
+@use "sass:math";
+
+
+.p-stepper {
+  .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .p-stepper-header {
+    padding: $inlineSpacing;
+
+    .p-stepper-action {
+      transition: $listItemTransition;
+      border-radius: $borderRadius;
+      background: $stepsItemBg;
+      outline-color: transparent;
+
+      .p-stepper-number {
+        color: $stepsItemNumberColor;
+        border: $stepsItemBorder;
+        border-width: 2px;
+        background: $stepsItemBg;
+        min-width: $stepsItemNumberWidth;
+        height: $stepsItemNumberHeight;
+        line-height: $stepsItemNumberHeight;
+        font-size: $stepsItemNumberFontSize;
+        border-radius: $stepsItemNumberBorderRadius;
+        transition: $actionIconTransition;
+      }
+
+      .p-stepper-title {
+        margin-left: $inlineSpacing;
+        color: $stepsItemTextColor;
+        font-weight: $stepsItemActiveFontWeight;
+        transition: $actionIconTransition;
+      }
+
+      &:not(.p-disabled):focus-visible {
+        @include focused();
+      }
+    }
+
+    &.p-highlight {
+      .p-stepper-number {
+        background: $highlightBg;
+        color: $highlightTextColor;
+      }
+
+      .p-stepper-title {
+        color: $textColor;
+      }
+    }
+
+    &:not(.p-disabled):focus-visible {
+      @include focused();
+    }
+
+    &:has(~ .p-highlight) {
+      @if variable-exists(primaryColor) {
+        .p-stepper-separator {
+          background-color: $primaryColor;
+        }
+      }
+    }
+  }
+
+  .p-stepper-panels {
+    background: $tabviewContentBg;
+    padding: $tabviewContentPadding;
+    color: $tabviewContentTextColor;
+  }
+
+  .p-stepper-separator {
+    background-color: $timelineEventColor;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: calc($inlineSpacing * 2);
+    transition: $listItemTransition;
+  }
+
+  &.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+
+    .p-stepper-toggleable-content {
+      display: flex;
+      flex: 1 1 auto;
+      background: $tabviewContentBg;
+      color: $tabviewContentTextColor;
+    }
+
+    .p-stepper-panel {
+      display: flex;
+      flex-direction: column;
+      flex: initial;
+
+      &.p-stepper-panel-active {
+        flex: 1 1 auto;
+      }
+
+      .p-stepper-header {
+        flex: initial;
+      }
+
+      .p-stepper-content {
+        width: 100%;
+        padding-left: calc($inlineSpacing * 2);
+      }
+
+      .p-stepper-separator {
+        flex: 0 0 auto;
+        width: 2px;
+        height: auto;
+        margin-inline-start: calc($inlineSpacing * 7 / 2 + 2px);
+      }
+
+      &:has(~ .p-stepper-panel-active) {
+        @if variable-exists(primaryColor) {
+          .p-stepper-separator {
+            background-color: $primaryColor;
+          }
+        }
+      }
+
+      &:last-of-type {
+        .p-stepper-content {
+          padding-left: calc($inlineSpacing * 6);
+        }
+      }
+    }
+  }
+}

src/assets/scss/theme-base/components/panel/_tabview.scss

@@ -0,0 +1,147 @@
+
+.p-tabview-nav-container {
+    position: relative;
+}
+
+.p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+}
+
+.p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+}
+
+.p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+}
+
+.p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+}
+
+.p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+}
+
+.p-tabview-nav-link:focus {
+    z-index: 1;
+}
+
+.p-tabview-close {
+    z-index: 1;
+}
+
+.p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+}
+
+.p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-tabview-nav-prev {
+    left: 0;
+}
+
+.p-tabview-nav-next {
+    right: 0;
+}
+
+.p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+}
+
+
+.p-tabview {
+    .p-tabview-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        li {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-tabview-nav-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-tabview-close {
+        margin-left: $inlineSpacing;
+    }
+    
+    .p-tabview-nav-btn.p-link {
+        background: $tabviewHeaderActiveBg;
+        color: $tabviewHeaderTextActiveColor;
+        width: $buttonIconOnlyWidth;
+        box-shadow: $raisedButtonShadow;
+        border-radius: 0;
+
+        &:focus-visible {
+            @include focused-inset();
+        }
+    }
+
+    .p-tabview-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        border: $tabviewContentBorder;
+        color: $tabviewContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+}

src/assets/scss/theme-base/components/panel/_toolbar.scss

@@ -0,0 +1,11 @@
+.p-toolbar {
+    background: $panelHeaderBg;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-radius: $borderRadius;
+    gap: $inlineSpacing;
+
+    .p-toolbar-separator {
+        margin: 0 $inlineSpacing;
+    }
+}