changes for the api integration

content_quality_tool_public/static/css/attr-extraction.css

@@ -121,4 +121,92 @@ td.thumb-cell { width: 60px; }
 .stat .label { color: var(--muted); font-size:.85rem; }
 .stat .value { font-size: 1.25rem; font-weight: 800; }
 
-.empty { color: var(--muted); padding: 6px 0; }
+.empty { color: var(--muted); padding: 6px 0; }
+
+
+
+/* Upload: dropzone + status */
+.dropzone { border: 2px dashed var(--border); padding: 18px; text-align:center; background:#fafbfc; color:#475569; }
+.dropzone.drag { background:#eef6ff; border-color:#93c5fd; }
+
+.file-info { color: var(--muted); font-size:.9rem; }
+
+/* Optional success/error coloring */
+#uploadStatus.success { color: #16a34a; }
+#uploadStatus.error   { color: #ef4444; }
+
+
+
+/* Pagination bar */
+.pagination-bar {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.page-size {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--muted);
+  font-size: .92rem;
+}
+
+.page-size select {
+  border: 1px solid var(--border);
+  background: #fff;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.pager {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.pager-btn {
+  border: 1px solid var(--border);
+  background: #fff;
+  padding: 6px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  font-weight: 600;
+  color: var(--text);
+}
+
+.pager-btn[disabled] {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.page-info {
+  color: var(--muted);
+  font-weight: 600;
+}
+
+/* loader */
+#full-page-loader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6); /* semi-transparent black */
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.loader-overlay .spinner-border {
+    width: 3rem;
+    height: 3rem;
+}

content_quality_tool_public/static/js/attr-extraction.js

@@ -1,24 +1,89 @@
+jQuery.noConflict(); // Release $ to other libraries
+console.log(typeof jQuery);
+// $ = jQuery;
+
+// --- Config ---
+const UPLOAD_API_URL = '/attr/products/upload-excel/'; // TODO: set to your upload endpoint
+const ACCEPT_TYPES = '*'; // e.g., 'image/*,.csv,.xlsx'
+
+var PRODUCT_BASE = [
+    // { id: 1, item_id: 'SKU001', product_name: "Levi's Jeans", product_long_description: 'Classic blue denim jeans with straight fit.', product_short_description: 'Blue denim jeans.', product_type: 'Clothing', image_path: 'media/products/jeans.jpg', image: 'http://127.0.0.1:8000/media/products/jeans.png' },
+    // { id: 2, item_id: 'SKU002', product_name: 'Adidas Running Shoes', product_long_description: 'Lightweight running shoes with breathable mesh and cushioned sole.', product_short_description: "Men's running shoes.", product_type: 'Footwear', image_path: 'media/products/shoes.png', image: 'http://127.0.0.1:8000/media/products/shoes.png' },
+    // { id: 3, item_id: 'SKU003', product_name: 'Nike Sports T-Shirt', product_long_description: 'Moisture-wicking sports tee ideal for training and outdoor activities.', product_short_description: 'Performance t-shirt.', product_type: 'Clothing', image_path: 'media/products/tshirt.png', image: 'http://127.0.0.1:8000/media/products/tshirt.png' },
+    // { id: 4, item_id: 'SKU004', product_name: 'Puma Hoodie', product_long_description: 'Soft fleece hoodie with kangaroo pocket and adjustable drawstring.', product_short_description: 'Casual hoodie.', product_type: 'Clothing', image_path: 'media/products/hoodie.png', image: 'http://127.0.0.1:8000/media/products/hoodie.png' },
+    // { id: 5, item_id: 'SKU005', product_name: 'Ray-Ban Sunglasses', product_long_description: 'Classic aviator sunglasses with UV protection lenses.', product_short_description: 'Aviator sunglasses.', product_type: 'Accessories', image_path: 'media/products/sunglasses.png', image: 'http://127.0.0.1:8000/media/products/sunglasses.png' }
+];
 // --- Data ---
 const mediaUrl = "./../";
-const PRODUCT_BASE = [
-    { id: 1, item_id: 'SKU001', product_name: "Levi's Jeans", product_long_description: 'Classic blue denim jeans with straight fit.', product_short_description: 'Blue denim jeans.', product_type: 'Clothing', image_path: 'media/products/jeans.jpg', image: 'http://127.0.0.1:8000/media/products/jeans.png' },
-    { id: 2, item_id: 'SKU002', product_name: 'Adidas Running Shoes', product_long_description: 'Lightweight running shoes with breathable mesh and cushioned sole.', product_short_description: "Men's running shoes.", product_type: 'Footwear', image_path: 'media/products/shoes.png', image: 'http://127.0.0.1:8000/media/products/shoes.png' },
-    { id: 3, item_id: 'SKU003', product_name: 'Nike Sports T-Shirt', product_long_description: 'Moisture-wicking sports tee ideal for training and outdoor activities.', product_short_description: 'Performance t-shirt.', product_type: 'Clothing', image_path: 'media/products/tshirt.png', image: 'http://127.0.0.1:8000/media/products/tshirt.png' },
-    { id: 4, item_id: 'SKU004', product_name: 'Puma Hoodie', product_long_description: 'Soft fleece hoodie with kangaroo pocket and adjustable drawstring.', product_short_description: 'Casual hoodie.', product_type: 'Clothing', image_path: 'media/products/hoodie.png', image: 'http://127.0.0.1:8000/media/products/hoodie.png' },
-    { id: 5, item_id: 'SKU005', product_name: 'Ray-Ban Sunglasses', product_long_description: 'Classic aviator sunglasses with UV protection lenses.', product_short_description: 'Aviator sunglasses.', product_type: 'Accessories', image_path: 'media/products/sunglasses.png', image: 'http://127.0.0.1:8000/media/products/sunglasses.png' }
-];
 
-const FAKE_API_RESPONSE = {
-    results: [
-    { product_id: 'SKU001', mandatory: { 'Clothing Neck Style': 'V-Neck', 'Clothing Top Style': 'Pullover', 'Condition': 'New', 'T-Shirt Type': 'Classic T-Shirt' }, additional: { 'Material': 'Turkish Pima Cotton', 'Size': 'Large', 'Color': 'Blue', 'Brand': 'Sierra', 'Fabric Type': 'Soft & Breathable', 'Fabric Composition': '95% Turkish Pima cotton', 'Care Instructions': 'Machine Washable', 'Sizes Available': 'S-XL' } },
-    { product_id: 'SKU002', mandatory: { 'Shoe Type': 'Running', 'Closure': 'Lace-Up', 'Condition': 'New', 'Gender': 'Men' }, additional: { 'Upper Material': 'Engineered Mesh', 'Midsole': 'EVA Foam', 'Outsole': 'Rubber', 'Color': 'Black/White', 'Brand': 'Adidas', 'Size': 'UK 9', 'Care Instructions': 'Surface Clean' } },
-    { product_id: 'SKU003', mandatory: { 'Clothing Neck Style': 'Crew Neck', 'Sleeve Length': 'Short Sleeve', 'Condition': 'New', 'T-Shirt Type': 'Performance' }, additional: { 'Material': 'Polyester Blend', 'Color': 'Red', 'Brand': 'Nike', 'Size': 'Medium', 'Fabric Technology': 'Dri-FIT', 'Care Instructions': 'Machine Wash Cold' } },
-    { product_id: 'SKU004', mandatory: { 'Clothing Top Style': 'Hoodie', 'Closure': 'Pullover', 'Condition': 'New', 'Fit': 'Relaxed' }, additional: { 'Material': 'Cotton Fleece', 'Color': 'Charcoal', 'Brand': 'Puma', 'Size': 'Large', 'Care Instructions': 'Machine Wash Warm' } },
-    { product_id: 'SKU005', mandatory: { 'Accessory Type': 'Sunglasses', 'Frame Style': 'Aviator', 'Condition': 'New', 'Lens Protection': 'UV 400' }, additional: { 'Frame Material': 'Metal', 'Lens Color': 'Green', 'Brand': 'Ray-Ban', 'Size': 'Standard', 'Case Included': 'Yes', 'Care Instructions': 'Clean with microfiber' } }
-    ],
-    total_products: 5,
-    successful: 5,
-    failed: 0
+document.addEventListener('DOMContentLoaded', () => {
+    jQuery('#full-page-loader').show();  
+    fetch('/attr/products', {
+        method: 'GET', // or 'POST' if your API expects POST
+        headers: {
+            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log("data",data);
+        // --- Wire up ---
+        PRODUCT_BASE = data;
+        if(PRODUCT_BASE.length > 0){
+            $('#paginationBar').style.display = 'block';
+        }
+        renderProducts();
+        document.getElementById('btnSubmit').addEventListener('click', submitAttributes);
+        document.getElementById('btnReset').addEventListener('click', resetAll);
+        // document.getElementById('btnSelectAll').addEventListener('click', () => {
+        // if (selectedIds.size === PRODUCT_BASE.length) { selectedIds.clear(); } else { selectedIds = new Set(PRODUCT_BASE.map(p => p.id)); }
+        // // renderProducts();
+        // });
+
+        // Replace your existing Select All listener with this:
+          document.getElementById('btnSelectAll').addEventListener('click', () => {
+            // Use the container for the active layout
+            const container = (layoutMode === 'cards')
+              ? document.getElementById('cardsContainer')
+              : document.getElementById('tableContainer');
+
+            // Collect all visible checkboxes
+            const boxes = Array.from(container.querySelectorAll('input[type="checkbox"]'));
+
+            // If every visible checkbox is already checked, we'll deselect; otherwise select all
+            const allChecked = boxes.length > 0 && boxes.every(cb => cb.checked);
+
+            boxes.forEach(cb => {
+              const target = !allChecked; // true to select, false to deselect
+              if (cb.checked !== target) {
+                cb.checked = target;
+                // Trigger your existing "change" handler so selectedIds & row .selected class update
+                cb.dispatchEvent(new Event('change', { bubbles: true }));
+              }
+            });
+
+            // Update the selection pill text (doesn't re-render the list)
+            updateSelectionInfo();
+          });
+        document.getElementById('btnCards').addEventListener('click', () => setLayout('cards'));
+        document.getElementById('btnTable').addEventListener('click', () => setLayout('table'));
+        jQuery('#full-page-loader').hide();
+        // if (data.success) {
+        // }
+    });
+});
+
+var FAKE_API_RESPONSE = {
+    // results: [
+    // { product_id: 'SKU001', mandatory: { 'Clothing Neck Style': 'V-Neck', 'Clothing Top Style': 'Pullover', 'Condition': 'New', 'T-Shirt Type': 'Classic T-Shirt' }, additional: { 'Material': 'Turkish Pima Cotton', 'Size': 'Large', 'Color': 'Blue', 'Brand': 'Sierra', 'Fabric Type': 'Soft & Breathable', 'Fabric Composition': '95% Turkish Pima cotton', 'Care Instructions': 'Machine Washable', 'Sizes Available': 'S-XL' } },
+    // { product_id: 'SKU002', mandatory: { 'Shoe Type': 'Running', 'Closure': 'Lace-Up', 'Condition': 'New', 'Gender': 'Men' }, additional: { 'Upper Material': 'Engineered Mesh', 'Midsole': 'EVA Foam', 'Outsole': 'Rubber', 'Color': 'Black/White', 'Brand': 'Adidas', 'Size': 'UK 9', 'Care Instructions': 'Surface Clean' } },
+    // { product_id: 'SKU003', mandatory: { 'Clothing Neck Style': 'Crew Neck', 'Sleeve Length': 'Short Sleeve', 'Condition': 'New', 'T-Shirt Type': 'Performance' }, additional: { 'Material': 'Polyester Blend', 'Color': 'Red', 'Brand': 'Nike', 'Size': 'Medium', 'Fabric Technology': 'Dri-FIT', 'Care Instructions': 'Machine Wash Cold' } },
+    // { product_id: 'SKU004', mandatory: { 'Clothing Top Style': 'Hoodie', 'Closure': 'Pullover', 'Condition': 'New', 'Fit': 'Relaxed' }, additional: { 'Material': 'Cotton Fleece', 'Color': 'Charcoal', 'Brand': 'Puma', 'Size': 'Large', 'Care Instructions': 'Machine Wash Warm' } },
+    // { product_id: 'SKU005', mandatory: { 'Accessory Type': 'Sunglasses', 'Frame Style': 'Aviator', 'Condition': 'New', 'Lens Protection': 'UV 400' }, additional: { 'Frame Material': 'Metal', 'Lens Color': 'Green', 'Brand': 'Ray-Ban', 'Size': 'Standard', 'Case Included': 'Yes', 'Care Instructions': 'Clean with microfiber' } }
+    // ],
+    // total_products: 5,
+    // successful: 5,
+    // failed: 0
 };
 
 // --- State ---
@@ -62,27 +127,28 @@ function findApiResultForProduct(p, index, api) { return api.results?.find(r =>
 // --- Cards layout ---
 function createProductCard(p) {
     const row = el('div', 'product');
-    if (selectedIds.has(p.id)) row.classList.add('selected');
+    if (selectedIds.has(p.item_id)) row.classList.add('selected');
 
     const left = el('div', 'thumb');
     const img = new Image(); img.src = mediaUrl+p.image_path || p.image || '';
      img.alt = `${p.product_name} image`;
     console.log("img",img);
-    img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); left.appendChild(fb); };
+    // img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); left.appendChild(fb); };
+    img.onerror = () => { img.src = mediaUrl+"media/images/no-product.png" };
     left.appendChild(img);
 
     const mid = el('div', 'meta');
     const name = el('div', 'name'); name.textContent = p.product_name || '—';
-    const desc = el('div', 'desc'); desc.textContent = p.product_short_description || '';
+    const desc = el('div', 'desc'); desc.innerHTML = p.product_short_description || '';
     const badges = el('div', 'badges');
     const sku = el('span', 'pill'); sku.textContent = `SKU: ${p.item_id || '—'}`; badges.appendChild(sku);
     const type = el('span', 'pill'); type.textContent = p.product_type || '—'; badges.appendChild(type);
-    const long = el('div', 'desc'); long.textContent = p.product_long_description || ''; long.style.marginTop = '4px';
+    const long = el('div', 'desc'); long.innerHTML = p.product_long_description || ''; long.style.marginTop = '4px';
     mid.appendChild(name); mid.appendChild(desc); mid.appendChild(badges); mid.appendChild(long);
 
     const right = el('label', 'select');
-    const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.id);
-    cb.addEventListener('change', () => { setChecked(p.id, cb.checked); row.classList.toggle('selected', cb.checked); });
+    const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.item_id);
+    cb.addEventListener('change', () => { setChecked(p.item_id, cb.checked); row.classList.toggle('selected', cb.checked); });
     const lbl = el('span'); lbl.textContent = 'Select';
     right.appendChild(cb); right.appendChild(lbl);
 
@@ -97,57 +163,133 @@ function createProductCard(p) {
     return row;
 }
 
-function renderProductsCards() {
-    const cards = $('#cardsContainer');
-    cards.innerHTML = '';
-    PRODUCT_BASE.forEach(p => cards.appendChild(createProductCard(p)));
+// function renderProductsCards() {
+//     const cards = $('#cardsContainer');
+//     cards.innerHTML = '';
+//     if(PRODUCT_BASE.length > 0){
+//         PRODUCT_BASE.forEach(p => cards.appendChild(createProductCard(p)));
+//     }else{
+//         cards.innerHTML = "<p>No Products Found.</p>"
+//     }
+// }
+
+
+// Cards layout
+function renderProductsCards(items = getCurrentSlice()) {
+  const cards = document.getElementById('cardsContainer');
+  cards.innerHTML = '';
+  if(items.length > 0){
+    items.forEach(p => cards.appendChild(createProductCard(p)));
+  }else{
+      cards.innerHTML = "<p>No Products Found.</p>"
+  }
 }
 
+
 // --- Table layout ---
 function createMiniThumb(p) {
     const mt = el('div', 'mini-thumb');
     const img = new Image(); img.src = mediaUrl+p.image_path || p.image || ''; img.alt = `${p.product_name} image`;
     console.log("img",img);
-    img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); mt.appendChild(fb); };
+    img.onerror = () => { img.src = mediaUrl+"media/images/no-product.png" };
+    // img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); mt.appendChild(fb); };
     mt.appendChild(img);
     return mt;
 }
 
-function renderProductsTable() {
-    const wrap = $('#tableContainer');
-    wrap.innerHTML = '';
-    const table = el('table');
-    const thead = el('thead'); const trh = el('tr');
-    const headers = ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description'];
-    headers.forEach(h => { const th = el('th'); th.textContent = h; trh.appendChild(th); });
-    thead.appendChild(trh); table.appendChild(thead);
-    const tbody = el('tbody');
-
-    PRODUCT_BASE.forEach(p => {
-    const tr = el('tr'); tr.id = `row-${p.id}`;
-    // Select cell
-    const tdSel = el('td', 'select-cell'); const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.id);
-    cb.addEventListener('change', () => { setChecked(p.id, cb.checked); tr.classList.toggle('selected', cb.checked); }); tdSel.appendChild(cb); tr.appendChild(tdSel);
-    // Image
-    const tdImg = el('td', 'thumb-cell'); tdImg.appendChild(createMiniThumb(p)); tr.appendChild(tdImg);
-    // Product name
-    const tdName = el('td'); tdName.textContent = p.product_name || '—'; tr.appendChild(tdName);
-    // SKU
-    const tdSku = el('td'); tdSku.textContent = p.item_id || '—'; tr.appendChild(tdSku);
-    // Type
-    const tdType = el('td'); const b = el('span', 'badge'); b.textContent = p.product_type || '—'; tdType.appendChild(b); tr.appendChild(tdType);
-    // Short description
-    const tdDesc = el('td'); tdDesc.textContent = p.product_short_description || ''; tr.appendChild(tdDesc);
-
-    tr.addEventListener('click', (e) => { if (e.target.tagName.toLowerCase() !== 'input') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } });
-    tbody.appendChild(tr);
+// function renderProductsTable() {
+//     const wrap = $('#tableContainer');
+//     wrap.innerHTML = '';
+//     const table = el('table');
+//     const thead = el('thead'); const trh = el('tr');
+//     const headers = ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description'];
+//     headers.forEach(h => { const th = el('th'); th.textContent = h; trh.appendChild(th); });
+//     thead.appendChild(trh); table.appendChild(thead);
+//     const tbody = el('tbody');
+//     if(PRODUCT_BASE.length > 0){
+//         PRODUCT_BASE.forEach(p => {
+//         const tr = el('tr'); tr.id = `row-${p.id}`;
+//         // Select cell
+//         const tdSel = el('td', 'select-cell'); const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.id);
+//         cb.addEventListener('change', () => { setChecked(p.id, cb.checked); tr.classList.toggle('selected', cb.checked); }); tdSel.appendChild(cb); tr.appendChild(tdSel);
+//         // Image
+//         const tdImg = el('td', 'thumb-cell'); tdImg.appendChild(createMiniThumb(p)); tr.appendChild(tdImg);
+//         // Product name
+//         const tdName = el('td'); tdName.textContent = p.product_name || '—'; tr.appendChild(tdName);
+//         // SKU
+//         const tdSku = el('td'); tdSku.textContent = p.item_id || '—'; tr.appendChild(tdSku);
+//         // Type
+//         const tdType = el('td'); const b = el('span', 'badge'); b.textContent = p.product_type || '—'; tdType.appendChild(b); tr.appendChild(tdType);
+//         // Short description
+//         const tdDesc = el('td'); tdDesc.innerHTML = p.product_short_description || ''; tr.appendChild(tdDesc);
+
+//         tr.addEventListener('click', (e) => { if (e.target.tagName.toLowerCase() !== 'input') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } });
+//         tbody.appendChild(tr);
+//         });
+//     }else{
+//         const tr = el('tr'); 
+//         // tr.id = `row-${p.id}`;
+//         const tdName = el('td');
+//         tdName.colSpan = 6;
+//         tdName.innerHTML = "No Products Found."
+//         tr.appendChild(tdName);
+//         // tr.colspan = 6;
+//         // tr.innerHTML 
+//         tbody.appendChild(tr);
+//     }
+
+//     table.appendChild(tbody);
+//     wrap.appendChild(table);
+// }
+
+// --- Inline attributes rendering ---
+
+
+// Table layout
+function renderProductsTable(items = getCurrentSlice()) {
+  const wrap = document.getElementById('tableContainer');
+  wrap.innerHTML = '';
+  const table = document.createElement('table');
+  const thead = document.createElement('thead'); const trh = document.createElement('tr');
+  ['Select', 'Image', 'Product', 'SKU', 'Type', 'Short Description'].forEach(h => {
+    const th = document.createElement('th'); th.textContent = h; trh.appendChild(th);
+  });
+  thead.appendChild(trh); table.appendChild(thead);
+  const tbody = document.createElement('tbody');
+  if(items.length > 0 ){
+    items.forEach(p => {
+        const tr = document.createElement('tr'); tr.id = `row-${p.id}`;
+        const tdSel = document.createElement('td'); tdSel.className = 'select-cell';
+        const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = selectedIds.has(p.item_id);
+        cb.addEventListener('change', () => { setChecked(p.item_id, cb.checked); tr.classList.toggle('selected', cb.checked); });
+        tdSel.appendChild(cb); tr.appendChild(tdSel);
+
+        const tdImg = document.createElement('td'); tdImg.className = 'thumb-cell'; tdImg.appendChild(createMiniThumb(p)); tr.appendChild(tdImg);
+        const tdName = document.createElement('td'); tdName.textContent = p.product_name || '—'; tr.appendChild(tdName);
+        const tdSku  = document.createElement('td'); tdSku.textContent = p.item_id || '—'; tr.appendChild(tdSku);
+        const tdType = document.createElement('td'); const b = document.createElement('span'); b.className = 'badge'; b.textContent = p.product_type || '—'; tdType.appendChild(b); tr.appendChild(tdType);
+        const tdDesc = document.createElement('td'); tdDesc.textContent = p.product_short_description || ''; tr.appendChild(tdDesc);
+
+        tr.addEventListener('click', (e) => { if (e.target.tagName.toLowerCase() !== 'input') { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); } });
+        tbody.appendChild(tr);
     });
+  }else{
+    const tr = el('tr'); 
+    // tr.id = `row-${p.id}`;
+    const tdName = el('td');
+    tdName.colSpan = 6;
+    tdName.innerHTML = "No Products Found."
+    tr.appendChild(tdName);
+    // tr.colspan = 6;
+    // tr.innerHTML 
+    tbody.appendChild(tr);
+  }
 
-    table.appendChild(tbody);
-    wrap.appendChild(table);
+  table.appendChild(tbody);
+  wrap.appendChild(table);
 }
 
-// --- Inline attributes rendering ---
+
 function renderInlineForCards() {
     const api = FAKE_API_RESPONSE;
     // Clear all inline sections first
@@ -156,7 +298,7 @@ function renderInlineForCards() {
     PRODUCT_BASE.forEach((p, idx) => {
     const inline = document.querySelector(`.attr-inline[data-pid="${p.item_id}"]`);
     if (!inline) return;
-    if (!selectedIds.has(p.id)) return; // only show for selected
+    if (!selectedIds.has(p.item_id)) return; // only show for selected
     const res = findApiResultForProduct(p, idx, api);
     const pid = p.item_id;
     if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() });
@@ -185,6 +327,9 @@ function renderInlineForCards() {
     $('#statTotal').textContent = api.total_products ?? 0;
     $('#statOk').textContent = api.successful ?? 0;
     $('#statKo').textContent = api.failed ?? 0;
+    $('#api-summary').style.display = 'block';
+    
+    
 }
 
 function renderInlineForTable() {
@@ -195,7 +340,7 @@ function renderInlineForTable() {
     table.querySelectorAll('tr.detail-row').forEach(r => r.remove());
 
     PRODUCT_BASE.forEach((p, idx) => {
-    if (!selectedIds.has(p.id)) return;
+    if (!selectedIds.has(p.item_id)) return;
     const res = findApiResultForProduct(p, idx, api);
     const pid = p.item_id;
     if (!lastSeen.has(pid)) lastSeen.set(pid, { mandatory: new Map(), additional: new Map() });
@@ -246,6 +391,7 @@ function renderProducts() {
     if (layoutMode === 'cards') {
     $('#cardsContainer').style.display = '';
     $('#tableContainer').style.display = 'none';
+    console.log("PRODUCT_BASE",PRODUCT_BASE);
     renderProductsCards();
     } else {
     $('#cardsContainer').style.display = 'none';
@@ -253,6 +399,8 @@ function renderProducts() {
     renderProductsTable();
     }
     updateSelectionInfo();
+    renderPagination();               
+
     // If there is a selection, re-render inline attributes (persist across toggle)
     if (selectedIds.size > 0) renderInlineAttributes();
 }
@@ -260,7 +408,41 @@ function renderProducts() {
 // --- Submit & Reset ---
 function submitAttributes() {
     if (selectedIds.size === 0) { alert('Please select at least one product.'); return; }
-    renderInlineAttributes();
+    console.log("selectedIds",selectedIds);
+    jQuery('#full-page-loader').show();  
+    // let inputArray = {
+    //       "product_ids" : [...selectedIds]
+    //     }
+    const extractAdditional = document.getElementById('extract_additional').checked;
+    const processImage = document.getElementById('process_image').checked;
+
+    let inputArray = {
+              "item_ids": [...selectedIds],
+              "mandatory_attrs": {
+                "color": ["color", "shade"],
+                "size": ["size", "fit"],
+                "fabric": ["fabric", "material"]
+              },
+              "model": "llama-3.1-8b-instant",
+              "extract_additional": extractAdditional,
+              "process_image": processImage
+            }
+    let raw = JSON.stringify(inputArray);
+     fetch('/attr/batch-extract/', {
+        method: 'POST', // or 'POST' if your API expects POST
+        headers: {
+            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || '',
+            'Content-Type': "application/json"
+        },
+        body: raw
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log("response data",data); 
+        FAKE_API_RESPONSE = data;   
+        renderInlineAttributes();
+        jQuery('#full-page-loader').hide();  
+     });
 }
 
 function resetAll() {
@@ -271,6 +453,7 @@ function resetAll() {
     document.getElementById('statTotal').textContent = '0';
     document.getElementById('statOk').textContent = '0';
     document.getElementById('statKo').textContent = '0';
+    $('#api-summary').style.display = 'none';
 }
 
 function setLayout(mode) {
@@ -282,15 +465,170 @@ function setLayout(mode) {
     renderProducts();
 }
 
-// --- Wire up ---
-document.addEventListener('DOMContentLoaded', () => {
-    renderProducts();
-    document.getElementById('btnSubmit').addEventListener('click', submitAttributes);
-    document.getElementById('btnReset').addEventListener('click', resetAll);
-    document.getElementById('btnSelectAll').addEventListener('click', () => {
-    if (selectedIds.size === PRODUCT_BASE.length) { selectedIds.clear(); } else { selectedIds = new Set(PRODUCT_BASE.map(p => p.id)); }
-    renderProducts();
+
+// Upload elements (Bootstrap modal version)
+const uploadModalEl = document.getElementById('uploadModal');
+const dropzone      = document.getElementById('dropzone');
+const uploadFiles   = document.getElementById('uploadFiles');
+const fileInfo      = document.getElementById('fileInfo');
+const uploadBar     = document.getElementById('uploadBar');
+const uploadStatus  = document.getElementById('uploadStatus');
+
+// Reset modal on show
+uploadModalEl.addEventListener('shown.bs.modal', () => {
+  uploadStatus.textContent = '';
+  uploadStatus.className = '';             // clear success/error class
+  uploadBar.style.width = '0%';
+  uploadBar.setAttribute('aria-valuenow', '0');
+  uploadFiles.value = '';
+  uploadFiles.setAttribute('accept', ACCEPT_TYPES);
+  fileInfo.textContent = 'No files selected.';
+});
+
+function describeFiles(list) {
+  if (!list || list.length === 0) { fileInfo.textContent = 'No files selected.'; return; }
+  const names = Array.from(list).map(f => `${f.name} (${Math.round(f.size/1024)} KB)`);
+  fileInfo.textContent = names.join(', ');
+}
+
+// Drag & drop feedback
+['dragenter','dragover'].forEach(evt => {
+  dropzone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropzone.classList.add('drag'); });
+});
+['dragleave','drop'].forEach(evt => {
+  dropzone.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('drag'); });
+});
+
+// Handle drop
+dropzone.addEventListener('drop', e => {
+  uploadFiles.files = e.dataTransfer.files;
+  describeFiles(uploadFiles.files);
+});
+
+// Click to browse
+// dropzone.addEventListener('click', () => uploadFiles.click());
+
+// Picker change
+uploadFiles.addEventListener('change', () => describeFiles(uploadFiles.files));
+
+function startUpload() {
+  const files = uploadFiles.files;
+  if (!files || files.length === 0) { alert('Please select file(s) to upload.'); return; }
+  jQuery('#full-page-loader').show();
+  uploadStatus.textContent = 'Uploading...';
+  uploadStatus.className = ''; // neutral
+  uploadBar.style.width = '0%';
+  uploadBar.setAttribute('aria-valuenow', '0');
+
+  const form = new FormData();
+  Array.from(files).forEach(f => form.append('file', f));
+  // form.append('uploaded_by', 'Vishal'); // example extra field
+
+  const xhr = new XMLHttpRequest();
+  xhr.open('POST', UPLOAD_API_URL, true);
+  // If you need auth:
+  // xhr.setRequestHeader('Authorization', 'Bearer <token>');
+
+  xhr.upload.onprogress = (e) => {
+    if (e.lengthComputable) {
+      const pct = Math.round((e.loaded / e.total) * 100);
+      uploadBar.style.width = pct + '%';
+      uploadBar.setAttribute('aria-valuenow', String(pct));
+    }
+  };
+
+  xhr.onreadystatechange = () => {
+    if (xhr.readyState === 4) {
+      const ok = (xhr.status >= 200 && xhr.status < 300);
+      try {
+        const resp = JSON.parse(xhr.responseText || '{}');
+        uploadStatus.textContent = ok ? (resp.message || 'Upload successful') : (resp.error || `Upload failed (${xhr.status})`);
+      } catch {
+        uploadStatus.textContent = ok ? 'Upload successful' : `Upload failed (${xhr.status})`;
+      }
+      uploadStatus.className = ok ? 'success' : 'error';
+      // Optional: auto-close the modal on success after 1.2s:
+      // if (ok) setTimeout(() => bootstrap.Modal.getInstance(uploadModalEl).hide(), 1200);
+    }
+  };
+
+  xhr.onerror = () => {
+    uploadStatus.textContent = 'Network error during upload.';
+    uploadStatus.className = 'error';
+  };
+
+  xhr.send(form);
+  setTimeout(()=>{
+      jQuery('#uploadModal').modal('hide');
+  },3000)
+  jQuery('#full-page-loader').hide();
+
+}
+
+// Wire Start button
+document.getElementById('uploadStart').addEventListener('click', startUpload);
+// Cancel button already closes the modal via data-bs-dismiss
+
+
+
+
+// --- Pagination state ---
+let page = 1;
+let pageSize = 5; // default rows per page
+
+function totalPages() {
+  return Math.max(1, Math.ceil(PRODUCT_BASE.length / pageSize));
+}
+
+function clampPage() {
+  page = Math.min(Math.max(1, page), totalPages());
+}
+
+function getCurrentSlice() {
+  clampPage();
+  const start = (page - 1) * pageSize;
+  return PRODUCT_BASE.slice(start, start + pageSize);
+}
+
+function renderPagination() {
+  const bar = document.getElementById('paginationBar');
+  if (!bar) return;
+
+  const tp = totalPages();
+  clampPage();
+
+  bar.innerHTML = `
+    <div class="page-size">
+      <label for="pageSizeSelect">Rows per page</label>
+      <select id="pageSizeSelect">
+        <option value="5"  ${pageSize===5  ? 'selected' : ''}>5</option>
+        <option value="10" ${pageSize===10 ? 'selected' : ''}>10</option>
+        <option value="20" ${pageSize===20 ? 'selected' : ''}>20</option>
+        <option value="50" ${pageSize===50 ? 'selected' : ''}>50</option>
+        <option value="all" ${pageSize>=PRODUCT_BASE.length ? 'selected' : ''}>All</option>
+      </select>
+    </div>
+
+    <div class="pager">
+      <button class="pager-btn" id="prevPage" ${page<=1 ? 'disabled' : ''} aria-label="Previous page">‹</button>
+      <span class="page-info">Page ${page} of ${tp}</span>
+      <button class="pager-btn" id="nextPage" ${page>=tp ? 'disabled' : ''} aria-label="Next page">›</button>
+    </div>
+  `;
+
+  // wire events
+  document.getElementById('prevPage')?.addEventListener('click', () => { if (page > 1) { page--; renderProducts(); } });
+  document.getElementById('nextPage')?.addEventListener('click', () => { if (page < tp) { page++; renderProducts(); } });
+
+  const sel = document.getElementById('pageSizeSelect');
+  if (sel) {
+    sel.addEventListener('change', () => {
+      const val = sel.value;
+      pageSize = (val === 'all') ? PRODUCT_BASE.length : parseInt(val, 10);
+      page = 1;            // reset to first page when size changes
+      renderProducts();
     });
-    document.getElementById('btnCards').addEventListener('click', () => setLayout('cards'));
-    document.getElementById('btnTable').addEventListener('click', () => setLayout('table'));
-});
+  }
+}
+
+

content_quality_tool_public/templates/attr-extraction.html

@@ -17,6 +17,7 @@
   <link rel="stylesheet" href="{% static './css/select2-bootstrap4.min.css' %}">
   <link rel="stylesheet" href="{% static 'css/custom.css' %}">
   <link rel="stylesheet" href="{% static 'css/attr-extraction.css' %}">
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 
 
 </head>
@@ -27,6 +28,14 @@
     <main class="app-main"> <!--begin::App Content Header-->
       <div class="app-content-header"> <!--begin::Container-->
           <div class="container-fluid"> <!--begin::Row-->
+            <!-- Full Page Loader -->
+            <div id="full-page-loader" style="display: none;">
+                <div class="loader-overlay">
+                    <div class="spinner-border text-light" role="status">
+                        <!-- <span class="sr-only">Loading...</span> -->
+                    </div>
+                </div>
+            </div>
               <div class="row">
                   <div class="col-sm-6">
                       <h3 class="mb-0">⛏️ Attribute Extraction</h3>
@@ -45,7 +54,7 @@
       <div class="app-content-header"> <!--begin::Container-->
           <div class="container-fluid "> <!--begin::Row-->
             <!-- attr -->
-                  <div class="container">
+                <div class="container">
                     <header class="hero">
                     <div class="title">
                         <div class="title-logo" aria-hidden="true">
@@ -59,14 +68,38 @@
                         </div>
                     </div>
                     <div class="actions">
+                        <!-- Checkbox: Extract Additional -->
+                        <div class="form-check me-3"  style="padding: 10px;">
+                            <input class="form-check-input" checked type="checkbox" id="extract_additional" name="extract_additional">
+                            <label class="form-check-label" for="extract_additional">
+                               &nbsp; Extract Additional
+                            </label>
+                        </div>
+
+                        <!-- Checkbox: Process Image -->
+                        <div class="form-check me-3" style="padding: 10px;">
+                            <input class="form-check-input" checked type="checkbox" id="process_image" name="process_image">
+                            <label class="form-check-label" for="process_image">
+                               &nbsp; Process Image
+                            </label>
+                        </div>
+                        <!-- <input type="checkbox" id="extract_additional" name="extract_additional"/>
+                        <input type="checkbox" id="process_image" name="process_image"/> -->
                         <button id="btnSubmit" class="btn btn-success">Submit</button>
                         <button id="btnReset" class="btn btn-secondary">Reset</button>
                         <button id="btnSelectAll" class="btn btn-ghost">Select all</button>
+                        <!-- Upload trigger button -->
+                        <button id="btnUpload" type="button"
+                                class="btn btn-primary"
+                                data-bs-toggle="modal"
+                                data-bs-target="#uploadModal">
+                                Upload
+                        </button>
                     </div>
                     </header>
 
                     <div class="grid">
-                    <section class="card">
+                    <section class="card" id="api-summary" style="display: none;">
                         <div class="card-header">
                         <h2>API Summary</h2>
                         </div>
@@ -94,16 +127,58 @@
                         <div id="cardsContainer" class="list" aria-live="polite"></div>
                         <!-- Table layout container -->
                         <div id="tableContainer" class="table-wrap" style="display:none" aria-live="polite"></div>
+                        <!-- Pagination bar -->
+                        <div id="paginationBar" class="pagination-bar" aria-label="Pagination" style="display: none;"></div>
                         </div>
                     </section>
 
                     
                     </div>
 
+                      
+
                     <!-- <footer> -->
                     <!-- <small>Tip: Select products and click <strong>Submit</strong>—attributes render inline under each selected product. Toggle <strong>Cards</strong>/<strong>Table</strong> views.</small> -->
                     <!-- </footer> -->
                 </div>
+                
+                <!-- Upload Modal (Bootstrap) -->
+                <div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadTitle" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered modal-lg">
+                    <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="uploadTitle">Upload files</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+
+                    <div class="modal-body">
+                        <!-- Drag & drop + file picker -->
+                        <div id="dropzone" class="dropzone rounded-3" tabindex="0">
+                        <strong>Drag & drop</strong> files here or
+                        <label for="uploadFiles" class="text-primary text-decoration-underline" style="cursor:pointer;">browse</label>
+                        <input id="uploadFiles" type="file" multiple class="d-none" />
+                        <div id="fileInfo" class="file-info mt-2">No files selected.</div>
+                        </div>
+
+                        <!-- Progress bar (Bootstrap) -->
+                        <div class="progress mt-3" role="progressbar" aria-label="Upload progress" aria-valuemin="0" aria-valuemax="100">
+                        <div id="uploadBar" class="progress-bar" style="width: 0%"></div>
+                        </div>
+
+                        <!-- Status -->
+                        <div id="uploadStatus" class="mt-2 text-secondary"></div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button type="button" id="uploadCancel" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                        <button type="button" id="uploadStart" class="btn btn-success">Start upload</button>
+                    </div>
+
+                    </div>
+                </div>
+                </div>
+
             <!-- attr -->
           </div>
       </div>
@@ -111,22 +186,27 @@
 
 
     {% include 'footer.html' %}
+    
   </div>
 
-  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
-        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+  
     <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js"
-        integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
+        ></script>
     <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
-        integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
+        ></script>
     <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
-        integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
+        ></script>
     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
     <script src="{% static './js/adminlte.js' %}"></script>
+    
     <script>
+        // $(document).ready(function() {
+        //     // Your jQuery code here, e.g.,
+        //     $('#full-page-loader').show();  
+        // });
         const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
         const Default = {
             scrollbarTheme: "os-theme-light",

content_quality_tool_public/templates/product-attributes.html

@@ -0,0 +1,233 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en"> <!--begin::Head-->
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Upload</title><!--begin::Primary Meta Tags-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="title" content="CQT | Upload">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
+        integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q=" crossorigin="anonymous">
+    <!--end::Fonts--><!--begin::Third Party Plugin(OverlayScrollbars)-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css"
+        integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
+    <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Third Party Plugin(Bootstrap Icons)-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css"
+        integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
+    <!--end::Third Party Plugin(Bootstrap Icons)--><!--begin::Required Plugin(AdminLTE)-->
+    <link rel="stylesheet" href="{% static './css/adminlte.css' %}"><!--end::Required Plugin(AdminLTE)--><!-- apexcharts -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
+        integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="{% static './css/select2-bootstrap4.min.css' %}">
+    <link rel="stylesheet" href="{% static './css/custom.css' %}">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables@1.10.18/media/css/jquery.dataTables.min.css">
+    <style>
+        .select2-container .select2-search--inline .select2-search__field {
+            position: absolute;
+            top: 3px;
+            font-size: 14px;
+        }
+        #full-page-loader {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6); /* semi-transparent black */
+            z-index: 9999;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .loader-overlay .spinner-border {
+            width: 3rem;
+            height: 3rem;
+        }
+
+    </style>
+</head>
+
+<body class="layout-fixed sidebar-expand-lg sidebar-mini app-loaded sidebar-collapse">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper"> <!--begin::Header-->
+        {% include 'header.html' %}
+        {% include 'sidebar.html' %}
+        <main class="app-main"> <!--begin::App Content Header-->
+            <div class="app-content-header"> <!--begin::Container-->
+                <div class="container-fluid"> <!--begin::Row-->
+                    <div class="row">
+                        <div class="col-sm-6">
+                            <h3 class="mb-0">🏷️ Product Attributes</h3>
+                        </div>
+                        <div class="col-sm-6">
+                            <ol class="breadcrumb float-sm-end">
+                                <li class="breadcrumb-item"><a href="{% url 'file-upload' %}">Home</a></li>
+                                <li class="breadcrumb-item active" aria-current="page"><a href="{% url 'product-attributes' %}"></a>
+                                   🏷️ Product Attributes</a>
+                                </li>
+                            </ol>
+                        </div>
+                    </div> <!--end::Row-->
+                </div> <!--end::Container-->
+            </div>
+            <div class="app-content"> <!--begin::Container-->
+                <div class="container-fluid"> <!-- Info boxes -->
+                    <div id="full-page-loader" style="display: none;">
+                    <div class="loader-overlay">
+                        <div class="spinner-border text-light" role="status">
+                            <!-- <span class="sr-only">Loading...</span> -->
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="card mb-4">
+                            <!-- Add Button -->
+                             <div class="card-header">
+                                <div class="d-flex justify-content-between align-items-center mb-3">
+                                    <h2>Manage Records</h2>
+                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">Add New</button>
+                                </div>
+                            </div>
+                            <div class="card-body">
+                                <!-- Table View -->
+                                <table class="table table-bordered table-striped" cellspacing="0" width="100%" id="product-attribute-list">
+                                    <thead class="table-dark" >
+                                    <tr>
+                                        <th>ID</th>
+                                        <th>Name</th>
+                                        <th>Email</th>
+                                        <th>Actions</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody id="dataBody">
+                                    <tr>
+                                        <td>1</td>
+                                        <td>John Doe</td>
+                                        <td>john@example.com</td>
+                                        <td>
+                                        <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>
+                                        </td>
+                                    </tr>
+                                    <!-- More rows can be added dynamically -->
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <!-- Add Modal -->
+                <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                    <form class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="addModalLabel">Add New Record</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="mb-3">
+                        <label for="addName" class="form-label">Name</label>
+                        <input type="text" class="form-control" id="addName" required>
+                        </div>
+                        <div class="mb-3">
+                        <label for="addEmail" class="form-label">Email</label>
+                        <input type="email" class="form-control" id="addEmail" required>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-success">Save</button>
+                    </div>
+                    </form>
+                </div>
+                </div>
+
+                <!-- Edit Modal -->
+                <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
+                <div class="modal-dialog">
+                    <form class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="editModalLabel">Edit Record</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <input type="hidden" id="editId">
+                        <div class="mb-3">
+                        <label for="editName" class="form-label">Name</label>
+                        <input type="text" class="form-control" id="editName" required>
+                        </div>
+                        <div class="mb-3">
+                        <label for="editEmail" class="form-label">Email</label>
+                        <input type="email" class="form-control" id="editEmail" required>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-primary">Update</button>
+                    </div>
+                    </form>
+                </div>
+                </div>
+
+ </div> <!--end::Container-->
+            </div> <!--end::App Content-->
+        </main> <!--end::App Main--> <!--begin::Footer-->
+        {% include 'footer.html' %}
+
+    </div> 
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js"
+        integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
+    <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+        integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
+    <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
+        integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
+    <script src="{% static './js/adminlte.js' %}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/datatables@1.10.18/media/js/jquery.dataTables.min.js"></script>
+    <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
+    <script>
+        const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
+        const Default = {
+            scrollbarTheme: "os-theme-light",
+            scrollbarAutoHide: "leave",
+            scrollbarClickScroll: true,
+        };
+        document.addEventListener("DOMContentLoaded", function () {
+            const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
+            if (
+                sidebarWrapper &&
+                typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
+            ) {
+                OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
+                    scrollbars: {
+                        theme: Default.scrollbarTheme,
+                        autoHide: Default.scrollbarAutoHide,
+                        clickScroll: Default.scrollbarClickScroll,
+                    },
+                });
+            }
+        });
+        $(document).ready(function () {
+            $('.select2').select2({
+                theme: 'bootstrap4',
+                placeholder: 'Select Competitors'
+            });
+            $('#product-attribute-list').DataTable();
+        });
+    </script> <!--end::OverlayScrollbars Configure--> <!-- OPTIONAL SCRIPTS --> <!-- apexcharts -->
+    
+      
+</script>
+
+</body><!--end::Body-->
+
+</html>
+

content_quality_tool_public/templates/views.py

@@ -88,4 +88,5 @@ def index(request):
 
 # get-data page
 def getData(request):
-    return render(request, 'get-data.html')
+    return render(request, 'get-data.html')
+

content_quality_tool_public/urls.py

@@ -10,6 +10,7 @@ urlpatterns = [
     path('login/', views.logout_view, name='logout'),
     path('home/', views.upload, name='file-upload'),
     path('content-scorecard/', views.getData, name='content-scorecard'),
+    path('product-attributes/', views.getProductAttributes, name='product-attributes'),
     path('attribute-extraction/', views.getAttributeExtraction, name='attribute-extraction'),
 ]
 

content_quality_tool_public/views.py

@@ -101,4 +101,9 @@ def getData(request):
 # get-data page
 @login_required
 def getAttributeExtraction(request):
-    return render(request, 'attr-extraction.html')
+    return render(request, 'attr-extraction.html')
+
+# add-edit product type attributes page
+@login_required
+def getProductAttributes(request):
+    return render(request, 'product-attributes.html')