page.tsx

Go to the documentation of this file.

"use client";
 
import { useState } from 'react';
 
export default function StoresSyncPage() {
  const [syncing, setSyncing] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
 
  async function handleSync() {
    setSyncing(true);
    setError(null);
    setResult(null);
 
    try {
      const response = await fetch('/api/auth/stores', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
 
      const data = await response.json();
 
      if (response.ok) {
        setResult(data);
      } else {
        setError(data.error || 'Sync failed');
      }
    } catch (err: any) {
      setError(err.message || 'Failed to sync stores');
    } finally {
      setSyncing(false);
    }
  }
 
  async function handleViewStores() {
    try {
      const response = await fetch('/api/auth/stores?sync=true');
      const data = await response.json();
      setResult(data);
    } catch (err: any) {
      setError(err.message || 'Failed to fetch stores');
    }
  }
 
  return (
    <div className="p-8 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-8">Stores Sync Admin</h1>
 
      <div className="bg-white p-6 rounded-lg shadow-md mb-6">
        <h2 className="text-xl font-semibold mb-4">Sync Stores from Fieldpine</h2>
        <p className="text-gray-600 mb-4">
          This will fetch all locations from the Fieldpine API and update the stores manifest.
        </p>
        
        <div className="flex gap-4">
          <button
            onClick={handleSync}
            disabled={syncing}
            className="bg-brand text-white px-6 py-2 rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {syncing ? 'Syncing...' : 'Sync Stores Now'}
          </button>
 
          <button
            onClick={handleViewStores}
            className="bg-surface border-2 border-border text-text px-6 py-2 rounded-md hover:bg-surface-2"
          >
            View Current Stores
          </button>
        </div>
      </div>
 
      {error && (
        <div className="border px-4 py-3 rounded-md mb-6" style={{ background: 'rgba(var(--danger), 0.1)', borderColor: 'var(--danger)', color: 'var(--danger)' }}>
          <p className="font-semibold">Error</p>
          <p>{error}</p>
        </div>
      )}
 
      {result && (
        <div className="border px-4 py-3 rounded-md mb-6" style={{ background: 'rgba(var(--success), 0.1)', borderColor: 'var(--success)', color: 'var(--success)' }}>
          <p className="font-semibold mb-2">Success!</p>
          <div className="text-sm">
            <p><strong>Store Count:</strong> {result.storeCount || result.data?.length || 'N/A'}</p>
            <p><strong>Last Updated:</strong> {result.lastUpdated || 'N/A'}</p>
            {result.message && <p><strong>Message:</strong> {result.message}</p>}
          </div>
 
          {result.data && (
            <details className="mt-4">
              <summary className="cursor-pointer font-semibold">View Stores</summary>
              <pre className="mt-2 p-4 bg-white rounded border overflow-auto max-h-96 text-xs">
                {JSON.stringify(result.data, null, 2)}
              </pre>
            </details>
          )}
        </div>
      )}
 
      <div className="bg-blue-50 border border-blue-200 p-4 rounded-md">
        <h3 className="font-semibold mb-2">How it works:</h3>
        <ol className="list-decimal list-inside space-y-1 text-sm text-gray-700">
          <li>Fetches all locations from <code>/api/v1/locations</code></li>
          <li>Maps Fieldpine location fields to Store format</li>
          <li>Updates <code>/data/config/stores-manifest.json</code></li>
          <li>Clears the API cache</li>
          <li>New stores appear in the login dropdown immediately</li>
        </ol>
      </div>
    </div>
  );
}