huge refactor on web-api and web-app
This commit is contained in:
parent
1d299e52d4
commit
265e10a658
23 changed files with 1545 additions and 1233 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue