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,16 @@
     <span tuiNavigationLogo>
         <span tuiFade>{{ title }} dashboard</span>
     </span>
-    <hr />
+    <tui-tabs [style.margin-left]="'auto'">
+        @for (link of links; track $index) {
+            <button
+                routerLinkActive
+                tuiTab
+                [routerLink]="link.to"
+            >
+                {{ link.name }}
+            </button>
+        }
+    </tui-tabs>
 </nav>
 <router-outlet />

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

@@ -5,9 +5,11 @@ import {
     ActivationEnd,
     Router,
     RouterLink,
+    RouterLinkActive,
     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';
 
@@ -18,13 +20,16 @@ import {filter, map, startWith} from 'rxjs';
         AsyncPipe,
         CommonModule,
         RouterLink,
+        RouterLinkActive,
         RouterOutlet,
         TuiCardLarge,
+        TuiFade,
         TuiHeader,
         TuiIcon,
         TuiIcon,
         TuiNavigation,
         TuiSurface,
+        TuiTabs,
         TuiTitle,
     ],
     templateUrl: './dashboards.component.html',
@@ -37,4 +42,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']),
+    );
 }

apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html

@@ -0,0 +1,141 @@
+<div class="top">
+    <div class="column">
+        <div class="info">
+            <tui-avatar
+                src="@tui.user"
+                [size]="'xxl'"
+                [style.border-radius]="'9rem'"
+                [style.height]="'9rem'"
+                [style.width]="'9rem'"
+            />
+            <header tuiHeader>
+                <h3 tuiTitle>
+                    Administrator
+                    <div
+                        [style.align-items]="'center'"
+                        [style.display]="'flex'"
+                        [style.gap]="'0.5rem'"
+                    >
+                        <span tuiSubtitle>Status:</span>
+                        <tui-badge
+                            appearance="success"
+                            tuiStatus
+                        >
+                            Online
+                        </tui-badge>
+                    </div>
+                    <span tuiSubtitle>Number of animals: {{ animals.length }}</span>
+                </h3>
+            </header>
+        </div>
+        <tui-ring-chart
+            size="xl"
+            [style.margin-left]="'auto'"
+            [style.margin-right]="'auto'"
+            [value]="value"
+            [(activeItemIndex)]="indexRingChart"
+        >
+            <span>{{ sum | tuiAmount: 'RUB' | async }}</span>
+            <div>{{ label }}</div>
+        </tui-ring-chart>
+
+        <ng-template
+            #content
+            let-index
+        >
+            <span>{{ value[index] | tuiAmount: 'RUB' | async }}</span>
+            <div>{{ labels[index] }}</div>
+        </ng-template>
+    </div>
+
+    <div>
+        <div
+            tuiAppearance="whiteblock"
+            tuiCardLarge="normal"
+            class="card-animals"
+        >
+            @for (animal of animals; track $index) {
+                <button
+                    tuiAppearance="whiteblock"
+                    tuiCardLarge="normal"
+                    tuiSurface="elevated"
+                    [routerLink]="'animal/' + $index"
+                >
+                    <tui-avatar
+                        class="avatar"
+                        [size]="'m'"
+                        [src]="animal.src"
+                    />
+                    <header tuiHeader>
+                        <h2
+                            tuiTitle
+                            [style.text-align]="'center'"
+                        >
+                            {{ animal.title }}
+                        </h2>
+                    </header>
+                    <div
+                        [style.display]="'flex'"
+                        [style.flex-direction]="'column'"
+                        [style.gap]="'0.5rem'"
+                    >
+                        <tui-badge
+                            tuiStatus
+                            [appearance]="animal.health === 'good' ? 'success' : 'warning'"
+                        >
+                            {{ animal.health }}
+                        </tui-badge>
+                        @for (tag of animal.tags; track $index) {
+                            <tui-badge appearance="primary">{{ tag }}</tui-badge>
+                        }
+                    </div>
+                </button>
+            }
+        </div>
+    </div>
+</div>
+<div class="events">
+    <div>
+        <button
+            iconEnd="@tui.panel-top-open"
+            tuiLink
+            (click)="[(expanded = !expanded), onDayClick(null)]"
+        >
+            Open Calendar
+        </button>
+        <tui-expand [expanded]="expanded">
+            <ng-template tuiExpandContent>
+                <tui-calendar-range
+                    class="calendar"
+                    [items]="items"
+                    [markerHandler]="marker"
+                    [value]="calendarValue()"
+                    (valueChange)="onDayClick($event)"
+                />
+            </ng-template>
+        </tui-expand>
+    </div>
+    @if (calendarValue()) {
+        <div
+            tuiCardLarge
+            tuiSurface="elevated"
+            [style.margin-left]="'auto'"
+            [style.margin-right]="'auto'"
+        >
+            <h3 tuiTitle="m">Events</h3>
+            <button
+                *ngFor="let item of eventsCalendar()"
+                tuiCell
+            >
+                <tui-avatar
+                    appearance="accent"
+                    [src]="item.icon"
+                />
+                <span tuiTitle>
+                    {{ item.title }}
+                    <span tuiSubtitle>{{ item.subtitle }} {{ item.time }}</span>
+                </span>
+            </button>
+        </div>
+    }
+</div>

apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.less

@@ -0,0 +1,80 @@
+:host {
+    display: flex;
+    flex-direction: column;
+}
+
+.events {
+    display: flex;
+    padding: 1rem;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.top {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 1rem;
+    gap: 1rem;
+
+    @media (max-width: 92rem) {
+        justify-content: center;
+    }
+}
+
+.info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2rem;
+    text-align: center;
+
+    @media (max-width: 92rem) {
+        justify-content: center;
+    }
+}
+
+.calendar {
+    @media (max-width: 43.75rem) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+.card-animals[tuiAppearance][data-appearance='whiteblock'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2rem;
+    max-width: 100%;
+
+    &:last-child {
+        margin-top: 0;
+    }
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    @media (max-width: 92rem) {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+tui-ring-chart {
+    --tui-chart-categorical-00: #c779d0;
+    --tui-chart-categorical-01: #feac5e;
+    --tui-chart-categorical-02: #ff5f6d;
+    --tui-chart-categorical-03: #4bc0c8;
+    --tui-chart-categorical-04: #9795cd;
+}
+
+.avatar {
+    border-radius: 4.5rem;
+    height: 9rem;
+    width: 9rem;
+}