sprintify-ui 0.10.64 → 0.10.65

package/src/stories/PageShow.vue

@@ -1,424 +1,424 @@
-<template>
-  <div class="bg-slate-100 py-6">
-    <BaseContainer size="5xl">
-      <BaseHeader
-        title="Order #21496"
-        subtitle="August 6, 2023 at 1:56 pm from Online Store"
-        :max-actions="3"
-        :badge="{
-          icon: 'heroicons:check-circle-solid',
-          label: 'Paid',
-          color: 'blue',
-        }"
-        :actions="[
-          { label: 'Refund', icon: 'heroicons:banknotes', action: () => showAlert('Refund') },
-          { label: 'Edit', icon: 'heroicons:cog', action: () => showAlert('Edit') },
-          { label: 'PDF', icon: 'heroicons:document', action: () => showAlert('PDF') },
-          { label: 'Duplicate', icon: 'heroicons:document-duplicate', action: () => showAlert('Duplicate') },
-          { label: 'Print', icon: 'heroicons:printer', action: () => showAlert('Print') },
-          { label: 'Archive', icon: 'heroicons:trash', action: () => showAlert('Archive') },
-        ]"
-        :breadcrumbs="[{ label: 'Home', to: '/' }, { label: 'Orders', to: '/orders' }, { label: '#21496', to: '/' }]"
-        class="mb-1"
-      />
-
-      <BaseTabs
-        class="mb-4"
-        size="sm"
-      >
-        <BaseTabItem to="/">
-          General
-        </BaseTabItem>
-        <BaseTabItem to="/settings">
-          Transactions <BaseCounter :count="4" />
-        </BaseTabItem>
-        <BaseTabItem to="/setup">
-          Edit
-        </BaseTabItem>
-      </BaseTabs>
-
-      <div class="lg:flex lg:space-x-6 space-y-5 lg:space-y-0">
-        <div class="lg:grow lg:w-8/12">
-          <BaseCard class="mb-6">
-            <BaseCardRow size="sm">
-              <BaseBadge
-                color="yellow"
-                contrast="low"
-                bordered
-                icon="heroicons:inbox"
-              >
-                Unfulfilled (2)
-              </BaseBadge>
-            </BaseCardRow>
-
-            <BaseCardRow
-              v-for="i in 2"
-              :key="i"
-              size="sm"
-            >
-              <div class="flex space-x-3">
-                <div class="shrink-0">
-                  <div class="h-10 w-10 bg-slate-500 rounded-md overflow-hidden">
-                    <img
-                      class="h-full w-full object-cover"
-                      src="https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80"
-                    >
-                  </div>
-                </div>
-                <div class="grow">
-                  <div class="sm:flex space-y-0.5 sm:space-y-0 sm:space-x-3 text-sm mb-2">
-                    <a
-                      href="#"
-                      class="text-blue-600 grow"
-                    >Contemporaine Blanche- 2 chiffres (6'' à 24'')</a>
-                    <p class="min-w-[70px] sm:text-right whitespace-nowrap">
-                      $ 1,000.00 x 1
-                    </p>
-                    <p class="min-w-[70px] sm:text-right whitespace-nowrap">
-                      $ 1,000.00
-                    </p>
-                  </div>
-                  <div class="space-y-1">
-                    <p class="text-xs text-slate-600">
-                      SKU: 5f918d672028b
-                    </p>
-                    <p class="text-xs text-slate-600">
-                      <span class="text-slate-500">GPO</span>: 97829
-                    </p>
-                    <p class="text-xs text-slate-600">
-                      <span class="text-slate-500">Numéro de porte</span>: 66
-                    </p>
-                    <p class="text-xs text-slate-600">
-                      <span class="text-slate-500">Taille</span>: 6"
-                    </p>
-                    <p class="text-xs text-slate-600">
-                      <span class="text-slate-500">Couleur</span>: Blanc
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </BaseCardRow>
-            <BaseCardRow size="sm">
-              <div class="flex justify-end gap-2">
-                <button
-                  type="button"
-                  class="btn btn-xs"
-                >
-                  Fulfill items
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-xs btn-primary"
-                >
-                  Create shipping label
-                </button>
-              </div>
-            </BaseCardRow>
-          </BaseCard>
-
-          <BaseCard class="mb-6">
-            <BaseCardRow size="sm">
-              <BaseBadge
-                color="green"
-                contrast="low"
-                bordered
-                icon="heroicons:banknotes"
-              >
-                Paid
-              </BaseBadge>
-            </BaseCardRow>
-            <BaseCardRow size="sm">
-              <table class="text-sm leading-relaxed w-full">
-                <tr>
-                  <td>Subtotal</td>
-                  <td class="text-slate-600">
-                    2 items
-                  </td>
-                  <td class="text-right whitespace-nowrap">
-                    $ 1,000.00
-                  </td>
-                </tr>
-                <tr>
-                  <td>Shipping</td>
-                  <td class="text-slate-600">
-                    Standard
-                  </td>
-                  <td class="text-right whitespace-nowrap">
-                    $ 0.00
-                  </td>
-                </tr>
-                <tr>
-                  <td>Taxes</td>
-                  <td class="text-slate-600">
-                    GST
-                  </td>
-                  <td class="text-right whitespace-nowrap">
-                    $ 0.00
-                  </td>
-                </tr>
-                <tr>
-                  <td class="font-semibold">
-                    Total
-                  </td>
-                  <td />
-                  <td class="text-right font-semibold whitespace-nowrap">
-                    $ 1,000.00
-                  </td>
-                </tr>
-                <tr>
-                  <td colspan="3">
-                    <div class="border-t border-slate-300 my-4" />
-                  </td>
-                </tr>
-                <tr>
-                  <td>Paid by customer</td>
-                  <td />
-                  <td class="text-right">
-                    $ 1,000.00
-                  </td>
-                </tr>
-              </table>
-            </BaseCardRow>
-          </BaseCard>
-
-          <div>
-            <h2 class="font-semibold text-sm mb-4">
-              Timeline
-            </h2>
-            <BaseTimeline :items="timelineItems" />
-          </div>
-        </div>
-        
-        <div class="lg:shrink-0 lg:w-4/12 space-y-4">
-          <BaseCard>
-            <BaseCardRow size="sm">
-              <div class="flex mb-6">
-                <div class="flex-grow">
-                  <h2 class="font-medium mb-2 text-sm">
-                    Notes
-                  </h2>
-                  <p class="text-slate-500 text-xs">
-                    No notes from customer
-                  </p>
-                </div>
-                <div class="shrink-0">
-                  <button
-                    type="button"
-                    class="btn btn-white p-2"
-                  >
-                    <BaseIcon icon="heroicons:pencil-solid" />
-                  </button>
-                </div>
-              </div>
-
-              <div class="flex">
-                <div class="flex-grow">
-                  <h2 class="font-medium mb-2 text-sm">
-                    Additional details
-                  </h2>
-                  <p class="text-xs">
-                    language: fr
-                  </p>
-                </div>
-                <div class="shrink-0">
-                  <button
-                    type="button"
-                    class="btn btn-white p-2"
-                  >
-                    <BaseIcon icon="heroicons:pencil-solid" />
-                  </button>
-                </div>
-              </div>
-            </BaseCardRow>
-          </BaseCard>
-
-          <BaseCard>
-            <BaseCardRow size="sm">
-              <div class="space-y-4">
-                <div>
-                  <h2 class="font-medium mb-2 text-sm">
-                    Customer
-                  </h2>
-                  <a
-                    href="#"
-                    class="text-blue-600 text-sm"
-                  >John Doe</a>
-                  <br>
-                  <a
-                    href="#"
-                    class="text-blue-600 text-sm"
-                  >2 orders</a>
-                </div>
-
-                <div>
-                  <h2 class="font-medium mb-2 text-sm">
-                    Contact information
-                  </h2>
-                  <div class="flex justify-between">
-                    <a
-                      href="mailto:john.doe@witify.io"
-                      class="text-blue-600 text-sm"
-                    >john.doe@witify.io</a>
-                    <BaseClipboard
-                      value="john.doe@witify.io"
-                      class="shrink-0"
-                    >
-                      <BaseIcon
-                        icon="heroicons:clipboard-solid"
-                        class="text-slate-600"
-                      />
-                    </BaseClipboard>
-                  </div>
-                </div>
-
-                <div>
-                  <h2 class="font-medium mb-2 text-sm">
-                    Shipping address
-                  </h2>
-                  <div class="flex justify-between items-start">
-                    <div>
-                      <p class="text-sm mb-1">
-                        Philippe Lamarche<br>
-                        Gestion Philippe Lamarche Inc<br>
-                        250 Rue Westgate<br>
-                        Rosemère QC J7A 2E9<br>
-                        Canada<br>
-                        (514) 618-9961
-                      </p>
-                      <a
-                        href="#"
-                        class="text-blue-600 text-sm underline"
-                      >View map</a>
-                    </div>
-                    <BaseClipboard
-                      value="john.doe@witify.io"
-                      class="shrink-0"
-                    >
-                      <BaseIcon
-                        icon="heroicons:clipboard-solid"
-                        class="text-slate-600"
-                      />
-                    </BaseClipboard>
-                  </div>
-                </div>
-              </div>
-            </BaseCardRow>
-          </BaseCard>
-
-          <BaseCard>
-            <BaseCardRow size="sm">
-              <div>
-                <h2 class="font-medium mb-3 text-sm">
-                  Conversion Summary
-                </h2>
-
-                <div class="space-y-1.5 mb-2">
-                  <div class="flex space-x-2 items-center justify-between">
-                    <BaseIcon
-                      icon="heroicons:inbox-arrow-down-solid"
-                      class="text-slate-600 shrink-0"
-                    />
-                    <div class="grow">
-                      <p class="text-sm">
-                        This is their 2nd order
-                      </p>
-                    </div>
-                  </div>
-
-                  <div class="flex space-x-2 items-center justify-between">
-                    <BaseIcon
-                      icon="heroicons:eye-solid"
-                      class="text-slate-600 shrink-0"
-                    />
-                    <div class="grow">
-                      <p class="text-sm">
-                        1st session from Google
-                      </p>
-                    </div>
-                  </div>
-
-                  <div class="flex space-x-2 items-center justify-between">
-                    <BaseIcon
-                      icon="heroicons:chart-bar-square-solid"
-                      class="text-slate-600 shrink-0"
-                    />
-                    <div class="grow">
-                      <p class="text-sm">
-                        1 session over 1 day
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <a
-                  href="#"
-                  class="text-blue-600 text-sm underline"
-                >View conversion details</a>
-              </div>
-            </BaseCardRow>
-          </BaseCard>
-        </div>
-      </div>
-    </BaseContainer>
-
-    <BaseAppSnackbars />
-    <BaseAppDialogs />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useSnackbarsStore } from '..';
-
-import BaseCard from '@/components/BaseCard.vue';
-import BaseCardRow from '@/components/BaseCardRow.vue';
-import BaseHeader from '@/components/BaseHeader.vue';
-import BaseTabs from '@/components/BaseTabs.vue';
-import BaseBadge from '@/components/BaseBadge.vue';
-import BaseCounter from '@/components/BaseCounter.vue';
-import BaseTabItem from '@/components/BaseTabItem.vue';
-import BaseTimeline from '@/components/BaseTimeline.vue';
-import { BaseIcon } from '../components/index';
-import BaseContainer from '@/components/BaseContainer.vue';
-import BaseClipboard from '@/components/BaseClipboard.vue';
-import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
-import BaseAppDialogs from '@/components/BaseAppDialogs.vue';
-
-const timelineItems = [
-  {
-    title: 'Order placed',
-    description: 'Philippe Lamarche placed this order on Online Store (checkout #36886026060090).',
-    icon: 'heroicons:inbox-solid',
-    color: 'success',
-    date: '1:56 PM',
-  },
-  {
-    title: 'Confirmation created',
-    description: 'Confirmation #X9WH46CK5 was generated for this order.',
-    icon: 'heroicons:check-circle-solid',
-    color: null,
-    date: '1:56 PM',
-  },
-  {
-    title: 'Payment captured',
-    description: 'Payment of $1,000.00 was captured for this order.',
-    icon: 'heroicons:credit-card-solid',
-    color: null,
-    date: '1:56 PM',
-  },
-  {
-    title: 'Order fulfilled',
-    description: 'Order #21496 was fulfilled.',
-    icon: 'heroicons:check-circle-solid',
-    color: null,
-    date: '3:43 PM',
-  },
-];
-
-function showAlert(text: string) {
-  useSnackbarsStore().push({
-    title: text,
-    text: text,
-    color: 'success'
-  });
-}
+<template>
+  <div class="bg-slate-100 py-6">
+    <BaseContainer size="5xl">
+      <BaseHeader
+        title="Order #21496"
+        subtitle="August 6, 2023 at 1:56 pm from Online Store"
+        :max-actions="3"
+        :badge="{
+          icon: 'heroicons:check-circle-solid',
+          label: 'Paid',
+          color: 'blue',
+        }"
+        :actions="[
+          { label: 'Refund', icon: 'heroicons:banknotes', action: () => showAlert('Refund') },
+          { label: 'Edit', icon: 'heroicons:cog', action: () => showAlert('Edit') },
+          { label: 'PDF', icon: 'heroicons:document', action: () => showAlert('PDF') },
+          { label: 'Duplicate', icon: 'heroicons:document-duplicate', action: () => showAlert('Duplicate') },
+          { label: 'Print', icon: 'heroicons:printer', action: () => showAlert('Print') },
+          { label: 'Archive', icon: 'heroicons:trash', action: () => showAlert('Archive') },
+        ]"
+        :breadcrumbs="[{ label: 'Home', to: '/' }, { label: 'Orders', to: '/orders' }, { label: '#21496', to: '/' }]"
+        class="mb-1"
+      />
+
+      <BaseTabs
+        class="mb-4"
+        size="sm"
+      >
+        <BaseTabItem to="/">
+          General
+        </BaseTabItem>
+        <BaseTabItem to="/settings">
+          Transactions <BaseCounter :count="4" />
+        </BaseTabItem>
+        <BaseTabItem to="/setup">
+          Edit
+        </BaseTabItem>
+      </BaseTabs>
+
+      <div class="lg:flex lg:space-x-6 space-y-5 lg:space-y-0">
+        <div class="lg:grow lg:w-8/12">
+          <BaseCard class="mb-6">
+            <BaseCardRow size="sm">
+              <BaseBadge
+                color="yellow"
+                contrast="low"
+                bordered
+                icon="heroicons:inbox"
+              >
+                Unfulfilled (2)
+              </BaseBadge>
+            </BaseCardRow>
+
+            <BaseCardRow
+              v-for="i in 2"
+              :key="i"
+              size="sm"
+            >
+              <div class="flex space-x-3">
+                <div class="shrink-0">
+                  <div class="h-10 w-10 bg-slate-500 rounded-md overflow-hidden">
+                    <img
+                      class="h-full w-full object-cover"
+                      src="https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80"
+                    >
+                  </div>
+                </div>
+                <div class="grow">
+                  <div class="sm:flex space-y-0.5 sm:space-y-0 sm:space-x-3 text-sm mb-2">
+                    <a
+                      href="#"
+                      class="text-blue-600 grow"
+                    >Contemporaine Blanche- 2 chiffres (6'' à 24'')</a>
+                    <p class="min-w-[70px] sm:text-right whitespace-nowrap">
+                      $ 1,000.00 x 1
+                    </p>
+                    <p class="min-w-[70px] sm:text-right whitespace-nowrap">
+                      $ 1,000.00
+                    </p>
+                  </div>
+                  <div class="space-y-1">
+                    <p class="text-xs text-slate-600">
+                      SKU: 5f918d672028b
+                    </p>
+                    <p class="text-xs text-slate-600">
+                      <span class="text-slate-500">GPO</span>: 97829
+                    </p>
+                    <p class="text-xs text-slate-600">
+                      <span class="text-slate-500">Numéro de porte</span>: 66
+                    </p>
+                    <p class="text-xs text-slate-600">
+                      <span class="text-slate-500">Taille</span>: 6"
+                    </p>
+                    <p class="text-xs text-slate-600">
+                      <span class="text-slate-500">Couleur</span>: Blanc
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </BaseCardRow>
+            <BaseCardRow size="sm">
+              <div class="flex justify-end gap-2">
+                <button
+                  type="button"
+                  class="btn btn-xs"
+                >
+                  Fulfill items
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-xs btn-primary"
+                >
+                  Create shipping label
+                </button>
+              </div>
+            </BaseCardRow>
+          </BaseCard>
+
+          <BaseCard class="mb-6">
+            <BaseCardRow size="sm">
+              <BaseBadge
+                color="green"
+                contrast="low"
+                bordered
+                icon="heroicons:banknotes"
+              >
+                Paid
+              </BaseBadge>
+            </BaseCardRow>
+            <BaseCardRow size="sm">
+              <table class="text-sm leading-relaxed w-full">
+                <tr>
+                  <td>Subtotal</td>
+                  <td class="text-slate-600">
+                    2 items
+                  </td>
+                  <td class="text-right whitespace-nowrap">
+                    $ 1,000.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>Shipping</td>
+                  <td class="text-slate-600">
+                    Standard
+                  </td>
+                  <td class="text-right whitespace-nowrap">
+                    $ 0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td>Taxes</td>
+                  <td class="text-slate-600">
+                    GST
+                  </td>
+                  <td class="text-right whitespace-nowrap">
+                    $ 0.00
+                  </td>
+                </tr>
+                <tr>
+                  <td class="font-semibold">
+                    Total
+                  </td>
+                  <td />
+                  <td class="text-right font-semibold whitespace-nowrap">
+                    $ 1,000.00
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="3">
+                    <div class="border-t border-slate-300 my-4" />
+                  </td>
+                </tr>
+                <tr>
+                  <td>Paid by customer</td>
+                  <td />
+                  <td class="text-right">
+                    $ 1,000.00
+                  </td>
+                </tr>
+              </table>
+            </BaseCardRow>
+          </BaseCard>
+
+          <div>
+            <h2 class="font-semibold text-sm mb-4">
+              Timeline
+            </h2>
+            <BaseTimeline :items="timelineItems" />
+          </div>
+        </div>
+        
+        <div class="lg:shrink-0 lg:w-4/12 space-y-4">
+          <BaseCard>
+            <BaseCardRow size="sm">
+              <div class="flex mb-6">
+                <div class="flex-grow">
+                  <h2 class="font-medium mb-2 text-sm">
+                    Notes
+                  </h2>
+                  <p class="text-slate-500 text-xs">
+                    No notes from customer
+                  </p>
+                </div>
+                <div class="shrink-0">
+                  <button
+                    type="button"
+                    class="btn btn-white p-2"
+                  >
+                    <BaseIcon icon="heroicons:pencil-solid" />
+                  </button>
+                </div>
+              </div>
+
+              <div class="flex">
+                <div class="flex-grow">
+                  <h2 class="font-medium mb-2 text-sm">
+                    Additional details
+                  </h2>
+                  <p class="text-xs">
+                    language: fr
+                  </p>
+                </div>
+                <div class="shrink-0">
+                  <button
+                    type="button"
+                    class="btn btn-white p-2"
+                  >
+                    <BaseIcon icon="heroicons:pencil-solid" />
+                  </button>
+                </div>
+              </div>
+            </BaseCardRow>
+          </BaseCard>
+
+          <BaseCard>
+            <BaseCardRow size="sm">
+              <div class="space-y-4">
+                <div>
+                  <h2 class="font-medium mb-2 text-sm">
+                    Customer
+                  </h2>
+                  <a
+                    href="#"
+                    class="text-blue-600 text-sm"
+                  >John Doe</a>
+                  <br>
+                  <a
+                    href="#"
+                    class="text-blue-600 text-sm"
+                  >2 orders</a>
+                </div>
+
+                <div>
+                  <h2 class="font-medium mb-2 text-sm">
+                    Contact information
+                  </h2>
+                  <div class="flex justify-between">
+                    <a
+                      href="mailto:john.doe@witify.io"
+                      class="text-blue-600 text-sm"
+                    >john.doe@witify.io</a>
+                    <BaseClipboard
+                      value="john.doe@witify.io"
+                      class="shrink-0"
+                    >
+                      <BaseIcon
+                        icon="heroicons:clipboard-solid"
+                        class="text-slate-600"
+                      />
+                    </BaseClipboard>
+                  </div>
+                </div>
+
+                <div>
+                  <h2 class="font-medium mb-2 text-sm">
+                    Shipping address
+                  </h2>
+                  <div class="flex justify-between items-start">
+                    <div>
+                      <p class="text-sm mb-1">
+                        Philippe Lamarche<br>
+                        Gestion Philippe Lamarche Inc<br>
+                        250 Rue Westgate<br>
+                        Rosemère QC J7A 2E9<br>
+                        Canada<br>
+                        (514) 618-9961
+                      </p>
+                      <a
+                        href="#"
+                        class="text-blue-600 text-sm underline"
+                      >View map</a>
+                    </div>
+                    <BaseClipboard
+                      value="john.doe@witify.io"
+                      class="shrink-0"
+                    >
+                      <BaseIcon
+                        icon="heroicons:clipboard-solid"
+                        class="text-slate-600"
+                      />
+                    </BaseClipboard>
+                  </div>
+                </div>
+              </div>
+            </BaseCardRow>
+          </BaseCard>
+
+          <BaseCard>
+            <BaseCardRow size="sm">
+              <div>
+                <h2 class="font-medium mb-3 text-sm">
+                  Conversion Summary
+                </h2>
+
+                <div class="space-y-1.5 mb-2">
+                  <div class="flex space-x-2 items-center justify-between">
+                    <BaseIcon
+                      icon="heroicons:inbox-arrow-down-solid"
+                      class="text-slate-600 shrink-0"
+                    />
+                    <div class="grow">
+                      <p class="text-sm">
+                        This is their 2nd order
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex space-x-2 items-center justify-between">
+                    <BaseIcon
+                      icon="heroicons:eye-solid"
+                      class="text-slate-600 shrink-0"
+                    />
+                    <div class="grow">
+                      <p class="text-sm">
+                        1st session from Google
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex space-x-2 items-center justify-between">
+                    <BaseIcon
+                      icon="heroicons:chart-bar-square-solid"
+                      class="text-slate-600 shrink-0"
+                    />
+                    <div class="grow">
+                      <p class="text-sm">
+                        1 session over 1 day
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <a
+                  href="#"
+                  class="text-blue-600 text-sm underline"
+                >View conversion details</a>
+              </div>
+            </BaseCardRow>
+          </BaseCard>
+        </div>
+      </div>
+    </BaseContainer>
+
+    <BaseAppSnackbars />
+    <BaseAppDialogs />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useSnackbarsStore } from '..';
+
+import BaseCard from '@/components/BaseCard.vue';
+import BaseCardRow from '@/components/BaseCardRow.vue';
+import BaseHeader from '@/components/BaseHeader.vue';
+import BaseTabs from '@/components/BaseTabs.vue';
+import BaseBadge from '@/components/BaseBadge.vue';
+import BaseCounter from '@/components/BaseCounter.vue';
+import BaseTabItem from '@/components/BaseTabItem.vue';
+import BaseTimeline from '@/components/BaseTimeline.vue';
+import { BaseIcon } from '../components/index';
+import BaseContainer from '@/components/BaseContainer.vue';
+import BaseClipboard from '@/components/BaseClipboard.vue';
+import BaseAppSnackbars from '@/components/BaseAppSnackbars.vue';
+import BaseAppDialogs from '@/components/BaseAppDialogs.vue';
+
+const timelineItems = [
+  {
+    title: 'Order placed',
+    description: 'Philippe Lamarche placed this order on Online Store (checkout #36886026060090).',
+    icon: 'heroicons:inbox-solid',
+    color: 'success',
+    date: '1:56 PM',
+  },
+  {
+    title: 'Confirmation created',
+    description: 'Confirmation #X9WH46CK5 was generated for this order.',
+    icon: 'heroicons:check-circle-solid',
+    color: null,
+    date: '1:56 PM',
+  },
+  {
+    title: 'Payment captured',
+    description: 'Payment of $1,000.00 was captured for this order.',
+    icon: 'heroicons:credit-card-solid',
+    color: null,
+    date: '1:56 PM',
+  },
+  {
+    title: 'Order fulfilled',
+    description: 'Order #21496 was fulfilled.',
+    icon: 'heroicons:check-circle-solid',
+    color: null,
+    date: '3:43 PM',
+  },
+];
+
+function showAlert(text: string) {
+  useSnackbarsStore().push({
+    title: text,
+    text: text,
+    color: 'success'
+  });
+}
 </script>