Restructure project to atomize structure

src/pages/AccountOrdersPage.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { useAccountStore } from '@/stores/account.store';
+import orderItem from '@/components/organisms/orderItem.vue';
+import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
+import circularProgressIndeterminate from '@/components/atoms/circularProgressIndeterminate.vue';
+import { useOrderStore } from '@/stores/order.store';
+
+const accountStore = useAccountStore()
+const orderStore = useOrderStore()
+
+orderStore.getOrdersOfAccount(accountStore.userAccount, accountStore.userAccountToken)
+</script>
+
+<template>
+  <account-sub-page-layout>
+    <!-- During fetching state -->
+    <v-row
+      v-if="orderStore.fetchInProgress"
+    >
+      <v-col class="text-center">
+        <circular-progress-indeterminate />
+      </v-col>
+    </v-row>
+
+    <!-- Display all orders -->
+    <v-row
+      v-else-if="orderStore.orders.length > 0"
+      v-for="order in orderStore.orders"
+    >
+      <v-col>
+        <order-item
+          :order="order"
+        />
+      </v-col>
+    </v-row>
+
+    <!-- No orders -->
+    <v-row v-else>
+      <v-col>
+        <v-empty-state
+          icon="mdi-basket-off"
+          :title="$t('order.noOrders')"
+          :text="$t('order.noOrdersText')"
+        />
+      </v-col>
+    </v-row>
+  </account-sub-page-layout>
+</template>