@rio-cloud/uikit-mcp 1.1.9 → 1.1.10

package/dist/docs/templates/stats-blocks.md

@@ -0,0 +1,1245 @@
+# Stats blocks
+
+*Category:* Templates
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#/templates/stats-blocks
+*Captured:* 2026-04-20T12:55:47.031Z
+
+## Stats blocks
+
+### Example: Total inventory
+
+Stats page
+Overview of your supply chain operations
+
+Total inventory
+1353 units
+
+12% from last month
+
+Open orders
+70
+
+5% from last month
+
+In transit
+18
+
+-3% from last month
+
+Issues
+0
+
+#### React (tsx)
+
+```tsx
+import { faker } from '@faker-js/faker';
+import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
+import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
+
+export default () => {
+    const data = {
+        inventory: faker.number.int({ min: 800, max: 1600 }),
+        inventoryChange: 12,
+        orders: faker.number.int({ min: 20, max: 80 }),
+        ordersChange: 5,
+        inTransit: faker.number.int({ min: 5, max: 25 }),
+        inTransitChange: -3,
+        issues: faker.number.int({ min: 0, max: 10 }),
+    };
+
+    return (
+        <div className='margin-25-md'>
+            <div className='text-size-h2 text-bold text-color-darkest'>Stats page</div>
+            <p className='text-color-darker margin-top-0'>Overview of your supply chain operations</p>
+
+            <StatsWidgets className='display-grid grid-auto-fit-250'>
+                <StatsWidget className='shadow-default display-flex flex-column'>
+                    <div className='flex-1-1 display-flex gap-15 padding-20'>
+                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
+                            <span className='rioglyph rioglyph-parcel text-size-200pct text-color-darker' />
+                        </div>
+                        <div>
+                            <div className='text-color-dark'>Total inventory</div>
+                            <div className='text-size-h3 text-color-darkest line-height-125rel'>
+                                {data.inventory} units
+                            </div>
+                        </div>
+                    </div>
+                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
+                        <span className='text-medium text-color-success display-flex gap-2 align-items-center'>
+                            <span className='rioglyph rioglyph-arrow-up' />
+                            {data.inventoryChange}%
+                        </span>
+                        <span className='text-color-dark'>from last month</span>
+                    </div>
+                </StatsWidget>
+
+                <StatsWidget className='shadow-default display-flex flex-column'>
+                    <div className='flex-1-1 display-flex gap-15 padding-20'>
+                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
+                            <span className='rioglyph rioglyph-order text-size-200pct text-color-darker' />
+                        </div>
+                        <div>
+                            <div className='text-color-dark'>Open orders</div>
+                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.orders}</div>
+                        </div>
+                    </div>
+                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
+                        <span className='text-medium text-color-success display-flex gap-2 align-items-center'>
+                            <span className='rioglyph rioglyph-arrow-up' />
+                            {data.ordersChange}%
+                        </span>
+                        <span className='text-color-dark'>from last month</span>
+                    </div>
+                </StatsWidget>
+
+                <StatsWidget className='shadow-default display-flex flex-column'>
+                    <div className='flex-1-1 display-flex gap-15 padding-20'>
+                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
+                            <span className='rioglyph rioglyph-delivery text-size-200pct text-color-darker' />
+                        </div>
+                        <div>
+                            <div className='text-color-dark'>In transit</div>
+                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.inTransit}</div>
+                        </div>
+                    </div>
+                    <div className='text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5'>
+                        <span className='text-medium text-color-danger display-flex gap-2 align-items-center'>
+                            <span className='rioglyph rioglyph-arrow-down' />
+                            {data.inTransitChange}%
+                        </span>
+                        <span className='text-color-dark'>from last month</span>
+                    </div>
+                </StatsWidget>
+
+                <StatsWidget className='shadow-default display-flex flex-column'>
+                    <div className='flex-1-1 display-flex gap-15 padding-20'>
+                        <div className='height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14'>
+                            <span className='rioglyph rioglyph-warning-sign text-size-200pct text-color-warning' />
+                        </div>
+                        <div>
+                            <div className='text-color-dark'>Issues</div>
+                            <div className='text-size-h3 text-color-darkest line-height-125rel'>{data.issues}</div>
+                        </div>
+                    </div>
+                </StatsWidget>
+            </StatsWidgets>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="text-size-h2 text-bold text-color-darkest">Stats page</div>
+    <p class="text-color-darker margin-top-0">Overview of your supply chain operations</p>
+    <div class="StatsWidget-wrapper display-grid grid-auto-fit-250">
+        <div class="StatsWidget shadow-default display-flex flex-column">
+            <div class="flex-1-1 display-flex gap-15 padding-20">
+                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
+                    <span class="rioglyph rioglyph-parcel text-size-200pct text-color-darker">
+                    </span>
+                </div>
+                <div>
+                    <div class="text-color-dark">Total inventory</div>
+                    <div class="text-size-h3 text-color-darkest line-height-125rel">1353 units</div>
+                </div>
+            </div>
+            <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
+                <span class="text-medium text-color-success display-flex gap-2 align-items-center">
+                    <span class="rioglyph rioglyph-arrow-up">
+                    </span>12%</span>
+                <span class="text-color-dark">from last month</span>
+            </div>
+        </div>
+        <div class="StatsWidget shadow-default display-flex flex-column">
+            <div class="flex-1-1 display-flex gap-15 padding-20">
+                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
+                    <span class="rioglyph rioglyph-order text-size-200pct text-color-darker">
+                    </span>
+                </div>
+                <div>
+                    <div class="text-color-dark">Open orders</div>
+                    <div class="text-size-h3 text-color-darkest line-height-125rel">70</div>
+                </div>
+            </div>
+            <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
+                <span class="text-medium text-color-success display-flex gap-2 align-items-center">
+                    <span class="rioglyph rioglyph-arrow-up">
+                    </span>5%</span>
+                <span class="text-color-dark">from last month</span>
+            </div>
+        </div>
+        <div class="StatsWidget shadow-default display-flex flex-column">
+            <div class="flex-1-1 display-flex gap-15 padding-20">
+                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
+                    <span class="rioglyph rioglyph-delivery text-size-200pct text-color-darker">
+                    </span>
+                </div>
+                <div>
+                    <div class="text-color-dark">In transit</div>
+                    <div class="text-size-h3 text-color-darkest line-height-125rel">18</div>
+                </div>
+            </div>
+            <div class="text-size-12 padding-x-20 padding-y-10 bg-lightest rounded-bottom display-flex gap-5">
+                <span class="text-medium text-color-danger display-flex gap-2 align-items-center">
+                    <span class="rioglyph rioglyph-arrow-down">
+                    </span>-3%</span>
+                <span class="text-color-dark">from last month</span>
+            </div>
+        </div>
+        <div class="StatsWidget shadow-default display-flex flex-column">
+            <div class="flex-1-1 display-flex gap-15 padding-20">
+                <div class="height-50 aspect-ratio-1 bg-lightest rounded display-grid place-items-center text-size-14">
+                    <span class="rioglyph rioglyph-warning-sign text-size-200pct text-color-warning">
+                    </span>
+                </div>
+                <div>
+                    <div class="text-color-dark">Issues</div>
+                    <div class="text-size-h3 text-color-darkest line-height-125rel">0</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Orders delivered
+
+25M +
+Orders delivered
+
+99.99%
+Total uptime
+
+4.8
+Customer score
+
+#### React (tsx)
+
+```tsx
+import { FormattedNumber } from 'react-intl';
+
+import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
+import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
+
+export default () => (
+    <div className='margin-25-md'>
+        <StatsWidgets className='display-grid grid-auto-fit-150'>
+            <StatsWidget className='padding-20'>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
+                <div className='text-color-dark padding-top-5'>Orders delivered</div>
+            </StatsWidget>
+            <StatsWidget className='padding-20'>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
+                    <FormattedNumber value={99.99} style='unit' unit='percent' />
+                </div>
+                <div className='text-color-dark padding-top-5'>Total uptime</div>
+            </StatsWidget>
+            <StatsWidget className='padding-20'>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
+                    <FormattedNumber value={4.8} />
+                </div>
+                <div className='text-color-dark padding-top-5'>Customer score</div>
+            </StatsWidget>
+        </StatsWidgets>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="StatsWidget-wrapper display-grid grid-auto-fit-150">
+        <div class="StatsWidget padding-20">
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
+            <div class="text-color-dark padding-top-5">Orders delivered</div>
+        </div>
+        <div class="StatsWidget padding-20">
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
+            <div class="text-color-dark padding-top-5">Total uptime</div>
+        </div>
+        <div class="StatsWidget padding-20">
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
+            <div class="text-color-dark padding-top-5">Customer score</div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Total uptime
+
+25M +
+Orders delivered
+
+99.99%
+Total uptime
+
+4.8
+Customer score
+
+#### React (tsx)
+
+```tsx
+import { FormattedNumber } from 'react-intl';
+
+import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
+import Divider from '@rio-cloud/rio-uikit/Divider';
+
+export default () => (
+    <div className='margin-25-md margin-auto'>
+        <StatsWidgets>
+            <div className='padding-20'>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
+                <div className='text-color-dar padding-y-5'>Orders delivered</div>
+            </div>
+            <Divider vertical className='hidden-xs' />
+            <div className='padding-20'>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
+                    <FormattedNumber value={99.99} style='unit' unit='percent' />
+                </div>
+                <div className='text-color-dark padding-y-5'>Total uptime</div>
+            </div>
+            <Divider vertical className='hidden-xs' />
+            <div className='padding-20'>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
+                    <FormattedNumber value={4.8} />
+                </div>
+                <div className='text-color-dark padding-y-5'>Customer score</div>
+            </div>
+        </StatsWidgets>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md margin-auto">
+    <div class="StatsWidget-wrapper">
+        <div class="padding-20">
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
+            <div class="text-color-dar padding-y-5">Orders delivered</div>
+        </div>
+        <div class="Divider position-relative hidden-xs" style="padding-left: 15px; padding-right: 15px;">
+            <div class="divider-line bg-light" style="width: 1px; height: 100%;">
+            </div>
+        </div>
+        <div class="padding-20">
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
+            <div class="text-color-dark padding-y-5">Total uptime</div>
+        </div>
+        <div class="Divider position-relative hidden-xs" style="padding-left: 15px; padding-right: 15px;">
+            <div class="divider-line bg-light" style="width: 1px; height: 100%;">
+            </div>
+        </div>
+        <div class="padding-20">
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
+            <div class="text-color-dark padding-y-5">Customer score</div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Orders delivered
+
+Orders delivered
+25M +
+
+Total uptime
+99.99%
+
+Customer score
+4.8
+
+#### React (tsx)
+
+```tsx
+import { FormattedNumber } from 'react-intl';
+
+import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
+import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
+
+export default () => (
+    <div className='margin-25-md'>
+        <StatsWidgets className='border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm'>
+            <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only'>
+                <div className='text-color-dark padding-bottom-5'>Orders delivered</div>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>25M +</div>
+            </StatsWidget>
+            <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only'>
+                <div className='text-color-dark padding-bottom-5'>Total uptime</div>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
+                    <FormattedNumber value={99.99} style='unit' unit='percent' />
+                </div>
+            </StatsWidget>
+            <StatsWidget className='padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none'>
+                <div className='text-color-dark padding-bottom-5'>Customer score</div>
+                <div className='text-size-h2 line-height-h2 text-medium text-color-darkest'>
+                    <FormattedNumber value={4.8} />
+                </div>
+            </StatsWidget>
+        </StatsWidgets>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="StatsWidget-wrapper border rounded bg-white flex-nowrap gap-5 gap-10-ls gap-20-sm">
+        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only">
+            <div class="text-color-dark padding-bottom-5">Orders delivered</div>
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">25M +</div>
+        </div>
+        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-right-only">
+            <div class="text-color-dark padding-bottom-5">Total uptime</div>
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">99.99%</div>
+        </div>
+        <div class="StatsWidget padding-10 padding-15-ls padding-20-sm bg-none rounded-none border-none">
+            <div class="text-color-dark padding-bottom-5">Customer score</div>
+            <div class="text-size-h2 line-height-h2 text-medium text-color-darkest">4.8</div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: from 68,345
+
+Orders processed
+72,678
+from 68,345
+
+11.5%
+
+Open rate
+43.6
+from 41.6
+
+3.1%
+
+Error rate
+3.6
+from 2.4
+
+2.01%
+
+#### React (tsx)
+
+```tsx
+import { FormattedNumber } from 'react-intl';
+
+import StatsWidgets from '@rio-cloud/rio-uikit/StatsWidgets';
+import StatsWidget from '@rio-cloud/rio-uikit/StatsWidget';
+
+export default () => {
+    // Workaround to create a inner border that is also visible when items wrap onto the next line
+    const widgetBorderStyle = {
+        boxShadow: '1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light)',
+    };
+
+    return (
+        <div className='margin-25-md'>
+            <div className='bg-white border rounded overflow-hidden'>
+                <StatsWidgets className='display-grid grid-auto-fit-250 gap-1'>
+                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
+                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Orders processed</div>
+                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
+                            <div className='display-flex align-items-end gap-10'>
+                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
+                                    <FormattedNumber value={72_678} />
+                                </div>
+                                <div className='text-size-16 text-color-dark'>
+                                    from <FormattedNumber value={68_345} />
+                                </div>
+                            </div>
+                            <div className='label label-success padding-x-5'>
+                                <span className='rioglyph rioglyph-arrow-up' />
+                                <FormattedNumber value={11.5} style='unit' unit='percent' />
+                            </div>
+                        </div>
+                    </StatsWidget>
+                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
+                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Open rate</div>
+                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
+                            <div className='display-flex align-items-end gap-10'>
+                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
+                                    <FormattedNumber value={43.6} />
+                                </div>
+                                <div className='text-size-16 text-color-dark'>
+                                    from <FormattedNumber value={41.6} />
+                                </div>
+                            </div>
+                            <div className='label label-success padding-x-5'>
+                                <span className='rioglyph rioglyph-arrow-up' />
+                                <FormattedNumber value={3.1} style='unit' unit='percent' />
+                            </div>
+                        </div>
+                    </StatsWidget>
+                    <StatsWidget className='padding-20 bg-white rounded-none border-none' style={widgetBorderStyle}>
+                        <div className='text-size-16 text-color-darkest padding-bottom-5'>Error rate</div>
+                        <div className='display-flex align-items-end justify-content-between gap-10 flex-wrap'>
+                            <div className='display-flex align-items-end gap-10'>
+                                <div className='text-size-h2 line-height-h2 text-medium text-color-primary'>
+                                    <FormattedNumber value={3.6} />
+                                </div>
+                                <div className='text-size-16 text-color-dark'>
+                                    from <FormattedNumber value={2.4} />
+                                </div>
+                            </div>
+                            <div className='label label-danger padding-x-5'>
+                                <span className='rioglyph rioglyph-arrow-up' />
+                                <FormattedNumber value={2.01} style='unit' unit='percent' />
+                            </div>
+                        </div>
+                    </StatsWidget>
+                </StatsWidgets>
+            </div>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="bg-white border rounded overflow-hidden">
+        <div class="StatsWidget-wrapper display-grid grid-auto-fit-250 gap-1">
+            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
+                <div class="text-size-16 text-color-darkest padding-bottom-5">Orders processed</div>
+                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
+                    <div class="display-flex align-items-end gap-10">
+                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">72,678</div>
+                        <div class="text-size-16 text-color-dark">from 68,345</div>
+                    </div>
+                    <div class="label label-success padding-x-5">
+                        <span class="rioglyph rioglyph-arrow-up">
+                        </span>11.5%
+                    </div>
+                </div>
+            </div>
+            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
+                <div class="text-size-16 text-color-darkest padding-bottom-5">Open rate</div>
+                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
+                    <div class="display-flex align-items-end gap-10">
+                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">43.6</div>
+                        <div class="text-size-16 text-color-dark">from 41.6</div>
+                    </div>
+                    <div class="label label-success padding-x-5">
+                        <span class="rioglyph rioglyph-arrow-up">
+                        </span>3.1%
+                    </div>
+                </div>
+            </div>
+            <div class="StatsWidget padding-20 bg-white rounded-none border-none" style="box-shadow: 1px 0 0 0 var(--gray-light), 0 1px 0 0 var(--gray-light);">
+                <div class="text-size-16 text-color-darkest padding-bottom-5">Error rate</div>
+                <div class="display-flex align-items-end justify-content-between gap-10 flex-wrap">
+                    <div class="display-flex align-items-end gap-10">
+                        <div class="text-size-h2 line-height-h2 text-medium text-color-primary">3.6</div>
+                        <div class="text-size-16 text-color-dark">from 2.4</div>
+                    </div>
+                    <div class="label label-danger padding-x-5">
+                        <span class="rioglyph rioglyph-arrow-up">
+                        </span>2.01%
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example: Number of data brokers removal requests have been sent to.
+
+September, 2025
+Requests sent
+185
+
+Number of data brokers removal requests have been sent to.
+
+Requests in progress
+185
+
+Number of data brokers that have started processing our removal requests.
+
+Requests completed
+0
+
+Number of data brokers that checked and confirmed that they are now not holding your data.
+
+#### React (tsx)
+
+```tsx
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import Card from '@rio-cloud/rio-uikit/Card';
+
+export default () => (
+    <div className='margin-25-md'>
+        <div className='padding-20 cq-container'>
+            <h2 className='margin-top-0 margin-bottom-25'>September, 2025</h2>
+            <div className='display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25'>
+                <Card className='padding-20'>
+                    <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>Requests sent</div>
+                    <div className='text-size-h1 text-bold text-color-darkest'>185</div>
+                    <Divider dividerColor='lighter' />
+                    <div className='text-color-dark text-size-12'>
+                        Number of data brokers removal requests have been sent to.
+                    </div>
+                </Card>
+
+                <Card className='padding-20'>
+                    <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>
+                        Requests in progress
+                    </div>
+                    <div className='text-size-h1 text-bold text-color-darkest'>185</div>
+                    <Divider dividerColor='lighter' />
+                    <div className='text-color-dark text-size-12'>
+                        Number of data brokers that have started processing our removal requests.
+                    </div>
+                </Card>
+
+                <Card className='padding-20'>
+                    <div className='text-color-darker text-size-18 text-medium margin-bottom-5'>Requests completed</div>
+                    <div className='text-size-h1 text-bold text-color-darkest'>0</div>
+                    <Divider dividerColor='lighter' />
+                    <div className='text-color-dark text-size-12'>
+                        Number of data brokers that checked and confirmed that they are now not holding your data.
+                    </div>
+                </Card>
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="padding-20 cq-container">
+        <h2 class="margin-top-0 margin-bottom-25">September, 2025</h2>
+        <div class="display-grid grid-cols-1 cq-400:grid-cols-2 cq-700:grid-cols-3 gap-25">
+            <div class="bg-white rounded border shadow-default padding-15 padding-20">
+                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests sent</div>
+                <div class="text-size-h1 text-bold text-color-darkest">185</div>
+                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                    </div>
+                </div>
+                <div class="text-color-dark text-size-12">Number of data brokers removal requests have been sent to.</div>
+            </div>
+            <div class="bg-white rounded border shadow-default padding-15 padding-20">
+                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests in progress</div>
+                <div class="text-size-h1 text-bold text-color-darkest">185</div>
+                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                    </div>
+                </div>
+                <div class="text-color-dark text-size-12">Number of data brokers that have started processing our removal requests.</div>
+            </div>
+            <div class="bg-white rounded border shadow-default padding-15 padding-20">
+                <div class="text-color-darker text-size-18 text-medium margin-bottom-5">Requests completed</div>
+                <div class="text-size-h1 text-bold text-color-darkest">0</div>
+                <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
+                    <div class="divider-line bg-lighter" style="width: 100%; height: 1px;">
+                    </div>
+                </div>
+                <div class="text-color-dark text-size-12">Number of data brokers that checked and confirmed that they are now not holding your data.</div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Example:
+
+Lorem ipsum dolor
+
+January February March April May June
+
+Lorem ipsum dolor
+
+Status Location ETA
+
+In transit
+Hamburg, DE 2024-02-02
+
+Delivered
+Rotterdam, NL 2024-01-29
+
+Awaiting pickup
+Warsaw, PL 2024-02-05
+
+Customs clearance
+Antwerp, BE 2024-02-03
+
+Transport ipsum dolor
+
+On-time delivery
+
+Warehouse efficiency
+
+Truck utilization
+
+Freight cost/km
+
+Fuel consumption index
+
+92%
+
+84%
+
+78%
+
+65%
+
+15%
+
+#### React (tsx)
+
+```tsx
+import Bar from '@rio-cloud/rio-uikit/Bar';
+import BarChart from '@rio-cloud/rio-uikit/BarChart';
+import ButtonDropdown from '@rio-cloud/rio-uikit/ButtonDropdown';
+import AccentBar from '@rio-cloud/rio-uikit/AccentBar';
+import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
+import BarList from '@rio-cloud/rio-uikit/BarList';
+
+export default () => {
+    const optionsButton = (
+        <ButtonDropdown
+            bsStyle='muted'
+            title={<span className='rioglyph rioglyph-option-horizontal' aria-hidden='true' />}
+            items={[
+                {
+                    value: 'Edit',
+                },
+                {
+                    value: 'Share',
+                },
+                {
+                    value: 'Report issue',
+                },
+            ]}
+            iconOnly
+            pullRight
+        />
+    );
+
+    return (
+        <div className='margin-25-md'>
+            <div className='display-grid grid-cols-1 grid-cols-2-sm gap-25'>
+                <div className='panel panel-default shadow-default min-width-200'>
+                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
+                        <div className='text-medium text-size-16'>Lorem ipsum dolor</div>
+                        <div>{optionsButton}</div>
+                    </div>
+                    <div className='panel-body padding-15 padding-25-sm height-300 overflow-auto'>
+                        <BarChart
+                            data={data}
+                            dataKey='label'
+                            xAxisOptions={{ dataKey: 'label' }}
+                            showYAxis={false}
+                            margin={{ bottom: 15 }}
+                            bars={[
+                                <Bar
+                                    key='myBar'
+                                    dataKey='costs'
+                                    unit='€'
+                                    color='brand-primary'
+                                    radius={[3, 3, 0, 0]}
+                                    label={{
+                                        position: 'top',
+                                        formatter: (value: number) => `${value} €`,
+                                    }}
+                                />,
+                            ]}
+                        />
+                    </div>
+                </div>
+
+                <div className='panel panel-default shadow-default min-width-200'>
+                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
+                        <div className='text-medium text-size-16 display-flex gap-5 align-items-center'>
+                            <span>Lorem ipsum dolor</span>
+                            <SimpleTooltip content='Some helper text' placement='top'>
+                                <span className='rioglyph rioglyph-question-sign text-color-dark cursor-pointer' />
+                            </SimpleTooltip>
+                        </div>
+                        <div>{optionsButton}</div>
+                    </div>
+                    <div className='panel-body padding-15 padding-25-sm overflow-auto'>
+                        <table className='table'>
+                            <thead>
+                                <tr>
+                                    <th>Status</th>
+                                    <th>Location</th>
+                                    <th>ETA</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {tableData.map(row => (
+                                    <tr key={row.id}>
+                                        <td>
+                                            <AccentBar color={getStatusColor(row.status)}>{row.status}</AccentBar>
+                                        </td>
+                                        <td>{row.location}</td>
+                                        <td>{row.eta}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <div className='panel panel-default shadow-default min-width-200'>
+                    <div className='panel-heading display-flex align-items-center justify-content-between padding-left-20'>
+                        <div className='text-medium text-size-16 display-flex gap-5 align-items-center'>
+                            <span>Transport ipsum dolor</span>
+                        </div>
+                        <div>{optionsButton}</div>
+                    </div>
+                    <div className='panel-body padding-15 padding-25-sm overflow-auto'>
+                        <BarList
+                            data={barListData}
+                            valueFormatter={value => `${value}%`}
+                            referenceValue={100}
+                            showAnimation
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const data = [
+    {
+        label: 'January',
+        costs: 46.8,
+    },
+    {
+        label: 'February',
+        costs: 22.0,
+    },
+    {
+        label: 'March',
+        costs: 12.4,
+    },
+    {
+        label: 'April',
+        costs: 3.88,
+    },
+    {
+        label: 'May',
+        costs: 3.23,
+    },
+    {
+        label: 'June',
+        costs: 4.67,
+    },
+];
+
+const tableData = [
+    { id: 1, status: 'In transit', location: 'Hamburg, DE', eta: '2024-02-02' },
+    { id: 2, status: 'Delivered', location: 'Rotterdam, NL', eta: '2024-01-29' },
+    { id: 3, status: 'Awaiting pickup', location: 'Warsaw, PL', eta: '2024-02-05' },
+    { id: 4, status: 'Customs clearance', location: 'Antwerp, BE', eta: '2024-02-03' },
+];
+
+const barListData = [
+    {
+        key: 'truck_utilization',
+        name: 'Truck utilization',
+        value: 78,
+    },
+    {
+        key: 'on_time_delivery',
+        name: 'On-time delivery',
+        value: 92,
+    },
+    {
+        key: 'freight_cost_per_km',
+        name: 'Freight cost/km',
+        value: 65,
+    },
+    {
+        key: 'warehouse_efficiency',
+        name: 'Warehouse efficiency',
+        value: 84,
+    },
+    {
+        key: 'fuel_consumption',
+        name: 'Fuel consumption index',
+        value: 15,
+    },
+];
+
+const getStatusColor = (status: string) => {
+    switch (status) {
+        case 'In transit':
+            return 'bg-warning';
+        case 'Delivered':
+            return 'bg-success';
+        case 'Awaiting pickup':
+            return 'bg-info';
+        case 'Customs clearance':
+            return 'bg-danger';
+        default:
+            return 'bg-primary';
+    }
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="margin-25-md">
+    <div class="display-grid grid-cols-1 grid-cols-2-sm gap-25">
+        <div class="panel panel-default shadow-default min-width-200">
+            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
+                <div class="text-medium text-size-16">Lorem ipsum dolor</div>
+                <div>
+                    <div class="dropdown btn-group">
+                        <button type="button" id="11wezc6jasrn" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                            <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body padding-15 padding-25-sm height-300 overflow-auto">
+                <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
+                    <div style="width: 0px; height: 0px; overflow: visible;">
+                        <div width="365" height="250" class="recharts-wrapper" style="position: relative; cursor: default; width: 365px; height: 250px;">
+                            <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                                <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
+                                    <p class="recharts-tooltip-label" style="margin: 0px;">
+                                    </p>
+                                </div>
+                            </div>
+                            <svg role="application" tabindex="0" class="recharts-surface" width="365" height="250" viewBox="0 0 365 250" style="width: 100%; height: 100%; display: block;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <g tabindex="-1" class="recharts-zIndex-layer_-100">
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_-50">
+                                </g>
+                                <defs>
+                                    <clipPath id="recharts1-clip">
+                                        <rect x="0" y="0" height="205" width="365">
+                                        </rect>
+                                    </clipPath>
+                                </defs>
+                                <g tabindex="-1" class="recharts-zIndex-layer_100">
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_200">
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_300">
+                                    <g class="recharts-layer recharts-bar" id="recharts-bar-:r0:">
+                                        <g class="recharts-layer recharts-bar-rectangles">
+                                            <g class="recharts-layer">
+                                                <g class="recharts-layer recharts-bar-rectangle">
+                                                    <g class="recharts-layer recharts-inactive-bar">
+                                                        <path fill="#30b4c0 " name="undefined" x="6.0833" y="45.1" width="48" height="159.9" class="recharts-rectangle" d="M6.0833,48.1A 3,3,0,0,1,9.0833,45.1L 51.0833,45.1A 3,3,0,0,1,
+        54.0833,48.1L 54.0833,205L 6.0833,205Z">
+                                                        </path>
+                                                    </g>
+                                                </g>
+                                                <g class="recharts-layer recharts-bar-rectangle">
+                                                    <g class="recharts-layer recharts-inactive-bar">
+                                                        <path fill="#30b4c0 " name="undefined" x="66.9167" y="129.8333" width="48" height="75.1667" class="recharts-rectangle" d="M66.9167,132.8333A 3,3,0,0,1,69.9167,129.8333L 111.9167,129.8333A 3,3,0,0,1,
+        114.9167,132.8333L 114.9167,205L 66.9167,205Z">
+                                                        </path>
+                                                    </g>
+                                                </g>
+                                                <g class="recharts-layer recharts-bar-rectangle">
+                                                    <g class="recharts-layer recharts-inactive-bar">
+                                                        <path fill="#30b4c0 " name="undefined" x="127.75" y="162.6333" width="48" height="42.3667" class="recharts-rectangle" d="M127.75,165.6333A 3,3,0,0,1,130.75,162.6333L 172.75,162.6333A 3,3,0,0,1,
+        175.75,165.6333L 175.75,205L 127.75,205Z">
+                                                        </path>
+                                                    </g>
+                                                </g>
+                                                <g class="recharts-layer recharts-bar-rectangle">
+                                                    <g class="recharts-layer recharts-inactive-bar">
+                                                        <path fill="#30b4c0 " name="undefined" x="188.5833" y="191.7433" width="48" height="13.2567" class="recharts-rectangle" d="M188.5833,194.7433A 3,3,0,0,1,191.5833,191.7433L 233.5833,191.7433A 3,3,0,0,1,
+        236.5833,194.7433L 236.5833,205L 188.5833,205Z">
+                                                        </path>
+                                                    </g>
+                                                </g>
+                                                <g class="recharts-layer recharts-bar-rectangle">
+                                                    <g class="recharts-layer recharts-inactive-bar">
+                                                        <path fill="#30b4c0 " name="undefined" x="249.4167" y="193.9642" width="48" height="11.0358" class="recharts-rectangle" d="M249.4167,196.9642A 3,3,0,0,1,252.4167,193.9642L 294.4167,193.9642A 3,3,0,0,1,
+        297.4167,196.9642L 297.4167,205L 249.4167,205Z">
+                                                        </path>
+                                                    </g>
+                                                </g>
+                                                <g class="recharts-layer recharts-bar-rectangle">
+                                                    <g class="recharts-layer recharts-inactive-bar">
+                                                        <path fill="#30b4c0 " name="undefined" x="310.25" y="189.0442" width="48" height="15.9558" class="recharts-rectangle" d="M310.25,192.0442A 3,3,0,0,1,313.25,189.0442L 355.25,189.0442A 3,3,0,0,1,
+        358.25,192.0442L 358.25,205L 310.25,205Z">
+                                                        </path>
+                                                    </g>
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_400">
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_500">
+                                    <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
+                                        <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="0" y1="205" x2="365" y2="205">
+                                        </line>
+                                        <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                            <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                                <g class="recharts-layer recharts-cartesian-axis-tick">
+                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="30.416666666666668" y1="211" x2="30.416666666666668" y2="205">
+                                                    </line>
+                                                </g>
+                                                <g class="recharts-layer recharts-cartesian-axis-tick">
+                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="91.25" y1="211" x2="91.25" y2="205">
+                                                    </line>
+                                                </g>
+                                                <g class="recharts-layer recharts-cartesian-axis-tick">
+                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="152.08333333333334" y1="211" x2="152.08333333333334" y2="205">
+                                                    </line>
+                                                </g>
+                                                <g class="recharts-layer recharts-cartesian-axis-tick">
+                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="212.91666666666666" y1="211" x2="212.91666666666666" y2="205">
+                                                    </line>
+                                                </g>
+                                                <g class="recharts-layer recharts-cartesian-axis-tick">
+                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="273.75" y1="211" x2="273.75" y2="205">
+                                                    </line>
+                                                </g>
+                                                <g class="recharts-layer recharts-cartesian-axis-tick">
+                                                    <line angle="0" height="30" orientation="bottom" x="0" y="205" width="365" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="334.58333333333337" y1="211" x2="334.58333333333337" y2="205">
+                                                    </line>
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_600">
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_1000">
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_1100">
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_1200">
+                                </g>
+                                <g tabindex="-1" class="recharts-zIndex-layer_2000">
+                                    <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
+                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                            <text height="30" orientation="bottom" width="365" stroke="none" x="30.416666666666668" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                                <tspan x="30.416666666666668" dy="0.71em">January</tspan>
+                                            </text>
+                                        </g>
+                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                            <text height="30" orientation="bottom" width="365" stroke="none" x="91.25" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                                <tspan x="91.25" dy="0.71em">February</tspan>
+                                            </text>
+                                        </g>
+                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                            <text height="30" orientation="bottom" width="365" stroke="none" x="152.08333333333334" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                                <tspan x="152.08333333333334" dy="0.71em">March</tspan>
+                                            </text>
+                                        </g>
+                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                            <text height="30" orientation="bottom" width="365" stroke="none" x="212.91666666666666" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                                <tspan x="212.91666666666666" dy="0.71em">April</tspan>
+                                            </text>
+                                        </g>
+                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                            <text height="30" orientation="bottom" width="365" stroke="none" x="273.75" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                                <tspan x="273.75" dy="0.71em">May</tspan>
+                                            </text>
+                                        </g>
+                                        <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                            <text height="30" orientation="bottom" width="365" stroke="none" x="334.58333333333337" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                                <tspan x="334.58333333333337" dy="0.71em">June</tspan>
+                                            </text>
+                                        </g>
+                                    </g>
+                                    <g class="recharts-layer recharts-label-list">
+                                        <text width="48" height="45.100000000000016" offset="5" x="30.083333333333336" y="40.100000000000016" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                            <tspan x="30.083333333333336" dy="0em">46.8 €</tspan>
+                                        </text>
+                                        <text width="48" height="129.83333333333331" offset="5" x="90.91666666666667" y="124.83333333333331" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                            <tspan x="90.91666666666667" dy="0em">22 €</tspan>
+                                        </text>
+                                        <text width="48" height="162.63333333333333" offset="5" x="151.75" y="157.63333333333333" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                            <tspan x="151.75" dy="0em">12.4 €</tspan>
+                                        </text>
+                                        <text width="48" height="191.74333333333334" offset="5" x="212.58333333333334" y="186.74333333333334" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                            <tspan x="212.58333333333334" dy="0em">3.88 €</tspan>
+                                        </text>
+                                        <text width="48" height="193.96416666666667" offset="5" x="273.4166666666667" y="188.96416666666667" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                            <tspan x="273.4166666666667" dy="0em">3.23 €</tspan>
+                                        </text>
+                                        <text width="48" height="189.04416666666668" offset="5" x="334.25" y="184.04416666666668" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                            <tspan x="334.25" dy="0em">4.67 €</tspan>
+                                        </text>
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="panel panel-default shadow-default min-width-200">
+            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
+                <div class="text-medium text-size-16 display-flex gap-5 align-items-center">
+                    <span>Lorem ipsum dolor</span>
+                    <span class="rioglyph rioglyph-question-sign text-color-dark cursor-pointer">
+                    </span>
+                </div>
+                <div>
+                    <div class="dropdown btn-group">
+                        <button type="button" id="fkf6pwsnp6h" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                            <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body padding-15 padding-25-sm overflow-auto">
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Status</th>
+                            <th>Location</th>
+                            <th>ETA</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div class="display-flex align-items-stretch">
+                                    <div class="AccentBar bg-warning">
+                                    </div>In transit
+                                </div>
+                            </td>
+                            <td>Hamburg, DE</td>
+                            <td>2024-02-02</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="display-flex align-items-stretch">
+                                    <div class="AccentBar bg-success">
+                                    </div>Delivered
+                                </div>
+                            </td>
+                            <td>Rotterdam, NL</td>
+                            <td>2024-01-29</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="display-flex align-items-stretch">
+                                    <div class="AccentBar bg-info">
+                                    </div>Awaiting pickup
+                                </div>
+                            </td>
+                            <td>Warsaw, PL</td>
+                            <td>2024-02-05</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <div class="display-flex align-items-stretch">
+                                    <div class="AccentBar bg-danger">
+                                    </div>Customs clearance
+                                </div>
+                            </td>
+                            <td>Antwerp, BE</td>
+                            <td>2024-02-03</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="panel panel-default shadow-default min-width-200">
+            <div class="panel-heading display-flex align-items-center justify-content-between padding-left-20">
+                <div class="text-medium text-size-16 display-flex gap-5 align-items-center">
+                    <span>Transport ipsum dolor</span>
+                </div>
+                <div>
+                    <div class="dropdown btn-group">
+                        <button type="button" id="nkrh7m5h1j" class="btn btn-muted btn-md btn-icon-only btn-component dropdown-toggle" tabindex="0">
+                            <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="panel-body padding-15 padding-25-sm overflow-auto">
+                <div class="display-flex justify-content-between gap-15">
+                    <div class="width-100pct space-y-5">
+                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
+                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 92%;">
+                            </div>
+                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                                <div class="text-color-darker">On-time delivery</div>
+                            </div>
+                        </div>
+                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
+                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 84%;">
+                            </div>
+                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                                <div class="text-color-darker">Warehouse efficiency</div>
+                            </div>
+                        </div>
+                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
+                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 78%;">
+                            </div>
+                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                                <div class="text-color-darker">Truck utilization</div>
+                            </div>
+                        </div>
+                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
+                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 65%;">
+                            </div>
+                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                                <div class="text-color-darker">Freight cost/km</div>
+                            </div>
+                        </div>
+                        <div class="position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent">
+                            <div class="display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light" role="presentation" style="height: 25px; opacity: 0.5; width: 15%;">
+                            </div>
+                            <div class="position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10">
+                                <div class="text-color-darker">Fuel consumption index</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="space-y-5">
+                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                            <div class="text-color-darkest">92%</div>
+                        </div>
+                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                            <div class="text-color-darkest">84%</div>
+                        </div>
+                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                            <div class="text-color-darkest">78%</div>
+                        </div>
+                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                            <div class="text-color-darkest">65%</div>
+                        </div>
+                        <div class="display-flex align-items-center justify-content-end" style="height: 25px;">
+                            <div class="text-color-darkest">15%</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```