Hugging Face's logo

Spaces:
Vincentran
/
ecommerce-intelligence
Runtime error

App Files Community
ecommerce-intelligence
File size: 2,290 Bytes
67c9653
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<template>
  <div class="container">
    <header>
      <h1>🛍️ E-Commerce Product Intelligence</h1>
      <p>Browse, search, and analyze thousands of products</p>
    </header>

    <Insights />
    <Charts />
    <SearchFilter @search="handleSearch" />
    <Table
      :products="products"
      :currentPage="currentPage"
      :totalPages="totalPages"
      @page-change="changePage"
    />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Insights from './components/Insights.vue'
import Charts from './components/Charts.vue'
import SearchFilter from './components/SearchFilter.vue'
import Table from './components/Table.vue'

export default defineComponent({
  name: 'App',
  components: { Insights, Charts, SearchFilter, Table },
  data() {
    return {
      products: [],
      currentPage: 1,
      totalPages: 1,
      filters: {}
    }
  },
  methods: {
    async loadProducts() {
      try {
        const params = new URLSearchParams({
          page: this.currentPage,
          limit: 50
        })
        if (this.filters.category) params.append('category', this.filters.category)
        if (this.filters.minPrice) params.append('min_price', this.filters.minPrice)
        if (this.filters.maxPrice) params.append('max_price', this.filters.maxPrice)
        if (this.filters.minRating) params.append('min_rating', this.filters.minRating)

        const res = await fetch(`/filter?${params}`)
        const data = await res.json()
        this.products = data.data
        this.totalPages = data.total_pages
      } catch (error) {
        console.error('Failed to load products:', error)
      }
    },
    changePage(page) {
      this.currentPage = page
      this.loadProducts()
    },
    handleSearch(filters) {
      this.filters = filters
      this.currentPage = 1
      this.loadProducts()
    }
  },
  mounted() {
    this.loadProducts()
  }
})
</script>

<style>
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

header {
  background: white;
  padding: 30px;
  text-align: center;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

header h1 {
  color: #667eea;
  font-size: 2.5em;
  margin-bottom: 10px;
}

header p {
  color: #666;
  font-size: 1.2em;
}
</style>