69 lines
3.6 KiB
TypeScript
69 lines
3.6 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import { createSignal, For, Show } from 'solid-js';
|
|
import { ChevronDown, ChevronRight, AlertCircle } from 'lucide-solid';
|
|
|
|
interface IgnoredLinesListProps {
|
|
lines: string[][];
|
|
}
|
|
|
|
const IgnoredLinesList: Component<IgnoredLinesListProps> = (props) => {
|
|
const [isOpen, setIsOpen] = createSignal(false);
|
|
|
|
return (
|
|
<div class="bg-card rounded-3xl shadow-premium border border-border overflow-hidden transition-all hover:shadow-elevated">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen())}
|
|
class="w-full flex items-center justify-between p-6 hover:bg-muted/30 transition-colors text-left"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div class="p-3 bg-muted rounded-2xl shadow-sm">
|
|
<AlertCircle class="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-black text-lg text-foreground tracking-tight">Ignored CSV Rows ({props.lines.length})</h3>
|
|
<p class="text-[10px] font-bold text-muted-foreground uppercase tracking-wider mt-0.5">Lines that didn't match the extraction rules</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-muted-foreground/40">
|
|
<Show when={isOpen()} fallback={<ChevronRight class="w-5 h-5" />}>
|
|
<ChevronDown class="w-5 h-5 transition-transform duration-300 rotate-180" />
|
|
</Show>
|
|
</div>
|
|
</button>
|
|
|
|
<Show when={isOpen()}>
|
|
<div class="border-t border-border bg-muted/20 p-6 max-h-[500px] overflow-y-auto custom-scrollbar">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/60 border-b border-border/60">
|
|
<th class="pb-3 px-3">Line</th>
|
|
<th class="pb-3 px-3">Raw Data</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-xs text-foreground font-medium">
|
|
<For each={props.lines}>
|
|
{(row, index) => (
|
|
<tr class="border-b border-border/40 last:border-0 hover:bg-card/50 transition-colors group">
|
|
<td class="py-3 px-3 font-mono text-muted-foreground/40 w-16 text-[10px]">{index() + 1}</td>
|
|
<td class="py-3 px-3 font-mono break-all leading-relaxed text-muted-foreground group-hover:text-foreground">
|
|
{row.join(' | ')}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</For>
|
|
</tbody>
|
|
</table>
|
|
<div class="mt-6 flex items-center gap-3 justify-center px-4 py-3 bg-card/50 rounded-2xl border border-border/40 shadow-inner">
|
|
<AlertCircle class="w-4 h-4 text-muted-foreground/40" />
|
|
<p class="text-[10px] font-bold text-muted-foreground/60 uppercase tracking-wider italic">
|
|
These lines were skipped because they don't follow the "Item : Description (Qty)" or "Item : Description" pattern.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default IgnoredLinesList;
|