update

DEPLOYMENT_GUIDE.md

@@ -1,87 +0,0 @@
-# Deploying Flask App to Hugging Face Spaces
-
-Since you moved from Gradio to Flask, you must use the **Docker SDK** on Hugging Face. This guide explains how to configure your repository for successful deployment.
-
----
-
-## 1. Project Configuration Changes
-
-### **A. Update the Port**
-Hugging Face Spaces strictly monitors port **7860**. You must update your `web_app/app.py` to listen on this port instead of the default 5000.
-
-**File:** `web_app/app.py`
-```python
-if __name__ == '__main__':
-    # Change port from 5000 to 7860
-    app.run(host='0.0.0.0', port=7860)
-```
-
-### **B. Create a `Dockerfile`**
-Create a file named `Dockerfile` (no extension) in the **root** folder of your project. This file tells Hugging Face how to build your environment.
-
-**File:** `Dockerfile`
-```dockerfile
-# Use official Python image
-FROM python:3.10-slim
-
-# Set working directory
-WORKDIR /app
-
-# Install system dependencies (needed for Malaya/Matplotlib)
-RUN apt-get update && apt-get install -y \
-    build-essential \
-    && rm -rf /var/lib/apt/lists/*
-
-# Copy requirements and install
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-RUN pip install flask  # Ensure Flask is installed
-
-# Copy the entire project
-COPY . .
-
-# Expose the HF default port
-EXPOSE 7860
-
-# Run the Flask app
-CMD ["python", "web_app/app.py"]
-```
-
----
-
-## 2. Hugging Face Space Metadata
-
-You must update the header of your `README.md` file so Hugging Face knows to use Docker.
-
-**File:** `README.md`
-```yaml
----
-title: HalalNLP
-emoji: 🌖
-colorFrom: green
-colorTo: purple
-sdk: docker
-pinned: false
----
-```
-
----
-
-## 3. Deployment Steps
-
-1.  **Commit your changes:** Ensure all new files (`web_app/`, `Dockerfile`) are added to your Git repo.
-2.  **Set Secrets:** In your Hugging Face Space settings, add your `HUGGINGFACE_HUB_TOKEN` under **Variables and Secrets**.
-3.  **Push to Hugging Face:**
-    ```bash
-    git add .
-    git commit -m "Migrate to Flask with Docker"
-    git push origin main
-    ```
-
-## 4. Local Testing with Docker (Optional)
-If you have Docker installed locally, you can test the build before pushing:
-```bash
-docker build -t halalnlp-flask .
-docker run -p 7860:7860 halalnlp-flask
-```
-Then visit `http://localhost:7860`.

DEPLOYMENT_GUIDE_HF.md

@@ -0,0 +1,62 @@
+# Deploying to Hugging Face Spaces
+
+This guide will help you deploy the **HalalNLP Dashboard** to a Hugging Face Space.
+
+## Prerequisites
+*   A Hugging Face account.
+*   The project files prepared (Dockerfile is already created).
+
+## Step 1: Create a New Space
+1.  Go to [huggingface.co/spaces](https://huggingface.co/spaces).
+2.  Click **"Create new Space"**.
+3.  **Space name:** Enter a name (e.g., `halal-food-insight`).
+4.  **License:** Choose a license (e.g., Apache 2.0).
+5.  **SDK:** Select **Docker**.
+6.  **Space Hardware:** "CPU Basic (Free)" is usually sufficient, but upgrade if you run out of memory.
+7.  Click **"Create Space"**.
+
+## Step 2: Upload Files
+You can upload files via the Web UI or Git.
+
+### Option A: Using the Web UI (Easiest)
+1.  In your new Space, go to the **Files** tab.
+2.  Click **"Add file"** > **"Upload files"**.
+3.  Drag and drop **ALL** files and folders from your local project directory:
+    *   `app.py`
+    *   `Dockerfile`
+    *   `requirements.txt`
+    *   `halalnlp/` (folder)
+    *   `static/` (folder)
+    *   `templates/` (folder)
+    *   (Do NOT upload `venv`, `.git`, or `__pycache__`)
+4.  Commit the changes.
+
+### Option B: Using Git (Recommended)
+1.  Clone your Space locally:
+    ```bash
+    git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+    ```
+2.  Copy your project files into that folder.
+3.  Add, commit, and push:
+    ```bash
+    git add .
+    git commit -m "Initial commit"
+    git push
+    ```
+
+## Step 3: Configure Secrets (Optional)
+If your app uses a private Hugging Face token (e.g., to access gated models):
+1.  Go to **Settings** in your Space.
+2.  Scroll to **"Variables and secrets"**.
+3.  Add a New Secret:
+    *   Name: `HUGGINGFACE_HUB_TOKEN`
+    *   Value: Your Access Token (from your HF Settings).
+
+## Step 4: Watch it Build
+1.  Go to the **App** tab.
+2.  You will see "Building...". This may take a few minutes as it installs PyTorch and other libraries.
+3.  Once "Running", your dashboard is live!
+
+## Troubleshooting
+*   **Build Error:** Check the "Logs" tab. Common issues are missing requirements or memory limits.
+*   **Timeout:** If the app takes too long to load the models, try increasing the Gunicorn timeout in `Dockerfile` (currently set to 120s).

Dockerfile

@@ -0,0 +1,32 @@
+# Use the official Python 3.9 image
+FROM python:3.9
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install gunicorn
+
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+
+# Define environment variable
+ENV FLASK_APP=app.py
+
+# Run app.py using Gunicorn
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app", "--timeout", "120"]

FUTURE_WORK.md

@@ -0,0 +1,28 @@
+# Future Work: Dynamic Popular Keywords
+
+## Objective
+Replace the hardcoded popular search buttons in the "Keyword Analyzer Dashboard" with a dynamic list derived from the actual dataset or real-time trends.
+
+## Proposed Implementation: Dataset-Driven Approach (Recommended)
+Instead of relying on external APIs (Google Trends) which may return keywords not present in our local dataset, we should extract the most frequent meaningful terms directly from our loaded data.
+
+### Steps:
+1.  **Backend (`app.py`):**
+    *   Create a helper function to process `global_df['text']`.
+    *   Tokenize the text and remove standard stopwords (English + Malay).
+    *   Calculate frequency distribution (`Counter`) of the remaining words.
+    *   Extract the top 10 most common nouns/adjectives.
+    *   Expose a new API endpoint (e.g., `/api/popular_keywords`) that returns this list.
+
+2.  **Frontend (`index.html`):**
+    *   On page load (or when the Dashboard tab is clicked), call `/api/popular_keywords`.
+    *   Dynamically render the 10 buttons using the received list instead of the hardcoded HTML.
+
+### Benefits:
+*   **Guaranteed Hits:** Every keyword suggested is guaranteed to exist in the dataset, avoiding "No results found" errors.
+*   **Contextual Relevance:** Reflects what people are *actually* discussing in the provided data.
+*   **Performance:** Faster than external API calls; can be cached on server startup.
+
+## Alternative: Google Trends API
+*   Use `pytrends` to fetch real-time search data for "Halal Food Malaysia".
+*   *Risk:* High chance of rate limiting and keywords having zero overlap with the local static dataset.

README.md

@@ -0,0 +1,9 @@
+---
+title: flask-halalnlp
+emoji: 🕌
+colorFrom: green
+colorTo: orange
+sdk: docker
+pinned: false
+short_description: Sentiment Analysis & TPB Factor Assessment for Halal Food
+---

app.py

@@ -76,16 +76,22 @@ def generate_analytics_package(filtered_df):
         return None
 
     # 1. Charts
-    # Overall Sentiment (Exclude Neutral for specific chart as requested)
-    sentiment_order_bin = ['negative', 'positive']
-    sent_df_bin = filtered_df[filtered_df['label'] != 'neutral']
+    # Overall Sentiment (Now includes Neutral)
+    sentiment_order_bin = ['negative', 'neutral', 'positive']
+    sent_df_bin = filtered_df
     if not sent_df_bin.empty:
         sent_counts = sent_df_bin['label'].value_counts(normalize=True) * 100
         sent_counts = sent_counts.reindex(sentiment_order_bin).fillna(0)
-        fig_sent = go.Figure(data=[go.Bar(x=sent_counts.index.tolist(), y=sent_counts.values.tolist(), marker_color=['red', 'blue'], text=[f'{v:.1f}%' for v in sent_counts.values], textposition='auto')])
+        fig_sent = go.Figure(data=[go.Bar(
+            x=[s.capitalize() for s in sent_counts.index.tolist()], 
+            y=sent_counts.values.tolist(), 
+            marker_color=['red', 'gray', 'green'], 
+            text=[f'{v:.1f}%' for v in sent_counts.values], 
+            textposition='auto'
+        )])
     else:
         fig_sent = go.Figure()
-    fig_sent.update_layout(title='Overall Sentiment Distribution (Pos vs Neg)', xaxis_title='Sentiment', yaxis_title='Percentage', margin=dict(t=40), autosize=True)
+    fig_sent.update_layout(title='Overall Sentiment Distribution', xaxis_title='Sentiment', yaxis_title='Percentage', margin=dict(t=40), autosize=True)
 
     # 2. TPB Distribution (Keep original)
     tpb_counts = filtered_df['tpb_label'].value_counts(normalize=True) * 100
@@ -106,7 +112,7 @@ def generate_analytics_package(filtered_df):
     tpb_sent_pct = tpb_sent_df.div(tpb_sent_df.sum(axis=1), axis=0) * 100
     
     fig_stack = go.Figure()
-    color_map = {'negative': 'red', 'neutral': 'gray', 'positive': 'blue'}
+    color_map = {'negative': 'red', 'neutral': 'gray', 'positive': 'green'}
     for col in sentiment_order:
         fig_stack.add_trace(go.Bar(
             name=col, x=tpb_sent_pct.index.tolist(), y=tpb_sent_pct[col].tolist(),
@@ -116,17 +122,42 @@ def generate_analytics_package(filtered_df):
     fig_stack.update_layout(barmode='stack', title='Sentiment Distribution within TPB Factors', xaxis_title='TPB Factor', yaxis_title='Percentage', margin=dict(t=40), autosize=True)
 
     # 2. Word Clouds & Bigrams
-    wcs = {}
+    wcs = {
+        "global": {},
+        "tpb": {}
+    }
     bg_data = {}
+    
+    # Global Clouds (Positive vs Negative)
+    for sentiment in ['positive', 'negative']:
+        subset = filtered_df[filtered_df['label'] == sentiment]
+        text = ' '.join(subset['text']).lower().replace('quote','').replace('sijil halal','').replace('halal','') if not subset.empty else ''
+        wcs["global"][sentiment] = generate_wordcloud_base64(text)
+
+    # TPB Factor Clouds (All, Pos, Neg)
     factors = ['attitude', 'religious knowledge', 'subjective norms', 'perceived behavioural control']
     for factor in factors:
         subset = filtered_df[filtered_df['tpb_label'] == factor]
         if not subset.empty:
-            text = ' '.join(subset['text']).lower().replace('quote','').replace('sijil halal','').replace('halal','')
-            wcs[factor] = generate_wordcloud_base64(text)
-            bg_data[factor] = generate_bigrams(text)
+            # All
+            text_all = ' '.join(subset['text']).lower().replace('quote','').replace('sijil halal','').replace('halal','')
+            
+            # Positive
+            sub_pos = subset[subset['label'] == 'positive']
+            text_pos = ' '.join(sub_pos['text']).lower().replace('quote','').replace('sijil halal','').replace('halal','') if not sub_pos.empty else ''
+            
+            # Negative
+            sub_neg = subset[subset['label'] == 'negative']
+            text_neg = ' '.join(sub_neg['text']).lower().replace('quote','').replace('sijil halal','').replace('halal','') if not sub_neg.empty else ''
+
+            wcs["tpb"][factor] = {
+                "all": generate_wordcloud_base64(text_all),
+                "positive": generate_wordcloud_base64(text_pos),
+                "negative": generate_wordcloud_base64(text_neg)
+            }
+            bg_data[factor] = generate_bigrams(text_all)
         else:
-            wcs[factor] = None
+            wcs["tpb"][factor] = {"all": None, "positive": None, "negative": None}
             bg_data[factor] = []
 
     # 3. Report
@@ -162,16 +193,16 @@ def generate_bigrams(text):
     return [[ " ".join(bg), count] for bg, count in Counter(bi_grams).most_common(10)]
 
 def predict_decision(sentiment_label):
-    if sentiment_label == 'positive': return "High likelihood of purchase"
-    elif sentiment_label == 'neutral': return "Moderate likelihood of purchase"
-    else: return "Low likelihood of purchase"
+    if sentiment_label == 'positive': return "High likelihood to purchase"
+    elif sentiment_label == 'neutral': return "Moderate likelihood to purchase"
+    else: return "Low likelihood to purchase"
 
 def generate_report_content(tpb_sentiment_df):
     report = []
     for _, row in tpb_sentiment_df.iterrows():
         tpb_label = row['tpb_label']
         negative_percentage = row.get('negative', 0)
-        if negative_percentage > 70:
+        if negative_percentage > 75:
             item = {"factor": tpb_label.capitalize(), "negative_pct": negative_percentage, "content": ""}
             if tpb_label == "attitude":
                 item["content"] = """

templates/index.html

@@ -15,20 +15,28 @@
         body { font-family: 'Inter', sans-serif; background-color: #F9FAFB; }
         .navbar { background-color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
         .card { border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); background: white; margin-bottom: 25px; }
-        .btn-primary { background-color: #10B981; border: none; font-weight: 600; padding: 10px 20px; }
-        .btn-primary:hover { background-color: #059669; }
+        
+        /* New Button Color: Bright Orange (Matches Sentiment Card) */
+        .btn-primary { background-color: #F97316; border-color: #F97316; font-weight: 600; padding: 10px 20px; }
+        .btn-primary:hover { background-color: #ea580c; border-color: #ea580c; }
+        
         .score-card { text-align: center; padding: 24px; border-radius: 12px; color: white; }
         .bg-tpb { background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%); }
         .bg-sent { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
         .bg-dec { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
         .spinner-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 9999; justify-content: center; align-items: center; }
-        .nav-pills .nav-link.active { background-color: #10B981; }
+        
+        /* New Nav Tab Color: HalalNLP Brand Green */
+        .nav-pills .nav-link.active { background-color: #198754; color: white; }
         .nav-pills .nav-link { color: #374151; font-weight: 600; }
+        
         .chart-container { height: 400px; width: 100%; }
         .clickable-row { cursor: pointer; }
         .clickable-row:hover { background-color: #f3f4f6 !important; }
+        
+        /* Updated Drop Zone to match Brand Green */
         .drop-zone {
-            border: 2px dashed #10B981;
+            border: 2px dashed #198754;
             border-radius: 12px;
             padding: 40px;
             background-color: #fff;
@@ -36,10 +44,24 @@
             cursor: pointer;
         }
         .drop-zone.drag-over {
-            background-color: #ecfdf5;
-            border-color: #059669;
+            background-color: #f0fdf4;
+            border-color: #166534;
             transform: scale(1.02);
         }
+        
+        /* Modern Table Styling */
+        .table-modern { border-collapse: separate; border-spacing: 0 8px; }
+        .table-modern thead th { border: none; color: #6B7280; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding: 12px 20px; }
+        .table-modern tbody tr { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: all 0.2s ease; border-radius: 8px; }
+        .table-modern tbody tr:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+        .table-modern tbody td { border: none; padding: 20px; background: white; }
+        .table-modern tbody td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-left: 4px solid #E5E7EB; }
+        .table-modern tbody td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
+        
+        /* Row Sentiment Accents */
+        .row-sent-positive td:first-child { border-left-color: #10B981 !important; }
+        .row-sent-negative td:first-child { border-left-color: #EF4444 !important; }
+        .row-sent-neutral td:first-child { border-left-color: #9CA3AF !important; }
     </style>
 </head>
 <body>
@@ -52,39 +74,219 @@
         <div class="container">
             <a class="navbar-brand fw-bold text-success" href="#">🕌 HalalNLP</a>
             <ul class="nav nav-pills ms-auto">
-                <li class="nav-item"><button class="nav-link active" onclick="showTab('analyzer')">Single Analyzer</button></li>
+                <li class="nav-item"><button class="nav-link active" onclick="showTab('overview')">Overview</button></li>
+                <li class="nav-item"><button class="nav-link" onclick="showTab('analyzer')">Single Analyzer</button></li>
                 <li class="nav-item"><button class="nav-link" onclick="showTab('bulk')">Bulk Analyzer</button></li>
-                <li class="nav-item"><button class="nav-link" onclick="showTab('dashboard')">Company Dashboard</button></li>
+                <li class="nav-item"><button class="nav-link" onclick="showTab('dashboard')">Keyword Analyzer Dashboard</button></li>
             </ul>
         </div>
     </nav>
 
     <div class="container" style="margin-top: 100px; padding-bottom: 80px;">
         
+        <!-- View 0: Overview -->
+        <div id="overview-view">
+            <div class="text-center mb-5">
+                <h1 class="fw-bold display-5 mb-2">Halal Food Insight Dashboard</h1>
+                <h4 class="text-success mb-3">Sentiment Analysis & Theory of Planned Behavior (TPB) Factor Assessment</h4>
+                <div class="px-5">
+                    <p class="text-muted small border-top border-bottom py-2 d-inline-block">
+                        RESEARCH PROJECT: “HALAL FOOD PURCHASE DECISION PREDICTION FRAMEWORK FOR SOCIAL MEDIA POSTING USING MACHINE LEARNING”
+                    </p>
+                </div>
+            </div>
+
+            <div class="row g-4">
+                <!-- What this dashboard does -->
+                <div class="col-12">
+                    <div class="card border-0 shadow-sm">
+                        <div class="card-body p-4">
+                            <h3 class="fw-bold mb-3 text-success">What this dashboard does</h3>
+                            <p class="lead-sm text-secondary">
+                                The Halal Food Insight Dashboard uses AI (Natural Language Processing) to analyze public discussions about halal food across social media. It reveals overall sentiment and the TPB factors—attitudes, social influence, perceived control, and religious knowledge—that shape purchasing decisions. These insights help businesses, policymakers, and certification bodies respond strategically, address concerns, and strengthen trust in the halal ecosystem. You can explore trends, track sentiment shifts, and generate culturally and ethically aware recommendations.
+                            </p>
+                            <div class="alert alert-warning d-flex align-items-center mt-3 mb-0" role="alert">
+                                <div>
+                                    <h6 class="alert-heading fw-bold mb-1">⚠️ Note on model status</h6>
+                                    <p class="mb-0 small">The model is still being trained. Outputs are indicative and may contain errors. Please review results before drawing conclusions.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- How it works -->
+                <div class="col-lg-8">
+                    <div class="card border-0 shadow-sm h-100">
+                        <div class="card-body p-4">
+                            <h4 class="fw-bold mb-4">How it works (at a glance)</h4>
+                            
+                            <div class="mb-4">
+                                <h6 class="fw-bold text-success">1) Text Classification (Aspect-Based Extraction)</h6>
+                                <p class="small text-muted mb-2">The system first categorizes each post to enable deeper analysis. It detects:</p>
+                                <ul class="small text-muted">
+                                    <li>Opinions or experiences related to halal food</li>
+                                    <li>Religious views or knowledge</li>
+                                    <li>Questions, comparisons, or general feedback</li>
+                                    <li>Salient keywords</li>
+                                </ul>
+                            </div>
+
+                            <div class="mb-4">
+                                <h6 class="fw-bold text-success">2) Sentiment Analysis</h6>
+                                <p class="small text-muted mb-2">Each post is scored across multiple dimensions (trust, price, brand, compliance):</p>
+                                <div class="row g-2 mb-2">
+                                    <div class="col-md-4"><div class="p-2 border rounded small bg-light text-success"><strong>Positive:</strong> Confidence, trusted brands, fair pricing.</div></div>
+                                    <div class="col-md-4"><div class="p-2 border rounded small bg-light text-danger"><strong>Negative:</strong> Doubts, high prices, distrust.</div></div>
+                                    <div class="col-md-4"><div class="p-2 border rounded small bg-light text-secondary"><strong>Neutral:</strong> Info seeking, general queries.</div></div>
+                                </div>
+                            </div>
+
+                            <div class="mb-4">
+                                <h6 class="fw-bold text-success">3) TPB Factor Mapping</h6>
+                                <p class="small text-muted mb-2">Each post is mapped to relevant TPB constructs using advanced NLP:</p>
+                                <div class="row g-3">
+                                    <div class="col-md-6">
+                                        <div class="p-3 border rounded h-100">
+                                            <strong class="d-block mb-1">Attitudes (Sikap)</strong>
+                                            <p class="extra-small text-muted mb-0">Evaluative judgments (taste, cleanliness, quality).<br><em>Keywords: sedap, enak, bersih, kualiti, healthy.</em></p>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <div class="p-3 border rounded h-100">
+                                            <strong class="d-block mb-1">Subjective Norms</strong>
+                                            <p class="extra-small text-muted mb-0">Social influences (friends, family, viral trends).<br><em>Keywords: keluarga, netizen, viral, trend, "orang kata".</em></p>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <div class="p-3 border rounded h-100">
+                                            <strong class="d-block mb-1">Perceived Behavioural Control</strong>
+                                            <p class="extra-small text-muted mb-0">Perceived ease/difficulty and verification actions.<br><em>Keywords: susah, mudah, logo, scan, semak, verify.</em></p>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <div class="p-3 border rounded h-100">
+                                            <strong class="d-block mb-1">Religious Knowledge</strong>
+                                            <p class="extra-small text-muted mb-0">Knowledge of halal–haram principles and authorities.<br><em>Keywords: syariah, fatwa, JAKIM, sijil, gelatin.</em></p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mb-0">
+                                <h6 class="fw-bold text-success">4) Purchase Likelihood Prediction</h6>
+                                <p class="small text-muted mb-0">Combining sentiment and TPB signals, the system estimates likelihood as: <strong>High, Medium, or Low.</strong></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Requirements & Details -->
+                <div class="col-lg-4">
+                    <div class="card border-0 shadow-sm h-100 bg-light">
+                        <div class="card-body p-4">
+                            <h4 class="fw-bold mb-4">Dashboard Details</h4>
+                            
+                            <h6 class="fw-bold small mb-2">TARGET USERS</h6>
+                            <ul class="extra-small text-muted mb-4">
+                                <li class="mb-2"><strong>Businesses/Brands:</strong> Optimize messaging/claims; track campaign impact.</li>
+                                <li class="mb-2"><strong>Policymakers/Agencies:</strong> Identify gaps; target outreach; evaluate responses.</li>
+                                <li><strong>Certification Bodies:</strong> Monitor perceptions; spot recurring pain points.</li>
+                            </ul>
+
+                            <h6 class="fw-bold small mb-2">TECHNICAL SPECS</h6>
+                            <ul class="extra-small text-muted mb-0">
+                                <li class="mb-1"><strong>Data Sources:</strong> Social media posts.</li>
+                                <li class="mb-1"><strong>Languages:</strong> English, Malay, mixed-language (slang/colloquialism).</li>
+                                <li><strong>Outputs:</strong> Sentiment scores, TPB factors, Purchase Prediction.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- TPB Detailed Framework -->
+                <div class="col-12">
+                    <div class="card border-0 shadow-sm">
+                        <div class="card-header bg-dark text-white fw-bold py-3">Theory of Planned Behavior (TPB) Framework Depth</div>
+                        <div class="card-body p-0">
+                            <div class="list-group list-group-flush">
+                                <div class="list-group-item p-4">
+                                    <h5 class="fw-bold text-success mb-2">Attitudes</h5>
+                                    <p class="small text-muted mb-0">Reflect a positive perception of Halal food based on personal feelings and past experiences. Tied to religious values, health benefits, and food quality. These views shape how people express support or concern online.</p>
+                                </div>
+                                <div class="list-group-item p-4">
+                                    <h5 class="fw-bold text-success mb-2">Subjective Norms</h5>
+                                    <p class="small text-muted mb-0">Highlight the role of social influence (community, workplace, peer expectations). Reveals tension when social norms clash with personal beliefs. Reflects <strong>"what people think others expect of them"</strong> and collective concerns influence behavior.</p>
+                                </div>
+                                <div class="list-group-item p-4">
+                                    <h5 class="fw-bold text-success mb-2">Perceived Behavioral Control</h5>
+                                    <p class="small text-muted mb-0">Refers to how easy or hard individuals feel it is to follow a Halal diet. Includes personal confidence, motivation to comply despite practical barriers, and how digital tools (apps/reviews) support Halal decision-making.</p>
+                                </div>
+                                <div class="list-group-item p-4">
+                                    <h5 class="fw-bold text-success mb-2">Religious Knowledge</h5>
+                                    <p class="small text-muted mb-0">Indicates a deeper understanding of Halal in Islam, including ethical and environmental values. Encourages conscious food choices based on faith and drives more cautious sentiment on social platforms.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Final Call to Action -->
+                <div class="col-12">
+                    <div class="card text-white bg-success border-0 shadow-sm overflow-hidden">
+                        <div class="card-body p-5 text-center position-relative">
+                            <div style="position:relative; z-index:2">
+                                <h2 class="fw-bold mb-4">🎯 Why Use This Dashboard?</h2>
+                                <div class="row justify-content-center">
+                                    <div class="col-md-10">
+                                        <div class="row g-3 text-start small">
+                                            <div class="col-md-6">✓ Understand real-time public sentiment on halal food</div>
+                                            <div class="col-md-6">✓ Identify key concerns and influencers</div>
+                                            <div class="col-md-6">✓ Support certification bodies, businesses, and policymakers</div>
+                                            <div class="col-md-6">✓ Promote ethical AI use in culturally sensitive topics</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!-- View 1: Single Analyzer -->
-        <div id="analyzer-view">
+        <div id="analyzer-view" style="display: none;">
             <div class="row justify-content-center">
                 <div class="col-lg-8">
                     <div class="text-center mb-5">
-                        <h1 class="fw-bold mb-2 h2">Text Classification and Sentiment Analysis</h1>
-                        <p class="text-muted">Instant AI-driven behavioral and sentiment feedback.</p>
+                        <h1 class="fw-bold mb-2 h2">Post Like You’re Online!</h1>
+                        <p class="text-secondary lead mb-1">Share your thoughts about halal food acquisition or issues like you would on a social media post!</p>
+                        <p class="text-muted small"><em>Kongsikan pendapat anda tentang pencarian atau isu makanan halal seperti unggahan di media sosial!</em></p>
                     </div>
-                    <div class="card p-4">
-                        <textarea id="inputText" class="form-control mb-3" rows="4" placeholder="Model can make mistakes, we are striving to improve the model."></textarea>
-                        <button onclick="analyzeText()" class="btn btn-primary w-100">Analyze</button>
-                        <div class="mt-3">
-                            <small class="text-muted d-block mb-2">Examples (click to use):</small>
+                    <div class="card p-4 border-0 shadow-sm">
+                        <div class="mb-3">
+                            <label for="inputText" class="form-label fw-bold small text-uppercase text-secondary">Draft your social post</label>
+                            <textarea id="inputText" class="form-control" rows="4" placeholder="English, Malay, mixed language, and local slang are all supported!"></textarea>
+                        </div>
+                        <button onclick="analyzeText()" class="btn btn-primary w-100 py-2 shadow-sm">Analyze Post Insights</button>
+                        
+                        <div class="mt-4 pt-3 border-top">
+                            <small class="text-muted d-block mb-2 fw-bold">Select an example to try:</small>
                             <div class="d-flex flex-column gap-2">
                                 <button class="btn btn-sm btn-outline-secondary text-start overflow-hidden text-truncate" onclick="useExample(0)">Alhamdulillah, hari ni dapat makan dekat restoran halal baru. Rasa puas hati dan tenang bila tau makanan yang kita makan dijamin halal.</button>
                                 <button class="btn btn-sm btn-outline-secondary text-start overflow-hidden text-truncate" onclick="useExample(1)">Semua orang cakap kena check logo halal sebelum beli makanan. Dah jadi macam second nature dah sekarang. Korang pun sama kan?</button>
                             </div>
                         </div>
+                        
+                        <div class="mt-3 text-center">
+                            <small class="text-muted" style="font-size: 0.75rem;">Model can make mistakes; we are striving to improve the model for better accuracy.</small>
+                        </div>
                     </div>
                     <div id="resultsArea" class="mt-4" style="display: none;">
-                        <div class="row g-3">
-                            <div class="col-md-4"><div class="score-card bg-tpb"><small>TPB Label</small><h4 id="resTpb" class="mt-2">--</h4></div></div>
-                            <div class="col-md-4"><div class="score-card bg-sent"><small>Sentiment</small><h4 id="resSent" class="mt-2">--</h4><small id="resProb">0%</small></div></div>
-                            <div class="col-md-4"><div class="score-card bg-dec"><small>Decision</small><h4 id="resDec" class="mt-2">--</h4></div></div>
+                        <div class="row g-3 align-items-stretch">
+                            <div class="col-md-4"><div class="score-card bg-tpb h-100 d-flex flex-column justify-content-center"><small>TPB Label</small><h4 id="resTpb" class="mt-2 mb-0">--</h4></div></div>
+                            <div class="col-md-4"><div class="score-card bg-sent h-100 d-flex flex-column justify-content-center"><small>Sentiment</small><h4 id="resSent" class="mt-2">--</h4><small id="resProb" class="mb-0">0%</small></div></div>
+                            <div class="col-md-4"><div class="score-card bg-dec h-100 d-flex flex-column justify-content-center"><small>Decision</small><h4 id="resDec" class="mt-2 mb-0">--</h4></div></div>
                         </div>
                     </div>
                 </div>
@@ -122,37 +324,92 @@
             <div id="bulkResults" style="display: none;">
                 <div id="bulkAnalyticsArea"></div> <!-- Dynamic Charts Container -->
                 
-                <h4 class="fw-bold mt-5 mb-3">All Analyzed Inputs</h4>
-                <p class="text-muted small">Click any row to view full details.</p>
-                <div class="card overflow-hidden">
-                    <div class="table-responsive" style="max-height: 500px;">
-                        <table class="table table-hover mb-0">
-                            <thead class="table-light sticky-top">
-                                <tr><th>Input Text</th><th>Sentiment</th><th>TPB Label</th></tr>
-                            </thead>
-                            <tbody id="bulkTableBody"></tbody>
-                        </table>
+                <div class="mt-5 mb-4 d-flex justify-content-between align-items-end">
+                    <div>
+                        <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>
                 </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 class="text-center">Sentiment</th>
+                                <th class="text-center">Confidence</th>
+                            </tr>
+                        </thead>
+                        <tbody id="bulkTableBody"></tbody>
+                    </table>
+                </div>
+
+                <!-- Pagination Controls -->
+                <div id="bulkPagination" class="d-flex justify-content-between align-items-center mt-4">
+                    <button class="btn btn-outline-secondary btn-sm" onclick="changePage(-1)" id="btnPrev">Previous</button>
+                    <span class="text-muted small fw-bold" id="pageInfo">Page 1 of 1</span>
+                    <button class="btn btn-outline-secondary btn-sm" onclick="changePage(1)" id="btnNext">Next</button>
+                </div>
             </div>
         </div>
 
         <!-- View 3: Company Dashboard -->
         <div id="dashboard-view" style="display: none;">
             <div class="text-center mb-5">
-                <h1 class="fw-bold h2">Sentiment Analysis and Purchase Decision Factor for Halal Food Acquisition</h1>
+                <h1 class="fw-bold mb-2 h2">Search Pre-trained Analysis</h1>
+                <p class="text-secondary lead mb-1">Search our trained dataset of pre-analyzed data using keywords to view sentiment and TPB insights</p>
+                <div class="mt-3">
+                    <p class="text-muted small">This analysis utilizes a comprehensive trained dataset spanning from 2015 to September 2024.</p>
+                </div>
                 <div class="row justify-content-center mt-4">
-                    <div class="col-md-6 d-flex gap-2">
-                        <input type="text" id="dashKeyword" class="form-control" placeholder="Search Brand/Keyword...">
-                        <button onclick="updateDashboard()" class="btn btn-primary">Search</button>
+                    <div class="col-md-6">
+                        <div class="d-flex gap-2">
+                            <input type="text" id="dashKeyword" class="form-control" placeholder="Search Brand/Keyword...">
+                            <button onclick="updateDashboard()" class="btn btn-primary text-nowrap">Search Dataset</button>
+                        </div>
+                        <div class="mt-3 text-start">
+                            <small class="text-muted fw-bold d-block mb-2">Popular searches:</small>
+                            <div class="d-flex flex-wrap gap-2 justify-content-start">
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Ayam')">Ayam</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Jakim')">Jakim</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Price')">Price</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Sijil')">Sijil</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Daging')">Daging</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Food')">Food</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Clean')">Clean</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Logo')">Logo</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Haram')">Haram</button>
+                                <button class="btn btn-sm btn-outline-secondary px-3 rounded-pill" onclick="usePopularSearch('Trust')">Trust</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
             <div id="dashResults" style="display: none;">
                 <div id="dashAnalyticsArea"></div>
-                <div class="card mt-4"><div class="card-header bg-light fw-bold">Data Preview</div><div class="table-responsive"><table class="table table-sm table-striped mb-0"><thead><tr><th>Text</th><th>TPB</th><th>Sent</th><th>Score</th></tr></thead><tbody id="dashPreviewBody"></tbody></table></div></div>
+                
+                <div class="mt-5 mb-4 d-flex justify-content-between align-items-end">
+                    <div>
+                        <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>
+                </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 class="text-center">Sentiment</th>
+                                <th class="text-center">Confidence</th>
+                            </tr>
+                        </thead>
+                        <tbody id="dashPreviewBody"></tbody>
+                    </table>
+                </div>
             </div>
-            <div id="dashPlaceholder" class="text-center py-5 text-muted"><p>Enter a keyword to generate insights.</p></div>
         </div>
     </div>
 
@@ -173,12 +430,110 @@
             <div class="col-md-6"><div class="card p-2"><div class="chart-tpb chart-container"></div></div></div>
             <div class="col-12"><div class="card p-2"><div class="chart-stack chart-container" style="height: 450px;"></div></div></div>
         </div>
-        <h5 class="fw-bold mb-3">Contextual Word Clouds</h5>
-        <div class="row g-3 mb-4">
-            <div class="col-lg-3 col-6 wc-card"><div class="card h-100"><div class="card-header bg-white small text-center fw-bold">Attitude</div><div class="card-body p-1 text-center"><img class="img-fluid wc-img-attitude"></div></div></div>
-            <div class="col-lg-3 col-6 wc-card"><div class="card h-100"><div class="card-header bg-white small text-center fw-bold">Knowledge</div><div class="card-body p-1 text-center"><img class="img-fluid wc-img-knowledge"></div></div></div>
-            <div class="col-lg-3 col-6 wc-card"><div class="card h-100"><div class="card-header bg-white small text-center fw-bold">Norms</div><div class="card-body p-1 text-center"><img class="img-fluid wc-img-norms"></div></div></div>
-            <div class="col-lg-3 col-6 wc-card"><div class="card h-100"><div class="card-header bg-white small text-center fw-bold">Control</div><div class="card-body p-1 text-center"><img class="img-fluid wc-img-control"></div></div></div>
+        <div class="d-flex justify-content-between align-items-center mb-3">
+            <h5 class="fw-bold mb-0">Contextual Word Clouds</h5>
+            <div class="btn-group" role="group">
+                <input type="radio" class="btn-check" name="wcView" id="wcViewTpb" autocomplete="off" checked onchange="toggleWcView('tpb')">
+                <label class="btn btn-outline-primary btn-sm" for="wcViewTpb">By TPB Factors</label>
+
+                <input type="radio" class="btn-check" name="wcView" id="wcViewSent" autocomplete="off" onchange="toggleWcView('sent')">
+                <label class="btn btn-outline-primary btn-sm" for="wcViewSent">By Sentiment</label>
+            </div>
+        </div>
+
+        <!-- TPB View (Default) -->
+        <div id="wc-tpb-container" class="row g-3 mb-4">
+            <div class="col-lg-3 col-6 wc-card"><div class="card h-100">
+                <div class="card-header bg-white small text-center fw-bold d-flex justify-content-between align-items-center px-2">
+                    <span>Attitude</span>
+                    <div class="dropdown">
+                        <button class="btn btn-link btn-sm p-0 text-muted" data-bs-toggle="dropdown">⋮</button>
+                        <ul class="dropdown-menu dropdown-menu-end small">
+                            <li><button class="dropdown-item active" onclick="setWcFilter(this, 'attitude', 'all')">All Words</button></li>
+                            <li><button class="dropdown-item text-success" onclick="setWcFilter(this, 'attitude', 'positive')">Positive Only</button></li>
+                            <li><button class="dropdown-item text-danger" onclick="setWcFilter(this, 'attitude', 'negative')">Negative Only</button></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="card-body p-1 text-center position-relative">
+                    <img class="img-fluid wc-img-attitude" data-factor="attitude">
+                    <div class="position-absolute top-0 end-0 m-1"><span class="badge bg-secondary opacity-50 wc-badge-attitude">All</span></div>
+                </div>
+            </div></div>
+
+            <div class="col-lg-3 col-6 wc-card"><div class="card h-100">
+                <div class="card-header bg-white small text-center fw-bold d-flex justify-content-between align-items-center px-2">
+                    <span>Knowledge</span>
+                    <div class="dropdown">
+                        <button class="btn btn-link btn-sm p-0 text-muted" data-bs-toggle="dropdown">⋮</button>
+                        <ul class="dropdown-menu dropdown-menu-end small">
+                            <li><button class="dropdown-item active" onclick="setWcFilter(this, 'religious knowledge', 'all')">All Words</button></li>
+                            <li><button class="dropdown-item text-success" onclick="setWcFilter(this, 'religious knowledge', 'positive')">Positive Only</button></li>
+                            <li><button class="dropdown-item text-danger" onclick="setWcFilter(this, 'religious knowledge', 'negative')">Negative Only</button></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="card-body p-1 text-center position-relative">
+                    <img class="img-fluid wc-img-knowledge" data-factor="religious knowledge">
+                    <div class="position-absolute top-0 end-0 m-1"><span class="badge bg-secondary opacity-50 wc-badge-knowledge">All</span></div>
+                </div>
+            </div></div>
+
+            <div class="col-lg-3 col-6 wc-card"><div class="card h-100">
+                <div class="card-header bg-white small text-center fw-bold d-flex justify-content-between align-items-center px-2">
+                    <span>Norms</span>
+                    <div class="dropdown">
+                        <button class="btn btn-link btn-sm p-0 text-muted" data-bs-toggle="dropdown">⋮</button>
+                        <ul class="dropdown-menu dropdown-menu-end small">
+                            <li><button class="dropdown-item active" onclick="setWcFilter(this, 'subjective norms', 'all')">All Words</button></li>
+                            <li><button class="dropdown-item text-success" onclick="setWcFilter(this, 'subjective norms', 'positive')">Positive Only</button></li>
+                            <li><button class="dropdown-item text-danger" onclick="setWcFilter(this, 'subjective norms', 'negative')">Negative Only</button></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="card-body p-1 text-center position-relative">
+                    <img class="img-fluid wc-img-norms" data-factor="subjective norms">
+                    <div class="position-absolute top-0 end-0 m-1"><span class="badge bg-secondary opacity-50 wc-badge-norms">All</span></div>
+                </div>
+            </div></div>
+
+            <div class="col-lg-3 col-6 wc-card"><div class="card h-100">
+                <div class="card-header bg-white small text-center fw-bold d-flex justify-content-between align-items-center px-2">
+                    <span>Control</span>
+                    <div class="dropdown">
+                        <button class="btn btn-link btn-sm p-0 text-muted" data-bs-toggle="dropdown">⋮</button>
+                        <ul class="dropdown-menu dropdown-menu-end small">
+                            <li><button class="dropdown-item active" onclick="setWcFilter(this, 'perceived behavioural control', 'all')">All Words</button></li>
+                            <li><button class="dropdown-item text-success" onclick="setWcFilter(this, 'perceived behavioural control', 'positive')">Positive Only</button></li>
+                            <li><button class="dropdown-item text-danger" onclick="setWcFilter(this, 'perceived behavioural control', 'negative')">Negative Only</button></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="card-body p-1 text-center position-relative">
+                    <img class="img-fluid wc-img-control" data-factor="perceived behavioural control">
+                    <div class="position-absolute top-0 end-0 m-1"><span class="badge bg-secondary opacity-50 wc-badge-control">All</span></div>
+                </div>
+            </div></div>
+        </div>
+
+        <!-- Global Sentiment View (Hidden) -->
+        <div id="wc-sent-container" class="row g-3 mb-4" style="display: none;">
+            <div class="col-md-6">
+                <div class="card h-100 border-success">
+                    <div class="card-header bg-success text-white fw-bold text-center">Overall Positive</div>
+                    <div class="card-body p-2 text-center">
+                        <img class="img-fluid wc-img-global-pos">
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="card h-100 border-danger">
+                    <div class="card-header bg-danger text-white fw-bold text-center">Overall Negative</div>
+                    <div class="card-body p-2 text-center">
+                        <img class="img-fluid wc-img-global-neg">
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="card"><div class="card-header bg-danger text-white fw-bold">Strategic Recommendation Report</div><div class="card-body report-area"></div></div>
         <div class="card"><div class="card-header bg-dark text-white fw-bold">Top Bigrams by Factor</div><div class="card-body table-responsive"><table class="table table-bordered text-center"><thead><tr><th>Rank</th><th>Attitude</th><th>Knowledge</th><th>Norms</th><th>Control</th></tr></thead><tbody class="bigrams-body"></tbody></table></div></div>
@@ -188,6 +543,95 @@
     <script>
         const modal = new bootstrap.Modal(document.getElementById('detailModal'));
 
+        // Pagination State
+        let currentBulkData = [];
+        let currentPage = 1;
+        const itemsPerPage = 10;
+        
+        // Word Cloud State
+        let currentWcData = null;
+
+        // Global badge helper for sentiment
+        function getBadge(s) {
+            if(s === 'positive') return '<span class="badge rounded-pill bg-success px-3">Positive</span>'; 
+            if(s === 'negative') return '<span class="badge rounded-pill bg-danger px-3">Negative</span>';   
+            return '<span class="badge rounded-pill bg-secondary px-3">Neutral</span>';                   
+        }
+
+        function toggleWcView(view) {
+            const tpbContainer = document.getElementById('wc-tpb-container');
+            const sentContainer = document.getElementById('wc-sent-container');
+            if (view === 'tpb') {
+                tpbContainer.style.display = 'flex';
+                sentContainer.style.display = 'none';
+            } else {
+                tpbContainer.style.display = 'none';
+                sentContainer.style.display = 'flex';
+            }
+        }
+
+        function setWcFilter(btn, factor, type) {
+            // Update Active State in Dropdown
+            const list = btn.closest('ul');
+            list.querySelectorAll('.dropdown-item').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+
+            // Update Image
+            const cardBody = btn.closest('.card').querySelector('.card-body');
+            const img = cardBody.querySelector('img');
+            const badge = cardBody.querySelector('.badge');
+            
+            if (currentWcData && currentWcData.tpb[factor] && currentWcData.tpb[factor][type]) {
+                img.src = "data:image/png;base64," + currentWcData.tpb[factor][type];
+                img.style.display = 'inline-block';
+            } else {
+                img.style.display = 'none'; // No data for this filter
+            }
+
+            // Update Badge Text/Color
+            badge.innerText = type.charAt(0).toUpperCase() + type.slice(1);
+            badge.className = 'badge opacity-75 position-absolute top-0 end-0 m-1'; // Reset classes
+            if(type === 'positive') badge.classList.add('bg-success');
+            else if(type === 'negative') badge.classList.add('bg-danger');
+            else badge.classList.add('bg-secondary');
+        }
+
+        function renderBulkTable() {
+            const tbody = document.getElementById('bulkTableBody');
+            tbody.innerHTML = "";
+            
+            const start = (currentPage - 1) * itemsPerPage;
+            const end = start + itemsPerPage;
+            const pageData = currentBulkData.slice(start, end);
+            const totalPages = Math.ceil(currentBulkData.length / itemsPerPage);
+
+            pageData.forEach((row) => {
+                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="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>`;
+                tr.onclick = () => showRowDetail(row);
+                tbody.appendChild(tr);
+            });
+
+            // Update Controls
+            document.getElementById('pageInfo').innerText = `Page ${currentPage} of ${totalPages || 1}`;
+            document.getElementById('btnPrev').disabled = currentPage === 1;
+            document.getElementById('btnNext').disabled = currentPage === totalPages || totalPages === 0;
+        }
+
+        function changePage(delta) {
+            const totalPages = Math.ceil(currentBulkData.length / itemsPerPage);
+            const newPage = currentPage + delta;
+            if (newPage >= 1 && newPage <= totalPages) {
+                currentPage = newPage;
+                renderBulkTable();
+            }
+        }
+
         function initDropZone() {
             const dz = document.getElementById('dropZone');
             ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evt => {
@@ -230,7 +674,7 @@
         }
 
         function showTab(tab) {
-            ['analyzer-view', 'bulk-view', 'dashboard-view'].forEach(v => document.getElementById(v).style.display = 'none');
+            ['overview-view', 'analyzer-view', 'bulk-view', 'dashboard-view'].forEach(v => document.getElementById(v).style.display = 'none');
             document.getElementById(tab + '-view').style.display = 'block';
             document.querySelectorAll('.nav-link').forEach(btn => btn.classList.toggle('active', btn.onclick.toString().includes(tab)));
         }
@@ -250,10 +694,46 @@
                     body: JSON.stringify({text}) 
                 });
                 const data = await res.json();
+                
+                // Map Sentiment to Emoji and Color
+                let sentEmoji = '😐'; 
+                let sentColor = '#6c757d'; // Gray
+                if(data.sentiment_label === 'positive') { sentEmoji = '😃'; sentColor = '#198754'; } // Green
+                if(data.sentiment_label === 'negative') { sentEmoji = '😡'; sentColor = '#dc3545'; } // Red
+
+                // Map Decision to Icon and Color
+                let decIcon = '⚠️';
+                let decColor = '#3b82f6'; // Default Blue (Moderate)
+                
+                if(data.decision.includes("High")) {
+                    decIcon = '✅';
+                    decColor = '#14b8a6'; // Teal
+                } else if(data.decision.includes("Low")) {
+                    decIcon = '❌';
+                    decColor = '#1e3a8a'; // Navy
+                }
+
                 document.getElementById('resTpb').innerText = data.tpb_label;
-                document.getElementById('resSent').innerText = data.sentiment_label;
-                document.getElementById('resProb').innerText = (data.sentiment_score * 100).toFixed(2) + "%";
-                document.getElementById('resDec').innerText = data.decision;
+                
+                const resSent = document.getElementById('resSent');
+                const sentCard = resSent.closest('.score-card');
+                sentCard.style.backgroundColor = sentColor;
+                sentCard.classList.remove('bg-sent');
+                
+                resSent.innerHTML = `${sentEmoji} <span class="text-capitalize">${data.sentiment_label}</span>`;
+                
+                document.getElementById('resProb').innerText = (data.sentiment_score * 100).toFixed(2) + "% confidence";
+                
+                const resDec = document.getElementById('resDec');
+                const decCard = resDec.closest('.score-card');
+                
+                // Set the background color of the card
+                decCard.style.backgroundColor = decColor;
+                decCard.classList.remove('bg-dec'); 
+                
+                resDec.innerHTML = `${decIcon} <br>${data.decision}`;
+                resDec.style.color = 'white'; 
+                
                 document.getElementById('resultsArea').style.display = 'block';
             } catch(e) { console.error(e); }
             showLoader(false);
@@ -270,23 +750,21 @@
                 const data = await res.json();
                 renderAnalytics(data, 'bulkAnalyticsArea');
                 
-                const tbody = document.getElementById('bulkTableBody');
-                tbody.innerHTML = "";
-                data.full_results.forEach((row, idx) => {
-                    const tr = document.createElement('tr');
-                    tr.className = "clickable-row";
-                    tr.innerHTML = `
-                        <td class="text-truncate" style="max-width:400px">${row.text}</td>
-                        <td><span class="badge ${row.label === 'positive' ? 'bg-success' : row.label === 'negative' ? 'bg-danger' : 'bg-secondary'}">${row.label}</span></td>
-                        <td>${row.tpb_label}</td>`;
-                    tr.onclick = () => showRowDetail(row);
-                    tbody.appendChild(tr);
-                });
+                // Initialize Pagination
+                currentBulkData = data.full_results;
+                currentPage = 1;
+                renderBulkTable();
+
                 document.getElementById('bulkResults').style.display = 'block';
             } catch(e) { console.error(e); alert("Error processing bulk data"); }
             showLoader(false);
         }
 
+        function usePopularSearch(kw) {
+            document.getElementById('dashKeyword').value = kw;
+            updateDashboard();
+        }
+
         async function updateDashboard() {
             const keyword = document.getElementById('dashKeyword').value;
             if(!keyword) return;
@@ -305,17 +783,22 @@
                 }
                 
                 renderAnalytics(data, 'dashAnalyticsArea');
+                
                 const tbody = document.getElementById('dashPreviewBody');
                 tbody.innerHTML = data.preview.map(r => `
-                    <tr>
-                        <td class="text-truncate" style="max-width:300px">${r.text}</td>
-                        <td>${r.tpb_label}</td>
-                        <td>${r.label}</td>
-                        <td>${r.score.toFixed(4)}</td>
+                    <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('');
                 
+                // 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.
+                
                 document.getElementById('dashResults').style.display = 'block';
-                document.getElementById('dashPlaceholder').style.display = 'none';
+                const ph = document.getElementById('dashPlaceholder');
+                if(ph) ph.style.display = 'none';
             } catch(e) { console.error(e); alert("Error loading dashboard"); }
             showLoader(false);
         }
@@ -342,21 +825,96 @@
                 window.dispatchEvent(new Event('resize'));
             }, 100);
 
-            const setWc = (cls, b64) => { 
+            // Save Word Cloud Data
+            currentWcData = data.wordclouds;
+
+            // Initialize TPB View (Default to 'all')
+            const setWc = (cls, factor, type='all') => { 
                 const img = target.querySelector('.'+cls);
-                if(b64) img.src = "data:image/png;base64," + b64;
-                else img.closest('.wc-card').style.display = 'none';
+                if(currentWcData.tpb[factor] && currentWcData.tpb[factor][type]) {
+                    img.src = "data:image/png;base64," + currentWcData.tpb[factor][type];
+                    img.closest('.wc-card').style.display = 'block';
+                } else {
+                    img.closest('.wc-card').style.display = 'none';
+                }
+            };
+            setWc('wc-img-attitude', 'attitude');
+            setWc('wc-img-knowledge', 'religious knowledge');
+            setWc('wc-img-norms', 'subjective norms');
+            setWc('wc-img-control', 'perceived behavioural control');
+
+            // Initialize Global Sentiment View
+            const setGlobalWc = (cls, type) => {
+                const img = target.querySelector('.'+cls);
+                if(currentWcData.global[type]) {
+                    img.src = "data:image/png;base64," + currentWcData.global[type];
+                }
             };
-            setWc('wc-img-attitude', data.wordclouds.attitude);
-            setWc('wc-img-knowledge', data.wordclouds['religious knowledge']);
-            setWc('wc-img-norms', data.wordclouds['subjective norms']);
-            setWc('wc-img-control', data.wordclouds['perceived behavioural control']);
+            setGlobalWc('wc-img-global-pos', 'positive');
+            setGlobalWc('wc-img-global-neg', 'negative');
 
             const repArea = target.querySelector('.report-area');
             if(data.report.length > 0) {
-                repArea.innerHTML = "<h2>TPB Factor Analysis and Recommendations Report</h2>" + 
-                    data.report.map(item => `<h3>${item.factor} (${item.negative_pct.toFixed(1)}% Negative)</h3>` + marked.parse(item.content)).join('');
-            } else { repArea.innerHTML = "<p class='text-muted'>No issues detected.</p>"; }
+                // Generate a unique ID suffix based on targetId to avoid conflicts
+                const accId = "accordion-" + targetId;
+                
+                repArea.innerHTML = `
+                    <div class="accordion" id="${accId}">
+                        ${data.report.map((item, index) => {
+                            const itemId = accId + "-item-" + index;
+                            const isFirst = index === 0;
+                            return `
+                                <div class="accordion-item">
+                                    <h2 class="accordion-header">
+                                        <button class="accordion-button ${!isFirst ? 'collapsed' : ''}" type="button" data-bs-toggle="collapse" data-bs-target="#${itemId}">
+                                            <div class="d-flex w-100 justify-content-between align-items-center me-3">
+                                                <strong>${item.factor}</strong>
+                                                <span class="badge bg-danger rounded-pill">${item.negative_pct.toFixed(1)}% Negative</span>
+                                            </div>
+                                        </button>
+                                    </h2>
+                                    <div id="${itemId}" class="accordion-collapse collapse ${isFirst ? 'show' : ''}" data-bs-parent="#${accId}">
+                                        <div class="accordion-body p-4">
+                                            ${(() => {
+                                                // Client-side parsing to separate sections
+                                                const parts = item.content.split('**Recommended Actions:**');
+                                                const issuesContent = parts[0].replace('**Current Issues:**', '').trim();
+                                                const actionsContent = parts.length > 1 ? parts[1].trim() : '';
+
+                                                return `
+                                                <!-- Issues Section -->
+                                                <div class="mb-4">
+                                                    <h6 class="fw-bold text-danger d-flex align-items-center mb-3">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle-fill me-2" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/></svg>
+                                                        Current Issues
+                                                    </h6>
+                                                    <div class="p-3 bg-danger bg-opacity-10 border border-danger border-opacity-25 rounded text-danger small">
+                                                        ${marked.parse(issuesContent)}
+                                                    </div>
+                                                </div>
+
+                                                <!-- Actions Section -->
+                                                <div>
+                                                    <h6 class="fw-bold text-success d-flex align-items-center mb-3">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>
+                                                        Recommended Actions
+                                                    </h6>
+                                                    <div class="p-3 bg-success bg-opacity-10 border border-success border-opacity-25 rounded text-dark small">
+                                                        ${marked.parse(actionsContent)}
+                                                    </div>
+                                                </div>
+                                                `;
+                                            })()}
+                                        </div>
+                                    </div>
+                                </div>
+                            `;
+                        }).join('')}
+                    </div>
+                `;
+            } else { 
+                repArea.innerHTML = "<p class='text-muted text-center my-3'>No critical issues detected (Threshold: >75% negative sentiment).</p>"; 
+            }
 
             const bgBody = target.querySelector('.bigrams-body');
             bgBody.innerHTML = Array.from({length: 10}).map((_, i) => 
@@ -369,13 +927,22 @@
 
         function showRowDetail(row) {
             const content = document.getElementById('modalContent');
+            
+            let decColor = '#3b82f6'; // Blue
+            if(row.decision.includes("High")) decColor = '#14b8a6'; // Teal
+            if(row.decision.includes("Low")) decColor = '#1e3a8a'; // Navy
+
+            let sentBadgeClass = 'bg-secondary';
+            if(row.label === 'positive') sentBadgeClass = 'bg-success';
+            if(row.label === 'negative') sentBadgeClass = 'bg-danger';
+
             content.innerHTML = `
                 <p class="mb-3"><strong>Original Input:</strong><br><span class="text-muted">${row.text}</span></p>
                 <div class="list-group">
-                    <div class="list-group-item d-flex justify-content-between"><span>Sentiment</span><span class="fw-bold">${row.label}</span></div>
+                    <div class="list-group-item d-flex justify-content-between"><span>Sentiment</span><span class="badge ${sentBadgeClass} rounded-pill">${row.label}</span></div>
                     <div class="list-group-item d-flex justify-content-between"><span>Model Confidence</span><span class="fw-bold">${(row.score * 100).toFixed(2)}%</span></div>
                     <div class="list-group-item d-flex justify-content-between"><span>TPB Category</span><span class="fw-bold">${row.tpb_label}</span></div>
-                    <div class="list-group-item d-flex justify-content-between"><span>Recommendation</span><span class="fw-bold text-success">${row.decision}</span></div>
+                    <div class="list-group-item d-flex justify-content-between"><span>Recommendation</span><span class="badge" style="background-color: ${decColor}; color: white; line-height: 2;">${row.decision}</span></div>
                 </div>`;
             modal.show();
         }