Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/assets/logo.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

.npmrc

@@ -0,0 +1,2 @@
+@bibhu2020:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GH_TOKEN}

Dockerfile

@@ -0,0 +1,31 @@
+# Step 1: Build the app
+#FROM node:20 AS build #Commented this line to remediate 1es warnings
+
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application
+COPY . .
+
+# Build the app for production
+RUN npm run build-only
+
+# Step 2: Serve the app
+#FROM nginx:alpine #Commented this line to remediate 1es warnings
+
+# Copy custom Nginx config
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Copy the built app from the build stage to the nginx HTML directory
+#COPY --from=build /app/dist /usr/share/nginx/html #Commented this line to remediate 1es warnings
+
+# Expose the port the app will be running on
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

README-bkp.md

@@ -0,0 +1,115 @@
+# 🚀 Vue.js App on Hugging Face Spaces (Northwind)
+
+This repository hosts a **Vue.js application** deployed on **Hugging Face Spaces** using the **Static SDK**.  
+It allows you to serve any frontend built with Vue, React, or plain HTML/CSS/JS directly on Spaces.
+
+---
+
+## 📦 Project Structure
+
+```
+.
+├── public/              # Static assets
+├── src/                 # Vue app source code
+├── dist/                # Production build output (after `npm run build`)
+├── package.json
+├── .gitignore
+└── README.md
+```
+
+---
+
+## ⚙️ Setup Instructions
+
+### 1. Install Dependencies
+```bash
+npm install
+```
+
+### 2. Build the App
+```bash
+npm run build
+```
+
+This will create a production-ready `dist/` folder.
+
+### 3. Add a Hugging Face `space.yaml`
+
+Create a file named `space.yaml` in the root directory:
+
+```yaml
+sdk: static
+app_file: dist
+title: "Vue.js App"
+emoji: 🚀
+colorFrom: green
+colorTo: blue
+pinned: false
+license: mit
+```
+
+### 4. Commit and Push
+
+Push your code to a Hugging Face Space repository:
+
+```bash
+git add .
+git commit -m "Deploy Vue.js app to Hugging Face Spaces"
+git push
+```
+
+The app will automatically build and deploy!
+
+---
+
+## 🌐 Customization
+
+- Update your app name and metadata in `space.yaml`.
+- You can add a favicon in `public/`.
+- Use environment variables by prefixing them with `VITE_` (e.g., `VITE_API_URL`).
+
+---
+
+## 🧠 Notes
+
+- Hugging Face automatically hosts the contents of `dist/` as a static site.
+- Make sure to commit the built folder (`dist/`) or ensure your build process runs automatically in CI.
+
+---
+
+## 📄 License
+MIT © 2025 Bibhu Mishra
+
+## northwind
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+### Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+### Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+### Project Setup
+
+```sh
+npm install
+```
+
+#### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+#### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```

README.md

@@ -1,11 +1,52 @@
 ---
 title: Northwind
-emoji: 📊
-colorFrom: gray
-colorTo: red
-sdk: docker
+emoji: 🐢
+colorFrom: purple
+colorTo: indigo
+sdk: static
 pinned: false
-short_description: A web application built using vuejs. (connects to northwind)
+app_build_command: npm run build
+app_file: dist/index.html
+license: mit
+short_description: Its a Vuejs Web App built on Northwind dB.
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# vue
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

env.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="vite/client" />
+
+// This allows importing `.vue` files without TypeScript errors
+declare module '*.vue' {
+    import { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
+
+// Extend the Vite environment variables (optional but recommended)
+interface ImportMetaEnv {
+    readonly VITE_API_URL: string;
+    readonly VITE_APP_PORT: string;
+    // Add more VITE_ prefixed env variables here as needed
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}
+
+

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Northwind</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

nginx.conf

@@ -0,0 +1,25 @@
+worker_processes auto;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    sendfile        on;
+    keepalive_timeout  65;
+
+    server {
+        listen 3011;
+        server_name localhost;
+
+        root /usr/share/nginx/html;
+        index index.html;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "northwind",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start-dev": "vite --mode development",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview --port 3000",
+    "build-only": "vite build --mode production",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "axios": "^1.9.0",
+    "chart.js": "^4.4.9",
+    "primeicons": "^7.0.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-spinner": "^1.0.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.4",
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/tsconfig": "^0.7.0",
+    "npm-run-all2": "^7.0.2",
+    "tailwindcss": "^4.1.4",
+    "typescript": "~5.8.0",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.2.8"
+  }
+}

src/App.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+import Navbar from '@/components/nav/Navbar.vue'
+</script>
+
+<template>
+  <Navbar/>
+
+  <RouterView />
+</template>

src/assets/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/components/cards/CustomerCard.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+defineProps<{
+  customer: {
+    CustomerID: string;
+    CompanyName: string;
+    ContactName: string;
+    ContactTitle: string;
+    Address: string;
+    City: string;
+    Region: string | null;
+    PostalCode: string;
+    Country: string;
+    Phone: string;
+    Fax: string | null;
+  };
+}>();
+</script>
+
+<template>
+  <div class="bg-white rounded-2xl shadow-md p-6 transition-transform duration-200 hover:-translate-y-1 hover:shadow-lg">
+    <!-- Header Section -->
+    <div class="flex items-center gap-4">
+            <!-- Profile Picture -->
+      <div class="w-16 h-16 aspect-square rounded-full overflow-hidden shrink-0 flex items-center justify-center bg-blue-600 text-white text-xl font-bold">
+        <!-- Commented out until PhotoURL is added to the customer type
+        <img
+          v-if="customer.PhotoURL"
+          :src="customer.PhotoURL"
+          alt="Profile Picture"
+          class="w-full h-full object-cover"
+        />
+        <span v-else>
+          {{ customer.ContactName.charAt(0).toUpperCase() }}
+        </span>
+        -->
+        <span>
+          {{ customer.ContactName.charAt(0).toUpperCase() }}
+        </span>
+      </div>
+
+
+
+      <!-- Title and Contact -->
+      <div>
+        <h2 class="text-lg font-semibold text-gray-900">{{ customer.CompanyName }}</h2>
+        <span class="inline-block mt-1 px-2 py-0.5 text-xs font-medium text-blue-700 bg-blue-100 rounded">
+          {{ customer.ContactTitle }}
+        </span>
+        <p class="text-sm text-gray-600 mt-1">{{ customer.ContactName }}</p>
+      </div>
+    </div>
+
+    <!-- Info Section -->
+    <div class="mt-4 space-y-2 text-sm text-gray-700">
+      <p class="flex items-center gap-2">
+        <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M17.657 16.657L13 21.314l-4.657-4.657A8 8 0 1117.657 16.657z" />
+        </svg>
+        {{ customer.Address }}, {{ customer.City }}
+        <span v-if="customer.Region">, {{ customer.Region }}</span>,
+        {{ customer.Country }} {{ customer.PostalCode }}
+      </p>
+      <p class="flex items-center gap-2">
+        <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M3 10l1.664-1.333a1.5 1.5 0 011.865 0L12 12.5l5.471-3.833a1.5 1.5 0 011.865 0L21 10m-9 2v4m0 0l-3-3m3 3l3-3" />
+        </svg>
+        {{ customer.Phone }}
+      </p>
+    </div>
+  </div>
+</template>

src/components/cards/KPICard.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue';
+
+const props = defineProps({
+    totalOrders: {
+        type: String,
+        default: '0'
+    },
+    color: {
+        type: String,
+        default: 'blue'
+    },
+    name: {
+        type: String,
+        default: ''
+    }
+});
+
+// Computed style object based on the color prop
+const dynamicStyle = computed(() => ({
+  iconColor: "pi pi-shopping-cart text-4xl text-" + props.color + "-500",
+  fontColor: "text-3xl font-bold mt-2 text-" + props.color + "-700"
+}));
+
+</script>
+
+<template>
+    <div class="bg-white p-6 rounded-2xl shadow-md flex items-center space-x-4 hover:shadow-lg transition">
+        <i :class="dynamicStyle.iconColor"></i>
+        <div>
+          <h2 class="text-gray-500 text-sm">{{ name }}</h2>
+          <p :class="dynamicStyle.fontColor">{{ totalOrders }}</p>
+        </div>
+      </div>
+</template>

src/components/charts/BarChart.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="bg-white p-6 rounded-2xl shadow-md">
+    <h2 class="text-xl font-semibold mb-4">{{title}}</h2>
+    <div class="h-72">
+      <div class="w-full h-64 relative">
+        <canvas ref="canvas" class="absolute inset-0 w-full h-full"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch, onUnmounted } from 'vue'
+import { Chart } from 'chart.js/auto'
+
+const props = defineProps({
+  chartData: Object,
+  title: String
+})
+
+const canvas = ref(null)
+let chartInstance = null
+
+const createChart = () => {
+  if (chartInstance) {
+    chartInstance.destroy()  // destroy old instance before creating a new one
+  }
+
+  chartInstance = new Chart(canvas.value, {
+    type: 'bar',
+    data: props.chartData,
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: 'bottom'
+        }
+      },
+      scales: {
+        x: { ticks: { color: '#6b7280' } },
+        y: { ticks: { color: '#6b7280' } }
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  createChart()
+})
+
+watch(() => props.chartData, (newData) => {
+  createChart()
+})
+
+onUnmounted(() => {
+  if (chartInstance) {
+    chartInstance.destroy()
+  }
+})
+</script>

src/components/charts/LineChart.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="bg-white p-6 rounded-2xl shadow-md">
+    <h2 class="text-xl font-semibold mb-4">{{ title }}</h2>
+    <div class="h-72">
+      <div class="w-full h-64 relative">
+        <canvas ref="canvas" class="absolute inset-0 w-full h-full"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch, onUnmounted, defineProps } from 'vue'
+import { Chart } from 'chart.js/auto'
+
+const props = defineProps({
+  chartData: Object,
+  title: String
+})
+
+const canvas = ref(null)
+let chartInstance = null
+
+const createChart = () => {
+  if (chartInstance) {
+    chartInstance.destroy()
+  }
+
+  chartInstance = new Chart(canvas.value, {
+    type: 'line',
+    data: props.chartData,
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: 'bottom'
+        }
+      },
+      scales: {
+        x: { ticks: { color: '#6b7280' } },
+        y: { ticks: { color: '#6b7280' } }
+      },
+      elements: {
+        line: {
+          tension: 0.4  // smooth curves
+        }
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  createChart()
+})
+
+watch(() => props.chartData, () => {
+  createChart()
+})
+
+onUnmounted(() => {
+  if (chartInstance) {
+    chartInstance.destroy()
+  }
+})
+</script>

src/components/charts/PieChart.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="bg-white p-6 rounded-2xl shadow-md">
+    <h2 class="text-xl font-semibold mb-4">{{ title }}</h2>
+    <div class="h-72">
+      <div class="w-full h-64 relative">
+        <canvas ref="canvas" class="absolute inset-0 w-full h-full"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script setup>
+  import { onMounted, ref } from 'vue';
+  import { Chart, PieController, ArcElement, Tooltip, Legend } from 'chart.js';
+  
+  Chart.register(PieController, ArcElement, Tooltip, Legend);
+  
+  const props = defineProps({
+    chartData: Object,
+    title: String
+  });
+  
+  const canvas = ref(null);
+  
+  onMounted(() => {
+    new Chart(canvas.value, {
+      type: 'pie',
+      data: props.chartData,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: { position: 'bottom' }
+        }
+      }
+    });
+  });
+  </script>
+  

src/components/charts/StackedBarChart.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="bg-white p-6 rounded-2xl shadow-md">
+    <h2 class="text-xl font-semibold mb-4">{{ title }}</h2>
+    <div class="h-72">
+      <div class="w-full h-64 relative">
+        <canvas ref="canvas" class="absolute inset-0 w-full h-full"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+  
+  <script setup>
+  import { onMounted, ref } from 'vue';
+  import { Chart, BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend } from 'chart.js';
+  
+  Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip, Legend);
+  
+  const props = defineProps({
+    chartData: Object,
+    title: String
+  });
+  
+  const canvas = ref(null);
+  
+  onMounted(() => {
+    new Chart(canvas.value, {
+      type: 'bar',
+      data: props.chartData,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: { stacked: true },
+          y: { stacked: true }
+        },
+        plugins: {
+          legend: { position: 'bottom' }
+        }
+      }
+    });
+  });
+  </script>
+  

src/components/forms/OrderForm.vue

@@ -0,0 +1,119 @@
+<!-- src/components/OrderForm.vue -->
+<template>
+    <div class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+      <div class="bg-white rounded-lg w-full max-w-2xl p-6 space-y-4">
+        <h2 class="text-2xl font-bold">{{ order?.id ? 'Edit Order' : 'New Order' }}</h2>
+  
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block mb-1">Customer</label>
+            <select v-model="form.customer" class="w-full p-2 border rounded">
+              <option v-for="c in dropdowns.customers" :key="c" :value="c">{{ c }}</option>
+            </select>
+          </div>
+  
+          <div>
+            <label class="block mb-1">Employee</label>
+            <select v-model="form.employee" class="w-full p-2 border rounded">
+              <option v-for="e in dropdowns.employees" :key="e" :value="e">{{ e }}</option>
+            </select>
+          </div>
+  
+          <div>
+            <label class="block mb-1">Shipper</label>
+            <select v-model="form.shipper" class="w-full p-2 border rounded">
+              <option v-for="s in dropdowns.shippers" :key="s" :value="s">{{ s }}</option>
+            </select>
+          </div>
+  
+          <div>
+            <label class="block mb-1">Ship City</label>
+            <input v-model="form.shipCity" type="text" class="w-full p-2 border rounded" />
+          </div>
+  
+          <div>
+            <label class="block mb-1">Order Date</label>
+            <input v-model="form.orderDate" type="date" class="w-full p-2 border rounded" />
+          </div>
+  
+          <div>
+            <label class="block mb-1">Shipped Date</label>
+            <input v-model="form.shippedDate" type="date" class="w-full p-2 border rounded" />
+          </div>
+        </div>
+  
+        <div>
+          <h3 class="text-lg font-semibold mt-4">Order Items</h3>
+          <div v-for="(item, index) in form.items" :key="index" class="flex gap-2 items-center mt-2">
+            <select v-model="item.product" class="flex-1 p-2 border rounded">
+              <option v-for="p in dropdowns.products" :key="p" :value="p">{{ p }}</option>
+            </select>
+            <input v-model.number="item.quantity" type="number" placeholder="Qty" class="w-20 p-2 border rounded" />
+            <input v-model.number="item.price" type="number" placeholder="Price" class="w-24 p-2 border rounded" />
+            <button @click="removeItem(index)" class="text-red-600">🗑️</button>
+          </div>
+  
+          <button @click="addItem" class="mt-2 bg-green-500 text-white px-4 py-1 rounded hover:bg-green-600">
+            ➕ Add Item
+          </button>
+        </div>
+  
+        <div class="flex justify-end gap-4 mt-6">
+          <button @click="$emit('close')" class="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">
+            Cancel
+          </button>
+          <button @click="saveOrder" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted } from 'vue'
+  import orderService from '@/services/orderService'
+  
+  const props = defineProps(['order'])
+  const emit = defineEmits(['close', 'saved'])
+  
+  const form = ref({
+    customer: '',
+    employee: '',
+    shipper: '',
+    shipCity: '',
+    orderDate: '',
+    shippedDate: '',
+    freight: 0,
+    items: []
+  })
+  
+  const dropdowns = ref({
+    customers: [],
+    employees: [],
+    shippers: [],
+    products: []
+  })
+  
+  onMounted(async () => {
+    dropdowns.value = await orderService.getDropdownData()
+    if (props.order) {
+      form.value = JSON.parse(JSON.stringify(props.order))
+    }
+  })
+  
+  const addItem = () => {
+    form.value.items.push({ product: '', quantity: 1, price: 0 })
+  }
+  
+  const removeItem = (index) => {
+    form.value.items.splice(index, 1)
+  }
+  
+  const saveOrder = async () => {
+    await orderService.saveOrder(form.value)
+    emit('saved')
+    emit('close')
+  }
+  </script>
+  

src/components/grids/CategoryList.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="p-8 bg-gray-100 min-h-screen">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-bold text-gray-800">📋 Categories</h1>
+      <button
+        class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full shadow hover:bg-blue-700 transition"
+        @click="openCreateModal"
+      >
+        ➕ New Category
+      </button>
+    </div>
+
+    <div v-if="!state.isLoading">
+      <div class="overflow-x-auto bg-white rounded-2xl shadow">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50 sticky top-0">
+            <tr>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">ID</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Name</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Description</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            <tr
+              v-for="category in state.categories"
+              :key="category.CategoryID"
+              class="hover:bg-gray-50 transition"
+            >
+              <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ category.CategoryID }}</td>
+              <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ category.CategoryName }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ category.Description }}</td>
+              <td class="px-6 py-4 text-sm font-medium text-gray-500">
+                <div class="flex items-center space-x-2">
+                  <button
+                    class="flex items-center text-blue-600 hover:text-blue-700"
+                    @click.stop="startEdit(category)"
+                  >
+                    <span class="mr-1">📝</span>
+                    <span>Edit</span>
+                  </button>
+                  <button
+                    class="flex items-center text-red-600 hover:text-red-700"
+                    @click.stop="deleteCategory(category.CategoryID)"
+                  >
+                    <span class="mr-1">🗑️</span>
+                    <span>Delete</span>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div v-else class="flex justify-center py-20">
+      <RotateLoader color="#102841" size="15px" />
+    </div>
+
+    <!-- Create Modal -->
+    <div v-if="showCreateModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg">
+        <h2 class="text-xl font-bold mb-4">Create New Category</h2>
+        
+        <div class="space-y-4">
+          <div>
+            <label class="block text-gray-700">Name</label>
+            <input 
+              v-model="newName" 
+              class="border rounded p-2 w-full"
+              placeholder="Enter category name"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Description</label>
+            <input 
+              v-model="newDescription" 
+              class="border rounded p-2 w-full"
+              placeholder="Enter description"
+            />
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-2 mt-6">
+          <button 
+            @click="showCreateModal = false"
+            class="px-4 py-2 border rounded hover:bg-gray-100"
+          >
+            Cancel
+          </button>
+          <button 
+            @click="createCategory"
+            class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit Modal -->
+    <div v-if="showEditModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg">
+        <h2 class="text-xl font-bold mb-4">Edit Category</h2>
+        
+        <div class="space-y-4">
+          <div>
+            <label class="block text-gray-700">Name</label>
+            <input 
+              v-model="editName" 
+              class="border rounded p-2 w-full"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Description</label>
+            <input 
+              v-model="editDescription" 
+              class="border rounded p-2 w-full"
+            />
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-2 mt-6">
+          <button 
+            @click="showEditModal = false"
+            class="px-4 py-2 border rounded hover:bg-gray-100"
+          >
+            Cancel
+          </button>
+          <button 
+            @click="saveEdit"
+            class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import axios from 'axios'
+import RotateLoader from 'vue-spinner/src/RotateLoader.vue'
+
+const state = reactive({
+  categories: [],
+  isLoading: true
+})
+
+const showCreateModal = ref(false)
+const showEditModal = ref(false)
+const newName = ref('')
+const newDescription = ref('')
+const editId = ref(null)
+const editName = ref('')
+const editDescription = ref('')
+
+async function fetchCategories() {
+  try {
+    const { data } = await axios.get(`${import.meta.env.VITE_API_URL}/categories`)
+    state.categories = data
+  } finally {
+    state.isLoading = false
+  }
+}
+
+function startEdit(category) {
+  editId.value = category.CategoryID
+  editName.value = category.CategoryName
+  editDescription.value = category.Description
+  showEditModal.value = true
+}
+
+async function saveEdit() {
+  try {
+    await axios.put(`/api/categories/${editId.value}`, {
+      CategoryName: editName.value,
+      Description: editDescription.value
+    })
+    const category = state.categories.find(c => c.CategoryID === editId.value)
+    category.CategoryName = editName.value
+    category.Description = editDescription.value
+    showEditModal.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+async function deleteCategory(id) {
+  try {
+    await axios.delete(`/api/categories/${id}`)
+    state.categories = state.categories.filter(c => c.CategoryID !== id)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+function openCreateModal() {
+  newName.value = ''
+  newDescription.value = ''
+  showCreateModal.value = true
+}
+
+async function createCategory() {
+  try {
+    const { data } = await axios.post('/api/categories', {
+      CategoryName: newName.value,
+      Description: newDescription.value
+    })
+    state.categories.push(data)
+    showCreateModal.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onMounted(fetchCategories)
+</script>

src/components/grids/CustomerList.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import CustomerCard from '@/components/cards/CustomerCard.vue';
+
+defineProps<{
+  customers: Array<{
+    CustomerID: string;
+    CompanyName: string;
+    ContactName: string;
+    ContactTitle: string;
+    Address: string;
+    City: string;
+    Region: string | null;
+    PostalCode: string;
+    Country: string;
+    Phone: string;
+    Fax: string | null;
+  }>;
+}>();
+</script>
+
+<template>
+  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+    <CustomerCard
+      v-for="customer in customers"
+      :key="customer.CustomerID"
+      :customer="customer"
+    />
+  </div>
+</template>

src/components/grids/OrderList.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="p-8 bg-gray-100 min-h-screen">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-bold text-gray-800"><svg class="w-8 h-8 text-gray-800 inline-block mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h18l-1.2 8H4.2L3 3zm0 0L1 9l1 11h16l1-11-2.2-6H3z"/>
+  </svg>
+  Orders</h1>
+      <button
+        class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full shadow hover:bg-blue-700 transition"
+        @click="openForm()"
+      >
+        ➕ Add Order
+      </button>
+    </div>
+
+    <div v-if="!state.isLoading">
+      <div class="overflow-x-auto bg-white rounded-2xl shadow">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50 sticky top-0">
+            <tr>
+              <th class="px-6 py-3">Expand</th>
+              <th class="px-6 py-3">Customer</th>
+              <th class="px-6 py-3">Order Date</th>
+              <th class="px-6 py-3">Shipped Date</th>
+              <th class="px-6 py-3">City</th>
+              <th class="px-6 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="order in state.orders" :key="order.id">
+              <tr class="hover:bg-gray-50 transition">
+                <td class="px-6 py-4 text-center">
+                  <button
+                    @click.stop="toggleExpand(order.id)"
+                    class="text-gray-500 hover:text-blue-600 focus:outline-none"
+                  >
+                    <span v-if="expandedOrderId === order.id">🔽</span>
+                    <span v-else>▶️</span>
+                  </button>
+                </td>
+                <td class="px-6 py-4">{{ order.Customer.CompanyName }}</td>
+                <td class="px-6 py-4">{{ order.OrderDate }}</td>
+                <td class="px-6 py-4">
+                  <span :class="order.ShippedDate ? 'text-green-600' : 'text-yellow-500'">
+                    {{ order.ShippedDate || 'Pending' }}
+                  </span>
+                </td>
+                <td class="px-6 py-4">{{ order.ShipCity }}</td>
+                <td class="px-6 py-4 flex gap-2">
+                  <button
+                    class="text-blue-600 hover:underline"
+                    @click.stop="openForm(order)"
+                  >
+                    📝 Edit
+                  </button>
+                  <button
+                    class="text-red-600 hover:underline"
+                    @click.stop="deleteOrder(order.id)"
+                  >
+                    🗑️ Delete
+                  </button>
+                </td>
+              </tr>
+
+              <!-- Expanded Row for Items -->
+              <tr v-if="expandedOrderId === order.id">
+                <td colspan="6" class="bg-gray-50 px-6 py-4">
+                  <div v-if="order.items?.length" class="space-y-2">
+                    <div
+                      v-for="item in order.items"
+                      :key="item.id"
+                      class="flex justify-between text-sm text-gray-600"
+                    >
+                      <span>{{ item.product }}</span>
+                      <div class="flex gap-2">
+                        <span>Qty: {{ item.quantity }}</span>
+                        <span>💲{{ item.price }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div v-else class="text-gray-400 text-sm">
+                    No items found for this order.
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div v-else class="flex justify-center py-20">
+      <RotateLoader color="#102841" size="15px" />
+    </div>
+
+    <OrderForm v-if="showForm" :order="editingOrder" @close="closeForm" @saved="loadOrders" />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import OrderForm from '@/components/forms/OrderForm.vue'
+import orderService from '@/services/orderService'
+import axios from 'axios'
+import RotateLoader from 'vue-spinner/src/RotateLoader.vue'
+
+const state = reactive({
+  orders: [],
+  isLoading: true
+});
+const expandedOrderId = ref(null) // <-- single expanded order
+const showForm = ref(false)
+const editingOrder = ref(null)
+
+const loadOrders = async () => {
+  try {
+    const response = await axios.get(`${import.meta.env.VITE_API_URL}/orders`)
+    state.orders = response.data
+  } catch (err) {
+    console.log(err)
+  } finally {
+    state.isLoading = false;
+  }
+}
+
+const toggleExpand = (orderId) => {
+  // If clicked order is already expanded, collapse it, else expand it
+  expandedOrderId.value = expandedOrderId.value === orderId ? null : orderId
+}
+
+const openForm = (order = null) => {
+  editingOrder.value = order
+  showForm.value = true
+}
+
+const closeForm = () => {
+  editingOrder.value = null
+  showForm.value = false
+}
+
+const deleteOrder = async (orderId) => {
+  await orderService.deleteOrder(orderId)
+  loadOrders()
+}
+
+onMounted(loadOrders)
+</script>

src/components/grids/ProductList.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="p-8 bg-gray-100 min-h-screen">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-bold text-gray-800">📦 Products</h1>
+      <button
+        class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full shadow hover:bg-blue-700 transition"
+        @click="openCreateModal"
+      >
+        ➕ New Product
+      </button>
+    </div>
+
+    <div v-if="!state.isLoading">
+      <div class="overflow-x-auto bg-white rounded-2xl shadow">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50 sticky top-0">
+            <tr>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">ID</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Product Name</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Quantity Per Unit</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Unit Price</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Units In Stock</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Discontinued</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            <tr
+              v-for="product in state.products"
+              :key="product.ProductID"
+              class="hover:bg-gray-50 transition"
+            >
+              <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ product.ProductID }}</td>
+              <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ product.ProductName }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ product.QuantityPerUnit }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">${{ product.UnitPrice }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ product.UnitsInStock }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">
+                <span :class="{'text-red-600': product.Discontinued, 'text-green-600': !product.Discontinued}">
+                  {{ product.Discontinued ? 'Yes' : 'No' }}
+                </span>
+              </td>
+              <td class="px-6 py-4 text-sm font-medium text-gray-500">
+                <div class="flex items-center space-x-2">
+                  <button
+                    class="flex items-center text-blue-600 hover:text-blue-700"
+                    @click.stop="openEditModal(product)"
+                  >
+                    <span class="mr-1">📝</span>
+                    <span>Edit</span>
+                  </button>
+                  <button
+                    class="flex items-center text-red-600 hover:text-red-700"
+                    @click.stop="deleteProduct(product.ProductID)"
+                  >
+                    <span class="mr-1">🗑️</span>
+                    <span>Delete</span>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div v-else class="flex justify-center py-20">
+      <RotateLoader color="#102841" size="15px" />
+    </div>
+
+    <!-- Create Modal -->
+    <div v-if="showCreateModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg">
+        <h2 class="text-xl font-bold mb-4">Create New Product</h2>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-gray-700">Product Name</label>
+            <input 
+              v-model="newProductName" 
+              class="border rounded p-2 w-full"
+              placeholder="Enter product name"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Quantity Per Unit</label>
+            <input 
+              v-model="newQuantityPerUnit" 
+              class="border rounded p-2 w-full"
+              placeholder="Enter quantity per unit"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Unit Price</label>
+            <input 
+              v-model="newUnitPrice" 
+              type="number"
+              class="border rounded p-2 w-full"
+              placeholder="Enter unit price"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Units In Stock</label>
+            <input 
+              v-model="newUnitsInStock" 
+              type="number"
+              class="border rounded p-2 w-full"
+              placeholder="Enter units in stock"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Discontinued</label>
+            <input 
+              v-model="newDiscontinued" 
+              type="checkbox"
+              class="border rounded p-2 w-full"
+            />
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-2 mt-6">
+          <button 
+            @click="showCreateModal = false"
+            class="px-4 py-2 border rounded hover:bg-gray-100"
+          >
+            Cancel
+          </button>
+          <button 
+            @click="createProduct"
+            class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit Modal -->
+    <div v-if="showEditModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg">
+        <h2 class="text-xl font-bold mb-4">Edit Product</h2>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-gray-700">Product Name</label>
+            <input 
+              v-model="editProductName" 
+              class="border rounded p-2 w-full"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Quantity Per Unit</label>
+            <input 
+              v-model="editQuantityPerUnit" 
+              class="border rounded p-2 w-full"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Unit Price</label>
+            <input 
+              v-model="editUnitPrice" 
+              type="number"
+              class="border rounded p-2 w-full"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Units In Stock</label>
+            <input 
+              v-model="editUnitsInStock" 
+              type="number"
+              class="border rounded p-2 w-full"
+            />
+          </div>
+          <div>
+            <label class="block text-gray-700">Discontinued</label>
+            <input 
+              v-model="editDiscontinued" 
+              type="checkbox"
+              class="border rounded p-2 w-full"
+            />
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-2 mt-6">
+          <button 
+            @click="showEditModal = false"
+            class="px-4 py-2 border rounded hover:bg-gray-100"
+          >
+            Cancel
+          </button>
+          <button 
+            @click="saveEdit"
+            class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import axios from 'axios'
+import RotateLoader from 'vue-spinner/src/RotateLoader.vue'
+
+const state = reactive({
+  products: [],
+  isLoading: true
+})
+
+const showCreateModal = ref(false)
+const showEditModal = ref(false)
+
+const newProductName = ref('')
+const newQuantityPerUnit = ref('')
+const newUnitPrice = ref(0)
+const newUnitsInStock = ref(0)
+const newDiscontinued = ref(false)
+
+const editProductID = ref(null)
+const editProductName = ref('')
+const editQuantityPerUnit = ref('')
+const editUnitPrice = ref(0)
+const editUnitsInStock = ref(0)
+const editDiscontinued = ref(false)
+
+async function fetchProducts() {
+  try {
+    const { data } = await axios.get(`${import.meta.env.VITE_API_URL}/products`)
+    state.products = data
+  } finally {
+    state.isLoading = false
+  }
+}
+
+function openCreateModal() {
+  newProductName.value = ''
+  newQuantityPerUnit.value = ''
+  newUnitPrice.value = 0
+  newUnitsInStock.value = 0
+  newDiscontinued.value = false
+  showCreateModal.value = true
+}
+
+async function createProduct() {
+  try {
+    const { data } = await axios.post('/api/products', {
+      ProductName: newProductName.value,
+      QuantityPerUnit: newQuantityPerUnit.value,
+      UnitPrice: newUnitPrice.value,
+      UnitsInStock: newUnitsInStock.value,
+      Discontinued: newDiscontinued.value
+    })
+    state.products.push(data)
+    showCreateModal.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+function openEditModal(product) {
+  editProductID.value = product.ProductID
+  editProductName.value = product.ProductName
+  editQuantityPerUnit.value = product.QuantityPerUnit
+  editUnitPrice.value = product.UnitPrice
+  editUnitsInStock.value = product.UnitsInStock
+  editDiscontinued.value = product.Discontinued
+  showEditModal.value = true
+}
+
+async function saveEdit() {
+  try {
+    await axios.put(`/api/products/${editProductID.value}`, {
+      ProductName: editProductName.value,
+      QuantityPerUnit: editQuantityPerUnit.value,
+      UnitPrice: editUnitPrice.value,
+      UnitsInStock: editUnitsInStock.value,
+      Discontinued: editDiscontinued.value
+    })
+    const product = state.products.find(p => p.ProductID === editProductID.value)
+    product.ProductName = editProductName.value
+    product.QuantityPerUnit = editQuantityPerUnit.value
+    product.UnitPrice = editUnitPrice.value
+    product.UnitsInStock = editUnitsInStock.value
+    product.Discontinued = editDiscontinued.value
+    showEditModal.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+async function deleteProduct(id) {
+  try {
+    await axios.delete(`/api/products/${id}`)
+    state.products = state.products.filter(p => p.ProductID !== id)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onMounted(fetchProducts)
+</script>

src/components/grids/ShipperList.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="p-8 bg-gray-100 min-h-screen">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-bold text-gray-800">🚚 Shippers</h1>
+      <button
+        @click="openCreateModal"
+        class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full shadow hover:bg-blue-700 transition"
+      >
+        ➕ New Shipper
+      </button>
+    </div>
+
+    <!-- Shippers Table -->
+    <div v-if="!state.isLoading">
+      <div class="overflow-x-auto bg-white rounded-2xl shadow">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50 sticky top-0">
+            <tr>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">ID</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Company Name</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Phone</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            <tr
+              v-for="shipper in state.shippers"
+              :key="shipper.ShipperID"
+              class="hover:bg-gray-50 transition"
+            >
+              <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ shipper.ShipperID }}</td>
+              <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ shipper.CompanyName }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ shipper.Phone }}</td>
+              <td class="px-6 py-4 text-sm font-medium text-gray-500">
+                <div class="flex items-center space-x-2">
+                  <button
+                    class="flex items-center text-blue-600 hover:text-blue-700"
+                    @click="openEditModal(shipper)"
+                  >
+                    <span class="mr-1">📝</span>
+                    <span>Edit</span>
+                  </button>
+                  <button
+                    class="flex items-center text-red-600 hover:text-red-700"
+                    @click="deleteShipper(shipper.ShipperID)"
+                  >
+                    <span class="mr-1">🗑️</span>
+                    <span>Delete</span>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div v-else class="flex justify-center py-20">
+      <RotateLoader color="#102841" size="15px" />
+    </div>
+
+    <!-- Create or Edit Shipper Modal -->
+    <div v-if="showModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg">
+        <h2 class="text-xl font-bold mb-4">{{ isEditing ? 'Edit Shipper' : 'Create New Shipper' }}</h2>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-gray-700">Company Name</label>
+            <input v-model="form.CompanyName" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Phone</label>
+            <input v-model="form.Phone" class="border rounded p-2 w-full" />
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-2 mt-6">
+          <button
+            @click="showModal = false"
+            class="px-4 py-2 border rounded hover:bg-gray-100"
+          >
+            Cancel
+          </button>
+          <button
+            @click="isEditing ? updateShipper() : createShipper()"
+            class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+          >
+            {{ isEditing ? 'Save Changes' : 'Create Shipper' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import axios from 'axios'
+import RotateLoader from 'vue-spinner/src/RotateLoader.vue'
+
+const state = reactive({
+  shippers: [],
+  isLoading: true
+})
+const showModal = ref(false)
+const isEditing = ref(false)
+const selectedShipperId = ref(null)
+
+const form = ref({
+  CompanyName: '',
+  Phone: ''
+})
+
+async function fetchShippers() {
+  try {
+    const response = await axios.get(`${import.meta.env.VITE_API_URL}/shippers`)
+    state.shippers = response.data
+  } finally {
+    state.isLoading = false
+  }
+}
+
+function openCreateModal() {
+  resetForm()
+  isEditing.value = false
+  showModal.value = true
+}
+
+function openEditModal(shipper) {
+  selectedShipperId.value = shipper.ShipperID
+  form.value = { ...shipper }
+  isEditing.value = true
+  showModal.value = true
+}
+
+function resetForm() {
+  form.value = {
+    CompanyName: '',
+    Phone: ''
+  }
+}
+
+async function createShipper() {
+  try {
+    const { data } = await axios.post('/shippers', form.value)
+    state.shippers.push(data)
+    showModal.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+async function updateShipper() {
+  try {
+    await axios.put(`/shippers/${selectedShipperId.value}`, form.value)
+    const index = state.shippers.findIndex(s => s.ShipperID === selectedShipperId.value)
+    if (index !== -1) state.shippers[index] = { ...form.value, ShipperID: selectedShipperId.value }
+    showModal.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+async function deleteShipper(id) {
+  try {
+    await axios.delete(`/api/shippers/${id}`)
+    state.shippers = state.shippers.filter(s => s.ShipperID !== id)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onMounted(fetchShippers)
+</script>

src/components/grids/SupplierList.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="p-8 bg-gray-100 min-h-screen">
+    <div class="flex justify-between items-center mb-6">
+      <h1 class="text-3xl font-bold text-gray-800">🏢 Suppliers</h1>
+      <button
+        @click="openCreateModal"
+        class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full shadow hover:bg-blue-700 transition"
+      >
+        ➕ New Supplier
+      </button>
+    </div>
+
+    <!-- Suppliers Table -->
+    <div v-if="!state.isLoading">
+      <div class="overflow-x-auto bg-white rounded-2xl shadow">
+        <table class="min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-50 sticky top-0">
+            <tr>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">ID</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Company</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Contact</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Phone</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">City</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Country</th>
+              <th class="px-6 py-3 text-left text-sm font-medium text-gray-600 uppercase tracking-wider">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+            <tr
+              v-for="supplier in state.suppliers"
+              :key="supplier.SupplierID"
+              class="hover:bg-gray-50 transition"
+            >
+              <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ supplier.SupplierID }}</td>
+              <td class="px-6 py-4 text-sm font-medium text-gray-800">{{ supplier.CompanyName }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ supplier.ContactName }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ supplier.Phone }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ supplier.City }}</td>
+              <td class="px-6 py-4 text-sm text-gray-700">{{ supplier.Country }}</td>
+              <td class="px-6 py-4 text-sm font-medium text-gray-500">
+                <div class="flex items-center space-x-2">
+                  <button
+                    class="flex items-center text-blue-600 hover:text-blue-700"
+                    @click="openEditModal(supplier)"
+                  >
+                    <span class="mr-1">📝</span>
+                    <span>Edit</span>
+                  </button>
+                  <button
+                    class="flex items-center text-red-600 hover:text-red-700"
+                    @click="deleteSupplier(supplier.SupplierID)"
+                  >
+                    <span class="mr-1">🗑️</span>
+                    <span>Delete</span>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div v-else class="flex justify-center py-20">
+      <RotateLoader color="#102841" size="15px" />
+    </div>
+
+    <!-- Create or Edit Supplier Modal -->
+    <div v-if="showModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
+      <div class="bg-white p-6 rounded-lg w-full max-w-2xl shadow-lg overflow-y-auto max-h-[90vh]">
+        <h2 class="text-xl font-bold mb-4">{{ isEditing ? 'Edit Supplier' : 'Create New Supplier' }}</h2>
+
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-gray-700">Company Name</label>
+            <input v-model="form.CompanyName" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Contact Name</label>
+            <input v-model="form.ContactName" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Contact Title</label>
+            <input v-model="form.ContactTitle" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Phone</label>
+            <input v-model="form.Phone" class="border rounded p-2 w-full" />
+          </div>
+          <div class="col-span-2">
+            <label class="block text-gray-700">Address</label>
+            <input v-model="form.Address" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">City</label>
+            <input v-model="form.City" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Region</label>
+            <input v-model="form.Region" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Postal Code</label>
+            <input v-model="form.PostalCode" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Country</label>
+            <input v-model="form.Country" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Fax</label>
+            <input v-model="form.Fax" class="border rounded p-2 w-full" />
+          </div>
+          <div>
+            <label class="block text-gray-700">Homepage</label>
+            <input v-model="form.HomePage" class="border rounded p-2 w-full" />
+          </div>
+        </div>
+
+        <div class="flex justify-end space-x-2 mt-6">
+          <button
+            @click="showModal = false"
+            class="px-4 py-2 border rounded hover:bg-gray-100"
+          >
+            Cancel
+          </button>
+          <button
+            @click="isEditing ? updateSupplier() : createSupplier()"
+            class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+          >
+            {{ isEditing ? 'Save Changes' : 'Create Supplier' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import RotateLoader from 'vue-spinner/src/RotateLoader.vue'
+import axios from 'axios'
+
+const state = reactive({
+  suppliers: [],
+  isLoading: true
+})
+const showModal = ref(false)
+const isEditing = ref(false)
+const selectedSupplierId = ref(null)
+
+const form = ref({
+  CompanyName: '',
+  ContactName: '',
+  ContactTitle: '',
+  Address: '',
+  City: '',
+  Region: '',
+  PostalCode: '',
+  Country: '',
+  Phone: '',
+  Fax: '',
+  HomePage: ''
+})
+
+async function fetchSuppliers() {
+  try {
+    const { data } = await axios.get(`${import.meta.env.VITE_API_URL}/suppliers`)
+    state.suppliers = data
+  } finally {
+    state.isLoading = false
+  }
+}
+
+function openCreateModal() {
+  resetForm()
+  isEditing.value = false
+  showModal.value = true
+}
+
+function openEditModal(supplier) {
+  selectedSupplierId.value = supplier.SupplierID
+  form.value = { ...supplier }
+  isEditing.value = true
+  showModal.value = true
+}
+
+function resetForm() {
+  form.value = {
+    CompanyName: '',
+    ContactName: '',
+    ContactTitle: '',
+    Address: '',
+    City: '',
+    Region: '',
+    PostalCode: '',
+    Country: '',
+    Phone: '',
+    Fax: '',
+    HomePage: ''
+  }
+}
+
+async function createSupplier() {
+  try {
+    const { data } = await axios.post('/api/suppliers', form.value)
+    state.suppliers.push(data)
+    showModal.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+async function updateSupplier() {
+  try {
+    await axios.put(`/api/suppliers/${selectedSupplierId.value}`, form.value)
+    const index = state.suppliers.findIndex(s => s.SupplierID === selectedSupplierId.value)
+    if (index !== -1) state.suppliers[index] = { ...form.value, SupplierID: selectedSupplierId.value }
+    showModal.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+async function deleteSupplier(id) {
+  try {
+    await axios.delete(`/api/suppliers/${id}`)
+    state.suppliers = state.suppliers.filter(s => s.SupplierID !== id)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onMounted(fetchSuppliers)
+</script>

src/components/grids/TopCustomerList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Customer {
+  name: string;
+  freight: number;
+}
+
+const props = defineProps<{
+  topCustomers: Customer[];
+  title: string;
+}>();
+console.log("TopCustomerList props: ", props.topCustomers.length);
+</script>
+
+<template>
+    <div class="bg-white p-6 rounded-2xl shadow-md">
+      <h2 class="text-xl font-semibold mb-4">{{title}}</h2>
+      <div class="overflow-x-auto">
+        <table class="w-full text-left table-auto">
+          <thead class="text-gray-600 border-b">
+            <tr>
+              <th class="pb-2">Customer</th>
+              <th class="pb-2">Total Freight</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="customer in props.topCustomers" :key="customer.name" class="border-t hover:bg-gray-50">
+              <td class="py-2">{{ customer.name }}</td>
+              <td class="py-2 text-green-600 font-semibold">${{ customer.freight.toFixed(2) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+</template>

src/components/nav/Navbar.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const profileMenuOpen = ref(false);
+
+function toggleProfileMenu() {
+    profileMenuOpen.value = !profileMenuOpen.value;
+}
+
+// Optional: close profile menu when clicking outside
+function handleClickOutside(event: MouseEvent) {
+    const profile = document.querySelector('.profile-menu');
+    if (profile && !profile.contains(event.target as Node)) {
+        profileMenuOpen.value = false;
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+});
+</script>
+
+<template>
+  <header class="flex items-center justify-between p-2 md:px-8 bg-[#102841]">
+    <!-- Left Side: Logo -->
+    <RouterLink to="/">
+      <img
+        alt="Vue logo"
+        src="@/assets/logo.png"
+        width="75"
+        height="75"
+        class="block"
+      />
+    </RouterLink>
+
+    <!-- Right Side: Navigation and Profile -->
+    <div class="flex items-center space-x-6">
+      <nav class="flex items-center space-x-6 text-sm text-white">
+        <RouterLink
+          to="/"
+          class="hover:text-blue-400"
+          exact-active-class="text-blue-300"
+        >
+          Dashboard
+        </RouterLink>
+        <RouterLink
+          to="/customers"
+          class="hover:text-blue-400"
+          exact-active-class="text-blue-300"
+        >
+          Customer
+        </RouterLink>
+        <RouterLink
+          to="/orders"
+          class="hover:text-blue-400"
+          exact-active-class="text-blue-300"
+        >
+          Order
+        </RouterLink>
+
+        <!-- Admin with Submenu (hover-based) -->
+        <div class="relative group">
+          <button class="hover:text-blue-400 flex items-center focus:outline-none">
+            Admin
+            <svg
+              class="w-4 h-4 ml-1"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </button>
+
+          <div
+            class="absolute right-0 mt-2 w-40 bg-white text-gray-800 rounded-md shadow-lg py-2 z-20 opacity-0 group-hover:opacity-100 invisible group-hover:visible transition-all"
+          >
+            <RouterLink
+              to="/admin/categories"
+              class="block px-4 py-2 hover:bg-gray-100"
+            >
+              Category
+            </RouterLink>
+            <RouterLink
+              to="/admin/products"
+              class="block px-4 py-2 hover:bg-gray-100"
+            >
+              Product
+            </RouterLink>
+            <RouterLink
+              to="/admin/shippers"
+              class="block px-4 py-2 hover:bg-gray-100"
+            >
+              Shipper
+            </RouterLink>
+            <RouterLink
+              to="/admin/suppliers"
+              class="block px-4 py-2 hover:bg-gray-100"
+            >
+              Supplier
+            </RouterLink>
+          </div>
+        </div>
+      </nav>
+
+      <!-- Profile Picture and Dropdown -->
+      <div class="relative profile-menu" @click="toggleProfileMenu">
+        <img
+          src="@/assets/profile.png"
+          alt="Profile"
+          class="w-10 h-10 rounded-full cursor-pointer border-2 border-white"
+        />
+        <div
+          v-if="profileMenuOpen"
+          class="absolute right-0 mt-2 w-32 bg-white rounded-md shadow-lg py-2 z-20"
+        >
+          <RouterLink
+            to="/login"
+            class="block px-4 py-2 text-gray-700 hover:bg-gray-100"
+          >
+            Login
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>

src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+import '@/assets/main.css'
+
+// console.log(process.env.VITE_API_URL);
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,60 @@
+import { createRouter, createWebHistory } from 'vue-router'
+// import HomeView from '../views/HomeView.vue'
+import CustomerView from '@/views/customer/CustomerView.vue'
+import DashboardView from '@/views/dashboard/DashboardView.vue'
+import SupplierView from '@/views/supplier/SupplierView.vue'
+import CategoryView from '@/views/category/CategoryView.vue'
+import ProductView from '@/views/product/ProductView.vue'
+import ShipperView from '@/views/shipper/ShipperView.vue'
+import OrderView from '@/views/order/OrderView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'dashboard',
+      component: DashboardView,
+    },
+    {
+      path: '/customers',
+      name: 'customers',
+      component: CustomerView,
+    },
+    {
+      path: '/admin/categories',
+      name: 'categories',
+      component: CategoryView,
+    },
+    {
+      path: '/admin/products',
+      name: 'products',
+      component: ProductView,
+    },
+    {
+      path: '/admin/suppliers',
+      name: 'suppliers',
+      component: SupplierView,
+    },
+    {
+      path: '/admin/shippers',
+      name: 'shippers',
+      component: ShipperView,
+    },
+    {
+      path: '/orders',
+      name: 'orders',
+      component: OrderView,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue'),
+    },
+  ],
+})
+
+export default router

src/services/orderService.js

@@ -0,0 +1,45 @@
+// src/services/orderService.js
+let orders = [
+    {
+      id: 1,
+      customer: 'Alfreds',
+      employee: 'John Doe',
+      shipper: 'Speedy Express',
+      shipCity: 'Berlin',
+      orderDate: '2025-04-24',
+      shippedDate: '2025-05-01',
+      freight: 32,
+      items: [
+        { id: 1, product: 'Chai', quantity: 10, price: 18 },
+        { id: 2, product: 'Chang', quantity: 5, price: 19 }
+      ]
+    }
+  ]
+  
+  export default {
+    getOrders() {
+      return Promise.resolve([...orders])
+    },
+    saveOrder(order) {
+      if (order.id) {
+        orders = orders.map(o => (o.id === order.id ? order : o))
+      } else {
+        order.id = Date.now()
+        orders.push(order)
+      }
+      return Promise.resolve()
+    },
+    deleteOrder(orderId) {
+      orders = orders.filter(o => o.id !== orderId)
+      return Promise.resolve()
+    },
+    getDropdownData() {
+      return Promise.resolve({
+        customers: ['Alfreds', 'Bon App', 'Around the Horn'],
+        employees: ['John Doe', 'Jane Smith', 'Alice Johnson'],
+        shippers: ['Speedy Express', 'United Package', 'Federal Shipping'],
+        products: ['Chai', 'Chang', 'Aniseed Syrup', 'Chef Anton\'s Gumbo Mix']
+      })
+    }
+  }
+  

src/views/AboutView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/views/HomeView.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <h1 class="text-3xl font-bold underline">
+    Hello world!
+  </h1>
+</template>

src/views/category/CategoryView.vue

@@ -0,0 +1,7 @@
+<script setup>
+import CategoryList from '@/components/grids/CategoryList.vue'
+</script>
+
+<template>
+  <CategoryList />
+</template>

src/views/customer/CustomerView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import CustomerList from '@/components/grids/CustomerList.vue';
+import RotateLoader from 'vue-spinner/src/RotateLoader.vue'
+import axios from 'axios';
+
+//const customers = ref<Array<any>>([]);
+//const loading = ref(true);
+const state = reactive({
+  customers: [],
+  isLoading: true 
+})
+
+onMounted(async () => {
+  try {
+    // const apiUrl = import.meta.env.VITE_API_URL;
+    // console.log(apiUrl)
+    const response = await axios.get(`${import.meta.env.VITE_API_URL}/customers`); // replace with your actual API URL
+    //const data = await response.json();
+    state.customers = response.data;
+  } catch (error) {
+    console.error('Error fetching customers:', error);
+  } finally {
+    state.isLoading = false;
+  }
+});
+</script>
+
+<template>
+  <div class="p-6">
+    <h1 class="text-2xl font-bold mb-6">Customers</h1>
+
+    <div v-if="state.isLoading" class="text-center text-gray-500"><RotateLoader color="#102841"  size="15px" /></div>
+
+    <div v-else>
+      <CustomerList :customers="state.customers" />
+    </div>
+  </div>
+</template>

src/views/dashboard/DashboardView.vue

@@ -0,0 +1,238 @@
+<template>
+  <div v-if="!state.isLoading" class="p-8 bg-gray-100 min-h-screen">
+    <h1 class="text-3xl font-bold mb-8 text-gray-800">Dashboard</h1>
+
+    <!-- KPIs -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
+      <KPICard :totalOrders="`${totalOrders}`" color="blue" name="Total Order" />
+      <KPICard :totalOrders="`${totalFreight.toFixed(2)}`" color="green" name="Total Freight" />
+      <KPICard :totalOrders="`${topCustomer}`" color="purple" name="Top Customer" />
+    </div>
+
+    <!-- Main Charts -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
+      <LineChart :chart-data="freightTrendData" title="Freight Trend by Year" />
+      <BarChart :chart-data="ordersByCountryData" title="Orders by Country" />
+    </div>
+
+    <!-- Additional Charts -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
+      <PieChart :chart-data="ordersByShipperData" title="Order Distribution by Shipper" />
+      <StackedBarChart :chart-data="monthlyOrdersFreightData"  title="Monthly Orders vs Freight"/>
+    </div>
+
+    <!-- Quick Stats Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
+      <KPICard :totalOrders="`${avgFreight.toFixed(2)}`" :color="indigo" name="Avg Freight per Order" />
+      <KPICard :totalOrders="`${totalCountries}`" :color="cyan" name="Countries Served" />
+      <KPICard :totalOrders="`${topShippingCountry}`" :color="pink" name="Top Shipping Country" />
+    </div>
+
+    <!-- Top Customers Table -->
+    <!-- <TopCustomerList :topCustomers="`${topCustomers}`" title="Top 5 Customers by Freight" /> -->
+    <div class="bg-white p-6 rounded-2xl shadow-md">
+      <h2 class="text-xl font-semibold mb-4">{{title}}</h2>
+      <div class="overflow-x-auto">
+        <table class="w-full text-left table-auto">
+          <thead class="text-gray-600 border-b">
+            <tr>
+              <th class="pb-2">Customer</th>
+              <th class="pb-2">Total Freight</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="customer in topCustomers" :key="customer.name" class="border-t hover:bg-gray-50">
+              <td class="py-2">{{ customer.name }}</td>
+              <td class="py-2 text-green-600 font-semibold">${{ customer.freight.toFixed(2) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- Loading Spinner -->
+  <div v-else class="flex justify-center items-center h-screen">
+    <RotateLoader color="#102841" size="15px" />
+  </div>
+</template>
+
+
+<script setup>
+import { ref, computed, onMounted, reactive } from 'vue'
+import LineChart from '@/components/charts/LineChart.vue'
+import BarChart from '@/components/charts/BarChart.vue'
+import PieChart from '@/components/charts/PieChart.vue'
+import StackedBarChart from '@/components/charts/StackedBarChart.vue'
+import axios from 'axios'
+import RotateLoader from 'vue-spinner/src/RotateLoader.vue'
+import KPICard from '@/components/cards/KPICard.vue'
+import TopCustomerList from '@/components/grids/TopCustomerList.vue'
+
+
+// Data State
+const state = reactive({
+  orders: [],
+  isLoading: true
+});
+
+
+
+onMounted(async () => {
+  try {
+    console.log("API_URL: " + import.meta.env.VITE_API_URL);
+
+    const response = await axios.get(`${import.meta.env.VITE_API_URL}/orders`);
+    state.orders = response.data;
+  } catch (err) {
+    console.error(err);
+  } finally {
+    state.isLoading = false;
+  }
+});
+
+// KPIs
+const totalOrders = computed(() => state.orders.length);
+
+const totalFreight = computed(() =>
+  state.orders.reduce((sum, order) => sum + parseFloat(order.Freight), 0)
+);
+
+const customerFreightMap = computed(() => {
+  const map = {};
+  state.orders.forEach(order => {
+    const name = order.Customer.CompanyName;
+    if (!map[name]) map[name] = 0;
+    map[name] += parseFloat(order.Freight);
+  });
+  return map;
+});
+
+const topCustomer = computed(() => {
+  const sorted = Object.entries(customerFreightMap.value).sort((a, b) => b[1] - a[1]);
+  return sorted.length ? sorted[0][0] : 'N/A';
+});
+
+// Freight Trend by Year
+const freightTrendData = computed(() => {
+  const map = {};
+  state.orders.forEach(order => {
+    const year = new Date(order.OrderDate).getFullYear();
+    if (!map[year]) map[year] = 0;
+    map[year] += parseFloat(order.Freight);
+  });
+  return {
+    labels: Object.keys(map),
+    datasets: [{
+      label: 'Freight',
+      data: Object.values(map),
+      fill: false,
+      borderColor: '#3b82f6',
+      tension: 0.4
+    }]
+  };
+});
+
+// Orders by Country
+const ordersByCountryData = computed(() => {
+  const map = {};
+  state.orders.forEach(order => {
+    const country = order.ShipCountry;
+    if (!map[country]) map[country] = 0;
+    map[country] += 1;
+  });
+  return {
+    labels: Object.keys(map),
+    datasets: [{
+      label: 'Orders',
+      data: Object.values(map),
+      backgroundColor: '#002641'
+    }]
+  };
+});
+
+// Orders by Shipper (Pie Chart)
+const ordersByShipperData = computed(() => {
+  const map = {};
+  state.orders.forEach(order => {
+    const shipper = order.ShipVia.CompanyName;
+    if (!map[shipper]) map[shipper] = 0;
+    map[shipper] += 1;
+  });
+  return {
+    labels: Object.keys(map),
+    datasets: [{
+      data: Object.values(map),
+      backgroundColor: ['#3b82f6', '#6366f1', '#f59e0b', '#10b981', '#ef4444'],
+    }]
+  };
+});
+
+// Monthly Orders vs Freight (Stacked Bar)
+const monthlyOrdersFreightData = computed(() => {
+  const ordersMap = {};
+  const freightMap = {};
+
+  state.orders.forEach(order => {
+    const month = new Date(order.OrderDate).toLocaleString('default', { month: 'short', year: 'numeric' });
+    if (!ordersMap[month]) ordersMap[month] = 0;
+    if (!freightMap[month]) freightMap[month] = 0;
+    ordersMap[month]++;
+    freightMap[month] += parseFloat(order.Freight);
+  });
+
+  const months = Object.keys(ordersMap);
+  return {
+    labels: months,
+    datasets: [
+      {
+        label: 'Orders',
+        data: months.map(m => ordersMap[m]),
+        backgroundColor: '#3b82f6',
+      },
+      {
+        label: 'Freight',
+        data: months.map(m => freightMap[m]),
+        backgroundColor: '#10b981',
+      }
+    ]
+  };
+});
+
+// Quick Stats
+const avgFreight = computed(() => {
+  return totalFreight.value / (totalOrders.value || 1);
+});
+
+const totalCountries = computed(() => {
+  const countries = new Set(state.orders.map(order => order.ShipCountry));
+  return countries.size;
+});
+
+const topShippingCountry = computed(() => {
+  const map = {};
+  state.orders.forEach(order => {
+    const country = order.ShipCountry;
+    if (!map[country]) map[country] = 0;
+    map[country]++;
+  });
+
+  const sorted = Object.entries(map).sort((a, b) => b[1] - a[1]);
+  return sorted.length ? sorted[0][0] : 'N/A';
+});
+
+// Top Customers for Table
+// const topCustomers = ref([]);
+
+const topCustomers = computed(() => {
+  const entries = Object.entries(customerFreightMap.value);
+  return entries
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 5)
+    .map(([name, freight]) => ({ name, freight }));
+});
+</script>
+
+<style scoped>
+/* Optional: Add extra styling for better looks */
+</style>

src/views/order/OrderView.vue

@@ -0,0 +1,7 @@
+<script setup>
+import OrderList from '@/components/grids/OrderList.vue'
+</script>
+
+<template>
+  <OrderList />
+</template>

src/views/product/ProductView.vue

@@ -0,0 +1,7 @@
+<script setup>
+import ProductList from '@/components/grids/ProductList.vue'
+</script>
+
+<template>
+  <ProductList />
+</template>

src/views/shipper/ShipperView.vue

@@ -0,0 +1,7 @@
+<script setup>
+import ShipperList from '@/components/grids/ShipperList.vue'
+</script>
+
+<template>
+  <ShipperList />
+</template>

src/views/supplier/SupplierView.vue

@@ -0,0 +1,7 @@
+<script setup>
+import SupplierList from '@/components/grids/SupplierList.vue'
+</script>
+
+<template>
+  <SupplierList />
+</template>

tsconfig.app.json.txt

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

tsconfig.json

@@ -0,0 +1,31 @@
+{
+    "compilerOptions": {
+      "target": "esnext",
+      "module": "esnext",
+      "moduleResolution": "node",
+      "strict": true,
+      "jsx": "preserve",
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true,
+      "resolveJsonModule": true,
+      "allowSyntheticDefaultImports": true,
+      "baseUrl": "./",
+      "outDir": "./dist",
+      "paths": {
+        "@/*": ["src/*"]
+      }
+    },
+    "include": [
+      "src/**/*.ts",
+      "src/**/*.d.ts",
+      "src/**/*.tsx",
+      "src/**/*.vue",
+      "./env.d.ts",
+    ],
+    "exclude": [
+      "node_modules",
+      "dist"
+    ]
+  }
+  

tsconfig.json.txt

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

tsconfig.node.json.txt

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

vite.config.ts

@@ -0,0 +1,43 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+
+  console.log(`Vite is running in ${mode} mode`);
+
+  return {
+
+    base: '/', // or '/your-subfolder/',
+    plugins: [
+      vue(),
+      vueDevTools(),
+      tailwindcss(),
+    ],
+    server: {
+      port: 3000,
+      proxy: {
+        '/api': {
+          target: 'http://localhost:3004',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '/api'),
+          ws: false
+        }
+      },
+      watch: {
+        ignored: [
+          '**/*.json',   // <-- Add this
+        ]
+      }
+    },
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      },
+    },
+  }
+})