From 556da71bab0ae3c1cd43c70bd2eb26515c52d289 Mon Sep 17 00:00:00 2001
From: Arunit <arunitchakraborty2006@gmail.com>
Date: Sun, 27 Jul 2025 19:21:11 +0530
Subject: [PATCH] feat(frontend): added filtering,searching and sorting

- added new FilterPanel to handle filters
- used two way bindings for reactivity

Closes #231
---
 backend/.gitignore                   |   1 +
 frontend/components/FilterPanel.vue  | 154 ++++++++++++++
 frontend/components/ProductTable.vue | 300 ++++++++++++++-------------
 frontend/pages/manageProduct.vue     |  85 ++++++--
 4 files changed, 377 insertions(+), 163 deletions(-)
 create mode 100644 frontend/components/FilterPanel.vue

diff --git a/backend/.gitignore b/backend/.gitignore
index 82e83ca..3bde13f 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -104,3 +104,4 @@ db.sqlite3
 venv
 .env
 .vscode
+.python-version
\ No newline at end of file
diff --git a/frontend/components/FilterPanel.vue b/frontend/components/FilterPanel.vue
new file mode 100644
index 0000000..9ce4674
--- /dev/null
+++ b/frontend/components/FilterPanel.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="p-4 border rounded-xl shadow-lg bg-white w-full mt-6">
+    <h2 class="text-xl font-bold mb-4">Filters</h2>
+    <div
+      class="grid p-2 w-full justify-between gap-4 grid-flow-col grid-rows-2 place-items-center"
+    >
+      <!-- Type -->
+      <div>
+        <label class="block mb-2 text-center">Type:</label>
+        <input type="text" v-model="typeProxy" class="input-field" />
+      </div>
+
+      <!-- Category -->
+      <div>
+        <label class="block mb-2 text-center">Category:</label>
+        <select v-model="categoryProxy" class="input-field custom-select">
+          <option value="">All</option>
+          <option value="clothing">Clothing</option>
+          <option value="rsvp">RSVP</option>
+        </select>
+      </div>
+
+      <!-- Min Price -->
+      <div class="flex flex-col items-center">
+        <label class="block mb-2 text-center">Min Price:</label>
+        <input type="number" v-model.number="minProxy" class="input-field" />
+      </div>
+
+      <!-- Max Price -->
+      <div class="flex flex-col items-center">
+        <label class="block mb-2 text-center">Max Price:</label>
+        <input type="number" v-model.number="maxProxy" class="input-field" />
+      </div>
+
+      <!-- Color -->
+      <div class="flex flex-col items-center">
+        <label class="block mb-2 text-center">Color:</label>
+        <input type="text" v-model="colorProxy" class="input-field" />
+      </div>
+
+      <!-- Size -->
+      <div class="flex flex-col items-center">
+        <label class="block mb-2 text-center">Size:</label>
+        <input type="text" v-model="sizeProxy" class="input-field" />
+      </div>
+
+      <!-- Sort By -->
+      <div>
+        <label class="block mb-2 text-center">Sort By:</label>
+        <select v-model="sortProxy" class="input-field custom-select">
+          <option value="">None</option>
+          <option value="name">Name (A-Z)</option>
+          <option value="-name">Name (Z-A)</option>
+          <option value="price">Price (Low to High)</option>
+          <option value="-price">Price (High to Low)</option>
+          <option value="created_at">Newest</option>
+          <option value="-created_at">Oldest</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  selectedType: String,
+  selectedCategory: String,
+  minPrice: Number,
+  maxPrice: Number,
+  selectedColor: String,
+  selectedSize: String,
+  selectedSort: String,
+});
+
+const emit = defineEmits([
+  "update:selectedType",
+  "update:selectedCategory",
+  "update:minPrice",
+  "update:maxPrice",
+  "update:selectedColor",
+  "update:selectedSize",
+  "update:selectedSort",
+]);
+
+const typeProxy = computed({
+  get: () => props.selectedType,
+  set: (val) => emit("update:selectedType", val),
+});
+
+const categoryProxy = computed({
+  get: () => props.selectedCategory,
+  set: (val) => emit("update:selectedCategory", val),
+});
+
+const minProxy = computed({
+  get: () => props.minPrice,
+  set: (val) => emit("update:minPrice", val),
+});
+
+const maxProxy = computed({
+  get: () => props.maxPrice,
+  set: (val) => emit("update:maxPrice", val),
+});
+
+const colorProxy = computed({
+  get: () => props.selectedColor,
+  set: (val) => emit("update:selectedColor", val),
+});
+
+const sizeProxy = computed({
+  get: () => props.selectedSize,
+  set: (val) => emit("update:selectedSize", val),
+});
+
+const sortProxy = computed({
+  get: () => props.selectedSort,
+  set: (val) => emit("update:selectedSort", val),
+});
+</script>
+
+<style scoped>
+.input-field {
+  @apply border-2 rounded-md px-3 py-2 w-40 focus:border-[#E43232] focus:outline-none shadow-lg;
+  height: 42px;
+  background-color: white;
+}
+
+/* Custom dropdown arrow and appearance */
+.custom-select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20fill%3D%22%23E43232%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2012a.75.75%200%2001-.53-.22l-3-3a.75.75%200%20111.06-1.06L10%2010.19l2.47-2.47a.75.75%200%20011.06%201.06l-3%203a.75.75%200%2001-.53.22z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  padding-right: 2.5rem;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Default options */
+.custom-select option {
+  background-color: white;
+  color: black;
+}
+
+/* Attempt to style hovered options — not guaranteed across all browsers */
+.custom-select option:hover {
+  background-color: #e43232;
+  color: white;
+}
+</style>
diff --git a/frontend/components/ProductTable.vue b/frontend/components/ProductTable.vue
index 8ffc23d..8ce3349 100644
--- a/frontend/components/ProductTable.vue
+++ b/frontend/components/ProductTable.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="overflow-x-auto w-11/12 flex flex-col justify-center mt-20 p-2">
+  <div class="overflow-x-auto w-full flex flex-col justify-center mt-20 p-2">
     <div v-if="pending" class="text-center text-lg text-gray-500 my-10">
       Loading Products...
     </div>
     <div v-else-if="error" class="text-center text-lg text-gray-500 my-10">
-      error loading products
+      Error loading products: {{ error }}
     </div>
     <table v-else class="w-full shadow-lg rounded-xl">
       <thead class="min-w-full bg-gray-50">
@@ -17,18 +17,19 @@
               :checked="isAllSelected"
             />
           </th>
-          <th class="p-5"><p class="text-gray-500">IMAGE</p></th>
-          <th class="p-5"><p class="text-gray-500">PRODUCT NAME</p></th>
-          <th class="p-5"><p class="text-gray-500">SIZE</p></th>
-          <th class="p-5"><p class="text-gray-500">STOCK</p></th>
-          <th class="p-5"><p class="text-gray-500">PRICE</p></th>
-          <th class="p-5"><p class="text-gray-500">DATE</p></th>
-          <th class="p-5"><p class="text-gray-500">ACTIONS</p></th>
+          <th class="p-5 text-gray-500">IMAGE</th>
+          <th class="p-5 text-gray-500">PRODUCT NAME</th>
+          <th class="p-5 text-gray-500">SIZE</th>
+          <th class="p-5 text-gray-500">STOCK</th>
+          <th class="p-5 text-gray-500">PRICE</th>
+          <th class="p-5 text-gray-500">DATE</th>
+          <th class="p-5 text-gray-500">ACTIONS</th>
         </tr>
       </thead>
+
       <tbody class="min-w-full">
         <tr v-for="product in paginatedProducts" :key="product.id">
-          <td class="p-5 flex justify-center">
+          <td class="p-5 text-center">
             <input
               type="checkbox"
               class="w-5 h-5 cursor-pointer"
@@ -39,32 +40,26 @@
           <td class="p-5">
             <img
               :src="product.image"
-              alt=""
+              alt="Product"
               class="w-12 h-12 object-cover rounded"
             />
           </td>
-          <td class="p-5">
-            <p class="text-center">{{ product.name }}</p>
-          </td>
-          <td class="p-5">
-            <p class="text-center">{{ product.size }}</p>
-          </td>
+          <td class="p-5 text-center">{{ product.name }}</td>
+          <td class="p-5 text-center">{{ product.size }}</td>
           <td class="p-5">
             <div
               :class="[
-                'p-2 rounded-2xl shadow flex justify-evenly items-center gap-1 w-40 mr-auto ml-auto',
+                'p-2 rounded-2xl shadow flex justify-evenly items-center gap-1 w-40 mx-auto text-xs',
                 product.stock > 0
-                  ? 'bg-green-500/50 text-green-800 text-xs'
-                  : 'bg-red-500/50 text-red-800 text-xs',
+                  ? 'bg-green-500/50 text-green-800'
+                  : 'bg-red-500/50 text-red-800',
               ]"
             >
               <img
-                v-if="product.stock > 0"
-                v-bind:src="correct"
-                :alt="available"
+                :src="product.stock > 0 ? correct : wrong"
+                :alt="product.stock > 0 ? 'available' : 'not available'"
                 class="block w-5"
               />
-              <img v-else :src="wrong" alt="not available" class="block w-5" />
               {{
                 product.stock > 0
                   ? `In Stock (${product.stock})`
@@ -72,28 +67,20 @@
               }}
             </div>
           </td>
-          <td class="p-5">
-            <p class="text-center">Rs.{{ product.price }}</p>
-          </td>
-          <td class="p-5">
-            <p class="text-gray-500 text-center">Last Modified</p>
-            <p class="text-center">{{ product.dateModified }}</p>
+          <td class="p-5 text-center">Rs.{{ product.price }}</td>
+          <td class="p-5 text-center">
+            <p class="text-gray-500">Last Modified</p>
+            <p>{{ product.dateModified }}</p>
           </td>
-          <td class="flex gap-2 p-5 justify-center">
-            <div
-              class="bg-[#3B82F6] w-10 rounded-lg cursor-pointer p-1 hover:-translate-y-1 active:translate-y-1 transition-all duration-200 ease-in-out"
-              @click="viewProduct(product)"
-            >
+          <td class="p-5 flex gap-2 justify-center">
+            <div class="action-btn bg-blue-500" @click="viewProduct(product)">
               <img :src="view" alt="view product" class="block p-1" />
             </div>
-            <div
-              class="bg-[#F59E0B] w-10 rounded-lg cursor-pointer p-1 hover:-translate-y-1 active:translate-y-1 transition-all duration-200 ease-in-out"
-              @click="editProduct(product)"
-            >
+            <div class="action-btn bg-yellow-500" @click="editProduct(product)">
               <img :src="edit" alt="edit product" class="block p-1" />
             </div>
             <div
-              class="bg-[#EF4444] w-10 rounded-lg cursor-pointer p-1 hover:-translate-y-1 active:translate-y-1 transition-all duration-200 ease-in-out"
+              class="action-btn bg-red-500"
               @click="deleteProduct(product.id)"
             >
               <img :src="deleteIcon" alt="delete product" class="block p-1" />
@@ -107,59 +94,40 @@
       class="flex justify-between items-center mt-6 p-4 rounded-lg shadow-md"
     >
       <div class="text-sm text-gray-600">
-        Showing {{ startIndex + 1 }}-{{
-          Math.min(endIndex, filteredProducts.length)
-        }}
-        of {{ filteredProducts.length }} results
+        Showing {{ (currentPage - 1) * itemsPerPage + 1 }} -
+        {{ Math.min(currentPage * itemsPerPage, totalCount) }} of
+        {{ totalCount }} results
       </div>
 
       <div class="flex items-center gap-2">
         <button
           @click="goToPage(currentPage - 1)"
           :disabled="currentPage === 1"
-          :class="[
-            'px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-            currentPage === 1
-              ? 'text-gray-400 cursor-not-allowed'
-              : 'text-gray-700 hover:bg-gray-100',
-          ]"
+          :class="buttonClass(currentPage === 1)"
         >
           <img :src="prevBtn" alt="previous" class="w-1/2" />
         </button>
 
         <div class="flex gap-1">
-          <button
-            v-if="startPage > 1"
-            @click="goToPage(1)"
-            class="px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100"
-          >
+          <button v-if="startPage > 1" @click="goToPage(1)" class="page-btn">
             1
           </button>
-
-          <span v-if="startPage > 2" class="px-3 py-2 text-gray-500">...</span>
+          <span v-if="startPage > 2" class="ellipsis">...</span>
 
           <button
             v-for="page in visiblePages"
             :key="page"
             @click="goToPage(page)"
-            :class="[
-              'px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-              page === currentPage
-                ? 'bg-red-600 text-white'
-                : 'text-gray-700 hover:bg-gray-100',
-            ]"
+            :class="pageClass(page)"
           >
             {{ page }}
           </button>
 
-          <span v-if="endPage < totalPages - 1" class="px-3 py-2 text-gray-500"
-            >...</span
-          >
-
+          <span v-if="endPage < totalPages - 1" class="ellipsis">...</span>
           <button
             v-if="endPage < totalPages"
             @click="goToPage(totalPages)"
-            class="px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100"
+            class="page-btn"
           >
             {{ totalPages }}
           </button>
@@ -168,12 +136,7 @@
         <button
           @click="goToPage(currentPage + 1)"
           :disabled="currentPage === totalPages"
-          :class="[
-            'px-3 py-2 rounded-lg text-sm font-medium transition-colors',
-            currentPage === totalPages
-              ? 'text-gray-400 cursor-not-allowed'
-              : 'text-gray-700 hover:bg-gray-100',
-          ]"
+          :class="buttonClass(currentPage === totalPages)"
         >
           <img :src="nextBtn" alt="next" class="w-1/2" />
         </button>
@@ -195,117 +158,172 @@ import { useFetch } from "#app";
 
 const config = useRuntimeConfig();
 
-const {
-  data: fetchedProducts,
-  pending,
-  error,
-} = await useFetch(`${config.public.API_BASE_URL}/api/products/`);
-
-const products = ref([]);
-watchEffect(() => {
-  if (fetchedProducts.value) {
-    products.value = fetchedProducts.value;
+function buildQuery(filters) {
+  const query = new URLSearchParams();
+  for (const key in filters) {
+    const value = filters[key];
+    if (value !== null && value !== undefined && value !== "") {
+      query.append(key, value);
+    }
   }
+  return query.toString();
+}
+
+const props = defineProps({
+  searchTerm: String,
+  selectedType: String,
+  minPrice: Number,
+  maxPrice: Number,
+  selectedSort: String,
+  selectedCategory: String,
+  selectedColor: String,
+  selectedSize: String,
 });
 
 const currentPage = ref(1);
 const itemsPerPage = ref(15);
 const selectedProducts = ref([]);
 
-const filteredProducts = computed(() => products.value);
-
-const totalPages = computed(() =>
-  Math.ceil(filteredProducts.value.length / itemsPerPage.value)
+const queryString = computed(() =>
+  buildQuery({
+    search: props.searchTerm,
+    type: props.selectedType,
+    category: props.selectedCategory,
+    color: props.selectedColor,
+    size: props.selectedSize,
+    min_price: props.minPrice,
+    max_price: props.maxPrice,
+    ordering: props.selectedSort,
+    page: currentPage.value,
+  }).toString()
 );
 
-const startIndex = computed(() => (currentPage.value - 1) * itemsPerPage.value);
-
-const endIndex = computed(() => startIndex.value + itemsPerPage.value);
+const {
+  data: fetchedProducts,
+  pending,
+  error,
+  refresh,
+} = useFetch(
+  () => `${config.public.API_BASE_URL}/api/products/?${queryString.value}`
+);
 
-const paginatedProducts = computed(() =>
-  filteredProducts.value.slice(startIndex.value, endIndex.value)
+const paginatedProducts = computed(() => fetchedProducts.value?.results || []);
+const totalCount = computed(() => fetchedProducts.value?.count || 0);
+const totalPages = computed(() =>
+  Math.ceil(totalCount.value / itemsPerPage.value)
 );
 
 const isAllSelected = computed(() => {
-  const currentPageProductIds = paginatedProducts.value.map((p) => p.id);
+  const ids = paginatedProducts.value.map((p) => p.id);
   return (
-    currentPageProductIds.length > 0 &&
-    currentPageProductIds.every((id) => selectedProducts.value.includes(id))
+    ids.length > 0 && ids.every((id) => selectedProducts.value.includes(id))
   );
 });
 
 const visiblePageCount = 5;
-const startPage = computed(() => {
-  const start = Math.max(
-    1,
-    currentPage.value - Math.floor(visiblePageCount / 2)
-  );
-  return Math.min(start, Math.max(1, totalPages.value - visiblePageCount + 1));
-});
-
+const startPage = computed(() =>
+  Math.min(
+    Math.max(1, currentPage.value - Math.floor(visiblePageCount / 2)),
+    Math.max(1, totalPages.value - visiblePageCount + 1)
+  )
+);
 const endPage = computed(() =>
   Math.min(totalPages.value, startPage.value + visiblePageCount - 1)
 );
-
-const visiblePages = computed(() => {
-  const pages = [];
-  for (let i = startPage.value; i <= endPage.value; i++) {
-    pages.push(i);
-  }
-  return pages;
-});
+const visiblePages = computed(() =>
+  Array.from(
+    { length: endPage.value - startPage.value + 1 },
+    (_, i) => startPage.value + i
+  )
+);
 
 const goToPage = (page) => {
-  if (page >= 1 && page <= totalPages.value) {
-    currentPage.value = page;
-  }
+  if (page >= 1 && page <= totalPages.value) currentPage.value = page;
 };
 
 const toggleSelectAll = () => {
-  const currentPageProductIds = paginatedProducts.value.map((p) => p.id);
-
+  const ids = paginatedProducts.value.map((p) => p.id);
   if (isAllSelected.value) {
     selectedProducts.value = selectedProducts.value.filter(
-      (id) => !currentPageProductIds.includes(id)
+      (id) => !ids.includes(id)
     );
   } else {
-    const newSelections = currentPageProductIds.filter(
-      (id) => !selectedProducts.value.includes(id)
+    selectedProducts.value.push(
+      ...ids.filter((id) => !selectedProducts.value.includes(id))
     );
-    selectedProducts.value.push(...newSelections);
   }
 };
 
-const deleteProduct = (productId) => {
-  if (confirm("Are you sure you want to delete this product?")) {
-    products.value = products.value.filter(
-      (product) => product.id !== productId
+const deleteProduct = async (id) => {
+  if (!confirm("Are you sure you want to delete this product?")) return;
+  try {
+    const res = await fetch(
+      `${config.public.API_BASE_URL}/api/products/${id}`,
+      { method: "DELETE" }
     );
-
-    selectedProducts.value = selectedProducts.value.filter(
-      (id) => id !== productId
-    );
-
-    if (paginatedProducts.value.length === 0 && currentPage.value > 1) {
-      currentPage.value = currentPage.value - 1;
-    }
+    if (!res.ok) throw new Error("Failed to delete product");
+    selectedProducts.value = selectedProducts.value.filter((pid) => pid !== id);
+    if (paginatedProducts.value.length === 1 && currentPage.value > 1)
+      currentPage.value--;
+  } catch (err) {
+    console.error("Delete Failed:", err);
+    alert("Something went wrong while trying to delete the product.");
   }
 };
 
-const editProduct = (product) => {
-  console.log("Edit product:", product);
-};
-
-const viewProduct = (product) => {
-  console.log("View product:", product);
-};
+const viewProduct = (product) => console.log("View product:", product);
+const editProduct = (product) => console.log("Edit product:", product);
 
 watch(
-  () => products.value.length,
+  () => paginatedProducts.value.length,
   () => {
     if (currentPage.value > totalPages.value) {
       currentPage.value = Math.max(1, totalPages.value);
     }
   }
 );
+
+const pageClass = (page) =>
+  page === currentPage.value
+    ? "bg-red-600 text-white px-3 py-2 rounded-lg text-sm font-medium"
+    : "text-gray-700 hover:bg-gray-100 px-3 py-2 rounded-lg text-sm font-medium";
+
+const buttonClass = (disabled) => [
+  "px-3 py-2 rounded-lg text-sm font-medium transition-colors",
+  disabled
+    ? "text-gray-400 cursor-not-allowed"
+    : "text-gray-700 hover:bg-gray-100",
+];
 </script>
+
+<style scoped>
+.action-btn {
+  width: 2.5rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  transition: transform 0.2s ease-in-out;
+}
+.action-btn:hover {
+  transform: translateY(-2px);
+}
+.action-btn:active {
+  transform: translateY(1px);
+}
+.page-btn {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  background-color: transparent;
+  transition: background-color 0.2s;
+}
+.page-btn:hover {
+  background-color: #f3f4f6;
+}
+.ellipsis {
+  padding: 0.5rem 0.75rem;
+  color: #6b7280;
+}
+</style>
diff --git a/frontend/pages/manageProduct.vue b/frontend/pages/manageProduct.vue
index 2033b07..6475eaa 100644
--- a/frontend/pages/manageProduct.vue
+++ b/frontend/pages/manageProduct.vue
@@ -1,18 +1,11 @@
-<script setup>
-import add from "../assets/productManagement/add.svg";
-import filter from "../assets/productManagement/filter.svg";
-import search from "../assets/productManagement/search.svg";
-import ProductTable from "~/components/ProductTable.vue";
-</script>
-
 <template>
-  <div class="flex flex-col items-center max-w-screen min-h-screen">
-    <div class="w-11/12 p-2 mt-8 mb-8 rounded-xl shadow-md">
+  <div class="flex flex-col items-center w-full min-h-screen mr-3">
+    <div class="w-full p-2 mt-8 mb-8 rounded-xl shadow-md">
       <h2 class="text-4xl font-extrabold p-2">Product Management</h2>
       <p class="text-gray-500 p-2">Manage your products and inventory</p>
     </div>
     <div
-      class="flex justify-between items-center w-11/12 shadow-md p-5 rounded-xl"
+      class="flex justify-between items-center w-full shadow-md p-5 rounded-xl"
     >
       <div
         class="bg-[#E43232] rounded-md p-3 shadow-lg flex justify-evenly items-center cursor-pointer hover:-translate-y-1 active:translate-y-1 transition-all duration-200 ease-in-out"
@@ -30,36 +23,84 @@ import ProductTable from "~/components/ProductTable.vue";
             class="block w-10 p-2 cursor-pointer hover:-translate-y-1 active:translate-y-1 transition-all duration-200 ease-in-out"
           />
           <input
-            type="text"
+            v-model="searchTerm"
+            type="search"
             placeholder="Search Products..."
             class="block p-2 focus-within:outline-none"
           />
         </div>
         <div
+          @click="toggleFilterBar"
           class="flex justify-evenly p-4 border-gray-200 border-2 rounded-md cursor-pointer hover:-translate-y-1 active:translate-y-1 transition-all duration-200 ease-in-out"
         >
           <img :src="filter" alt="filter" class="block w-6" />
           <p>Filter</p>
         </div>
         <div
-          class="p-4 bg-[#E43232] rounded-md shadow-lg w-20 flex items-center justify-center cursor-pointer hover:-translate-y-1 active:translate-y-1 transition-all duration-200 ease-in-out"
-        >
-          <p class="text-white">Add</p>
-        </div>
-        <div
+          @click="clearFilters"
           class="p-4 bg-[#F3F4F6] rounded-md shadow-lg w-20 flex items-center justify-center cursor-pointer border-gray-200 border-2 hover:-translate-y-1 active:translate-y-1 transition-all duration-200 ease-in-out"
         >
           <p>Clear</p>
         </div>
       </div>
     </div>
-    <ProductTable />
+    <FilterPanel
+      v-if="showFilter"
+      v-model:selectedType="selectedType"
+      v-model:minPrice="minPrice"
+      v-model:maxPrice="maxPrice"
+      v-model:selectedSort="selectedSort"
+      v-model:selectedCategory="selectedCategory"
+      v-model:selectedColor="selectedColor"
+      v-model:selectedSize="selectedSize"
+    />
+    <ProductTable
+      :searchTerm="searchTerm"
+      :selectedType="selectedType"
+      :minPrice="minPrice"
+      :maxPrice="maxPrice"
+      :selectedSort="selectedSort"
+      :selectedCategory="selectedCategory"
+      :selectedColor="selectedColor"
+      :selectedSize="selectedSize"
+    />
   </div>
 </template>
 
-<script>
-// definePageMeta({
-//   layout: "admin-layout",
-//   middleware: "admin-auth",
-// });
+<script setup>
+import add from "../assets/productManagement/add.svg";
+import filter from "../assets/productManagement/filter.svg";
+import search from "../assets/productManagement/search.svg";
+import ProductTable from "~/components/ProductTable.vue";
+import FilterPanel from "~/components/FilterPanel.vue";
+
+const searchTerm = ref("");
+const selectedType = ref("");
+const minPrice = ref(null);
+const maxPrice = ref(null);
+const selectedSort = ref("");
+const selectedCategory = ref("");
+const selectedColor = ref("");
+const selectedSize = ref("");
+const showFilter = ref(false);
+
+const toggleFilterBar = () => {
+  showFilter.value = !showFilter.value;
+};
+
+const clearFilters = () => {
+  searchTerm.value = "";
+  selectedType.value = "";
+  minPrice.value = null;
+  maxPrice.value = null;
+  selectedSort.value = "";
+  selectedCategory.value = "";
+  selectedColor.value = "";
+  selectedSize.value = "";
+};
+
+definePageMeta({
+  layout: "admin-layout",
+  middleware: "admin-auth",
+});
 </script>