huge refactor on web-api and web-app

This commit is contained in:
Boki 2025-06-18 10:20:05 -04:00
parent 1d299e52d4
commit 265e10a658
23 changed files with 1545 additions and 1233 deletions

View file

@ -1,11 +1,12 @@
import { DataTable } from '@/components/ui';
import { PlusIcon, XMarkIcon, CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
import { PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
import { ColumnDef } from '@tanstack/react-table';
import { useCallback, useMemo, useState, useEffect } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useExchanges } from '../hooks/useExchanges';
import { Exchange, ProviderMapping } from '../types';
import { Exchange, ProviderMapping, EditingCell, AddProviderMappingDialogState, DeleteDialogState } from '../types';
import { AddProviderMappingDialog } from './AddProviderMappingDialog';
import { DeleteExchangeDialog } from './DeleteExchangeDialog';
import { sortProviderMappings, getProviderMappingColor, formatProviderMapping, formatDate } from '../utils/formatters';
export function ExchangesTable() {
const {
@ -19,17 +20,10 @@ export function ExchangesTable() {
refetch
} = useExchanges();
const [editingCell, setEditingCell] = useState<{ id: string; field: string } | null>(null);
const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
const [editValue, setEditValue] = useState('');
const [addProviderDialog, setAddProviderDialog] = useState<{
exchangeId: string;
exchangeName: string;
} | null>(null);
const [deleteDialog, setDeleteDialog] = useState<{
exchangeId: string;
exchangeName: string;
providerMappingCount: number;
} | null>(null);
const [addProviderDialog, setAddProviderDialog] = useState<AddProviderMappingDialogState | null>(null);
const [deleteDialog, setDeleteDialog] = useState<DeleteDialogState | null>(null);
const handleCellEdit = useCallback(
async (id: string, field: string, value: string) => {
@ -246,13 +240,7 @@ export function ExchangesTable() {
// Get provider mappings directly from the exchange data
const mappings = row.original.provider_mappings || [];
// Sort mappings to show active ones first
const sortedMappings = [...mappings].sort((a, b) => {
if (a.active && !b.active) return -1;
if (!a.active && b.active) return 1;
return 0;
});
const sortedMappings = sortProviderMappings(mappings);
return (
<div className="flex flex-col gap-1">
@ -268,9 +256,8 @@ export function ExchangesTable() {
{mappings.length > 0 ? (
<div className="flex flex-wrap gap-1 text-xs">
{sortedMappings.slice(0, 3).map((mapping, index) => (
<span key={index} className={mapping.active ? 'text-green-500' : 'text-text-muted'}>
<span className={mapping.active ? 'font-bold text-green-500' : 'font-bold text-text-muted'}>{mapping.provider.toLowerCase()}</span>
<span className={mapping.active ? 'text-green-500' : 'text-text-muted'}>({mapping.provider_exchange_code})</span>
<span key={index} className={getProviderMappingColor(mapping)}>
{formatProviderMapping(mapping)}
</span>
))}
{sortedMappings.length > 3 && (
@ -321,7 +308,7 @@ export function ExchangesTable() {
size: 120,
cell: ({ getValue }) => (
<span className="text-xs text-text-muted">
{new Date(getValue() as string).toLocaleDateString()}
{formatDate(getValue() as string)}
</span>
),
},
@ -392,7 +379,7 @@ export function ExchangesTable() {
</div>
<div className="flex items-center gap-4 mt-1 text-xs text-text-muted">
<span>Confidence: {mapping.confidence}</span>
<span>Created: {new Date(mapping.created_at).toLocaleDateString()}</span>
<span>Created: {formatDate(mapping.created_at)}</span>
{mapping.auto_mapped && <span className="text-yellow-400">Auto-mapped</span>}
</div>
</div>