feat: add new dashboard space-zoo

.cspell.json

@@ -33,6 +33,9 @@
         "maxtemp",
         "Tiko",
         "Create",
+        "Greenplum",
+        "hamcejdc",
+        "Сleaning",
         "NFTTABLE",
         "Unstake",
         "Unstaking"

apps/taiga-lumbermill/project.json

@@ -41,7 +41,7 @@
                         {
                             "type": "initial",
                             "maximumWarning": "500kb",
-                            "maximumError": "1mb"
+                            "maximumError": "1.2mb"
                         },
                         {
                             "type": "anyComponentStyle",

apps/taiga-lumbermill/src/components/app/app.routes.ts

@@ -32,6 +32,49 @@ export const appRoutes: Route[] = [
                     ),
                 data: {title: 'Crypto'},
             },
+            {
+                path: 'space-zoo',
+                loadComponent: async () =>
+                    import('../../dashboards/space-zoo/space-zoo.component').then(
+                        (mod) => mod.SpaceZooComponent,
+                    ),
+                data: {
+                    title: 'Space zoo',
+                    links: [
+                        {
+                            name: 'Main',
+                            to: 'space-zoo',
+                        },
+                        {
+                            name: 'Table',
+                            to: 'space-zoo/table',
+                        },
+                    ],
+                },
+                children: [
+                    {
+                        path: '',
+                        loadComponent: async () =>
+                            import(
+                                '../../dashboards/space-zoo/components/administrator/administrator.component'
+                            ).then((mod) => mod.AdministratorComponent),
+                    },
+                    {
+                        path: 'table',
+                        loadComponent: async () =>
+                            import(
+                                '../../dashboards/space-zoo/components/table/table.component'
+                            ).then((mod) => mod.TableComponent),
+                    },
+                    {
+                        path: 'animal/:id',
+                        loadComponent: async () =>
+                            import(
+                                '../../dashboards/space-zoo/components/animal/animal.component'
+                            ).then((mod) => mod.AnimalComponent),
+                    },
+                ],
+            },
         ],
     },
     {

apps/taiga-lumbermill/src/dashboards/dashboards-list/dashboards-list.component.ts

@@ -21,6 +21,11 @@ export const INITIAL_DATA: DashboardsData[] = [
         link: '/dashboards/crypto',
         description: 'Crypto token dashboard',
     },
+    {
+        title: 'Space zoo Dashboard',
+        link: '/dashboards/space-zoo',
+        description: 'Space zoo dashboard',
+    },
 ];
 
 @Component({

apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.html

@@ -3,6 +3,7 @@
     [style.position]="'sticky'"
 >
     @let title = (data$ | async) ?? '';
+    @let links = (links$ | async) ?? [];
     <a [routerLink]="title ? '/dashboards' : '/'">
         <tui-icon icon="@tui.chevron-left" />
         Back
@@ -11,6 +12,19 @@
     <span tuiNavigationLogo>
         <span tuiFade>{{ title }} dashboard</span>
     </span>
-    <hr />
+    <tui-tabs
+        tuiFade
+        [activeItemIndex]="0"
+        [style.margin-left]="'auto'"
+    >
+        @for (link of links; track $index) {
+            <button
+                tuiTab
+                [routerLink]="link.to"
+            >
+                {{ link.name }}
+            </button>
+        }
+    </tui-tabs>
 </nav>
 <router-outlet />

apps/taiga-lumbermill/src/dashboards/dashboards/dashboards.component.ts

@@ -8,6 +8,7 @@ import {
     RouterOutlet,
 } from '@angular/router';
 import {TuiIcon, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiFade, TuiTabs} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader, TuiNavigation} from '@taiga-ui/layout';
 import {filter, map, startWith} from 'rxjs';
 
@@ -20,11 +21,13 @@ import {filter, map, startWith} from 'rxjs';
         RouterLink,
         RouterOutlet,
         TuiCardLarge,
+        TuiFade,
         TuiHeader,
         TuiIcon,
         TuiIcon,
         TuiNavigation,
         TuiSurface,
+        TuiTabs,
         TuiTitle,
     ],
     templateUrl: './dashboards.component.html',
@@ -37,4 +40,10 @@ export class DashboardsComponent {
         map((event) => event.snapshot.firstChild?.data['title']),
         startWith(this.activatedRoute.snapshot.firstChild?.data['title']),
     );
+
+    protected links$ = inject(Router).events.pipe(
+        filter((e): e is ActivationEnd => e instanceof ActivationEnd),
+        map((event) => event.snapshot.firstChild?.data['links']),
+        startWith(this.activatedRoute.snapshot.firstChild?.data['links']),
+    );
 }