page.tsx

Go to the documentation of this file.

"use client";
import { useState, useEffect } from "react";
import { Icon } from '@/contexts/IconContext';
 
interface AdvisorEvent {
  f101: number;      // Event ID
  f110: string;      // Description
  f111: string;      // Title
  f120?: string;     // Documentation link
  f121?: string;     // Action link
  [key: string]: any; // Additional fields (f1000-f1009, etc)
}
 
interface AdvisorStat {
  f120: number;  // Current progress
  f121: number;  // Total items
  f122: number;  // Errors
}
 
interface AdvisorResponse {
  DATS?: AdvisorEvent[];
  STAT?: AdvisorStat[];
}
 
const categories = [
  { id: 'accounts', label: 'Accounts', icon: 'account_balance' },
  { id: 'customers', label: 'Customers', icon: 'group' },
  { id: 'other', label: 'Other', icon: 'more_horiz' },
  { id: 'products', label: 'Products', icon: 'inventory_2' },
  { id: 'staff', label: 'Staff', icon: 'badge' },
  { id: 'reference', label: 'Reference', icon: 'book' },
  { id: 'security', label: 'Security', icon: 'security' },
  { id: 'technical', label: 'Technical', icon: 'settings' },
];
 
export default function AdvisorPage() {
  const [selectedCategories, setSelectedCategories] = useState<string[]>(
    categories.map(c => c.id)
  );
  const [loading, setLoading] = useState(true);
  const [events, setEvents] = useState<AdvisorEvent[]>([]);
  const [progress, setProgress] = useState<AdvisorStat | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    loadAdvisorData();
  }, [selectedCategories]);
 
  // Navigate all advisor "Show me" links to reports page
  const handleReportClick = () => {
    window.open('/pages/reports?source=advisor', '_blank');
  };
 
  const loadAdvisorData = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const areas = selectedCategories.join(',');
      const response = await fetch(`/api/v1/elink/advisor?areas=${areas}`);
      const result = await response.json();
      
      if (result.success && result.data) {
        const data: AdvisorResponse = result.data;
        setEvents(data.DATS || []);
        setProgress(data.STAT?.[0] || null);
      } else {
        setError(result.error || 'Failed to load advisor data');
      }
    } catch (err: any) {
      console.error('Error loading advisor data:', err);
      setError(err.message || 'An error occurred');
    } finally {
      setLoading(false);
    }
  };
 
  const toggleCategory = (categoryId: string) => {
    setSelectedCategories(prev => 
      prev.includes(categoryId)
        ? prev.filter(id => id !== categoryId)
        : [...prev, categoryId]
    );
  };
 
  const toggleAll = (selectAll: boolean) => {
    setSelectedCategories(selectAll ? categories.map(c => c.id) : []);
  };
 
  const getProgressPercentage = () => {
    if (!progress || progress.f121 === 0) return 0;
    return Math.round((progress.f120 / progress.f121) * 100);
  };
 
  return (
    <div className="min-h-screen bg-bg">
      <div className="max-w-7xl mx-auto p-6">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-3">
                <Icon name="psychology" size={36} className="text-brand" />
                Business Advisor
              </h1>
              <p className="text-muted">
                Advisor analyses your retail data and displays potentially interesting tidbits
              </p>
            </div>
            
            {/* Progress Indicator */}
            {loading && (
              <div className="flex items-center gap-3 bg-info/10 border border-info/30 rounded-lg px-4 py-3">
                <div className="relative">
                  <Icon name="progress_activity" size={24} className="text-info animate-spin" />
                </div>
                <div className="text-sm">
                  <div className="font-medium text-text">Loading...</div>
                  {progress && (
                    <div className="text-muted">
                      {progress.f120} of {progress.f121} ({getProgressPercentage()}%)
                    </div>
                  )}
                </div>
              </div>
            )}
            
            {!loading && progress && (
              <div className="flex items-center gap-3 bg-success/10 border border-success/30 rounded-lg px-4 py-3">
                <Icon name="check_circle" size={24} className="text-success" />
                <div className="text-sm">
                  <div className="font-medium text-text">Complete</div>
                  <div className="text-muted">
                    {progress.f121} items analyzed
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
 
        {/* Category Filters */}
        <div className="bg-surface rounded-lg shadow-sm border border-border p-6 mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-text">Filter Categories</h2>
            <div className="flex gap-2">
              <button
                onClick={() => toggleAll(true)}
                className="px-3 py-1 text-sm bg-brand text-surface rounded hover:bg-brand2 transition-colors"
              >
                Select All
              </button>
              <button
                onClick={() => toggleAll(false)}
                className="px-3 py-1 text-sm bg-surface-2 text-text rounded hover:bg-surface-2/80 transition-colors"
              >
                Clear All
              </button>
            </div>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {categories.map(category => (
              <label
                key={category.id}
                className={`flex items-center gap-2 px-4 py-3 rounded-lg border-2 cursor-pointer transition-all ${
                  selectedCategories.includes(category.id)
                    ? 'border-brand bg-brand/5 text-brand font-medium'
                    : 'border-border bg-surface text-text hover:border-brand/30'
                }`}
              >
                <input
                  type="checkbox"
                  checked={selectedCategories.includes(category.id)}
                  onChange={() => toggleCategory(category.id)}
                  className="w-4 h-4 text-brand focus:ring-brand focus:ring-2 rounded"
                />
                <Icon name={category.icon} size={20} />
                <span className="text-sm">{category.label}</span>
              </label>
            ))}
          </div>
        </div>
 
        {/* Error State */}
        {error && (
          <div className="bg-danger/10 border border-danger/30 rounded-lg p-6 mb-6">
            <div className="flex items-start gap-3">
              <Icon name="error" size={24} className="text-danger flex-shrink-0" />
              <div>
                <h3 className="font-semibold text-text mb-1">Error Loading Data</h3>
                <p className="text-sm text-muted">{error}</p>
                <button
                  onClick={loadAdvisorData}
                  className="mt-3 px-4 py-2 bg-danger text-surface rounded hover:bg-danger/80 transition-colors text-sm"
                >
                  Retry
                </button>
              </div>
            </div>
          </div>
        )}
 
        {/* Loading State */}
        {loading && !events.length && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {[1, 2, 3, 4, 5, 6].map(i => (
              <div key={i} className="bg-surface rounded-lg shadow-sm border border-border p-6 animate-pulse">
                <div className="h-6 bg-surface-2 rounded w-3/4 mb-3"></div>
                <div className="h-4 bg-surface-2 rounded w-full mb-2"></div>
                <div className="h-4 bg-surface-2 rounded w-5/6"></div>
              </div>
            ))}
          </div>
        )}
 
        {/* Empty State */}
        {!loading && events.length === 0 && !error && (
          <div className="bg-surface rounded-lg shadow-sm border border-border p-12 text-center">
            <Icon name="check_circle" size={64} className="text-success mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-text mb-2">No Issues Found</h3>
            <p className="text-muted">
              {selectedCategories.length === 0 
                ? 'Select at least one category to analyze your data.'
                : 'Advisor has analyzed your data and found no issues to report.'}
            </p>
          </div>
        )}
 
        {/* Events Grid */}
        {!loading && events.length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {events.map((event, index) => (
              <div
                key={`${event.f101}-${index}`}
                className="bg-surface rounded-lg shadow-sm border border-border hover:border-brand/50 transition-all hover:shadow-md"
              >
                <div className="p-6">
                  <div className="flex items-start justify-between mb-3">
                    <h3 className="text-lg font-semibold text-text flex-1">
                      {event.f111}
                    </h3>
                    {event.f121 && (
                      <button
                        onClick={(e) => {
                          e.preventDefault();
                          handleReportClick();
                        }}
                        className="flex items-center gap-1 text-xs bg-brand text-surface px-3 py-1 rounded hover:bg-brand2 transition-colors flex-shrink-0 ml-2"
                      >
                        <Icon name="open_in_new" size={14} />
                        Show me
                      </button>
                    )}
                  </div>
                  
                  <p className="text-sm text-text mb-4 leading-relaxed">
                    {event.f110}
                  </p>
                  
                  {event.f120 && (
                    <div className="pt-3 border-t border-border">
                      <a
                        href={event.f120}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-xs text-info hover:text-info/80 flex items-center gap-1 transition-colors"
                      >
                        <Icon name="help_outline" size={14} />
                        Online help
                      </a>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}