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 `<i>` 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

@@ -5,33 +5,81 @@
 }
 
 <div class="content-block">
-    <h2>Willkommen bei DXApp.TemplateKitProject</h2>
+    <h2><i class="dx-icon-product"></i> DevExpress TemplateKit – Evaluierungsprojekt</h2>
+    <p class="lead text-muted">Validierung von DevExpress als Ablösung für GdPicture im Rahmen der E-Rechnungsverarbeitung</p>
     
-    <div class="alert alert-info mt-4">
+    <div class="alert alert-primary mt-4">
-        <h4>?? ZUGFeRD-Rechnungsverarbeitung</h4>
+        <h4><i class="dx-icon-todo"></i> Projektziel: ZUGFeRD/Factur-X Rechnungsverarbeitung</h4>
-        <p>Diese Anwendung ermöglicht die Verarbeitung von ZUGFeRD/Factur-X Rechnungen:</p>
+        <p>Diese Anwendung demonstriert die vollständige Verarbeitungskette für elektronische Rechnungen:</p>
-        <ul>
+        
-            <li>? Upload von PDF/A-Rechnungen</li>
+        <ol class="mt-3">
-            <li>? Automatische Extraktion von ZUGFeRD-XML</li>
+            <li class="mb-2">
-            <li>? Parsing und Speicherung in der Datenbank</li>
+                <strong>Upload & Validierung</strong>
-            <li>? Erstellung von Result-PDFs mit Verarbeitungsstempel</li>
+                <br/>
-            <li>? Anzeige von Anhängen (XML, PDF, Bilder)</li>
+                <small class="text-muted">E-Rechnungen im PDF/A-Format hochladen und auf Konformität prüfen</small>
-        </ul>
+            </li>
+            <li class="mb-2">
+                <strong>Extraktion</strong>
+                <br/>
+                <small class="text-muted">Automatische Erkennung und Extraktion eingebetteter Anhänge (ZUGFeRD-XML, Bilder, Dokumente)</small>
+            </li>
+            <li class="mb-2">
+                <strong>Datenverarbeitung</strong>
+                <br/>
+                <small class="text-muted">Parsing der Rechnungsdaten aus dem ZUGFeRD-XML und persistente Speicherung in der Datenbank</small>
+            </li>
+            <li class="mb-2">
+                <strong>Workflow-Integration</strong>
+                <br/>
+                <small class="text-muted">Durchlauf definierter Verarbeitungsschritte mit Status-Tracking</small>
+            </li>
+            <li class="mb-2">
+                <strong>Ausgabe-Generierung</strong>
+                <br/>
+                <small class="text-muted">Erstellung einer Result-PDF mit Verarbeitungsstempel und angehängtem Ergebnisbericht</small>
+            </li>
+            <li class="mb-2">
+                <strong>Visualisierung</strong>
+                <br/>
+                <small class="text-muted">Interaktive Anzeige aller Anhänge (XML mit Syntax-Highlighting, PDF-Viewer, Bilder)</small>
+            </li>
+        </ol>
     </div>
 
-    <div class="mt-4">
+    <div class="row mt-4">
-        <h4>Navigation</h4>
+        <div class="col-md-6">
-        <div class="list-group">
+            <div class="card">
-            <a href="/Invoices/Upload" class="list-group-item list-group-item-action">
+                <div class="card-body">
-                <strong>?? PDF hochladen</strong>
+                    <h5 class="card-title"><i class="dx-icon-upload"></i> Rechnungen hochladen</h5>
-                <br/>
+                    <p class="card-text">Laden Sie ZUGFeRD-konforme E-Rechnungen hoch und starten Sie die automatische Verarbeitung.</p>
-                <small class="text-muted">Laden Sie eine ZUGFeRD-Rechnung hoch und verarbeiten Sie diese.</small>
+                    <a href="/Invoices/Upload" class="btn btn-primary">
-            </a>
+                        <i class="dx-icon-upload"></i> Zum Upload
-            <a href="/Invoices" class="list-group-item list-group-item-action">
-                <strong>?? Rechnungen</strong>
-                <br/>
-                <small class="text-muted">Zeigen Sie alle importierten Rechnungen an.</small>
                     </a>
                 </div>
             </div>
         </div>
+        <div class="col-md-6">
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title"><i class="dx-icon-chart"></i> Rechnungsübersicht</h5>
+                    <p class="card-text">Zeigen Sie alle importierten Rechnungen an und greifen Sie auf Details und Anhänge zu.</p>
+                    <a href="/Invoices" class="btn btn-secondary">
+                        <i class="dx-icon-doc"></i> Zur Übersicht
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="alert alert-light mt-4">
+        <h6 class="mb-2"><i class="dx-icon-preferences"></i> Technologie-Stack</h6>
+        <div class="d-flex flex-wrap gap-2">
+            <span class="badge bg-secondary">ASP.NET Core 8.0</span>
+            <span class="badge bg-secondary">DevExpress v25.2</span>
+            <span class="badge bg-secondary">Entity Framework Core</span>
+            <span class="badge bg-secondary">PDF.js</span>
+            <span class="badge bg-secondary">CodeMirror</span>
+            <span class="badge bg-secondary">SQL Server</span>
+        </div>
+    </div>
+</div>

DXApp.TemplateKitProject/Pages/Invoices/Details.cshtml

@@ -11,14 +11,14 @@
     }
 }
 
-<h2>📄 Rechnungsdetails</h2>
+<h2><i class="dx-icon-doc"></i> Rechnungsdetails</h2>
-<a href="/Invoices" class="btn btn-secondary mb-3">← Zurück zur Liste</a>
+<a href="/Invoices" class="btn btn-secondary mb-3"><i class="dx-icon-back"></i> Zurück zur Liste</a>
 
 @if (!string.IsNullOrEmpty(Model.Invoice?.ResultFilePath))
 {
     <button class="btn btn-primary mb-3 ms-2"
             onclick="openPdfViewer(@Model.Invoice.Id)">
-        📄 Ergebnis anzeigen
+        <i class="dx-icon-pdffile"></i> Ergebnis anzeigen
     </button>
 }
 
@@ -60,26 +60,26 @@ else
     @* Anhänge-Sektion *@
     @if (Model.Invoice.Attachments.Any())
     {
-        <h4 class="mt-4">📎 Anhänge (@Model.Invoice.Attachments.Count)</h4>
+        <h4 class="mt-4"><i class="dx-icon-attach"></i> Anhänge (@Model.Invoice.Attachments.Count)</h4>
         <div class="list-group">
             @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" => "📋",
+                    ".xml" => "dx-icon-exportxlsx",
-                    ".pdf" => "📄",
+                    ".pdf" => "dx-icon-pdffile",
-                    ".jpg" or ".jpeg" or ".png" or ".gif" => "🖼️",
+                    ".jpg" or ".jpeg" or ".png" or ".gif" => "dx-icon-image",
-                    ".txt" => "📝",
+                    ".txt" => "dx-icon-txtfile",
-                    _ => "📎"
+                    _ => "dx-icon-file"
                 };
 
                 <a href="javascript:void(0);" 
                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                    onclick="openAttachmentViewer('@attachment.OriginalFileName', '@Uri.EscapeDataString(attachment.SavedFilePath)', '@extension')">
                     <div>
-                        <span class="me-2">@icon</span>
+                        <i class="@icon me-2"></i>
                         <strong>@attachment.OriginalFileName</strong>
                         @if (attachment.IsZugferdXml)
                         {
@@ -98,7 +98,7 @@ else
     }
     else
     {
-        <h4 class="mt-4">📎 Anhänge</h4>
+        <h4 class="mt-4"><i class="dx-icon-attach"></i> Anhänge</h4>
         <div class="alert alert-info">Keine Anhänge extrahiert.</div>
     }