Update UI of usage billing dashboard

What does this MR do and why?

The MR replaces the tabs in the usage app with only usage by user component (the graph component won't be used in the MVC).

It also updates the UI and copy of the usage by user component to match the latest designs.

note: there's a warning in the console about having duplicated graphql query, I'll work on that in a separate MR.

References

Screenshots or screen recordings

Before	After

How to set up and validate locally

While we don't have some values from the backend, we'll mock them to get the correct visual results from the cards

Apply the following patch

diff --git i/ee/app/assets/javascripts/usage_quotas/usage_billing/components/usage_by_user_tab.vue w/ee/app/assets/javascripts/usage_quotas/usage_billing/components/usage_by_user_tab.vue
index b5193c161d4d..f7b9518ee46c 100644
--- i/ee/app/assets/javascripts/usage_quotas/usage_billing/components/usage_by_user_tab.vue
+++ w/ee/app/assets/javascripts/usage_quotas/usage_billing/components/usage_by_user_tab.vue
@@ -187,7 +187,7 @@ export default {
     <dl class="gl-my-3 gl-grid gl-grid-cols-1 gl-gap-5 gl-py-5 @lg/panel:gl-grid-cols-3">
       <gl-card class="gl-bg-transparent gl-p-3">
         <div class="gl-flex gl-flex-col">
-          <dd class="gl-heading-scale-800">{{ usersUsage.totalUsers }}</dd>
+          <dd class="gl-heading-scale-800">{{ usersUsage.totalUsers || 1000 }}</dd>
           <dt class="gl-font-normal">{{ s__('UsageBilling|total users (active users)') }}</dt>
         </div>
       </gl-card>
@@ -195,7 +195,7 @@ export default {
       <gl-card class="gl-bg-transparent gl-p-3">
         <div class="gl-flex gl-flex-col">
           <dd class="gl-heading-scale-800">
-            {{ usersUsage.totalUsersUsingAllocation }}
+            {{ usersUsage.totalUsersUsingAllocation || 500 }}
           </dd>
           <dt class="gl-font-normal">
             {{ s__('UsageBilling|users using included GitLab Credits') }}
@@ -206,7 +206,7 @@ export default {
       <gl-card class="gl-bg-transparent gl-p-3">
         <div class="gl-flex gl-flex-col">
           <dd class="gl-heading-scale-800">
-            {{ usersUsage.totalUsersBlocked }}
+            {{ usersUsage.totalUsersBlocked || 50 }}
           </dd>
           <dt class="gl-font-normal">
             {{

• yarn storybook:start
• navigate to http://localhost:6006/?path=/story/ee-usage-quotas-usage-billing-app--default

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #577702