Hamza/musadeq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚀 Multi-invoice extraction and detailed validation feedback

Browse Source
This commit is contained in:
Hamza-Ayed
2026-04-19 16:13:09 +03:00
parent 6b9ce6e95b
commit 2e2d76c0a8
5 changed files with 121 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/pages/invoices/InvoicesPage.tsx
View File

@@ -137,7 +137,8 @@ export const InvoicesPage = () => {
inv.company?.name?.includes(searchTerm)
);
const StatusBadge = ({ status }: { status: string }) => {
const StatusBadge = ({ invoice }: { invoice: any }) => {
const status = invoice.status;
const config: any = {
approved: { color: 'text-emerald-700 bg-emerald-50 border-emerald-100', icon: CheckCircle2, label: 'تم التصديق' },
validated: { color: 'text-blue-700 bg-blue-50 border-blue-100', icon: CheckCircle2, label: 'جاهز للإرسال' },
@@ -147,8 +148,16 @@ export const InvoicesPage = () => {
validation_failed: { color: 'text-red-700 bg-red-50 border-red-100', icon: AlertCircle, label: 'خطأ في التحقق' },
};
const { color, icon: Icon, label } = config[status] || { color: 'text-slate-500 bg-slate-50', icon: Clock, label: status };
const errorTitle = status === 'validation_failed' && invoice.validation_errors
? invoice.validation_errors.join('\n')
: undefined;
return (
<span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold border ${color} uppercase tracking-tight`}>
<span
title={errorTitle}
className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold border ${color} uppercase tracking-tight cursor-help`}
>
<Icon className="w-3 h-3" />
{label}
</span>
@@ -243,7 +252,7 @@ export const InvoicesPage = () => {
<td className="px-6 py-4 font-mono font-bold text-slate-800 text-left">
{Number(inv.grand_total).toLocaleString('en-US', { minimumFractionDigits: 3 })}
</td>
<td className="px-6 py-4"><StatusBadge status={inv.status} /></td>
<td className="px-6 py-4"><StatusBadge invoice={inv} /></td>
<td className="px-6 py-4 text-center relative">
<div className="flex items-center justify-center gap-2">
<button
@@ -437,6 +446,20 @@ export const InvoicesPage = () => {
</button>
</header>
{viewingInvoice.validation_errors && viewingInvoice.validation_errors.length > 0 && (
<div className="px-8 py-4 bg-red-50 border-b border-red-100 flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-red-600 mt-0.5 shrink-0" />
<div>
<h4 className="text-sm font-bold text-red-900 mb-1">فشل التحقق الضريبي:</h4>
<ul className="text-xs text-red-700 space-y-1 list-disc list-inside">
{viewingInvoice.validation_errors.map((err: string, i: number) => (
<li key={i}>{err}</li>
))}
</ul>
</div>
</div>
)}
<div className="flex-1 overflow-auto bg-slate-100 p-8 flex justify-center items-start">
<div className="bg-white shadow-2xl rounded-sm overflow-hidden max-w-full">
<img
@@ -471,7 +494,7 @@ export const InvoicesPage = () => {
<div className="w-px h-10 bg-slate-200" />
<div>
<p className="text-[10px] uppercase tracking-widest text-slate-400 font-bold mb-1">الحالة</p>
<StatusBadge status={viewingInvoice.status} />
<StatusBadge invoice={viewingInvoice} />
</div>
</div>
<div className="flex gap-4">