page.tsx

Go to the documentation of this file.

'use client';
 
import { useState, useEffect } from 'react';
import Link from 'next/link';
 
interface ApiUser {
  f100: string;  // API Key
  f110: string;  // Comments/Description
  f120?: string; // Status
  f130?: string; // Created date
  f140?: string; // Last used
}
 
export default function ApiUsersPage() {
  const [users, setUsers] = useState<ApiUser[]>([]);
  const [filteredUsers, setFilteredUsers] = useState<ApiUser[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  
  // Modal states
  const [showNewUserModal, setShowNewUserModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [selectedUser, setSelectedUser] = useState<ApiUser | null>(null);
  
  // New user form
  const [newUserForm, setNewUserForm] = useState({
    comments: '',
    permissions: [] as string[],
  });
 
  useEffect(() => {
    loadApiUsers();
  }, []);
 
  useEffect(() => {
    filterUsers();
  }, [searchQuery, users]);
 
  const loadApiUsers = async () => {
    try {
      const response = await fetch('/api/v1/messaging/api-users');
      
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        setError('⚠️ API Users API not yet implemented - UI demonstration mode');
        setUsers([
          {
            f100: 'fpk_live_1234567890abcdef',
            f110: 'Production API - Main Store Integration',
            f120: 'Active',
            f130: '2024-01-15',
            f140: '2024-12-28'
          },
          {
            f100: 'fpk_test_abcdefghijklmnop',
            f110: 'Test Environment - Development',
            f120: 'Active',
            f130: '2024-03-20',
            f140: '2024-12-27'
          },
          {
            f100: 'fpk_live_qrstuvwxyz123456',
            f110: 'Mobile App Integration',
            f120: 'Inactive',
            f130: '2024-06-10',
            f140: '2024-11-15'
          }
        ]);
        setLoading(false);
        return;
      }
 
      const data = await response.json();
      setUsers(data.users || []);
      setError('');
    } catch (err) {
      console.error('Error loading API users:', err);
      setError('Failed to load API users. Using demo mode.');
      setUsers([
        {
          f100: 'fpk_live_1234567890abcdef',
          f110: 'Production API - Main Store Integration',
          f120: 'Active',
          f130: '2024-01-15',
          f140: '2024-12-28'
        }
      ]);
    } finally {
      setLoading(false);
    }
  };
 
  const filterUsers = () => {
    if (!searchQuery.trim()) {
      setFilteredUsers(users);
      return;
    }
 
    const query = searchQuery.toLowerCase();
    const filtered = users.filter(user => 
      user.f100.toLowerCase().includes(query) ||
      user.f110.toLowerCase().includes(query)
    );
    setFilteredUsers(filtered);
  };
 
  const createNewUser = async () => {
    try {
      const response = await fetch('/api/v1/messaging/api-users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          comments: newUserForm.comments,
          permissions: newUserForm.permissions,
        }),
      });
 
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        alert('⚠️ API User creation not yet implemented. In production, this would create a new API key.');
      } else {
        const data = await response.json();
        alert(`New API Key created: ${data.apiKey}`);
      }
 
      closeAllModals();
      setTimeout(loadApiUsers, 100);
    } catch (err) {
      console.error('Error creating API user:', err);
      alert('Failed to create API user');
    }
  };
 
  const revokeApiKey = async (user: ApiUser) => {
    if (!confirm(`Are you sure you want to revoke this API key?\n\n${user.f100}\n\nThis action cannot be undone.`)) {
      return;
    }
 
    try {
      const response = await fetch(`/api/v1/messaging/api-users/${user.f100}`, {
        method: 'DELETE',
      });
 
      if (!response.ok || !response.headers.get("content-type")?.includes("application/json")) {
        alert('⚠️ API Key revocation not yet implemented. In production, this would revoke the key.');
      } else {
        alert('API Key revoked successfully');
      }
 
      setTimeout(loadApiUsers, 100);
    } catch (err) {
      console.error('Error revoking API key:', err);
      alert('Failed to revoke API key');
    }
  };
 
  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text).then(() => {
      alert('API Key copied to clipboard');
    }).catch(() => {
      alert('Failed to copy to clipboard');
    });
  };
 
  const closeAllModals = () => {
    setShowNewUserModal(false);
    setShowEditModal(false);
    setSelectedUser(null);
    setNewUserForm({
      comments: '',
      permissions: [],
    });
  };
 
  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 p-8">
        <div className="max-w-7xl mx-auto">
          <div className="text-center py-12">
            <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-[#00946b]"></div>
            <p className="mt-2 text-gray-600">Loading API users...</p>
          </div>
        </div>
      </div>
    );
  }
 
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <div>
              <Link href="/marketing/messaging" className="text-[#00946b] hover:text-[#007055] mb-2 inline-block">
                ← Back to Messaging
              </Link>
              <h1 className="text-3xl font-bold text-gray-900">🔑 RetailAPI User Management</h1>
            </div>
            <button
              onClick={() => setShowNewUserModal(true)}
              className="bg-[#00946b] text-white px-6 py-3 rounded-lg hover:bg-[#007055] font-medium transition-colors"
            >
              + Create New API Key
            </button>
          </div>
          
          {error && (
            <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
              <p className="text-yellow-700">{error}</p>
            </div>
          )}
 
          <div className="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
            <p className="text-blue-700">
              <strong>Note:</strong> API keys provide programmatic access to your POS system. Keep these keys secure and never share them publicly.
            </p>
          </div>
        </div>
 
        {/* Search */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6">
          <div className="flex gap-4">
            <div className="flex-1">
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search by API key or description..."
                className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
              />
            </div>
            <button
              onClick={filterUsers}
              className="px-6 py-2 bg-[#00946b] text-white rounded-md hover:bg-[#007055] font-medium transition-colors"
            >
              Search
            </button>
          </div>
          <div className="mt-2 text-sm text-gray-600">
            Displaying {filteredUsers.length} of {users.length} API keys
          </div>
        </div>
 
        {/* API Users Table */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
          <div className="px-6 py-4 border-b border-gray-200">
            <h2 className="text-xl font-semibold text-gray-900">API Keys</h2>
          </div>
          
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">API Key</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Used</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {filteredUsers.length === 0 ? (
                  <tr>
                    <td colSpan={6} className="px-6 py-8 text-center text-gray-500">
                      {searchQuery ? 'No API keys match your search.' : 'No API keys configured. Click "Create New API Key" to add one.'}
                    </td>
                  </tr>
                ) : (
                  filteredUsers.map((user) => (
                    <tr key={user.f100} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center gap-2">
                          <code className="text-sm font-mono text-gray-900 bg-gray-100 px-2 py-1 rounded">
                            {user.f100}
                          </code>
                          <button
                            onClick={() => copyToClipboard(user.f100)}
                            className="text-gray-500 hover:text-gray-700"
                            title="Copy to clipboard"
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                          </button>
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{user.f110}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span
                          className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                            user.f120 === 'Active'
                              ? 'bg-green-100 text-green-800'
                              : 'bg-gray-100 text-gray-800'
                          }`}
                        >
                          {user.f120 || 'Active'}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                        {user.f130 || '-'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                        {user.f140 || '-'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm">
                        <div className="flex gap-2">
                          <button
                            onClick={() => {
                              setSelectedUser(user);
                              setShowEditModal(true);
                            }}
                            className="text-blue-600 hover:text-blue-800 font-medium"
                          >
                            Edit
                          </button>
                          <button
                            onClick={() => revokeApiKey(user)}
                            className="text-red-600 hover:text-red-800 font-medium"
                          >
                            Revoke
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
 
      {/* New API Key Modal */}
      {showNewUserModal && (
        <div className="modal-overlay" onClick={closeAllModals}>
          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full" onClick={(e) => e.stopPropagation()}>
            <div className="bg-[#00946b] text-white px-6 py-4 rounded-t-lg flex justify-between items-center">
              <h2 className="text-xl font-semibold">Create New API Key</h2>
              <button onClick={closeAllModals} className="text-white hover:text-gray-200 text-2xl">×</button>
            </div>
            
            <div className="p-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Description / Purpose</label>
                  <input
                    type="text"
                    value={newUserForm.comments}
                    onChange={(e) => setNewUserForm({ ...newUserForm, comments: e.target.value })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                    placeholder="e.g., Production API - Main Store"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Permissions</label>
                  <div className="space-y-2">
                    {['Read Products', 'Write Products', 'Read Sales', 'Write Sales', 'Read Customers', 'Write Customers'].map((perm) => (
                      <label key={perm} className="flex items-center gap-2">
                        <input
                          type="checkbox"
                          checked={newUserForm.permissions.includes(perm)}
                          onChange={(e) => {
                            if (e.target.checked) {
                              setNewUserForm({ ...newUserForm, permissions: [...newUserForm.permissions, perm] });
                            } else {
                              setNewUserForm({ ...newUserForm, permissions: newUserForm.permissions.filter(p => p !== perm) });
                            }
                          }}
                          className="rounded border-gray-300 text-[#00946b] focus:ring-[#00946b]"
                        />
                        <span className="text-sm text-gray-700">{perm}</span>
                      </label>
                    ))}
                  </div>
                </div>
 
                <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                  <p className="text-sm text-yellow-700">
                    <strong>Important:</strong> The API key will only be shown once. Make sure to copy it and store it securely.
                  </p>
                </div>
              </div>
 
              <div className="mt-6 flex justify-end gap-3">
                <button
                  onClick={closeAllModals}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={createNewUser}
                  disabled={!newUserForm.comments}
                  className="px-4 py-2 bg-[#00946b] text-white rounded-md hover:bg-[#007055] disabled:bg-gray-400 disabled:cursor-not-allowed"
                >
                  Create API Key
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
 
      {/* Edit Modal */}
      {showEditModal && selectedUser && (
        <div className="modal-overlay" onClick={closeAllModals}>
          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full" onClick={(e) => e.stopPropagation()}>
            <div className="bg-[#00946b] text-white px-6 py-4 rounded-t-lg flex justify-between items-center">
              <h2 className="text-xl font-semibold">Edit API Key</h2>
              <button onClick={closeAllModals} className="text-white hover:text-gray-200 text-2xl">×</button>
            </div>
            
            <div className="p-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">API Key</label>
                  <code className="block w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md text-sm font-mono">
                    {selectedUser.f100}
                  </code>
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                  <input
                    type="text"
                    defaultValue={selectedUser.f110}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]"
                  />
                </div>
 
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
                  <select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00946b]">
                    <option value="Active">Active</option>
                    <option value="Inactive">Inactive</option>
                  </select>
                </div>
              </div>
 
              <div className="mt-6 flex justify-end gap-3">
                <button
                  onClick={closeAllModals}
                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50"
                >
                  Cancel
                </button>
                <button
                  onClick={() => {
                    alert('⚠️ API Key update not yet implemented');
                    closeAllModals();
                  }}
                  className="px-4 py-2 bg-[#00946b] text-white rounded-md hover:bg-[#007055]"
                >
                  Save Changes
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}