refactor: update breadcrumb labels and remove redundant management entries across dashboard components

kastov · kastov · commit a89ed6583087 · 2025-07-25T08:28:05.000+03:00
diff --git a/src/pages/dashboard/api-tokens/ui/components/api-tokens.page.component.tsx b/src/pages/dashboard/api-tokens/ui/components/api-tokens.page.component.tsx
@@ -20,7 +20,7 @@ export default function ApiTokensPageComponent(props: IProps) {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     {
                         label: t('constants.api-tokens'),
                         href: ROUTES.DASHBOARD.MANAGEMENT.API_TOKENS
diff --git a/src/pages/dashboard/config-profiles/components/config-profile-by-uuid.page.component.tsx b/src/pages/dashboard/config-profiles/components/config-profile-by-uuid.page.component.tsx
@@ -23,7 +23,7 @@ export const ConfigProfileByUuidPageComponent = (props: Props) => {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     {
                         label: t('constants.config-profiles'),
                         href: ROUTES.DASHBOARD.MANAGEMENT.CONFIG_PROFILES
diff --git a/src/pages/dashboard/config-profiles/components/config-profiles.page.component.tsx b/src/pages/dashboard/config-profiles/components/config-profiles.page.component.tsx
@@ -19,7 +19,7 @@ export const ConfigPageComponent = (props: Props) => {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     {
                         label: t('constants.config-profiles'),
                         href: ROUTES.DASHBOARD.MANAGEMENT.CONFIG_PROFILES
diff --git a/src/pages/dashboard/crm/infra-billing/components/infra-billing.page.component.tsx b/src/pages/dashboard/crm/infra-billing/components/infra-billing.page.component.tsx
@@ -27,7 +27,7 @@ export const InfraBillingPageComponent = () => {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     {
                         label: t('constants.nodes'),
                         href: ROUTES.DASHBOARD.MANAGEMENT.NODES
diff --git a/src/pages/dashboard/home/components/home.page.tsx b/src/pages/dashboard/home/components/home.page.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { MetricWithIcon } from '@widgets/dashboard/home/metric-with-icons'
 import { LoadingScreen, PageHeader } from '@shared/ui'
 import { MetricWithTrend } from '@shared/ui/metrics'
+import { ROUTES } from '@shared/constants'
 import { Page } from '@shared/ui/page'
 
 import {
@@ -103,8 +104,7 @@ export const HomePage = (props: IProps) => {
         <Page title={t('constants.home')}>
             <PageHeader
                 breadcrumbs={[
-                    { label: t('constants.dashboard'), href: '/' },
-                    { label: t('constants.overview'), href: '/' },
+                    { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
                     { label: t('constants.home') }
                 ]}
                 title={t('home.page.short-stats')}
diff --git a/src/pages/dashboard/hosts/ui/components/hosts.page.component.tsx b/src/pages/dashboard/hosts/ui/components/hosts.page.component.tsx
@@ -23,7 +23,7 @@ export default function HostsPageComponent(props: IProps) {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     { label: t('constants.hosts') }
                 ]}
                 title={t('constants.hosts')}
diff --git a/src/pages/dashboard/internal-squads/components/internal-squads.page.component.tsx b/src/pages/dashboard/internal-squads/components/internal-squads.page.component.tsx
@@ -19,7 +19,7 @@ export const InternalSquadsPageComponent = (props: Props) => {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     {
                         label: t('constants.internal-squads'),
                         href: ROUTES.DASHBOARD.MANAGEMENT.INTERNAL_SQUADS
diff --git a/src/pages/dashboard/nodes-bandwidth-table/ui/components/nodes-bandwidth-table.page.component.tsx b/src/pages/dashboard/nodes-bandwidth-table/ui/components/nodes-bandwidth-table.page.component.tsx
@@ -18,7 +18,7 @@ export default function NodesBandwidthTablePageComponent(props: IProps) {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     { label: t('constants.nodes'), href: ROUTES.DASHBOARD.MANAGEMENT.NODES },
                     { label: t('constants.nodes-bandwidth-table') }
                 ]}
diff --git a/src/pages/dashboard/nodes-metrics/ui/components/nodes-metrics.page.component.tsx b/src/pages/dashboard/nodes-metrics/ui/components/nodes-metrics.page.component.tsx
@@ -17,7 +17,7 @@ export default function NodesMetricsPageComponent(props: IProps) {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     { label: t('constants.nodes'), href: ROUTES.DASHBOARD.MANAGEMENT.NODES },
                     { label: t('constants.nodes-metrics') }
                 ]}
diff --git a/src/pages/dashboard/nodes/ui/components/nodes.page.component.tsx b/src/pages/dashboard/nodes/ui/components/nodes.page.component.tsx
@@ -21,7 +21,7 @@ export default function NodesPageComponent(props: IProps) {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     { label: t('constants.nodes') }
                 ]}
                 title={t('constants.nodes')}
diff --git a/src/pages/dashboard/statistic-nodes/components/statistic-nodes.component.tsx b/src/pages/dashboard/statistic-nodes/components/statistic-nodes.component.tsx
@@ -542,7 +542,7 @@ export const StatisticNodesPage = () => {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     { label: t('constants.nodes'), href: ROUTES.DASHBOARD.MANAGEMENT.NODES },
                     { label: t('constants.nodes-statistics') }
                 ]}
diff --git a/src/pages/dashboard/subscription-settings/components/subscription-settings.page.component.tsx b/src/pages/dashboard/subscription-settings/components/subscription-settings.page.component.tsx
@@ -37,7 +37,7 @@ export const SubscriptionSettingsPageComponent = (props: IProps) => {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
+
                     { label: t('constants.subscription-settings') }
                 ]}
                 title={t('constants.subscription-settings')}
diff --git a/src/pages/dashboard/users/ui/components/users.page.component.tsx b/src/pages/dashboard/users/ui/components/users.page.component.tsx
@@ -48,7 +48,6 @@ export default function UsersPageComponent() {
             <PageHeader
                 breadcrumbs={[
                     { label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },
-                    { label: t('constants.management') },
                     { label: t('constants.users') }
                 ]}
                 title={t('constants.users')}
diff --git a/src/shared/ui/page-header.tsx b/src/shared/ui/page-header.tsx
@@ -1,4 +1,5 @@
 import { Anchor, Breadcrumbs, ElementProps, Group, GroupProps, Text, Title } from '@mantine/core'
+import { PiCaretRight } from 'react-icons/pi'
 import { NavLink } from 'react-router-dom'
 import { motion } from 'motion/react'
 import { ReactNode } from 'react'
@@ -43,7 +44,11 @@ export function PageHeader({
                             ease: [0, 0.71, 0.2, 1.01]
                         }}
                     >
-                        <Breadcrumbs mt="sm">
+                        <Breadcrumbs
+                            mt="sm"
+                            separator={<PiCaretRight size={14} />}
+                            separatorMargin="xs"
+                        >
                             {breadcrumbs.map((breadcrumb) =>
                                 breadcrumb.href ? (
                                     <Anchor
diff --git a/src/widgets/dashboard/api-tokens/api-token-card/ApiTokenCard.module.css b/src/widgets/dashboard/api-tokens/api-token-card/ApiTokenCard.module.css
@@ -5,11 +5,7 @@
     border-radius: var(--mantine-radius-lg);
     padding: var(--mantine-spacing-sm);
     margin-bottom: var(--mantine-spacing-md);
-    background: linear-gradient(
-        135deg,
-        var(--mantine-color-dark-6) 0%,
-        var(--mantine-color-dark-7) 100%
-    );
+
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow:
         0 2px 8px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)),
@@ -25,22 +21,6 @@
         0 4px 10px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
 }
 
-/* Gradient Border */
-.gradientBorder {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(
-        90deg,
-        var(--mantine-color-blue-5),
-        var(--mantine-color-teal-5),
-        var(--mantine-color-green-5)
-    );
-    border-radius: var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0;
-}
-
 /* Icon Wrapper */
 .iconWrapper {
     display: flex;
diff --git a/src/widgets/dashboard/api-tokens/api-token-card/api-token-card.widget.tsx b/src/widgets/dashboard/api-tokens/api-token-card/api-token-card.widget.tsx
@@ -94,6 +94,44 @@ export const ApiTokenCardWidget = forwardRef((props: IProps, ref: ForwardedRef<H
                             <div className={classes.iconWrapper}>
                                 <PiKey className={classes.tokenIcon} size="18px" />
                             </div>
+                            <Group className={classes.actionButtons} gap="xs">
+                                <Tooltip
+                                    label={
+                                        clipboard.copied
+                                            ? t('api-token-card.widget.copied')
+                                            : t('api-token-card.widget.copy-token')
+                                    }
+                                >
+                                    <ActionIcon
+                                        className={classes.actionButton}
+                                        color={clipboard.copied ? 'teal' : 'blue'}
+                                        onClick={handleCopy}
+                                        radius="md"
+                                        size="lg"
+                                        variant={clipboard.copied ? 'filled' : 'light'}
+                                    >
+                                        {clipboard.copied ? (
+                                            <PiCheck size="16px" />
+                                        ) : (
+                                            <PiCopy size="16px" />
+                                        )}
+                                    </ActionIcon>
+                                </Tooltip>
+
+                                <Tooltip label={t('api-token-card.widget.delete')}>
+                                    <ActionIcon
+                                        className={classes.actionButton}
+                                        color="red"
+                                        loading={isDeletingApiToken}
+                                        onClick={handleDelete}
+                                        radius="md"
+                                        size="lg"
+                                        variant="light"
+                                    >
+                                        <PiTrash size="16px" />
+                                    </ActionIcon>
+                                </Tooltip>
+                            </Group>
                             <Badge
                                 autoContrast
                                 className={classes.tokenBadge}
@@ -112,46 +150,7 @@ export const ApiTokenCardWidget = forwardRef((props: IProps, ref: ForwardedRef<H
                             </Group>
                         </Group>
                     </Stack>
-
-                    <Group className={classes.actionButtons} gap="xs">
-                        <Tooltip
-                            label={
-                                clipboard.copied
-                                    ? t('api-token-card.widget.copied')
-                                    : t('api-token-card.widget.copy-token')
-                            }
-                        >
-                            <ActionIcon
-                                className={classes.actionButton}
-                                color={clipboard.copied ? 'teal' : 'blue'}
-                                onClick={handleCopy}
-                                size="lg"
-                                variant={clipboard.copied ? 'filled' : 'light'}
-                            >
-                                {clipboard.copied ? (
-                                    <PiCheck size="16px" />
-                                ) : (
-                                    <PiCopy size="16px" />
-                                )}
-                            </ActionIcon>
-                        </Tooltip>
-
-                        <Tooltip label={t('api-token-card.widget.delete')}>
-                            <ActionIcon
-                                className={classes.actionButton}
-                                color="red"
-                                loading={isDeletingApiToken}
-                                onClick={handleDelete}
-                                size="lg"
-                                variant="light"
-                            >
-                                <PiTrash size="16px" />
-                            </ActionIcon>
-                        </Tooltip>
-                    </Group>
                 </Flex>
-
-                <div className={classes.gradientBorder} />
             </Container>
         </motion.div>
     )

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export default function ApiTokensPageComponent(props: IProps) {`
`20`	`20`	`<PageHeader`
`21`	`21`	`breadcrumbs={[`
`22`	`22`	`{ label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },`
`23`		`- { label: t('constants.management') },`
	`23`	`+`
`24`	`24`	`{`
`25`	`25`	`label: t('constants.api-tokens'),`
`26`	`26`	`href: ROUTES.DASHBOARD.MANAGEMENT.API_TOKENS`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export const ConfigProfileByUuidPageComponent = (props: Props) => {`
`23`	`23`	`<PageHeader`
`24`	`24`	`breadcrumbs={[`
`25`	`25`	`{ label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },`
`26`		`- { label: t('constants.management') },`
	`26`	`+`
`27`	`27`	`{`
`28`	`28`	`label: t('constants.config-profiles'),`
`29`	`29`	`href: ROUTES.DASHBOARD.MANAGEMENT.CONFIG_PROFILES`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export const ConfigPageComponent = (props: Props) => {`
`19`	`19`	`<PageHeader`
`20`	`20`	`breadcrumbs={[`
`21`	`21`	`{ label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },`
`22`		`- { label: t('constants.management') },`
	`22`	`+`
`23`	`23`	`{`
`24`	`24`	`label: t('constants.config-profiles'),`
`25`	`25`	`href: ROUTES.DASHBOARD.MANAGEMENT.CONFIG_PROFILES`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export const InfraBillingPageComponent = () => {`
`27`	`27`	`<PageHeader`
`28`	`28`	`breadcrumbs={[`
`29`	`29`	`{ label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },`
`30`		`- { label: t('constants.management') },`
	`30`	`+`
`31`	`31`	`{`
`32`	`32`	`label: t('constants.nodes'),`
`33`	`33`	`href: ROUTES.DASHBOARD.MANAGEMENT.NODES`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export const InternalSquadsPageComponent = (props: Props) => {`
`19`	`19`	`<PageHeader`
`20`	`20`	`breadcrumbs={[`
`21`	`21`	`{ label: t('constants.dashboard'), href: ROUTES.DASHBOARD.HOME },`
`22`		`- { label: t('constants.management') },`
	`22`	`+`
`23`	`23`	`{`
`24`	`24`	`label: t('constants.internal-squads'),`
`25`	`25`	`href: ROUTES.DASHBOARD.MANAGEMENT.INTERNAL_SQUADS`