penyesuaian UI cost management

src/app/_layout/breadcrumb/breadcrumb.component.css

@@ -19,3 +19,11 @@
   }
 }
 
+.breadcrumb-item::before {
+  content: none !important; /* Removes any default content, such as "-" */
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  content: none !important; /* Removes any default content, such as "-" */
+}
+

src/app/_layout/breadcrumb/breadcrumb.component.html

@@ -3,21 +3,33 @@
     class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new"
     *ngIf="breadcrumb"
   >
-    <button *ngIf="breadcrumb.isLinkBack" type="button" class="btn btn-icon btn-pure secondary mr-1" routerLink="{{ breadcrumb.linkBack }}">
-      <i class="feather ft-chevron-left"></i>
+    <button
+      *ngIf="breadcrumb.isLinkBack"
+      type="button"
+      class="btn btn-icon btn-pure secondary mr-1"
+      routerLink="{{ breadcrumb.linkBack }}"
+    >
+      <i class="feather ft-chevron-left" style="color: #ffffff"></i>
     </button>
-    <h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff;">
+    <h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff">
       {{ breadcrumb.mainlabel }}
     </h3>
     <div class="row breadcrumbs-top d-inline-block">
       <div class="breadcrumb-wrapper col-12">
         <ol class="breadcrumb">
-          <li class="breadcrumb-item" *ngFor="let link of breadcrumb.links">
-            <a *ngIf="link.isLink" routerLink="{{ link.link }}">{{
-              link.name
-            }}</a>
-            <span *ngIf="!link.isLink" style="color: #ffffff;">{{ link.name }}</span>
-          </li>
+          <ng-container *ngFor="let link of breadcrumb.links; let last = last">
+            <li class="breadcrumb-item" style="color: #ffffff">
+              <ng-container *ngIf="link.isLink; else notLink">
+                <a routerLink="{{ link.link }}" style="color: #ffffff">{{ link.name }}</a>
+              </ng-container>
+              <ng-template #notLink>
+                <span style="color: #ffffff">{{ link.name }}</span>
+              </ng-template>
+              <span *ngIf="!last" class="breadcrumb-arrow" style="color: #ffffff; margin: 0 5px;">
+                <i class="feather ft-chevron-right"></i>
+              </span>
+            </li>
+          </ng-container>
         </ol>
       </div>
     </div>