@crm-market/template-shared 1.0.0

package/components/Products/RecentlyViewed.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="recently-viewed-area pb-60 products-page">
+    <div class="container position-relative">
+      <div
+        class="d-lg-flex align-items-center justify-content-between text-center mb-27 mt-minus-6 border-top pt-4"
+      >
+        <h3 class="fs-3 mb-0 mb-1 mb-sm-0">Recently Viewed</h3>
+        <div>
+          <NuxtLink to="/products" class="read-more">
+            <span>See All Deals</span>
+            <i class="ri-arrow-right-up-line ms-1"></i>
+          </NuxtLink>
+        </div>
+      </div>
+      <div class="row justify-content-center g-0">
+        <div class="col-c-20">
+          <div class="single-product-telemobile-item">
+            <div class="product-img position-relative">
+              <NuxtLink to="/product-details" class="d-block">
+                <img src="~/assets/images/product-1.png" alt="product" />
+              </NuxtLink>
+              <div
+                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
+              >
+                <span class="minus-count">-11%</span>
+                <button class="border-0 wish-btn">
+                  <i class="ri-heart-line"></i>
+                  <i class="ri-heart-fill d-none"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Favorite
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+            <div class="product-content">
+              <NuxtLink to="/product-details" class="title">
+                Microwave Oven With LED Lighting - 700 Watts, 0.7 cu ft
+              </NuxtLink>
+              <div class="d-flex gap-1 review">
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <span>(5 Reviews)</span>
+              </div>
+              <h3>$399 <del>$450</del></h3>
+              <div class="d-flex sold-stock gap-4 align-items-center">
+                <span class="sold">620 Sold</span>
+                <span class="stock">
+                  <i class="ri-check-line"></i> 150 In Stock
+                </span>
+              </div>
+              <div
+                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
+              >
+                <span class="delivery">
+                  <i class="ri-truck-line"></i>
+                  Free Delivery
+                </span>
+                <button class="cart-btn">
+                  <i class="ri-shopping-cart-line"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Add To Cart
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-c-20">
+          <div class="single-product-telemobile-item">
+            <div class="product-img position-relative">
+              <NuxtLink to="/product-details" class="d-block">
+                <img src="~/assets/images/product-6.png" alt="product" />
+              </NuxtLink>
+              <div
+                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
+              >
+                <span class="minus-count">-15%</span>
+                <button class="border-0 wish-btn">
+                  <i class="ri-heart-line"></i>
+                  <i class="ri-heart-fill d-none"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Favorite
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+            <div class="product-content">
+              <NuxtLink to="/product-details" class="title">
+                Multiplatform Wireless Noise-Cancelling Gaming Headset
+              </NuxtLink>
+              <div class="d-flex gap-1 review">
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <span>(18 Reviews)</span>
+              </div>
+              <h3>$279 <del>$329</del></h3>
+              <div class="d-flex sold-stock gap-4 align-items-center">
+                <span class="sold">20 Sold</span>
+                <span class="stock">
+                  <i class="ri-check-line"></i>
+                  78 In Stock
+                </span>
+              </div>
+              <div
+                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
+              >
+                <span class="delivery">
+                  <i class="ri-truck-line"></i>
+                  Free Delivery
+                </span>
+                <button class="cart-btn">
+                  <i class="ri-shopping-cart-line"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Add To Cart
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-c-20">
+          <div class="single-product-telemobile-item">
+            <div class="product-img position-relative">
+              <NuxtLink to="/product-details" class="d-block">
+                <img src="~/assets/images/product-7.png" alt="product" />
+              </NuxtLink>
+              <div
+                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
+              >
+                <span class="minus-count">-40%</span>
+                <button class="border-0 wish-btn">
+                  <i class="ri-heart-line"></i>
+                  <i class="ri-heart-fill d-none"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Favorite
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+            <div class="product-content">
+              <NuxtLink to="/product-details" class="title">
+                GPS Smartwatch with Bright Touchscreen Display
+              </NuxtLink>
+              <div class="d-flex gap-1 review">
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <span>(24 Reviews)</span>
+              </div>
+              <h3>$119 <del>$199</del></h3>
+              <div class="d-flex sold-stock gap-4 align-items-center">
+                <span class="sold">435 Sold</span>
+                <span class="stock">
+                  <i class="ri-check-line"></i>
+                  180 In Stock
+                </span>
+              </div>
+              <div
+                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
+              >
+                <span class="delivery">
+                  <i class="ri-truck-line"></i>
+                  Free Delivery
+                </span>
+                <button class="cart-btn">
+                  <i class="ri-shopping-cart-line"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Add To Cart
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-c-20">
+          <div class="single-product-telemobile-item">
+            <div class="product-img position-relative">
+              <NuxtLink to="/product-details" class="d-block">
+                <img src="~/assets/images/product-8.png" alt="product" />
+              </NuxtLink>
+              <div
+                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
+              >
+                <span class="minus-count">-20%</span>
+                <button class="border-0 wish-btn">
+                  <i class="ri-heart-line"></i>
+                  <i class="ri-heart-fill d-none"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Favorite
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+            <div class="product-content">
+              <NuxtLink to="/product-details" class="title">
+                SAMSUNG 32-Inch Class QLED 4K Q60C Series Quantum HDR
+              </NuxtLink>
+              <div class="d-flex gap-1 review">
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <span>(19 Reviews)</span>
+              </div>
+              <h3>$397 <del>$497</del></h3>
+              <div class="d-flex sold-stock gap-4 align-items-center">
+                <span class="sold">35 Sold</span>
+                <span class="stock">
+                  <i class="ri-check-line"></i>
+                  125 In Stock
+                </span>
+              </div>
+              <div
+                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
+              >
+                <span class="delivery">
+                  <i class="ri-truck-line"></i>
+                  Free Delivery
+                </span>
+                <button class="cart-btn">
+                  <i class="ri-shopping-cart-line"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Add To Cart
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-c-20">
+          <div class="single-product-telemobile-item">
+            <div class="product-img position-relative">
+              <NuxtLink to="/product-details" class="d-block">
+                <img src="~/assets/images/product-9.png" alt="product" />
+              </NuxtLink>
+              <div
+                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
+              >
+                <span class="minus-count">-10%</span>
+                <button class="border-0 wish-btn">
+                  <i class="ri-heart-line"></i>
+                  <i class="ri-heart-fill d-none"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Favorite
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+            <div class="product-content">
+              <NuxtLink to="/product-details" class="title">
+                Apple MacBook Pro 16.2" with Liquid Retina XDR Display
+              </NuxtLink>
+              <div class="d-flex gap-1 review">
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <i class="flaticon-star"></i>
+                <span>(76 Reviews)</span>
+              </div>
+              <h3>$3,499 <del>$3,799</del></h3>
+              <div class="d-flex sold-stock gap-4 align-items-center">
+                <span class="sold">348 Sold</span>
+                <span class="stock">
+                  <i class="ri-check-line"></i>
+                  245 In Stock
+                </span>
+              </div>
+              <div
+                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
+              >
+                <span class="delivery">
+                  <i class="ri-truck-line"></i>
+                  Free Delivery
+                </span>
+                <button class="cart-btn">
+                  <i class="ri-shopping-cart-line"></i>
+                  <v-tooltip activator="parent" location="top">
+                    Add To Cart
+                  </v-tooltip>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RecentlyViewed",
+};
+</script>

package/components/Products/index.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="products-area products-page ptb-60">
+    <div class="container">
+      <v-row>
+        <!-- Sidebar filters -->
+        <v-col
+          cols="12"
+          xl="2"
+          lg="3"
+          md="3"
+          class="mb-4 mt-xxl-0 overflow-hidden"
+        >
+          <div class="sidebar product-sidebar">
+            <!-- Categories filter -->
+            <div class="single-sidebar-widget">
+              <h3>Filter By Categories</h3>
+              <ul class="ps-0 mb-0 list-unstyled filter-selecet">
+                <li v-for="category in topLevelCategories" :key="category.id">
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="radio"
+                      :value="category.id"
+                      :id="`cat-${category.id}`"
+                      v-model="selectedCategoryId"
+                      name="categoryFilter"
+                    />
+                    <label class="form-check-label" :for="`cat-${category.id}`">
+                      {{ category.name }}
+                    </label>
+                  </div>
+                </li>
+                <li v-if="selectedCategoryId">
+                  <a href="javascript:void(0)" class="text-primary fs-13" @click="selectedCategoryId = ''">
+                    Clear filter
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            <!-- Price filter -->
+            <div class="single-sidebar-widget">
+              <h3>Price Range</h3>
+              <div class="d-flex gap-2 align-items-center">
+                <input
+                  type="number"
+                  class="form-control form-control-sm"
+                  placeholder="Min"
+                  v-model.number="minPrice"
+                  min="0"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  class="form-control form-control-sm"
+                  placeholder="Max"
+                  v-model.number="maxPrice"
+                  min="0"
+                />
+              </div>
+              <button
+                class="btn btn-sm btn-outline-primary mt-2 w-100"
+                @click="applyFilters"
+              >
+                Apply
+              </button>
+            </div>
+
+            <!-- Sort -->
+            <div class="single-sidebar-widget">
+              <h3>Sort By</h3>
+              <select class="form-select form-select-sm" v-model="sortBy">
+                <option value="newest">Newest</option>
+                <option value="price-asc">Price: Low to High</option>
+                <option value="price-desc">Price: High to Low</option>
+                <option value="name">Name A-Z</option>
+              </select>
+            </div>
+          </div>
+        </v-col>
+
+        <!-- Products grid -->
+        <v-col cols="12" xl="10" lg="9" md="9">
+          <!-- Search info -->
+          <div class="d-flex align-items-center justify-content-between mb-3" v-if="searchQuery || selectedCategoryId">
+            <p class="mb-0 text-muted">
+              <span v-if="searchQuery">Search: "{{ searchQuery }}"</span>
+              <span v-if="selectedCategoryName"> | Category: {{ selectedCategoryName }}</span>
+              <span v-if="totalProducts"> | {{ totalProducts }} products found</span>
+            </p>
+            <button class="btn btn-sm btn-outline-secondary" @click="clearAllFilters">
+              Clear all
+            </button>
+          </div>
+
+          <!-- Products count and total -->
+          <div class="d-flex align-items-center justify-content-between mb-3" v-else>
+            <p class="mb-0 text-muted">{{ totalProducts }} products</p>
+          </div>
+
+          <!-- Loading -->
+          <div v-if="loading" class="text-center py-5">
+            <div class="spinner-border text-primary" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          </div>
+
+          <!-- Products grid -->
+          <div class="row g-3" v-else-if="products.length > 0">
+            <div
+              v-for="product in products"
+              :key="product.id"
+              class="col-6 col-lg-4 col-xl-3"
+            >
+              <CommonProductCard :product="product" />
+            </div>
+          </div>
+
+          <!-- No products -->
+          <div v-else class="text-center py-5">
+            <i class="ri-shopping-bag-line fs-1 text-muted"></i>
+            <p class="mt-3 text-muted">No products found</p>
+          </div>
+
+          <!-- Pagination -->
+          <div class="d-flex justify-content-center mt-4" v-if="totalPages > 1">
+            <nav>
+              <ul class="pagination">
+                <li class="page-item" :class="{ disabled: currentPage <= 1 }">
+                  <a class="page-link" href="javascript:void(0)" @click="goToPage(currentPage - 1)">
+                    <i class="ri-arrow-left-line"></i>
+                  </a>
+                </li>
+                <li
+                  v-for="page in visiblePages"
+                  :key="page"
+                  class="page-item"
+                  :class="{ active: page === currentPage }"
+                >
+                  <a class="page-link" href="javascript:void(0)" @click="goToPage(page)">
+                    {{ page }}
+                  </a>
+                </li>
+                <li class="page-item" :class="{ disabled: currentPage >= totalPages }">
+                  <a class="page-link" href="javascript:void(0)" @click="goToPage(currentPage + 1)">
+                    <i class="ri-arrow-right-line"></i>
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch, onMounted } from "vue";
+
+export default defineComponent({
+  name: "ProductsIndex",
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const { fetchProducts, products, loading } = useProducts();
+    const { topLevelCategories, getCategoryById } = useCategories();
+
+    const selectedCategoryId = ref('');
+    const minPrice = ref<number | undefined>(undefined);
+    const maxPrice = ref<number | undefined>(undefined);
+    const sortBy = ref('newest');
+    const searchQuery = ref('');
+    const currentPage = ref(1);
+    const totalProducts = ref(0);
+    const perPage = 20;
+
+    const selectedCategoryName = computed(() => {
+      if (!selectedCategoryId.value) return '';
+      const cat = getCategoryById(selectedCategoryId.value);
+      return cat?.name || '';
+    });
+
+    const totalPages = computed(() => Math.ceil(totalProducts.value / perPage));
+
+    const visiblePages = computed(() => {
+      const pages: number[] = [];
+      const total = totalPages.value;
+      const current = currentPage.value;
+      const start = Math.max(1, current - 2);
+      const end = Math.min(total, current + 2);
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+      return pages;
+    });
+
+    const loadProducts = async () => {
+      const sortParts = sortBy.value.split('-');
+      const sortField = sortParts[0] as any;
+      const sortOrder = sortParts[1] as 'asc' | 'desc' | undefined;
+
+      try {
+        const result = await fetchProducts({
+          categoryId: selectedCategoryId.value || undefined,
+          minPrice: minPrice.value,
+          maxPrice: maxPrice.value,
+          search: searchQuery.value || undefined,
+          sortBy: sortField === 'price' ? 'price' : sortField === 'name' ? 'name' : 'newest',
+          sortOrder: sortOrder || (sortField === 'price' ? 'asc' : 'desc'),
+        });
+        totalProducts.value = result?.length || 0;
+      } catch (e) {
+        console.error('Error loading products:', e);
+      }
+    };
+
+    const applyFilters = () => {
+      currentPage.value = 1;
+      syncToUrl();
+      loadProducts();
+    };
+
+    const clearAllFilters = () => {
+      selectedCategoryId.value = '';
+      minPrice.value = undefined;
+      maxPrice.value = undefined;
+      searchQuery.value = '';
+      sortBy.value = 'newest';
+      currentPage.value = 1;
+      router.push('/products');
+      loadProducts();
+    };
+
+    const goToPage = (page: number) => {
+      if (page < 1 || page > totalPages.value) return;
+      currentPage.value = page;
+      syncToUrl();
+      loadProducts();
+    };
+
+    const syncToUrl = () => {
+      const query: any = {};
+      if (selectedCategoryId.value) query.categoryId = selectedCategoryId.value;
+      if (searchQuery.value) query.search = searchQuery.value;
+      if (minPrice.value) query.minPrice = minPrice.value;
+      if (maxPrice.value) query.maxPrice = maxPrice.value;
+      if (sortBy.value !== 'newest') query.sortBy = sortBy.value;
+      if (currentPage.value > 1) query.page = currentPage.value;
+      router.replace({ path: '/products', query });
+    };
+
+    const syncFromUrl = () => {
+      const q = route.query;
+      if (q.categoryId) selectedCategoryId.value = q.categoryId as string;
+      if (q.search) searchQuery.value = q.search as string;
+      if (q.minPrice) minPrice.value = Number(q.minPrice);
+      if (q.maxPrice) maxPrice.value = Number(q.maxPrice);
+      if (q.sortBy) sortBy.value = q.sortBy as string;
+      if (q.page) currentPage.value = Number(q.page);
+    };
+
+    // Watch for category and sort changes
+    watch(selectedCategoryId, () => applyFilters());
+    watch(sortBy, () => applyFilters());
+
+    onMounted(() => {
+      syncFromUrl();
+      loadProducts();
+    });
+
+    return {
+      products,
+      loading,
+      topLevelCategories,
+      selectedCategoryId,
+      selectedCategoryName,
+      minPrice,
+      maxPrice,
+      sortBy,
+      searchQuery,
+      currentPage,
+      totalProducts,
+      totalPages,
+      visiblePages,
+      applyFilters,
+      clearAllFilters,
+      goToPage,
+    };
+  },
+});
+</script>

package/components/Register/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="authentication-area ptb-60">
+    <div class="container">
+      <div class="authentication-content">
+        <div class="row">
+          <div class="col-lg-5">
+            <div class="login h-100 text-center">
+              <img
+                src="~/assets/images/register.png"
+                class="h-100 object-fit-cover"
+                alt="register"
+              />
+            </div>
+          </div>
+          <div class="col-lg-7">
+            <div class="authentication-form">
+              <ul class="nav nav-tabs login-tabs" id="myTab" role="tablist">
+                <li class="nav-item" role="presentation">
+                  <NuxtLink to="/login" class="nav-link">Login</NuxtLink>
+                </li>
+                <li class="nav-item" role="presentation">
+                  <NuxtLink to="/register" class="nav-link active">
+                    Register
+                  </NuxtLink>
+                </li>
+              </ul>
+              <p>
+                If you have an account, sign in with your username or email
+                address.
+              </p>
+              <form>
+                <div class="form-group mb-4">
+                  <label class="label">Username *</label>
+                  <input
+                    type="text"
+                    class="form-control"
+                    placeholder="Enter your user name"
+                  />
+                </div>
+                <div class="form-group mb-4">
+                  <label class="label">Email Address *</label>
+                  <input
+                    type="email"
+                    class="form-control"
+                    placeholder="Enter your  email address"
+                  />
+                </div>
+                <div class="form-group mb-4">
+                  <label class="label">Password *</label>
+                  <input
+                    type="password"
+                    class="form-control"
+                    placeholder="Enter  password"
+                  />
+                </div>
+                <div class="form-group mb-4">
+                  <button
+                    type="submit"
+                    class="btn btn-warning btn-pill text-white w-100 d-block"
+                  >
+                    Register
+                  </button>
+                </div>
+                <div class="form-group mb-0">
+                  <p class="text-secondary ms-1 text-primary">
+                    Already have an account?
+                    <NuxtLink
+                      to="/login"
+                      class="text-decoration-none text-primary"
+                    >
+                      Login
+                    </NuxtLink>
+                  </p>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Register",
+};
+</script>