@crm-market/template-shared 1.0.0

package/components/Common/ProductCard.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="product-card">
+    <div class="product-img position-relative">
+      <NuxtLink :to="`/product-details?id=${product.id}`">
+        <img
+          :src="productImage"
+          :alt="product.name"
+          class="w-100 object-fit-cover"
+          style="height: 200px;"
+        />
+      </NuxtLink>
+      <div class="product-badges" v-if="hasDiscount">
+        <span class="badge bg-danger">
+          -{{ discountPercent }}%
+        </span>
+      </div>
+      <div class="product-actions">
+        <button
+          class="btn btn-sm"
+          :class="inCart ? 'btn-success' : 'btn-outline-primary'"
+          @click="handleAddToCart"
+          :title="inCart ? 'In cart' : 'Add to cart'"
+        >
+          <i :class="inCart ? 'ri-check-line' : 'ri-shopping-cart-line'"></i>
+        </button>
+      </div>
+    </div>
+    <div class="product-info p-2">
+      <NuxtLink :to="`/product-details?id=${product.id}`" class="text-decoration-none">
+        <h6 class="product-name mb-1 text-truncate">{{ product.name }}</h6>
+      </NuxtLink>
+      <div class="product-rating mb-1" v-if="product.rating">
+        <i
+          v-for="star in 5"
+          :key="star"
+          :class="star <= Math.round(product.rating) ? 'ri-star-fill text-warning' : 'ri-star-line text-muted'"
+          class="fs-12"
+        ></i>
+        <span class="text-muted fs-12 ms-1">({{ product.reviews || 0 }})</span>
+      </div>
+      <div class="product-price">
+        <span v-if="hasDiscount" class="text-decoration-line-through text-muted me-1 fs-13">
+          ${{ product.price.toFixed(2) }}
+        </span>
+        <span class="fw-bold" :class="hasDiscount ? 'text-danger' : ''">
+          ${{ effectivePrice.toFixed(2) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import { resolveImageUrl } from "~/utils/image";
+
+export default defineComponent({
+  name: "ProductCard",
+  props: {
+    product: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { addToCart, isInCart } = useCart();
+
+    const productImage = computed(() => {
+      const images = props.product.images;
+      if (images && images.length > 0) {
+        return resolveImageUrl(images[0]);
+      }
+      return '';
+    });
+
+    const hasDiscount = computed(() =>
+      props.product.discountPrice && props.product.discountPrice < props.product.price
+    );
+
+    const effectivePrice = computed(() =>
+      hasDiscount.value ? props.product.discountPrice : props.product.price
+    );
+
+    const discountPercent = computed(() => {
+      if (!hasDiscount.value) return 0;
+      return Math.round(((props.product.price - props.product.discountPrice) / props.product.price) * 100);
+    });
+
+    const inCart = computed(() => isInCart(props.product.id));
+
+    const handleAddToCart = () => {
+      if (!inCart.value) {
+        addToCart({
+          productId: props.product.id,
+          name: props.product.name,
+          price: props.product.price,
+          discountPrice: props.product.discountPrice,
+          image: props.product.images?.[0] || '',
+        });
+      }
+    };
+
+    return {
+      productImage,
+      hasDiscount,
+      effectivePrice,
+      discountPercent,
+      inCart,
+      handleAddToCart,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.product-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: box-shadow 0.3s;
+  background: #fff;
+}
+.product-card:hover {
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+.product-img {
+  overflow: hidden;
+  background: #f8f9fa;
+}
+.product-badges {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.product-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.product-card:hover .product-actions {
+  opacity: 1;
+}
+.product-name {
+  font-size: 14px;
+  color: #333;
+}
+.product-name:hover {
+  color: var(--primary-color, #0d6efd);
+}
+</style>

package/components/Common/Services.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="services-area pt-60 pb-35">
+    <div class="container">
+      <v-row class="justify-content-center">
+        <v-col cols="12" lg="3" sm="6">
+          <div class="d-flex align-items-center single-servives-item">
+            <div class="flex-shrink-0">
+              <img src="~/assets/images/shipped.png" alt="shipped" />
+            </div>
+            <div class="flex-grow-1 ms-3">
+              <h3>Fast Delivery</h3>
+              <span>Experience Lightning-Fast Delivery</span>
+            </div>
+          </div>
+        </v-col>
+        <v-col cols="12" lg="3" sm="6">
+          <div class="d-flex align-items-center single-servives-item">
+            <div class="flex-shrink-0">
+              <img src="~/assets/images/credit.png" alt="shipped" />
+            </div>
+            <div class="flex-grow-1 ms-3">
+              <h3>Secured Payment</h3>
+              <span>Shop with Confidence</span>
+            </div>
+          </div>
+        </v-col>
+        <v-col cols="12" lg="3" sm="6">
+          <div class="d-flex align-items-center single-servives-item">
+            <div class="flex-shrink-0">
+              <img src="~/assets/images/wallet.png" alt="shipped" />
+            </div>
+            <div class="flex-grow-1 ms-3">
+              <h3>Money Back</h3>
+              <span>100% Money-Back Guarantee</span>
+            </div>
+          </div>
+        </v-col>
+        <v-col cols="12" lg="3" sm="6">
+          <div class="d-flex align-items-center single-servives-item">
+            <div class="flex-shrink-0">
+              <img src="~/assets/images/headphones.png" alt="shipped" />
+            </div>
+            <div class="flex-grow-1 ms-3">
+              <h3>24/7 Support</h3>
+              <span>Always Here for You</span>
+            </div>
+          </div>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Services",
+};
+</script>

package/components/Contact/ContactForm.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="contact-area pb-60">
+    <div class="container">
+      <div class="authentication-content p-50 mw-100">
+        <div class="row">
+          <div class="col-lg-5 mb-4 mb-lg-0">
+            <div class="login h-100 text-center">
+              <img
+                src="~/assets/images/contact-us.png"
+                class="h-100 object-fit-cover"
+                alt="contact-us"
+              />
+            </div>
+          </div>
+          <div class="col-lg-7">
+            <div class="authentication-form form-wrap">
+              <h3 class="title mb-2">Get In Touch</h3>
+              <p>
+                Your Gateway to Excellence: Contact Us and Unlock a World of
+                Possibilities
+              </p>
+
+              <form>
+                <div class="row">
+                  <div class="col-lg-6">
+                    <div class="form-group mb-4">
+                      <label class="label">Your Name *</label>
+                      <input
+                        type="text"
+                        class="form-control"
+                        placeholder="Enter your name"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-lg-6">
+                    <div class="form-group mb-4">
+                      <label class="label">Your Email *</label>
+                      <input
+                        type="email"
+                        class="form-control"
+                        placeholder="Enter your  email"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="form-group mb-4">
+                      <label class="label">Your Subject *</label>
+                      <input
+                        type="text"
+                        class="form-control"
+                        placeholder="Your subject"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-lg-12">
+                    <div class="form-group mb-4">
+                      <label class="label">Your Message *</label>
+                      <textarea
+                        class="form-control"
+                        placeholder="Write message"
+                        cols="30"
+                        rows="5"
+                      ></textarea>
+                    </div>
+                  </div>
+
+                  <div class="col-lg-12">
+                    <div class="form-group mb-0">
+                      <button
+                        type="submit"
+                        class="btn btn-warning btn-pill text-white"
+                      >
+                        Submit Now
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ContactForm",
+};
+</script>

package/components/Contact/ContactInfo.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="contact-info-area pt-60 pb-35">
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-lg-4 col-md-6">
+          <div class="single-contact-info-item">
+            <div class="d-sm-flex">
+              <div class="flex-shrink-0">
+                <i class="flaticon-placeholder"></i>
+              </div>
+              <div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
+                <h3>United Kingdom</h3>
+                <p>6391 Elgin St. Celina, Delaware 10299</p>
+                <a href="#" class="tell">(208) 555-0112</a>
+                <a
+                  href="mailto:support@tuaninfo.com"
+                  class="text-decoration-underline text-primary"
+                >
+                  support@tuaninfo.com
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+          <div class="single-contact-info-item">
+            <div class="d-sm-flex">
+              <div class="flex-shrink-0">
+                <i class="flaticon-placeholder"></i>
+              </div>
+              <div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
+                <h3>Toronto Canada</h3>
+                <p>1901 Thornridge Cir. Shiloh, Hawaii</p>
+                <a href="tel:(252)555-0126" class="tell">(252) 555-0126</a>
+                <a
+                  href="mailto:support@tuaninfo.com"
+                  class="text-decoration-underline text-primary"
+                >
+                  support@tuaninfo.com
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-4 col-md-6">
+          <div class="single-contact-info-item">
+            <div class="d-sm-flex">
+              <div class="flex-shrink-0">
+                <i class="flaticon-placeholder"></i>
+              </div>
+              <div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
+                <h3>Saint Barthélemy</h3>
+                <p>4517 Washington Ave. Manchester</p>
+                <a href="tel:(505)555-0125" class="tell">(505)555-0125</a>
+                <a
+                  href="mailto:support@tuaninfo.com"
+                  class="text-decoration-underline text-primary"
+                >
+                  support@tuaninfo.com
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ContactInfo",
+};
+</script>

package/components/Dashboard/RecentOrder.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="cart-area recent-order">
+    <h3 class="mb-3">Recent Order</h3>
+    <form class="cart-controller mb-0">
+      <div class="cart-table table-responsive">
+        <table class="table table-bordered align-middle">
+          <thead>
+            <tr>
+              <th scope="col">Trash</th>
+              <th scope="col">Product</th>
+              <th scope="col"></th>
+              <th scope="col">Order</th>
+              <th scope="col">Quantity</th>
+              <th scope="col">Status</th>
+              <th scope="col">Total</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td class="trash">
+                <a href="#" class="remove">
+                  <i class="ri-delete-bin-line"></i>
+                </a>
+              </td>
+              <td class="product-thumbnail">
+                <NuxtLink to="/product-details">
+                  <img src="~/assets/images/product-6.png" alt="Image" />
+                </NuxtLink>
+              </td>
+
+              <td class="product-name">
+                <NuxtLink to="/product-details" class="title">
+                  Multiplatform Wireless Noise-Cancelling Gaming Headset
+                </NuxtLink>
+              </td>
+
+              <td class="product-price">
+                <span class="unit-amount">#001</span>
+              </td>
+
+              <td class="product-price">
+                <span class="unit-amount">01</span>
+              </td>
+
+              <td class="product-subtotal">
+                <span class="subtotal-amount">Paid</span>
+              </td>
+
+              <td class="product-subtotal">
+                <span class="subtotal-amount">$279.00</span>
+              </td>
+            </tr>
+
+            <tr>
+              <td class="trash">
+                <a href="#" class="remove">
+                  <i class="ri-delete-bin-line"></i>
+                </a>
+              </td>
+
+              <td class="product-thumbnail">
+                <NuxtLink to="/product-details">
+                  <img src="~/assets/images/product-7.png" alt="Image" />
+                </NuxtLink>
+              </td>
+
+              <td class="product-name">
+                <NuxtLink to="/product-details" class="title">
+                  GPS Smartwatch with Bright Touchscreen Display
+                </NuxtLink>
+              </td>
+
+              <td class="product-price">
+                <span class="unit-amount">#005</span>
+              </td>
+
+              <td class="product-price">
+                <span class="unit-amount">02</span>
+              </td>
+
+              <td class="product-subtotal">
+                <span class="subtotal-amount">Pending</span>
+              </td>
+
+              <td class="product-subtotal">
+                <span class="subtotal-amount">$119.00</span>
+              </td>
+            </tr>
+
+            <tr>
+              <td class="trash">
+                <a href="#" class="remove">
+                  <i class="ri-delete-bin-line"></i>
+                </a>
+              </td>
+
+              <td class="product-thumbnail">
+                <NuxtLink to="/product-details">
+                  <img src="~/assets/images/product-8.png" alt="Image" />
+                </NuxtLink>
+              </td>
+
+              <td class="product-name">
+                <NuxtLink to="/product-details" class="title">
+                  SAMSUNG 32-Inch Class QLED 4K Q60C Series Quantum HDR
+                </NuxtLink>
+              </td>
+
+              <td class="product-price">
+                <span class="unit-amount">#009</span>
+              </td>
+
+              <td class="product-price">
+                <span class="unit-amount">02</span>
+              </td>
+
+              <td class="product-subtotal">
+                <span class="subtotal-amount">Failed</span>
+              </td>
+
+              <td class="product-subtotal">
+                <span class="subtotal-amount">$397.00</span>
+              </td>
+            </tr>
+
+            <tr>
+              <td class="trash">
+                <a href="#" class="remove">
+                  <i class="ri-delete-bin-line"></i>
+                </a>
+              </td>
+
+              <td class="product-thumbnail">
+                <NuxtLink to="/product-details">
+                  <img src="~/assets/images/product-9.png" alt="Image" />
+                </NuxtLink>
+              </td>
+
+              <td class="product-name">
+                <NuxtLink to="/product-details" class="title">
+                  Apple MacBook Pro 16.2" with Liquid Retina XDR Display
+                </NuxtLink>
+              </td>
+
+              <td class="product-price">
+                <span class="unit-amount">#0062</span>
+              </td>
+
+              <td class="product-price">
+                <span class="unit-amount">02</span>
+              </td>
+
+              <td class="product-subtotal">
+                <span class="subtotal-amount">Paid</span>
+              </td>
+
+              <td class="product-subtotal">
+                <span class="subtotal-amount">$3499.00</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RecentOrder",
+};
+</script>

package/components/Dashboard/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="dashboard-area ptb-60">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-4">
+          <CommonDashboardNavigation />
+        </div>
+
+        <div class="col-lg-8">
+          <div class="row">
+            <div class="col-lg-6">
+              <div class="profile-bar">
+                <div class="profile-info">
+                  <img src="~/assets/images/user-9.jpg" alt="user" />
+
+                  <h3>
+                    <NuxtLink to="/edit-profile">Amanda McCarter</NuxtLink>
+                  </h3>
+                  <a href="mailto:contact@tuan.com">contact@tuan.com</a>
+                  <a href="tel:973-635-8147">973-635-8147</a>
+                </div>
+
+                <div class="edit-profiles">
+                  <NuxtLink
+                    to="/edit-profile"
+                    class="btn btn-warning text-white"
+                  >
+                    Edit Profile
+                  </NuxtLink>
+                </div>
+              </div>
+            </div>
+
+            <div class="col-lg-6">
+              <div class="billing-address-bar">
+                <h3>Default</h3>
+                <ul>
+                  <li class="p-0">Amanda McCarter</li>
+                  <li>
+                    <span>Address:</span>
+                    4 Shady Pines Drive Bowling Green
+                  </li>
+                </ul>
+
+                <ul>
+                  <li>
+                    <span>Phone:</span>
+                    <a href="tel:270-957-9995">270-957-9995</a>
+                  </li>
+                  <li>
+                    <span>Email:</span>
+                    <a href="mailto:contact@tuan.com">contact@tuan.com</a>
+                  </li>
+                </ul>
+
+                <div class="edit-address">
+                  <NuxtLink
+                    to="/edit-address"
+                    class="btn btn-warning text-white"
+                  >
+                    Edit Address
+                  </NuxtLink>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <DashboardRecentOrder />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Dashboard",
+};
+</script>