export pdf

app.py

@@ -328,7 +328,14 @@ def dashboard():
     if filtered_df.empty: return jsonify({"error": "No data found"})
     
     pkg = generate_analytics_package(filtered_df)
-    pkg["preview"] = filtered_df[filtered_df['text'].str.len() < 300].head(5)[['text', 'tpb_label', 'label', 'score']].to_dict(orient='records')
+    
+    # Return full results for frontend pagination and export
+    pkg["full_results"] = filtered_df[['text', 'tpb_label', 'label', 'score']].to_dict(orient='records')
+    
+    # Add decision to full results
+    for r in pkg["full_results"]:
+        r['decision'] = predict_decision(r['label'])
+        
     return json.dumps(pkg)
 
 @app.route('/api/analyze_bulk', methods=['POST'])
@@ -336,9 +343,14 @@ def analyze_bulk():
     if 'file' not in request.files: return jsonify({"error": "No file"}), 400
     file = request.files['file']
     try:
-        df_bulk = pd.read_csv(file)
-    except:
-        return jsonify({"error": "Invalid CSV"}), 400
+        try:
+            df_bulk = pd.read_csv(file)
+        except UnicodeDecodeError:
+            file.seek(0)
+            df_bulk = pd.read_csv(file, encoding='latin1')
+    except Exception as e:
+        print(f"CSV Load Error: {e}")
+        return jsonify({"error": f"Invalid CSV: {str(e)}"}), 400
     
     text_col = next((c for c in df_bulk.columns if c.lower() in ['text', 'comment', 'review', 'content']), df_bulk.columns[0])
     

templates/index.html

@@ -6,11 +6,16 @@
     <title>HalalNLP Analytics</title>
     <!-- Bootstrap 5 CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
     <!-- Plotly JS -->
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <!-- Marked JS -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <!-- jsPDF & AutoTable -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
     <style>
         body { font-family: 'Inter', sans-serif; background-color: #F9FAFB; }
         .navbar { background-color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
@@ -329,16 +334,20 @@
                         <h4 class="fw-bold mb-1 text-dark">All Analyzed Inputs</h4>
                         <p class="text-muted small mb-0">Detailed breakdown of your uploaded CSV content. Click any row to view full details.</p>
                     </div>
+                    <button class="btn btn-outline-secondary btn-sm" onclick="openExportModal('bulk')">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download me-1" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
+                        Export
+                    </button>
                 </div>
 
                 <div class="table-responsive">
                     <table class="table table-modern align-middle">
                         <thead>
                             <tr>
-                                <th style="width: 55%;">Input Text</th>
-                                <th style="width: 20%;">TPB Factor</th>
+                                <th style="width: 45%;">Input Text</th>
+                                <th style="width: 15%;">TPB Factor</th>
                                 <th class="text-center">Sentiment</th>
-                                <th class="text-center">Confidence</th>
+                                <th class="text-center" style="width: 25%;">Purchase Prediction</th>
                             </tr>
                         </thead>
                         <tbody id="bulkTableBody"></tbody>
@@ -394,21 +403,32 @@
                         <h4 class="fw-bold mb-1 text-dark">Keyword Analysis Result</h4>
                         <p class="text-muted small mb-0">Detailed breakdown of posts matching your search criteria.</p>
                     </div>
+                    <button class="btn btn-outline-secondary btn-sm" onclick="openExportModal('dash')">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download me-1" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
+                        Export
+                    </button>
                 </div>
 
                 <div class="table-responsive">
                     <table class="table table-modern align-middle">
                         <thead>
                             <tr>
-                                <th style="width: 55%;">Review Text</th>
-                                <th style="width: 20%;">TPB Factor</th>
+                                <th style="width: 45%;">Review Text</th>
+                                <th style="width: 15%;">TPB Factor</th>
                                 <th class="text-center">Sentiment</th>
-                                <th class="text-center">Confidence</th>
+                                <th class="text-center" style="width: 25%;">Purchase Prediction</th>
                             </tr>
                         </thead>
                         <tbody id="dashPreviewBody"></tbody>
                     </table>
                 </div>
+
+                <!-- Dashboard Pagination Controls -->
+                <div id="dashPagination" class="d-flex justify-content-between align-items-center mt-4">
+                    <button class="btn btn-outline-secondary btn-sm" onclick="changeDashPage(-1)" id="btnDashPrev">Previous</button>
+                    <span class="text-muted small fw-bold" id="pageInfoDash">Page 1 of 1</span>
+                    <button class="btn btn-outline-secondary btn-sm" onclick="changeDashPage(1)" id="btnDashNext">Next</button>
+                </div>
             </div>
         </div>
     </div>
@@ -423,6 +443,44 @@
         </div>
     </div>
 
+    <!-- Export Modal -->
+    <div class="modal fade" id="exportModal" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content border-0 shadow-lg">
+                <div class="modal-header border-0 pb-0">
+                    <h5 class="modal-title fw-bold">Export PDF Report</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body p-4">
+                    <p class="text-muted small mb-4">Select the sentiment categories you want to include in your generated report.</p>
+                    <div class="mb-4">
+                        <label class="form-label fw-bold small text-uppercase text-secondary mb-3">Filter Sentiment Categories</label>
+                        <div class="d-flex flex-column gap-2">
+                            <div class="form-check p-2 border rounded-3 bg-light">
+                                <input class="form-check-input ms-0 me-3" type="checkbox" value="positive" id="expPos" checked>
+                                <label class="form-check-label fw-medium" for="expPos">Positive Sentiments (🟢)</label>
+                            </div>
+                            <div class="form-check p-2 border rounded-3 bg-light">
+                                <input class="form-check-input ms-0 me-3" type="checkbox" value="neutral" id="expNeu" checked>
+                                <label class="form-check-label fw-medium" for="expNeu">Neutral Sentiments (⚪)</label>
+                            </div>
+                            <div class="form-check p-2 border rounded-3 bg-light">
+                                <input class="form-check-input ms-0 me-3" type="checkbox" value="negative" id="expNeg" checked>
+                                <label class="form-check-label fw-medium" for="expNeg">Negative Sentiments (🔴)</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="d-grid pt-2">
+                        <button onclick="performExport()" class="btn btn-success py-3 fw-bold rounded-3 shadow-sm" style="background-color: #198754; border-color: #198754;">
+                            <i class="bi bi-file-earmark-pdf-fill me-2"></i>
+                            Generate PDF Report
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Analytics Template (Hidden) -->
     <template id="analyticsTemplate">
         <div class="row g-4 mb-4">
@@ -542,10 +600,68 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         const modal = new bootstrap.Modal(document.getElementById('detailModal'));
+        const exportModal = new bootstrap.Modal(document.getElementById('exportModal'));
+        let exportSource = ''; // 'bulk' or 'dash'
+
+        function openExportModal(source) {
+            exportSource = source;
+            exportModal.show();
+        }
+
+        function performExport() {
+            const includePos = document.getElementById('expPos').checked;
+            const includeNeu = document.getElementById('expNeu').checked;
+            const includeNeg = document.getElementById('expNeg').checked;
+            
+            const sourceData = exportSource === 'bulk' ? currentBulkData : currentDashData;
+            if(!sourceData || sourceData.length === 0) return alert("No data to export.");
+
+            // Filter Data
+            const filtered = sourceData.filter(r => {
+                if(r.label === 'positive' && includePos) return true;
+                if(r.label === 'neutral' && includeNeu) return true;
+                if(r.label === 'negative' && includeNeg) return true;
+                return false;
+            });
+
+            if(filtered.length === 0) return alert("No data matches your sentiment selection.");
+
+            // Generate PDF
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
+            
+            doc.setFontSize(18);
+            doc.text("HalalNLP Analysis Report", 14, 22);
+            doc.setFontSize(11);
+            doc.setTextColor(100);
+            doc.text(`Source: ${exportSource === 'bulk' ? 'Bulk Analysis' : 'Keyword Dashboard'} | Date: ${new Date().toLocaleDateString()}`, 14, 30);
+            
+            const tableBody = filtered.map(r => [
+                r.text, 
+                r.tpb_label,
+                r.label,
+                // (r.score * 100).toFixed(2) + '%', // Commented out Confidence
+                r.decision
+            ]);
+
+            doc.autoTable({
+                head: [['Text', 'TPB Factor', 'Sentiment', /* 'Conf.', */ 'Prediction']],
+                body: tableBody,
+                startY: 40,
+                styles: { fontSize: 8 },
+                columnStyles: { 0: { cellWidth: 80 } }, 
+                headStyles: { fillColor: [25, 135, 84] } 
+            });
+            
+            doc.save(`halal_analysis_${exportSource}_${new Date().getTime()}.pdf`);
+            exportModal.hide();
+        }
 
         // Pagination State
         let currentBulkData = [];
+        let currentDashData = []; 
         let currentPage = 1;
+        let currentDashPage = 1; // New state for dashboard
         const itemsPerPage = 10;
         
         // Word Cloud State
@@ -558,6 +674,46 @@
             return '<span class="badge rounded-pill bg-secondary px-3">Neutral</span>';                   
         }
 
+        function renderDashTable() {
+            const tbody = document.getElementById('dashPreviewBody');
+            tbody.innerHTML = "";
+            
+            const start = (currentDashPage - 1) * itemsPerPage;
+            const end = start + itemsPerPage;
+            const pageData = currentDashData.slice(start, end);
+            const totalPages = Math.ceil(currentDashData.length / itemsPerPage);
+
+            pageData.forEach((r) => {
+                let decColor = '#3b82f6'; 
+                if(r.decision.includes("High")) decColor = '#14b8a6'; 
+                if(r.decision.includes("Low")) decColor = '#1e3a8a'; 
+                
+                const tr = document.createElement('tr');
+                tr.className = `clickable-row row-sent-${r.label}`;
+                tr.innerHTML = `
+                    <td class="fw-medium text-truncate" style="max-width: 400px;">${r.text}</td>
+                    <td class="text-muted small fw-bold text-uppercase">${r.tpb_label}</td>
+                    <td class="text-center">${getBadge(r.label)}</td>
+                    <td class="text-center"><span class="badge small" style="background-color: ${decColor}">${r.decision}</span></td>`;
+                tr.onclick = () => showRowDetail(r);
+                tbody.appendChild(tr);
+            });
+
+            // Update Controls
+            document.getElementById('pageInfoDash').innerText = `Page ${currentDashPage} of ${totalPages || 1}`;
+            document.getElementById('btnDashPrev').disabled = currentDashPage === 1;
+            document.getElementById('btnDashNext').disabled = currentDashPage === totalPages || totalPages === 0;
+        }
+
+        function changeDashPage(delta) {
+            const totalPages = Math.ceil(currentDashData.length / itemsPerPage);
+            const newPage = currentDashPage + delta;
+            if (newPage >= 1 && newPage <= totalPages) {
+                currentDashPage = newPage;
+                renderDashTable();
+            }
+        }
+
         function toggleWcView(view) {
             const tpbContainer = document.getElementById('wc-tpb-container');
             const sentContainer = document.getElementById('wc-sent-container');
@@ -606,13 +762,17 @@
             const totalPages = Math.ceil(currentBulkData.length / itemsPerPage);
 
             pageData.forEach((row) => {
+                let decColor = '#3b82f6'; // Blue
+                if(row.decision.includes("High")) decColor = '#14b8a6'; // Teal
+                if(row.decision.includes("Low")) decColor = '#1e3a8a'; // Navy
+
                 const tr = document.createElement('tr');
                 tr.className = `clickable-row row-sent-${row.label}`;
                 tr.innerHTML = `
-                    <td class="fw-medium text-truncate" style="max-width: 450px;">${row.text}</td>
+                    <td class="fw-medium text-truncate" style="max-width: 400px;">${row.text}</td>
                     <td class="text-muted small fw-bold text-uppercase">${row.tpb_label}</td>
                     <td class="text-center">${getBadge(row.label)}</td>
-                    <td class="text-center font-monospace small">${(row.score * 100).toFixed(2)}%</td>`;
+                    <td class="text-center"><span class="badge small" style="background-color: ${decColor}">${row.decision}</span></td>`;
                 tr.onclick = () => showRowDetail(row);
                 tbody.appendChild(tr);
             });
@@ -782,16 +942,14 @@
                     return; 
                 }
                 
+                // Save for Export (Handle both full_results if available, or preview)
+                currentDashData = data.full_results || data.preview;
+
                 renderAnalytics(data, 'dashAnalyticsArea');
                 
-                const tbody = document.getElementById('dashPreviewBody');
-                tbody.innerHTML = data.preview.map(r => `
-                    <tr class="row-sent-${r.label}">
-                        <td style="white-space: pre-wrap;" class="fw-medium">${r.text}</td>
-                        <td class="text-muted small fw-bold text-uppercase">${r.tpb_label}</td>
-                        <td class="text-center">${getBadge(r.label)}</td>
-                        <td class="text-center font-monospace small">${(r.score * 100).toFixed(2)}%</td>
-                    </tr>`).join('');
+                // Initialize Pagination
+                currentDashPage = 1;
+                renderDashTable();
                 
                 // Update title area if needed, though strictly we're just updating the table content here.
                 // To change the "Data Preview" header, we need to target the HTML structure in the main view, not just this JS.