page.tsx

Go to the documentation of this file.

"use client";
 
import { useEffect, useState } from "react";
import { apiClient } from "@/lib/client/apiClient";
import { Icon } from '@/contexts/IconContext';
 
interface Store {
  f100: number; // ID
  f101: string; // Name
  f102?: number; // Latitude
  f103?: number; // Longitude
  f150?: string; // Phone
  f151?: string; // Email
  f164?: string; // Store Type
  f185?: number; // Config Type
  f186?: number; // Parent Location
}
 
interface StoreFormData {
  id?: string;
  name: string;
  phone: string;
  email: string;
  isNew: boolean;
}
 
export default function StoresPage() {
  const [stores, setStores] = useState<Store[]>([]);
  const [filteredStores, setFilteredStores] = useState<Store[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [showModal, setShowModal] = useState(false);
  const [formData, setFormData] = useState<StoreFormData>({
    name: "",
    phone: "",
    email: "",
    isNew: true,
  });
 
  useEffect(() => {
    loadStores();
  }, []);
 
  useEffect(() => {
    applyFilters();
  }, [stores, searchTerm]);
 
  const loadStores = async () => {
    try {
      setLoading(true);
      const result = await apiClient.getLocations({ source: 'elink' });
 
      if (result.success && (result.data as any)?.DATS) {
        setStores((result.data as any).DATS);
      }
    } catch (error) {
      console.error("Error loading stores:", error);
    } finally {
      setLoading(false);
    }
  };
 
  const applyFilters = () => {
    if (!searchTerm) {
      setFilteredStores(stores);
      return;
    }
 
    const search = searchTerm.toLowerCase();
    const filtered = stores.filter((store) => {
      return (
        store.f100?.toString().includes(search) ||
        store.f101?.toLowerCase().includes(search) ||
        store.f150?.toLowerCase().includes(search) ||
        store.f151?.toLowerCase().includes(search)
      );
    });
 
    setFilteredStores(filtered);
  };
 
  const openNewStoreModal = () => {
    setFormData({
      name: "",
      phone: "",
      email: "",
      isNew: true,
    });
    setShowModal(true);
  };
 
  const openEditModal = (store: Store) => {
    setFormData({
      id: store.f100.toString(),
      name: store.f101 || "",
      phone: store.f150 || "",
      email: store.f151 || "",
      isNew: false,
    });
    setShowModal(true);
  };
 
  const handleSave = async () => {
    try {
      // Validate required fields
      if (!formData.name) {
        alert("Store name is required");
        return;
      }
 
      const locationData = {
        id: formData.id ? parseInt(formData.id) : undefined,
        name: formData.name,
        phone: formData.phone || undefined,
        email: formData.email || undefined,
      };
 
      const result = await apiClient.saveLocation(locationData);
 
      if (result.success) {
        setShowModal(false);
        loadStores();
        alert(formData.isNew ? "Store created successfully" : "Store updated successfully");
      } else {
        alert(result.error || "Failed to save store");
      }
    } catch (error) {
      console.error("Error saving store:", error);
      alert("Failed to save store");
    }
  };
 
  const exportToExcel = () => {
    // Create CSV content (Excel will open CSV files)
    const headers = ['ID', 'Name', 'Phone', 'Email', 'Latitude', 'Longitude', 'Store Type'];
    const csvRows = [
      headers.join(','),
      ...stores.map(store => [
        store.f100,
        `"${(store.f101 || '').replace(/"/g, '""')}"`,
        `"${(store.f150 || '').replace(/"/g, '""')}"`,
        `"${(store.f151 || '').replace(/"/g, '""')}"`,
        store.f102 || '',
        store.f103 || '',
        `"${(store.f164 || '').replace(/"/g, '""')}"`,
      ].join(','))
    ];
 
    const csvContent = csvRows.join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    
    link.setAttribute('href', url);
    link.setAttribute('download', `Stores_${new Date().toISOString().split('T')[0]}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
 
  if (loading) {
    return (
      <div className="p-6 min-h-screen">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-surface-2 rounded w-1/4"></div>
          <div className="h-64 bg-surface-2 rounded"></div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="p-6 min-h-screen">
      {/* Header */}
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-3">
          <Icon name="store" size={32} />
          Stores Management
        </h1>
        <p className="text-muted">
          Manage store locations, settings, and configurations
        </p>
      </div>
 
      {/* Action Cards */}
      <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
        <button
          onClick={openNewStoreModal}
          className="bg-surface rounded-lg shadow p-6 hover:shadow-lg transition-shadow flex flex-col items-center justify-center gap-3 border-2 border-transparent hover:border-brand"
        >
          <Icon name="add_business" size={48} className="text-brand" />
          <span className="font-semibold text-text">New Store</span>
        </button>
 
        <a
          href="/pages/settings/stores/topology"
          className="bg-surface rounded-lg shadow p-6 hover:shadow-lg transition-shadow flex flex-col items-center justify-center gap-3 border-2 border-transparent hover:border-brand"
        >
          <Icon name="hub" size={48} className="text-brand" />
          <span className="font-semibold text-text">Topology</span>
        </a>
 
        <button
          onClick={exportToExcel}
          className="bg-surface rounded-lg shadow p-6 hover:shadow-lg transition-shadow flex flex-col items-center justify-center gap-3 border-2 border-transparent hover:border-brand"
        >
          <Icon name="file_download" size={48} className="text-brand" />
          <span className="font-semibold text-text">Excel Export</span>
        </button>
      </div>
 
      {/* Search Bar */}
      <div className="bg-surface rounded-lg shadow p-4 mb-6">
        <div className="flex items-center gap-4">
          <div className="flex-1">
            <input
              type="text"
              placeholder="Search stores..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full px-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-brand focus:border-transparent"
            />
          </div>
          <div className="text-sm text-muted">
            Displaying {filteredStores.length} of {stores.length} stores
          </div>
        </div>
      </div>
 
      {/* Stores Table */}
      <div className="bg-surface rounded-lg shadow 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">
                  ID
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Name
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Phone
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Email
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="bg-surface divide-y divide-border">
              {filteredStores.map((store) => (
                <tr key={store.f100} className="hover:bg-surface-2">
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-text">
                    {store.f100}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-text">
                    {store.f101}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                    {store.f150 || "—"}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-muted">
                    {store.f151 ? (
                      <a 
                        href={`mailto:${store.f151}`}
                        className="text-brand hover:underline flex items-center gap-1"
                      >
                        <Icon name="email" size={16} />
                        {store.f151}
                      </a>
                    ) : (
                      "—"
                    )}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                    <button
                      onClick={() => openEditModal(store)}
                      className="text-brand hover:text-brand2"
                    >
                      Quick Edit
                    </button>
                    <a
                      href={`/pages/settings/stores/${store.f100}`}
                      className="text-brand hover:text-brand2"
                    >
                      Full Edit
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
 
      {/* Edit/Create Modal */}
      {showModal && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 p-4 overflow-y-auto">
          <div className="bg-surface/95 backdrop-blur-md rounded-lg shadow-xl max-w-2xl w-full my-8">
            <div className="bg-brand/90 backdrop-blur-sm text-white px-6 py-4 rounded-t-lg flex items-center justify-between">
              <h2 className="text-2xl font-bold text-white">
                {formData.isNew ? "Create New Store" : "Edit Store"}
              </h2>
              <button
                onClick={() => setShowModal(false)}
                className="text-white hover:text-white/80"
              >
                <Icon name="close" size={24} />
              </button>
            </div>
 
            <div className="p-6 bg-surface/95 backdrop-blur-md rounded-b-lg">
              <div className="space-y-4">
                {formData.isNew && (
                  <div>
                    <label className="block text-sm font-medium text-text mb-1">
                      Location ID
                    </label>
                    <input
                      type="text"
                      value={formData.id || ""}
                      onChange={(e) => setFormData({ ...formData, id: e.target.value })}
                      className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                      placeholder="Leave blank for auto-assign"
                    />
                    <p className="text-xs text-muted mt-1">Rarely used, generally left blank</p>
                  </div>
                )}
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Store Name *
                  </label>
                  <input
                    type="text"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                    required
                  />
                  <p className="text-xs text-muted mt-1">Used as name of the store on your reports</p>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Phone
                  </label>
                  <input
                    type="tel"
                    value={formData.phone}
                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-text mb-1">
                    Email
                  </label>
                  <input
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    className="w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-[#00543b] focus:border-transparent"
                  />
                </div>
              </div>
 
              <div className="mt-6 flex justify-end gap-3">
                <button
                  onClick={() => setShowModal(false)}
                  className="px-6 py-2 border border-border rounded-lg hover:bg-surface-2 transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleSave}
                  className="bg-[#00543b] text-white px-6 py-2 rounded-lg hover:bg-[#003d2b] transition-colors"
                >
                  Save
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}