From 84a4c182e2705814a7eeb5e8d351d9f921abf300 Mon Sep 17 00:00:00 2001 From: OlgunR Date: Tue, 2 Jun 2026 16:56:50 +0200 Subject: [PATCH] Modernize UI with DevExpress icons and improved layout Updated `Index.cshtml`: - Added icons and a more descriptive project title. - Introduced a new introductory paragraph explaining the app's purpose. - Replaced the old alert section with a detailed workflow explanation. - Added cards for invoice upload and summary navigation. - Included a technology stack section with badges for key tools. Updated `Details.cshtml`: - Replaced text-based icons with DevExpress icons for titles, buttons, and attachments. - Improved attachment handling with `` tags and consistent icon usage. - Updated "No attachments" message to include an icon. These changes enhance the UI's visual consistency, usability, and professionalism. --- DXApp.TemplateKitProject/Pages/Index.cshtml | 96 ++++++++++++++----- .../Pages/Invoices/Details.cshtml | 24 ++--- 2 files changed, 84 insertions(+), 36 deletions(-) diff --git a/DXApp.TemplateKitProject/Pages/Index.cshtml b/DXApp.TemplateKitProject/Pages/Index.cshtml index e19bfa2..a6847ba 100644 --- a/DXApp.TemplateKitProject/Pages/Index.cshtml +++ b/DXApp.TemplateKitProject/Pages/Index.cshtml @@ -5,33 +5,81 @@ }
-

Willkommen bei DXApp.TemplateKitProject

+

DevExpress TemplateKit – Evaluierungsprojekt

+

Validierung von DevExpress als Ablösung für GdPicture im Rahmen der E-Rechnungsverarbeitung

-
-

?? ZUGFeRD-Rechnungsverarbeitung

-

Diese Anwendung ermöglicht die Verarbeitung von ZUGFeRD/Factur-X Rechnungen:

-
    -
  • ? Upload von PDF/A-Rechnungen
    • -
  • ? Automatische Extraktion von ZUGFeRD-XML
    • -
  • ? Parsing und Speicherung in der Datenbank
    • -
  • ? Erstellung von Result-PDFs mit Verarbeitungsstempel
    • -
  • ? Anzeige von Anhängen (XML, PDF, Bilder)
    • -
+
+

Projektziel: ZUGFeRD/Factur-X Rechnungsverarbeitung

+

Diese Anwendung demonstriert die vollständige Verarbeitungskette für elektronische Rechnungen:

+ +
    +
  1. + Upload & Validierung +
    + E-Rechnungen im PDF/A-Format hochladen und auf Konformität prüfen +
    2. +
  2. + Extraktion +
    + Automatische Erkennung und Extraktion eingebetteter Anhänge (ZUGFeRD-XML, Bilder, Dokumente) +
    3. +
  3. + Datenverarbeitung +
    + Parsing der Rechnungsdaten aus dem ZUGFeRD-XML und persistente Speicherung in der Datenbank +
    4. +
  4. + Workflow-Integration +
    + Durchlauf definierter Verarbeitungsschritte mit Status-Tracking +
    5. +
  5. + Ausgabe-Generierung +
    + Erstellung einer Result-PDF mit Verarbeitungsstempel und angehängtem Ergebnisbericht +
    6. +
  6. + Visualisierung +
    + Interaktive Anzeige aller Anhänge (XML mit Syntax-Highlighting, PDF-Viewer, Bilder) +
    7. +
-
-

Navigation

-
- - ?? PDF hochladen -
- Laden Sie eine ZUGFeRD-Rechnung hoch und verarbeiten Sie diese. - - - ?? Rechnungen -
- Zeigen Sie alle importierten Rechnungen an. - +
+
+
+
+
Rechnungen hochladen
+

Laden Sie ZUGFeRD-konforme E-Rechnungen hoch und starten Sie die automatische Verarbeitung.

+ + Zum Upload + +
+
+
+
+
+
+
Rechnungsübersicht
+

Zeigen Sie alle importierten Rechnungen an und greifen Sie auf Details und Anhänge zu.

+ + Zur Übersicht + +
+
+
+
+ +
+
Technologie-Stack
+
+ ASP.NET Core 8.0 + DevExpress v25.2 + Entity Framework Core + PDF.js + CodeMirror + SQL Server
\ No newline at end of file diff --git a/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml b/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml index 6a3d82d..d0f8b2b 100644 --- a/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml +++ b/DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml @@ -11,14 +11,14 @@ } } -

šŸ“„ Rechnungsdetails

-ā† ZurĆ¼ck zur Liste +

Rechnungsdetails

+ ZurĆ¼ck zur Liste @if (!string.IsNullOrEmpty(Model.Invoice?.ResultFilePath)) { } @@ -60,26 +60,26 @@ else @* AnhƤnge-Sektion *@ @if (Model.Invoice.Attachments.Any()) { -

šŸ“Ž AnhƤnge (@Model.Invoice.Attachments.Count)

+

AnhƤnge (@Model.Invoice.Attachments.Count)

@foreach (var attachment in Model.Invoice.Attachments) { - var icon = attachment.IsZugferdXml ? "šŸ“‹" : "šŸ“„"; + var icon = "dx-icon-file"; var extension = System.IO.Path.GetExtension(attachment.OriginalFileName).ToLowerInvariant(); icon = extension switch { - ".xml" => "šŸ“‹", - ".pdf" => "šŸ“„", - ".jpg" or ".jpeg" or ".png" or ".gif" => "šŸ–¼ļø", - ".txt" => "šŸ“", - _ => "šŸ“Ž" + ".xml" => "dx-icon-exportxlsx", + ".pdf" => "dx-icon-pdffile", + ".jpg" or ".jpeg" or ".png" or ".gif" => "dx-icon-image", + ".txt" => "dx-icon-txtfile", + _ => "dx-icon-file" };
- @icon + @attachment.OriginalFileName @if (attachment.IsZugferdXml) { @@ -98,7 +98,7 @@ else } else { -

šŸ“Ž AnhƤnge

+

AnhƤnge

Keine AnhƤnge extrahiert.
}