src/pages/Ticket/Card/TicketBasicData.vue

@@ -1,3 +1,48 @@
+<script setup>
+import { ref } from 'vue';
+
+const stepperRef = ref(null);
+const step = ref(1);
+</script>
 <template>
-    <QCard>Basic Data</QCard>
+    <QStepper v-model="step" ref="stepperRef" color="primary" header-nav animated>
+        <QStep
+            :name="1"
+            title="Select campaign settings"
+            icon="settings"
+            :error="step < 3"
+            :done="step > 1"
+        >
+            For each ad campaign that you create, you can control how much you're willing
+            to spend on clicks and conversions, which networks and geographical locations
+            you want your ads to show on, and more.
+        </QStep>
+        <QStep
+            :name="2"
+            title="Create an ad group"
+            caption="Optional"
+            icon="create_new_folder"
+            :done="step > 2"
+        >
+            An ad group contains one or more ads which target a shared set of keywords.
+        </QStep>
+
+        <template #navigation>
+            <QStepperNavigation>
+                <QBtn
+                    @click="stepperRef.next()"
+                    color="primary"
+                    :label="step === 3 ? 'Finish' : 'Continue'"
+                />
+                <QBtn
+                    v-if="step > 1"
+                    flat
+                    color="primary"
+                    @click="stepperRef.previous()"
+                    label="Back"
+                    class="q-ml-sm"
+                />
+            </QStepperNavigation>
+        </template>
+    </QStepper>
 </template>

src/pages/Ticket/locale/en.yml

@@ -0,0 +1,4 @@
+basicData:
+    next: Next
+    back: Back
+    finalize: Finalize

src/pages/Ticket/locale/es.yml

@@ -1,2 +1,6 @@
+basicData:
+    next: Siguiente
+    back: Anterior
+    finalize: Finalizar
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

src/router/modules/ticket.js

@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+        card: ['TicketBasicData', 'TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
         {