From 8c40891427bb8d54f847781ab5975b1f27eff4f6 Mon Sep 17 00:00:00 2001
From: Timotej <timi.blazic@gmail.com>
Date: Tue, 27 Jan 2026 17:26:55 +0100
Subject: [PATCH 1/2] added orders page

---
 src/layouts/AppLayout.vue |  8 +++++++
 src/pages/OrdersPage.vue  | 49 +++++++++++++++++++++++++++++++++++++++
 src/router.ts             |  2 ++
 3 files changed, 59 insertions(+)
 create mode 100644 src/pages/OrdersPage.vue

diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 3477556..4c87a39 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -5,6 +5,7 @@ import { useRoute } from "vue-router";
 const route = useRoute();
 
 const isProducts = computed(() => route.path.startsWith("/products"));
+const isOrders = computed(() => route.path.startsWith("/orders"));
 
 const linkClass = (active: boolean) =>
     [
@@ -35,6 +36,13 @@ const linkClass = (active: boolean) =>
               Products
             </router-link>
 
+            <router-link
+                to="/orders"
+                :class="linkClass(isOrders)"
+            >
+              Orders
+            </router-link>
+
             <!-- placeholder za kasneje -->
             <button
                 class="px-3 py-2 rounded-lg text-sm text-zinc-700 hover:bg-zinc-100 transition"
diff --git a/src/pages/OrdersPage.vue b/src/pages/OrdersPage.vue
new file mode 100644
index 0000000..b00bb58
--- /dev/null
+++ b/src/pages/OrdersPage.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+const items = ref<any[]>([]);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    const r = await fetch("/api/orders/orders", {
+      headers: { Accept: "application/json" },
+    });
+    items.value = await r.json();
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="flex items-end justify-between mb-6">
+    <div>
+      <h1 class="text-2xl font-semibold">Orders</h1>
+      <p class="text-sm text-zinc-500">Check all orders</p>
+    </div>
+
+    <div class="text-sm text-zinc-500">
+      <!-- placeholder -->
+      <span class="px-2 py-1 rounded-md bg-zinc-100">v0</span>
+    </div>
+  </div>
+
+  <div>
+    <h1 class="text-2xl font-semibold mb-4">Orders</h1>
+
+    <div v-if="loading">Loading…</div>
+
+    <div v-else class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <router-link
+          v-for="p in items"
+          :key="p.id"
+          :to="`/products/${p.id}`"
+          class="rounded-xl border p-4 hover:shadow"
+      >
+        <div class="font-medium">{{ p.name }}</div>
+        <div class="text-sm opacity-70">{{ p.total_cost }} {{ p.currency }}</div>
+      </router-link>
+    </div>
+  </div>
+</template>
diff --git a/src/router.ts b/src/router.ts
index 71634ae..29680eb 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import ProductsPage from "./pages/ProductsPage.vue";
 import ProductDetailPage from "./pages/ProductDetailPage.vue";
 import NotFoundPage from "./pages/NotFoundPage.vue";
+import OrdersPage from "./pages/OrdersPage.vue";
 
 const router = createRouter({
     history: createWebHistory(),
@@ -10,6 +11,7 @@ const router = createRouter({
         { path: "/", redirect: "/products" },
         { path: "/products", component: ProductsPage },
         { path: "/products/:id", component: ProductDetailPage, props: true },
+        { path: "/orders", component: OrdersPage },
         { path: "/:pathMatch(.*)*", component: NotFoundPage }
     ],
 });

From 4030206d8589e546c7a8165872e5939a2d86ed92 Mon Sep 17 00:00:00 2001
From: Timotej <timi.blazic@gmail.com>
Date: Tue, 27 Jan 2026 17:35:30 +0100
Subject: [PATCH 2/2] test

---
 src/pages/OrdersPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/OrdersPage.vue b/src/pages/OrdersPage.vue
index b00bb58..ae3e2e0 100644
--- a/src/pages/OrdersPage.vue
+++ b/src/pages/OrdersPage.vue
@@ -19,7 +19,7 @@ onMounted(async () => {
 <template>
   <div class="flex items-end justify-between mb-6">
     <div>
-      <h1 class="text-2xl font-semibold">Orders</h1>
+      <h1 class="text-2xl font-semibold">Orderss</h1>
       <p class="text-sm text-zinc-500">Check all orders</p>
     </div>