christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 16:05:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(history): add record numbering and column names to Change History

Browse Source 
- Show total record count and filtered count in subtitle
- Add #N global number to each history entry row
- Add # column index inside each change detail table
- Column header already shown via headers[i] — now labeled "Column"

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Christian Vidal Wolf
2026-05-14 18:33:07 +02:00
co-authored by claude-flow
parent 9b5932920e
commit ca8a98c6c2
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HistoryView.tsx
+17 -6
View File
@@ -112,7 +112,11 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
<History className="w-8 h-8 text-blue-500" />
Change History
</h1>
<p className="text-slate-400 mt-1">Review and revert any changes made to products.</p>
<p className="text-slate-400 mt-1">
{history.length > 0 ? (
<><span className="text-white font-semibold">{history.length}</span> total records{filteredHistory.length !== history.length && <> &mdash; showing <span className="text-white font-semibold">{filteredHistory.length}</span></>}</>
) : 'Review and revert any changes made to products.'}
</p>
</div>
<div className="flex items-center gap-4">
<div className="relative">
@@ -161,22 +165,27 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
</div>
) : (
<div className="divide-y divide-slate-800">
{filteredHistory.map((entry) => {
{filteredHistory.map((entry, filteredIdx) => {
const isExpanded = expandedId === entry.id;
const changes = getChangedFields(entry.old_data, entry.new_data);
const globalNumber = history.indexOf(entry) + 1;
return (
<div key={entry.id} className={cn(
"transition-colors",
isExpanded ? "bg-blue-600/5" : "hover:bg-slate-800/30"
)}>
{/* Summary Row */}
<div
<div
className="p-4 flex items-center gap-4 cursor-pointer"
onClick={() => setExpandedId(isExpanded ? null : entry.id)}
>
{isExpanded ? <ChevronDown className="w-5 h-5 text-slate-500" /> : <ChevronRight className="w-5 h-5 text-slate-500" />}
<div className="w-8 text-right shrink-0">
<span className="text-xs font-mono text-slate-500">#{globalNumber}</span>
</div>
<div className="flex-1 grid grid-cols-4 gap-4 items-center">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-500 font-bold shrink-0">
@@ -236,7 +245,8 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
<table className="w-full text-sm">
<thead>
<tr className="bg-slate-800/50 text-slate-400 text-left">
<th className="px-4 py-2 font-medium">Field</th>
<th className="px-4 py-2 font-medium w-8">#</th>
<th className="px-4 py-2 font-medium">Column</th>
<th className="px-4 py-2 font-medium">Original Value</th>
<th className="px-4 py-2 font-medium">New Value</th>
</tr>
@@ -244,6 +254,7 @@ export function HistoryView({ headers, data, onRevert, onEdit }: HistoryViewProp
<tbody className="divide-y divide-slate-800">
{changes.map((change, idx) => (
<tr key={idx} className="hover:bg-slate-700/20">
<td className="px-4 py-2 text-slate-600 text-xs font-mono">{idx + 1}</td>
<td className="px-4 py-2 text-slate-300 font-medium whitespace-nowrap">
{change.header}
</td>