260710_1

B01_Dashboard/B01_Dashboard_UI_Page.ts

@@ -1,6 +1,7 @@
 import { CURRENT_PROJECT_ID_KEY, ROUTES, type RoutePath } from "@config/config_frontend";
 import { isBlank } from "@util/common_util_validate";
 import { navigateTo } from "../A00_Common/router";
+import { workflowSteps } from "../A00_Common/b_page_scaffold";
 import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
 import {
   createButton,
@@ -382,12 +383,13 @@ function workflow(project: ProjectItem): HTMLElement {
   box.className = "b01-dashboard__workflow";
 
   const stages = project.workflow_state?.stages;
+  const stepLabels = workflowSteps();
 
   routes.forEach((route, index) => {
     const button = document.createElement("button");
     button.type = "button";
     button.className = "b01-dashboard__step";
-    button.textContent = `B${String(index + 3).padStart(2, "0")}`;
+    button.textContent = stepLabels[index] ?? `B${String(index + 3).padStart(2, "0")}`;
 
     let enabled = false;
     if (stages && stages.length > 0) {

B01_Dashboard/B01_Dashboard_UI_Style.css

@@ -83,17 +83,19 @@
 
 .b01-dashboard__workflow {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--spacing-4);
 }
 
 .b01-dashboard__step {
-  width: 28px;
   height: 28px;
+  padding: 0 var(--spacing-12);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-icons);
+  border-radius: var(--radius-pills);
   background: var(--color-surface);
   color: var(--color-text-muted);
   font-size: var(--text-caption);
+  white-space: nowrap;
   cursor: default;
 }