Data tables for brand and category added to admin pages

software/src/components/navigationItems.vue

@@ -73,6 +73,7 @@ const navRail = defineModel("navRail", { type: Boolean })
 
       <v-list-item :title="$t('menu.admin.dashboard')" prepend-icon="mdi-view-dashboard" to="/admin/dashboard" link />
       <v-list-item :title="$t('menu.admin.categories')" prepend-icon="mdi-label" to="/admin/categories" link />
+      <v-list-item :title="$t('brand', 2)" prepend-icon="mdi-factory" to="/admin/brands" link />
       <v-list-item :title="$t('menu.admin.products')" prepend-icon="mdi-store-cog" to="/admin/products" link />
       <v-list-item :title="$t('menu.admin.accounts')" prepend-icon="mdi-account-multiple" to="/admin/accounts" link />
     </div>

software/src/pages/admin/brandsPage/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useProductStore } from '@/data/stores/productStore';
+
+const productStore = useProductStore()
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Edit", value: "edit" },
+]
+</script>
+
+<template>
+  <v-container max-width="800">
+    <v-row>
+      <v-col>
+        <card-view
+          :title="$t('brand', 2)"
+          icon="mdi-label"
+          :subtitle="productStore.brands.length + ' ' + $t('brand', productStore.brands.length)"
+        >
+          <v-data-table
+            :items="productStore.brands"
+            :headers="headers"
+          >
+          </v-data-table>
+            <!-- todo: Edit/Delete -->
+        </card-view>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

software/src/pages/admin/categoriesPage/index.vue

@@ -1,6 +1,35 @@
 <script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+import { useProductStore } from '@/data/stores/productStore';
+
+const productStore = useProductStore()
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Icon", value: "icon" },
+  { title: "Edit", value: "edit" },
+]
 </script>
 
 <template>
-  Categories Page
+  <v-container max-width="800">
+    <v-row>
+      <v-col>
+        <card-view
+          :title="$t('category', 2)"
+          icon="mdi-label"
+          :subtitle="productStore.categories.length + ' ' + $t('category', productStore.categories.length)"
+        >
+          <v-data-table
+            :items="productStore.categories"
+            :headers="headers"
+          >
+            <template v-slot:item.icon="{ item }">
+              <v-icon :icon="item.icon" />
+            </template>
+          </v-data-table>
+        </card-view>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>

software/src/router/admin.routes.ts

@@ -2,6 +2,7 @@ import DashboardPage from "@/pages/admin/dashboardPage/index.vue"
 import CategoriesPage from "@/pages/admin/categoriesPage/index.vue"
 import AccountsPage from "@/pages/admin/accountsPage/index.vue"
 import ProductsPage from "@/pages/admin/productsPage/index.vue"
+import BrandsPage from "@/pages/admin/brandsPage/index.vue"
 
 export default [
   {
@@ -19,5 +20,9 @@ export default [
   {
     path: '/admin/products',
     component: ProductsPage
+  },
+  {
+    path: '/admin/brands',
+    component: BrandsPage
   }
 ]