added invoices and status in cockpit, created info button for contract status types

frontend/src/pages/contracts/ContractForm.tsx

@@ -8,7 +8,7 @@ import Button from '../../components/ui/Button';
 import Input from '../../components/ui/Input';
 import Select from '../../components/ui/Select';
 import type { ContractType } from '../../types';
-import { Plus, Trash2, Eye, EyeOff } from 'lucide-react';
+import { Plus, Trash2, Eye, EyeOff, Info, X } from 'lucide-react';
 
 // Contract types are now loaded dynamically from the database
 
@@ -21,6 +21,42 @@ const statusOptions = [
   { value: 'DEACTIVATED', label: 'Deaktiviert' },
 ];
 
+// Status-Erklärungen für Info-Modal
+const statusDescriptions = [
+  { status: 'DRAFT', label: 'Entwurf', description: 'Vertrag wird noch vorbereitet', color: 'text-gray-600' },
+  { status: 'PENDING', label: 'Ausstehend', description: 'Wartet auf Aktivierung', color: 'text-yellow-600' },
+  { status: 'ACTIVE', label: 'Aktiv', description: 'Vertrag läuft normal', color: 'text-green-600' },
+  { status: 'EXPIRED', label: 'Abgelaufen', description: 'Laufzeit vorbei, läuft aber ohne Kündigung weiter', color: 'text-orange-600' },
+  { status: 'CANCELLED', label: 'Gekündigt', description: 'Aktive Kündigung eingereicht, Vertrag endet', color: 'text-red-600' },
+  { status: 'DEACTIVATED', label: 'Deaktiviert', description: 'Manuell beendet/archiviert', color: 'text-gray-500' },
+];
+
+function StatusInfoModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/20" onClick={onClose} />
+      <div className="relative bg-white rounded-lg shadow-xl p-4 max-w-sm w-full mx-4">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-sm font-semibold text-gray-900">Vertragsstatus-Übersicht</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+        <div className="space-y-2">
+          {statusDescriptions.map(({ status, label, description, color }) => (
+            <div key={status} className="flex items-start gap-2">
+              <span className={`font-medium text-sm min-w-[90px] ${color}`}>{label}</span>
+              <span className="text-sm text-gray-600">{description}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function ContractForm() {
   const { id } = useParams();
   const [searchParams] = useSearchParams();
@@ -143,6 +179,9 @@ export default function ContractForm() {
   const [showSimPins, setShowSimPins] = useState<Record<number, boolean>>({});
   const [showSimPuks, setShowSimPuks] = useState<Record<number, boolean>>({});
 
+  // Status-Info Modal
+  const [showStatusInfo, setShowStatusInfo] = useState(false);
+
   // For new contracts, mark as "loaded" immediately so provider change detection works
   useEffect(() => {
     if (!isEdit) {
@@ -635,11 +674,23 @@ export default function ContractForm() {
               options={typeOptions}
             />
 
-            <Select
-              label="Status"
-              {...register('status')}
-              options={statusOptions}
-            />
+            <div>
+              <div className="flex items-center gap-1 mb-1">
+                <label className="block text-sm font-medium text-gray-700">Status</label>
+                <button
+                  type="button"
+                  onClick={() => setShowStatusInfo(true)}
+                  className="text-gray-400 hover:text-blue-600 transition-colors"
+                  title="Status-Erklärung"
+                >
+                  <Info className="w-4 h-4" />
+                </button>
+              </div>
+              <Select
+                {...register('status')}
+                options={statusOptions}
+              />
+            </div>
 
             <Select
               label="Vertriebsplattform"
@@ -1322,6 +1373,9 @@ export default function ContractForm() {
           </Button>
         </div>
       </form>
+
+      {/* Status-Info Modal */}
+      <StatusInfoModal isOpen={showStatusInfo} onClose={() => setShowStatusInfo(false)} />
     </div>
   );
 }