Update folder structure

public/demo/images/logo-white.svg

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="139px" height="158px" viewBox="0 0 139 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <title>head</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard" transform="translate(-3.000000, -7.000000)">
-            <g id="head" transform="translate(3.000000, 7.000000)">
-                <polygon id="chick-right" fill="#ffffff" fill-rule="nonzero" points="102.295646 72.1832018 91.4643424 69.7770951 99.8886897 81.8076287 99.8886897 119.102283 128.772166 95.0412157 128.772166 54.1374014 115.533906 58.9496148"></polygon>
-                <polygon id="chick-left" fill="#ffffff" fill-rule="nonzero" transform="translate(27.078259, 86.619842) scale(-1, 1) translate(-27.078259, -86.619842) " points="19.255651 72.1832018 8.42434732 69.7770951 16.8486946 81.8076287 16.8486946 119.102283 45.7321712 95.0412157 45.7321712 54.1374014 32.4939111 58.9496148"></polygon>
-                <polygon id="mask" fill="#ffffff" points="40.9182584 84.2137354 50.5460839 69.7770951 56.5634749 73.3862552 80.6330387 73.3862552 86.6504296 69.7770951 96.2782551 84.2137354 96.2782551 138.351137 89.057386 149.178617 80.6330387 157.599991 56.5634749 157.599991 48.1391276 149.178617 40.9182584 138.351137"></polygon>
-                <polygon id="bottom-chick-right" fill="#ffffff" fill-rule="nonzero" points="99.8886897 141.960297 115.533906 126.320603 115.533906 110.680909 99.8886897 123.914496"></polygon>
-                <polygon id="bottom-chick-left" fill="#ffffff" fill-rule="nonzero" transform="translate(29.485216, 126.320603) scale(-1, 1) translate(-29.485216, -126.320603) " points="21.6626074 141.960297 37.3078239 126.320603 37.3078239 110.680909 21.6626074 123.914496"></polygon>
-                <path d="M89.4422148,12.342 L93.8712988,22.8580139 L79.4295605,68.5740417 L71.0052132,68.5740417 L71.0042148,56.994 L89.4422148,12.342 Z M48.1982148,11.287 L66.1912148,57.769 L66.1913004,68.5740417 L58.9704313,68.5740417 L43.3252148,22.8580139 L48.1982148,11.287 Z M66.1913004,0 L66.1912148,46.688 L59.3732148,29.074 L61.3773876,30.0763341 L61.3773876,0 L66.1913004,0 Z M75.8191259,1.91846539e-13 L75.8191259,30.0763341 L78.3042148,28.833 L71.0042148,46.513 L71.0052132,0 L75.8191259,1.91846539e-13 Z M84.2434732,0 L87.2562148,7.154 L80.6322148,23.196 L80.6330387,1.91846539e-13 L84.2434732,0 Z M56.5634749,0 L56.5632148,21.816 L50.4332148,5.981 L52.9530403,0 L56.5634749,0 Z" fill="#455C71"></path>
-                <path d="M138.399992,19.2488538 L131.179123,49.3251879 L79.4295605,68.5740417 L78.2260823,68.5740417 L92.6678206,22.8580139 L138.399992,19.2488538 Z M0,19.2488538 L44.528693,22.8580139 L60.1739095,68.5740417 L58.9704313,68.5740417 L7.22086913,49.3251879 L0,19.2488538 Z" id="head-right-2" fill="#ffffff" fill-rule="nonzero"></path>
-                <polygon id="ear-right" fill="#455C71" fill-rule="nonzero" points="96.2782551 19.2488538 121.551297 16.8427471 104.702602 0 87.8539078 0"></polygon>
-                <polygon id="ear-left" fill="#455C71" fill-rule="nonzero" transform="translate(32.493911, 9.624427) scale(-1, 1) translate(-32.493911, -9.624427) " points="24.0695638 19.2488538 49.3426058 16.8427471 32.4939111 0 15.6452165 0"></polygon>
-                <polygon id="Path-2" fill="#455C71" fill-rule="nonzero" points="18.7999989 20.7999988 44.7999973 22.7999986 60.3999964 68.5999959 58.7999965 68.5999959 41.9999975 62.3999963"></polygon>
-                <polygon id="Path-3" fill="#455C71" fill-rule="nonzero" points="119.199993 20.7999988 92.3999945 22.7999986 77.5999954 68.5999959 79.5999953 68.5599959 95.1999943 62.7999963"></polygon>
-                <polygon id="Path-4" fill="#455C71" fill-rule="nonzero" points="48.3999971 72.7999957 50.399997 69.5999959 57.1999966 72.7999957 81.1999952 72.7999957 86.3999949 69.5999959 88.7999947 72.7999957 68.5999959 107.199994"></polygon>
-                <path d="M90.2104053,-1.0658141e-14 L68.485709,52.6144989 L48.1188062,-1.0658141e-14 L90.2104053,-1.0658141e-14 Z" id="Path-6" fill="#ffffff" fill-rule="nonzero"></path>
-            </g>
-        </g>
-    </g>
-</svg>

public/demo/images/logo.svg

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="139px" height="158px" viewBox="0 0 139 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <title>head</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard" transform="translate(-3.000000, -7.000000)">
-            <g id="head" transform="translate(3.000000, 7.000000)">
-                <polygon id="chick-right" fill="#41B883" fill-rule="nonzero" points="102.295646 72.1832018 91.4643424 69.7770951 99.8886897 81.8076287 99.8886897 119.102283 128.772166 95.0412157 128.772166 54.1374014 115.533906 58.9496148"></polygon>
-                <polygon id="chick-left" fill="#41B883" fill-rule="nonzero" transform="translate(27.078259, 86.619842) scale(-1, 1) translate(-27.078259, -86.619842) " points="19.255651 72.1832018 8.42434732 69.7770951 16.8486946 81.8076287 16.8486946 119.102283 45.7321712 95.0412157 45.7321712 54.1374014 32.4939111 58.9496148"></polygon>
-                <polygon id="mask" fill="#41B883" points="40.9182584 84.2137354 50.5460839 69.7770951 56.5634749 73.3862552 80.6330387 73.3862552 86.6504296 69.7770951 96.2782551 84.2137354 96.2782551 138.351137 89.057386 149.178617 80.6330387 157.599991 56.5634749 157.599991 48.1391276 149.178617 40.9182584 138.351137"></polygon>
-                <polygon id="bottom-chick-right" fill="#41B883" fill-rule="nonzero" points="99.8886897 141.960297 115.533906 126.320603 115.533906 110.680909 99.8886897 123.914496"></polygon>
-                <polygon id="bottom-chick-left" fill="#41B883" fill-rule="nonzero" transform="translate(29.485216, 126.320603) scale(-1, 1) translate(-29.485216, -126.320603) " points="21.6626074 141.960297 37.3078239 126.320603 37.3078239 110.680909 21.6626074 123.914496"></polygon>
-                <path d="M89.4422148,12.342 L93.8712988,22.8580139 L79.4295605,68.5740417 L71.0052132,68.5740417 L71.0042148,56.994 L89.4422148,12.342 Z M48.1982148,11.287 L66.1912148,57.769 L66.1913004,68.5740417 L58.9704313,68.5740417 L43.3252148,22.8580139 L48.1982148,11.287 Z M66.1913004,0 L66.1912148,46.688 L59.3732148,29.074 L61.3773876,30.0763341 L61.3773876,0 L66.1913004,0 Z M75.8191259,1.91846539e-13 L75.8191259,30.0763341 L78.3042148,28.833 L71.0042148,46.513 L71.0052132,0 L75.8191259,1.91846539e-13 Z M84.2434732,0 L87.2562148,7.154 L80.6322148,23.196 L80.6330387,1.91846539e-13 L84.2434732,0 Z M56.5634749,0 L56.5632148,21.816 L50.4332148,5.981 L52.9530403,0 L56.5634749,0 Z" fill="#455C71"></path>
-                <path d="M138.399992,19.2488538 L131.179123,49.3251879 L79.4295605,68.5740417 L78.2260823,68.5740417 L92.6678206,22.8580139 L138.399992,19.2488538 Z M0,19.2488538 L44.528693,22.8580139 L60.1739095,68.5740417 L58.9704313,68.5740417 L7.22086913,49.3251879 L0,19.2488538 Z" id="head-right-2" fill="#41B883" fill-rule="nonzero"></path>
-                <polygon id="ear-right" fill="#455C71" fill-rule="nonzero" points="96.2782551 19.2488538 121.551297 16.8427471 104.702602 0 87.8539078 0"></polygon>
-                <polygon id="ear-left" fill="#455C71" fill-rule="nonzero" transform="translate(32.493911, 9.624427) scale(-1, 1) translate(-32.493911, -9.624427) " points="24.0695638 19.2488538 49.3426058 16.8427471 32.4939111 0 15.6452165 0"></polygon>
-                <polygon id="Path-2" fill="#455C71" fill-rule="nonzero" points="18.7999989 20.7999988 44.7999973 22.7999986 60.3999964 68.5999959 58.7999965 68.5999959 41.9999975 62.3999963"></polygon>
-                <polygon id="Path-3" fill="#455C71" fill-rule="nonzero" points="119.199993 20.7999988 92.3999945 22.7999986 77.5999954 68.5999959 79.5999953 68.5599959 95.1999943 62.7999963"></polygon>
-                <polygon id="Path-4" fill="#455C71" fill-rule="nonzero" points="48.3999971 72.7999957 50.399997 69.5999959 57.1999966 72.7999957 81.1999952 72.7999957 86.3999949 69.5999959 88.7999947 72.7999957 68.5999959 107.199994"></polygon>
-                <path d="M90.2104053,-1.0658141e-14 L68.485709,52.6144989 L48.1188062,-1.0658141e-14 L90.2104053,-1.0658141e-14 Z" id="Path-6" fill="#41B883" fill-rule="nonzero"></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/app.routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '@angular/router';
-import { Landing } from './views/pages/landing';
-import { Notfound } from './views/pages/notfound';
-import { AppLayout } from './layout/app.layout';
-import { Dashboard } from './views/dashboard';
-import { Documentation } from './views/pages/documentation';
+import { AppLayout } from './app/layout/core/app.layout';
+import { Dashboard } from './app/pages/dashboard/dashboard';
+import { Documentation } from './app/pages/documentation/documentation';
+import { Landing } from './app/pages/landing/landing';
+import { Notfound } from './app/pages/notfound/notfound';
 
 export const appRoutes: Routes = [
     {
@@ -11,12 +11,13 @@ export const appRoutes: Routes = [
         component: AppLayout,
         children: [
             { path: '', component: Dashboard },
-            { path: 'uikit', loadChildren: () => import('./views/uikit/uikit.routes') },
+            { path: 'uikit', loadChildren: () => import('./app/pages/uikit/uikit.routes') },
             { path: 'documentation', component: Documentation },
-            { path: 'pages', loadChildren: () => import('./views/pages/pages.routes') }
+            { path: 'pages', loadChildren: () => import('./app/pages/pages.routes') }
         ]
     },
     { path: 'landing', component: Landing },
     { path: 'notfound', component: Notfound },
-    { path: 'auth', loadChildren: () => import('./views/pages/auth/auth.routes') }
+    { path: 'auth', loadChildren: () => import('./app/pages/auth/auth.routes') },
+    { path: '**', redirectTo: '/notfound' },
 ];

src/app/layout/core/app.configurator.ts

@@ -6,7 +6,7 @@ import Aura from '@primeng/themes/aura';
 import Lara from '@primeng/themes/lara';
 import { PrimeNG } from 'primeng/config';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import { LayoutService } from '../service/layout/layout.service';
+import { LayoutService } from '../service/layout.service';
 
 const presets = {
     Aura,

src/app/layout/core/app.floatingconfigurator.ts

@@ -1,11 +1,11 @@
 import { Component, computed, inject } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { StyleClassModule } from 'primeng/styleclass';
-import { AppConfigurator } from '../layout/app.configurator';
-import { LayoutService } from '../service/layout/layout.service';
+import { AppConfigurator } from './app.configurator';
+import { LayoutService} from '../service/layout.service';
 
 @Component({
-  selector: 'floating-configurator',
+  selector: 'app-floating-configurator',
   imports: [ButtonModule, StyleClassModule, AppConfigurator],
   template: `
       <div class="fixed flex gap-4 top-8 right-8">
@@ -27,7 +27,7 @@ import { LayoutService } from '../service/layout/layout.service';
       </div>
   `,
 })
-export class FloatingConfigurator {
+export class AppFloatingConfigurator {
     LayoutService = inject(LayoutService);
 
     isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme);

src/app/layout/core/app.layout.ts

@@ -3,9 +3,9 @@ import { CommonModule } from '@angular/common';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { filter, Subscription } from 'rxjs';
 import { AppTopbar } from './app.topbar';
-import { AppSidebar } from './appsidebar';
+import { AppSidebar } from './app.sidebar';
 import { AppFooter } from './app.footer';
-import { LayoutService } from '../service/layout/layout.service';
+import { LayoutService } from '../service/layout.service';
 
 @Component({
     selector: 'app-layout',

src/app/layout/core/app.menuitem.ts

@@ -6,7 +6,7 @@ import { filter } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { RippleModule } from 'primeng/ripple';
 import { MenuItem} from 'primeng/api';
-import { LayoutService } from '../service/layout/layout.service';
+import { LayoutService } from '../service/layout.service';
 
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector

src/app/layout/core/app.sidebar.ts

@@ -1,7 +1,6 @@
 import { Component, ElementRef } from '@angular/core';
 import { AppMenu } from './app.menu';
 
-
 @Component({
     selector: 'app-sidebar',
     standalone:true,

src/app/layout/core/app.topbar.ts

@@ -4,7 +4,7 @@ import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { StyleClassModule } from 'primeng/styleclass';
 import { AppConfigurator } from './app.configurator';
-import { LayoutService } from '../service/layout/layout.service';
+import { LayoutService } from '../service/layout.service';
 
 @Component({
     selector: 'app-topbar',

src/app/pages/auth/access.ts

@@ -2,19 +2,20 @@ import { Component } from '@angular/core';
 import {ButtonModule} from 'primeng/button';
 import {RouterModule} from '@angular/router';
 import {RippleModule} from 'primeng/ripple';
-import { FloatingConfigurator } from '../../../components/floatingconfigurator';
+import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
 
 @Component({
+    selector: 'app-access',
   standalone: true,
   imports: [
     ButtonModule,
     RouterModule,
     RippleModule,
-    FloatingConfigurator,
+    AppFloatingConfigurator,
     ButtonModule,
   ],
   template: `
-      <floating-configurator />
+      <app-floating-configurator />
       <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
           <div class="flex flex-col items-center justify-center">
               <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)">

src/app/pages/auth/auth.routes.ts

@@ -4,7 +4,7 @@ import { Login } from './login';
 import { Error } from './error';
 
 export default [
-  { path: 'access', component: Access},
-  { path: 'error', component: Error},
-  { path: 'login', component: Login},
+    { path: 'access', component: Access},
+    { path: 'error', component: Error},
+    { path: 'login', component: Login},
 ] as Routes;

src/app/pages/auth/error.ts

@@ -2,13 +2,14 @@ import { Component } from '@angular/core';
 import {ButtonModule} from 'primeng/button';
 import {RippleModule} from 'primeng/ripple';
 import {RouterModule} from '@angular/router';
-import { FloatingConfigurator } from '../../../components/floatingconfigurator';
+import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
 
 @Component({
-  imports: [ButtonModule, RippleModule, RouterModule, FloatingConfigurator, ButtonModule],
+    selector: 'app-error',
+  imports: [ButtonModule, RippleModule, RouterModule, AppFloatingConfigurator, ButtonModule],
   standalone: true,
   template: `
-      <floating-configurator />
+      <app-floating-configurator />
       <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
           <div class="flex flex-col items-center justify-center">
               <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)">

src/app/pages/auth/login.ts

@@ -6,10 +6,10 @@ import { PasswordModule} from 'primeng/password';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import { RippleModule} from 'primeng/ripple';
-import { FloatingConfigurator } from '../../../components/floatingconfigurator';
-
+import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
 
 @Component({
+    selector: 'app-login',
   standalone: true,
     imports: [
         ButtonModule,
@@ -19,10 +19,10 @@ import { FloatingConfigurator } from '../../../components/floatingconfigurator';
         FormsModule,
         RouterModule,
         RippleModule,
-        FloatingConfigurator
+        AppFloatingConfigurator
     ],
   template: `
-      <floating-configurator />
+      <app-floating-configurator />
       <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
           <div class="flex flex-col items-center justify-center">
               <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">

src/app/pages/crud/crud.ts

@@ -18,7 +18,7 @@ import { TagModule } from 'primeng/tag';
 import { InputIconModule } from 'primeng/inputicon';
 import { IconFieldModule } from 'primeng/iconfield';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { Product, ProductService } from '../../service/demo/product.service';
+import { Product, ProductService } from '../service/product.service';
 
 interface Column {
     field: string;
@@ -32,7 +32,8 @@ interface ExportColumn {
 }
 
 @Component({
-  standalone: true,
+    selector: 'app-crud',
+    standalone: true,
     imports: [
         CommonModule,
         TableModule,
@@ -53,7 +54,7 @@ interface ExportColumn {
         IconFieldModule,
         ConfirmDialogModule
     ],
-  template: `
+    template: `
       <p-toolbar styleClass="mb-6">
           <ng-template #start>
               <p-button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" (onClick)="openNew()" />
@@ -207,7 +208,7 @@ interface ExportColumn {
 
       <p-confirmDialog [style]="{ width: '450px' }" />
   `,
-  providers: [MessageService, ProductService, ConfirmationService],
+    providers: [MessageService, ProductService, ConfirmationService],
 })
 export class Crud implements OnInit {
     productDialog: boolean = false;

src/app/pages/dashboard/components/recentsaleswidget.ts

@@ -3,8 +3,7 @@ import { RippleModule } from 'primeng/ripple';
 import { TableModule } from 'primeng/table';
 import { ButtonModule } from 'primeng/button';
 import { CommonModule } from '@angular/common';
-import { Product, ProductService } from '../../service/demo/product.service';
-
+import { Product, ProductService } from '../../service/product.service';
 
 @Component({
     standalone:true,

src/app/pages/dashboard/components/revenuestreamwidget.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { ChartModule } from 'primeng/chart';
 import { debounceTime, Subscription } from 'rxjs';
-import { LayoutService } from '../../service/layout/layout.service';
+import { LayoutService } from '../../../layout/service/layout.service';
 
 @Component({
     standalone:true,

src/app/pages/dashboard/dashboard.ts

@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
-import { StatsWidget } from '../components/dashboard/statswidget';
-import { RecentSalesWidget } from '../components/dashboard/recentsaleswidget';
-import { BestSellingWidget } from '../components/dashboard/bestsellingwidget';
-import { RevenueStreamWidget } from '../components/dashboard/revenuestreamwidget';
-import { NotificationsWidget } from '../components/dashboard/notificationswidget';
-
+import { NotificationsWidget } from './components/notificationswidget';
+import { StatsWidget } from './components/statswidget';
+import { RecentSalesWidget } from './components/recentsaleswidget';
+import { BestSellingWidget } from './components/bestsellingwidget';
+import { RevenueStreamWidget } from './components/revenuestreamwidget';
 
 @Component({
   selector: 'app-dashboard',

src/app/pages/documentation/documentation.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
+    selector: 'app-documentation',
   standalone: true,
     imports: [CommonModule],
   template: `

src/app/pages/empty/empty.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+    selector: 'app-empty',
   standalone: true,
   template: `
   <div class="card">

src/app/pages/landing/landing.ts

@@ -4,15 +4,15 @@ import { RippleModule } from 'primeng/ripple';
 import { StyleClassModule } from 'primeng/styleclass';
 import { ButtonModule } from 'primeng/button';
 import { DividerModule } from 'primeng/divider';
-import { FeaturesWidget } from '../../components/landing/featureswidget';
-import { TopbarWidget } from '../../components/landing/topbarwidget.component';
-import { HeroWidget } from '../../components/landing/herowidget';
-import { HighlightsWidget } from '../../components/landing/highlightswidget';
-import { PricingWidget } from '../../components/landing/pricingwidget';
-import { FooterWidget } from '../../components/landing/footerwidget';
-
+import { TopbarWidget } from './components/topbarwidget.component';
+import { HeroWidget } from './components/herowidget';
+import { FeaturesWidget } from './components/featureswidget';
+import { HighlightsWidget } from './components/highlightswidget';
+import { PricingWidget } from './components/pricingwidget';
+import { FooterWidget } from './components/footerwidget';
 
 @Component({
+    selector: 'app-landing',
     standalone: true,
     imports: [RouterModule, TopbarWidget, HeroWidget, FeaturesWidget, HighlightsWidget, PricingWidget, FooterWidget, RippleModule, StyleClassModule, ButtonModule, DividerModule],
     template: `

src/app/pages/notfound/notfound.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import {RouterModule} from '@angular/router';
 import { ButtonModule } from 'primeng/button';
-import { FloatingConfigurator } from '../../components/floatingconfigurator';
+import { AppFloatingConfigurator } from '../../layout/core/app.floatingconfigurator';
 
 @Component({
+    selector: 'app-notfound',
   standalone: true,
-    imports: [RouterModule, FloatingConfigurator, ButtonModule],
+    imports: [RouterModule, AppFloatingConfigurator, ButtonModule],
   template: `
-  <floating-configurator />
+  <app-floating-configurator />
   <div class="flex items-center justify-center min-h-screen overflow-hidden">
       <div class="flex flex-col items-center justify-center">
           <svg width="54" height="40" viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-32 shrink-0">

src/app/pages/pages.routes.ts

@@ -1,7 +1,7 @@
 import { Routes } from '@angular/router';
-import { Documentation } from './documentation';
-import { Crud } from './crud';
-import { Empty } from './empty';
+import { Documentation } from './documentation/documentation';
+import { Crud } from './crud/crud';
+import { Empty } from './empty/empty';
 
 export default [
     { path: 'documentation', component: Documentation },

src/app/pages/uikit/buttondemo.ts

@@ -5,6 +5,7 @@ import {SplitButtonModule} from "primeng/splitbutton";
 import {MenuItem} from "primeng/api";
 
 @Component({
+    selector: 'app-button-demo',
   standalone: true,
   imports: [ButtonModule, ButtonGroupModule, SplitButtonModule],
   template: `<div class="flex flex-col md:flex-row gap-8">
@@ -83,10 +84,10 @@ import {MenuItem} from "primeng/api";
               <div class="font-semibold text-xl">Templating</div>
               <div class="flex flex-wrap gap-2">
                   <p-button type="button">
-                      <img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
+                      <img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="width: 1.5rem" />
                   </p-button>
                   <p-button type="button" outlined severity="success">
-                      <img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" />
+                      <img alt="logo" src="https://primefaces.org/cdn/primeng/images/logo.svg" style="width: 1.5rem" />
                       <span class="text-bold">PrimeNG</span>
                   </p-button>
               </div>
@@ -166,17 +167,17 @@ import {MenuItem} from "primeng/api";
           <div class="card flex flex-col gap-4">
               <div class="font-semibold text-xl">Loading</div>
               <div class="flex flex-wrap gap-2">
-                  <p-button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" />
-                  <p-button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
-                  <p-button type="button" class="mr-2 mb-2" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
-                  <p-button type="button" class="mr-2 mb-2" label="Search" [loading]="loading[3]" (click)="load(3)" />
+                  <p-button type="button" label="Search" icon="pi pi-search" [loading]="loading[0]" (click)="load(0)" />
+                  <p-button type="button" label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (click)="load(1)" />
+                  <p-button type="button" styleClass="h-full" icon="pi pi-search" [loading]="loading[2]" (click)="load(2)" />
+                  <p-button type="button" label="Search" [loading]="loading[3]" (click)="load(3)" />
               </div>
           </div>
       </div>
   </div>
   `
 })
-export class ButtonDoc implements OnInit {
+export class ButtonDemo implements OnInit {
 
   items: MenuItem[] = [];
 

src/app/pages/uikit/chartdemo.ts

@@ -3,9 +3,10 @@ import { ChartModule } from 'primeng/chart';
 import { CommonModule } from '@angular/common';
 import { debounceTime, Subscription } from 'rxjs';
 import { FluidModule } from 'primeng/fluid';
-import { LayoutService } from '../../service/layout/layout.service';
+import { LayoutService } from '../../layout/service/layout.service';
 
 @Component({
+    selector: 'app-chart-demo',
     standalone:true,
     imports: [
         CommonModule,
@@ -52,7 +53,7 @@ import { LayoutService } from '../../service/layout/layout.service';
     </p-fluid>
     `,
 })
-export class ChartDoc {
+export class ChartDemo {
 
     lineData: any;
 

src/app/pages/uikit/filedemo.ts

@@ -6,6 +6,7 @@ import { FileUploadModule } from 'primeng/fileupload';
 import { ToastModule } from 'primeng/toast';
 
 @Component({
+    selector: 'app-file-demo',
     standalone:true,
     imports:[CommonModule, FileUploadModule,ToastModule,ButtonModule],
     template: `<div class="grid grid-cols-12 gap-8">
@@ -37,7 +38,7 @@ import { ToastModule } from 'primeng/toast';
     </div>`,
     providers: [MessageService]
 })
-export class FileDoc {
+export class FileDemo {
 
     uploadedFiles: any[] = [];
 

src/app/pages/uikit/formlayoutdemo.ts

@@ -7,6 +7,7 @@ import {FormsModule} from "@angular/forms";
 import {TextareaModule} from "primeng/textarea";
 
 @Component({
+    selector: 'app-formlayout-demo',
     standalone: true,
     imports: [InputTextModule, FluidModule, ButtonModule, SelectModule, FormsModule, TextareaModule],
     template:`<p-fluid>
@@ -117,7 +118,7 @@ import {TextareaModule} from "primeng/textarea";
         </div>
     </p-fluid>`,
 })
-export class FormLayoutDoc {
+export class FormLayoutDemo {
     dropdownItems = [
         { name: 'Option 1', code: 'Option 1' },
         { name: 'Option 2', code: 'Option 2' },

src/app/pages/uikit/inputdemo.ts

@@ -26,10 +26,11 @@ import {ListboxModule} from "primeng/listbox";
 import {InputGroupAddonModule} from "primeng/inputgroupaddon";
 import {TextareaModule} from "primeng/textarea";
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import { CountryService } from '../../service/demo/country.service';
-import { NodeService } from '../../service/demo/node.service';
+import { CountryService } from '../service/country.service';
+import { NodeService } from '../service/node.service';
 
 @Component({
+    selector: 'app-input-demo',
     standalone: true,
     imports: [
         CommonModule,
@@ -240,7 +241,7 @@ import { NodeService } from '../../service/demo/node.service';
         </p-fluid>`,
     providers: [CountryService, NodeService]
 })
-export class InputDoc implements OnInit {
+export class InputDemo implements OnInit {
     floatValue: any = null;
 
     autoValue: any = null;

src/app/pages/uikit/listdemo.ts

@@ -7,9 +7,10 @@ import { PickListModule } from 'primeng/picklist';
 import { OrderListModule } from 'primeng/orderlist';
 import { TagModule } from 'primeng/tag';
 import { ButtonModule } from 'primeng/button';
-import { Product, ProductService } from '../../service/demo/product.service';
+import { Product, ProductService } from '../service/product.service';
 
 @Component({
+    selector: 'app-list-demo',
     standalone: true,
     imports: [CommonModule, DataViewModule, FormsModule, SelectButtonModule, PickListModule, OrderListModule, TagModule, ButtonModule],
     template: ` <div class="flex flex-col">
@@ -147,7 +148,7 @@ import { Product, ProductService } from '../../service/demo/product.service';
     `,
     providers: [ProductService]
 })
-export class ListDoc {
+export class ListDemo {
     layout: 'list' | 'grid' = 'list';
 
     options = ['list', 'grid'];

src/app/pages/uikit/mediademo.ts

@@ -5,10 +5,11 @@ import { CarouselModule } from 'primeng/carousel';
 import { GalleriaModule } from 'primeng/galleria';
 import { ImageModule } from 'primeng/image';
 import { TagModule } from 'primeng/tag';
-import { Product, ProductService } from '../../service/demo/product.service';
-import { PhotoService } from '../../service/demo/photo.service';
+import { Product, ProductService } from '../service/product.service';
+import { PhotoService } from '../service/photo.service';
 
 @Component({
+    selector: 'app-media-demo',
     standalone: true,
     imports: [CommonModule, CarouselModule, ButtonModule, GalleriaModule, ImageModule, TagModule],
     template: `<div class="card">
@@ -53,7 +54,7 @@ import { PhotoService } from '../../service/demo/photo.service';
         </div>`,
     providers: [ProductService, PhotoService]
 })
-export class MediaDoc implements OnInit {
+export class MediaDemo implements OnInit {
     products!: Product[];
 
     images!: any[];

src/app/pages/uikit/menudemo.ts

@@ -15,6 +15,7 @@ import { IconField, IconFieldModule } from 'primeng/iconfield';
 import { InputIcon, InputIconModule } from 'primeng/inputicon';
 
 @Component({
+    selector: 'app-menu-demo',
     standalone: true,
     imports: [
         CommonModule,
@@ -128,7 +129,7 @@ import { InputIcon, InputIconModule } from 'primeng/inputicon';
         </div>
     `
 })
-export class MenuDoc {
+export class MenuDemo {
     nestedMenuItems = [
         {
             label: 'Customers',

src/app/pages/uikit/messagesdemo.ts

@@ -8,6 +8,7 @@ import { MessageModule } from 'primeng/message';
 import { FormsModule } from '@angular/forms';
 
 @Component({
+    selector: 'app-messages-demo',
     standalone: true,
     imports:[CommonModule,ToastModule,ButtonModule,InputTextModule,MessageModule,FormsModule],
     template:`
@@ -50,7 +51,7 @@ import { FormsModule } from '@angular/forms';
     `,
     providers: [MessageService]
 })
-export class MessagesDoc {
+export class MessagesDemo {
 
     msgs = [];
 

src/app/pages/uikit/miscdemo.ts

@@ -13,6 +13,7 @@ import { ButtonModule } from 'primeng/button';
 import { OverlayBadgeModule } from 'primeng/overlaybadge';
 
 @Component({
+    selector: 'app-misc-demo',
     standalone: true,
     imports: [CommonModule, ProgressBarModule, BadgeModule, AvatarModule, ScrollPanelModule, TagModule, ChipModule, ButtonModule, SkeletonModule, AvatarGroupModule, ScrollTopModule, OverlayBadgeModule],
     template: `
@@ -91,16 +92,22 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
                 </div>
 
                 <div class="card">
-                    <div class="font-semibold text-xl mb-4">ScrollTop</div>
-                    <p-scrollpanel [style]="{ width: '250px', height: '200px' }">
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet
-                            consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus
-                            orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut
-                            etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
-                            Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
-                        </p>
-                    </p-scrollpanel>
+                    <div class="font-semibold text-xl mb-4">Skeleton</div>
+                    <div class="rounded-border border border-surface p-6">
+                        <div class="flex mb-4">
+                            <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
+                            <div>
+                                <p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
+                                <p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
+                                <p-skeleton height=".5rem"></p-skeleton>
+                            </div>
+                        </div>
+                        <p-skeleton width="100%" height="150px"></p-skeleton>
+                        <div class="flex justify-between mt-4">
+                            <p-skeleton width="4rem" height="2rem"></p-skeleton>
+                            <p-skeleton width="4rem" height="2rem"></p-skeleton>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="md:w-1/2">
@@ -160,30 +167,11 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
                         <p-chip label="Xuxue Feng" image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" styleClass="m-1" [removable]="true"></p-chip>
                     </div>
                 </div>
-
-                <div class="card">
-                    <div class="font-semibold text-xl mb-4">Skeleton</div>
-                    <div class="rounded-border border border-surface p-6">
-                        <div class="flex mb-4">
-                            <p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
-                            <div>
-                                <p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
-                                <p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
-                                <p-skeleton height=".5rem"></p-skeleton>
-                            </div>
-                        </div>
-                        <p-skeleton width="100%" height="150px"></p-skeleton>
-                        <div class="flex justify-between mt-4">
-                            <p-skeleton width="4rem" height="2rem"></p-skeleton>
-                            <p-skeleton width="4rem" height="2rem"></p-skeleton>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
     `
 })
-export class MiscDoc {
+export class MiscDemo {
     value = 0;
 
     interval: any;

src/app/pages/uikit/overlaydemo.ts

@@ -10,9 +10,10 @@ import { InputTextModule } from 'primeng/inputtext';
 import { FormsModule } from '@angular/forms';
 import { TooltipModule } from 'primeng/tooltip';
 import { TableModule } from 'primeng/table';
-import { Product, ProductService } from '../../service/demo/product.service';
+import { Product, ProductService } from '../service/product.service';
 
 @Component({
+    selector: 'app-overlay-demo',
     standalone: true,
     imports: [ToastModule, DialogModule, ButtonModule, DrawerModule, PopoverModule, ConfirmPopupModule, InputTextModule, FormsModule, TooltipModule, TableModule, ToastModule],
     template: ` <div class="flex flex-col md:flex-row gap-8">
@@ -134,7 +135,7 @@ import { Product, ProductService } from '../../service/demo/product.service';
     </div>`,
     providers: [ConfirmationService, MessageService, ProductService]
 })
-export class OverlayDoc implements OnInit {
+export class OverlayDemo implements OnInit {
     images: any[] = [];
 
     display: boolean = false;

src/app/pages/uikit/panelsdemo.ts

@@ -18,6 +18,7 @@ import { IconFieldModule } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
 
 @Component({
+    selector: 'app-panels-demo',
     standalone:true,
     imports: [
         CommonModule,
@@ -212,7 +213,7 @@ import { InputIconModule } from 'primeng/inputicon';
             </div>
     `,
 })
-export class PanelsDoc {
+export class PanelsDemo {
     items: MenuItem[] = [
         {
         label: 'Save',

src/app/pages/uikit/tabledemo.ts

@@ -16,14 +16,15 @@ import { RippleModule } from 'primeng/ripple';
 import { InputIconModule } from 'primeng/inputicon';
 import { IconFieldModule } from 'primeng/iconfield';
 import { TagModule } from 'primeng/tag';
-import { Customer, CustomerService, Representative } from '../../service/demo/customer.service';
-import { Product, ProductService } from '../../service/demo/product.service';
+import { Customer, CustomerService, Representative } from '../service/customer.service';
+import { Product, ProductService } from '../service/product.service';
 
 interface expandedRows {
     [key: string]: boolean;
 }
 
 @Component({
+    selector: 'app-table-demo',
     standalone: true,
     imports: [TableModule, MultiSelectModule,SelectModule, InputIconModule, TagModule, InputTextModule, SliderModule, ProgressBarModule, ToggleButtonModule, ToastModule, CommonModule, FormsModule, ButtonModule, RatingModule, RippleModule, IconFieldModule],
     template: `
@@ -399,7 +400,7 @@ interface expandedRows {
         }`,
     providers: [ConfirmationService, MessageService, CustomerService, ProductService],
 })
-export class TableDoc implements OnInit {
+export class TableDemo implements OnInit {
 
     customers1: Customer[] = [];
 

src/app/pages/uikit/timelinedemo.ts

@@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
 import { ButtonModule } from 'primeng/button';
 
 @Component({
+    selector: 'app-timeline-demo',
     standalone: true,
     imports: [CommonModule, TimelineModule, ButtonModule, CardModule],
     template: ` <div class="grid grid-cols-12 gap-8">
@@ -101,7 +102,7 @@ import { ButtonModule } from 'primeng/button';
         </div>
     </div>`
 })
-export class TimelineDoc {
+export class TimelineDemo {
     events1: any[] = [];
 
     events2: any[] = [];

src/app/pages/uikit/treedemo.ts

@@ -4,9 +4,10 @@ import {TreeModule} from "primeng/tree";
 import {FormsModule} from "@angular/forms";
 import {TreeTableModule} from "primeng/treetable";
 import {CommonModule} from "@angular/common";
-import { NodeService } from '../../service/demo/node.service';
+import { NodeService } from '../service/node.service';
 
 @Component({
+    selector: 'app-tree-demo',
     standalone: true,
     imports: [CommonModule, FormsModule, TreeModule, TreeTableModule],
     template: `
@@ -39,7 +40,7 @@ import { NodeService } from '../../service/demo/node.service';
     `,
     providers: [NodeService]
 })
-export class TreeDoc implements OnInit {
+export class TreeDemo implements OnInit {
     treeValue: TreeNode[] = [];
 
     treeTableValue: TreeNode[] = [];

src/app/pages/uikit/uikit.routes.ts

@@ -1,35 +1,35 @@
 import { Routes } from '@angular/router';
-import { ButtonDoc } from './buttondoc';
-import { ChartDoc } from './chartdoc';
-import { FileDoc } from './filedoc';
-import { FormLayoutDoc } from './formlayoutdoc';
-import { InputDoc } from './inputdoc';
-import { ListDoc } from './listdoc';
-import { MediaDoc } from './mediadoc';
-import { MessagesDoc } from './messagesdoc';
-import { MiscDoc } from './miscdoc';
-import { PanelsDoc } from './panelsdoc';
-import { TimelineDoc } from './timelinedoc';
-import { TableDoc } from './tabledoc';
-import { OverlayDoc } from './overlaydoc';
-import { TreeDoc } from './treedoc';
-import { MenuDoc } from './menudoc';
+import { ButtonDemo } from './buttondemo';
+import { ChartDemo } from './chartdemo';
+import { FileDemo } from './filedemo';
+import { FormLayoutDemo } from './formlayoutdemo';
+import { InputDemo } from './inputdemo';
+import { ListDemo } from './listdemo';
+import { MediaDemo } from './mediademo';
+import { MessagesDemo } from './messagesdemo';
+import { MiscDemo } from './miscdemo';
+import { PanelsDemo } from './panelsdemo';
+import { TimelineDemo } from './timelinedemo';
+import { TableDemo } from './tabledemo';
+import { OverlayDemo } from './overlaydemo';
+import { TreeDemo } from './treedemo';
+import { MenuDemo } from './menudemo';
 
 export default [
-    { path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDoc},
-    { path: 'charts', data: { breadcrumb: 'Charts' }, component: ChartDoc },
-    { path: 'file', data: { breadcrumb: 'File' }, component: FileDoc },
-    { path: 'formlayout', data: { breadcrumb: 'Form Layout' }, component: FormLayoutDoc },
-    { path: 'input', data: { breadcrumb: 'Input' }, component: InputDoc },
-    { path: 'list', data: { breadcrumb: 'List' }, component: ListDoc },
-    { path: 'media', data: { breadcrumb: 'Media' }, component: MediaDoc },
-    { path: 'message', data: { breadcrumb: 'Message' }, component: MessagesDoc },
-    { path: 'misc', data: { breadcrumb: 'Misc' }, component: MiscDoc },
-    { path: 'panel', data: { breadcrumb: 'Panel' }, component: PanelsDoc },
-    { path: 'timeline', data: { breadcrumb: 'Timeline' }, component: TimelineDoc },
-    { path: 'table', data: { breadcrumb: 'Table' }, component: TableDoc },
-    { path: 'overlay', data: { breadcrumb: 'Overlay' }, component: OverlayDoc },
-    { path: 'tree', data: { breadcrumb: 'Tree' }, component: TreeDoc },
-    { path: 'menu', data: { breadcrumb: 'Menu' }, component: MenuDoc },
+    { path: 'button', data: { breadcrumb: 'Button' }, component: ButtonDemo},
+    { path: 'charts', data: { breadcrumb: 'Charts' }, component: ChartDemo },
+    { path: 'file', data: { breadcrumb: 'File' }, component: FileDemo },
+    { path: 'formlayout', data: { breadcrumb: 'Form Layout' }, component: FormLayoutDemo },
+    { path: 'input', data: { breadcrumb: 'Input' }, component: InputDemo },
+    { path: 'list', data: { breadcrumb: 'List' }, component: ListDemo },
+    { path: 'media', data: { breadcrumb: 'Media' }, component: MediaDemo },
+    { path: 'message', data: { breadcrumb: 'Message' }, component: MessagesDemo },
+    { path: 'misc', data: { breadcrumb: 'Misc' }, component: MiscDemo },
+    { path: 'panel', data: { breadcrumb: 'Panel' }, component: PanelsDemo },
+    { path: 'timeline', data: { breadcrumb: 'Timeline' }, component: TimelineDemo },
+    { path: 'table', data: { breadcrumb: 'Table' }, component: TableDemo },
+    { path: 'overlay', data: { breadcrumb: 'Overlay' }, component: OverlayDemo },
+    { path: 'tree', data: { breadcrumb: 'Tree' }, component: TreeDemo },
+    { path: 'menu', data: { breadcrumb: 'Menu' }, component: MenuDemo },
     { path: '**', redirectTo: '/notfound' }
 ] as Routes;

src/views/dashboard.routes.ts

@@ -1,6 +0,0 @@
-import { Routes } from '@angular/router';
-import { Dashboard } from './dashboard';
-
-export default [
-    { path: '', component: Dashboard}
-] as Routes;