page.tsx

Go to the documentation of this file.

"use client";
 
import { useState, useEffect } from 'react';
import { Icon } from '@/contexts/IconContext';
 
interface LowPricedProduct {
  id: number;
  sku: string;
  name: string;
  cost: number;
  sellPrice: number;
  margin: number;
  salesInfo: string;
}
 
export default function ProductsPricedLowReport() {
  const [products, setProducts] = useState<LowPricedProduct[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [totalProducts, setTotalProducts] = useState(0);
 
  useEffect(() => {
    fetchProducts();
  }, []);
 
  const fetchProducts = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response = await fetch('/api/v1/elink/advisor/products-priced-low');
      const data = await response.json();
      
      if (!response.ok) {
        throw new Error(data.error || 'Failed to fetch products');
      }
      
      setProducts(data.products || []);
      setTotalProducts(data.totalProducts || 0);
    } catch (err: any) {
      console.error('Error fetching products:', err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  if (loading) {
    return (
      <div className="p-6 min-h-screen bg-bg">
        <div className="mb-6">
          <div className="flex items-center gap-3 mb-2">
            <a href="/pages/reports?source=advisor" className="text-muted hover:text-brand">
              <Icon name="arrow_back" size={24} />
            </a>
            <h1 className="text-3xl font-bold text-text">Products Priced Below Cost</h1>
          </div>
          <p className="text-muted ml-9">
            Products with selling prices below their cost price
          </p>
        </div>
        <div className="flex items-center justify-center py-12">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand mx-auto mb-4"></div>
            <p className="text-muted">Analyzing product pricing...</p>
          </div>
        </div>
      </div>
    );
  }
 
  if (error) {
    return (
      <div className="p-6 min-h-screen bg-bg">
        <div className="mb-6">
          <div className="flex items-center gap-3 mb-2">
            <a href="/pages/reports?source=advisor" className="text-muted hover:text-brand">
              <Icon name="arrow_back" size={24} />
            </a>
            <h1 className="text-3xl font-bold text-text">Products Priced Below Cost</h1>
          </div>
        </div>
        <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
          <div className="flex items-center gap-3 text-error mb-4">
            <Icon name="error" size={24} />
            <span className="font-medium">Error loading products</span>
          </div>
          <p className="text-muted mb-4">{error}</p>
          <button 
            onClick={fetchProducts}
            className="px-4 py-2 bg-brand text-white rounded hover:bg-brand2"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-6 min-h-screen bg-bg">
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-2">
          <a href="/pages/reports?source=advisor" className="text-muted hover:text-brand">
            <Icon name="arrow_back" size={24} />
          </a>
          <h1 className="text-3xl font-bold text-text">Products Priced Below Cost</h1>
        </div>
        <p className="text-muted ml-9">
          Products with selling prices below their cost price
        </p>
        {totalProducts > 0 && (
          <p className="text-muted text-sm ml-9 mt-1">
            Analyzed {totalProducts} products • Found {products.length} priced below cost
          </p>
        )}
      </div>
 
      <div className="bg-surface rounded-lg shadow-sm border border-border overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-[var(--brand)] text-surface">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  SKU
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Product Name
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider">
                  Cost Price
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider">
                  Sell Price
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider">
                  Margin %
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Sales Info
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {products.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-6 py-12 text-center">
                    <Icon name="check_circle" size={48} className="text-success mx-auto mb-3" />
                    <p className="text-muted">All products are priced correctly</p>
                    <p className="text-muted text-sm mt-2">No products found with sell price below cost</p>
                  </td>
                </tr>
              ) : (
                products.map((product) => (
                  <tr key={product.id} className="hover:bg-surface-2">
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text">
                      {product.sku || <span className="text-muted italic">No SKU</span>}
                    </td>
                    <td className="px-6 py-4 text-sm text-text">
                      {product.name}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-right text-muted">
                      ${product.cost.toFixed(2)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-right text-error">
                      ${product.sellPrice.toFixed(2)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right">
                      <span className={`px-2 py-1 text-xs font-medium rounded ${
                        product.margin < -10 ? 'bg-error/20 text-error' :
                        product.margin < -5 ? 'bg-warning/20 text-warning' :
                        'bg-surface-2 text-muted'
                      }`}>
                        {product.margin.toFixed(1)}%
                      </span>
                    </td>
                    <td className="px-6 py-4 text-sm text-muted">
                      {product.salesInfo || <span className="text-muted italic">-</span>}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm space-x-3">
                      <a 
                        href={`/pages/products/${product.id}`}
                        className="text-brand hover:text-brand2"
                      >
                        Edit Price
                      </a>
                      <a 
                        href={`/pages/products/${product.id}`}
                        className="text-info hover:text-info/80"
                      >
                        View
                      </a>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}