Bug/document linking (#688)

* feat: enhance supplier invoice payment process and settings handling

- Implemented linking of invoice documents to journal entries for cash payments in the supplier invoice payment process.
- Refactored settings fetching logic to improve loading states and error handling across various settings components.
- Introduced a new SettingsLoadError component to handle cases where settings fetch fails or returns no data.
- Updated useSettings hook to manage loading and error states more effectively, allowing for retries on failure.
- Enhanced tests for supplier invoice creation to ensure document IDs are persisted correctly for cash method payments.

* feat(salary): enable monthly salary edits in draft runs and handle zero-total declarations

components/settings/SettingsLoadingSkeleton.tsx

@@ -1,25 +1,26 @@
 import { Skeleton } from '@/components/ui/skeleton'
 
+/**
+ * Placeholder shown while a settings section's data loads. Mirrors the real shape
+ * of the section forms — an uppercase section heading followed by stacked
+ * label/field rows, with a hairline divider between blocks — so the swap to live
+ * content doesn't jump from a mismatched layout.
+ */
 export function SettingsLoadingSkeleton() {
   return (
-    <div className="space-y-8 animate-in fade-in duration-300">
-      {[1, 2].map(i => (
-        <div key={i} className="space-y-4">
-          <Skeleton className="h-3.5 w-24" />
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Skeleton className="h-3.5 w-20" />
-              <Skeleton className="h-10" />
+    <div className="space-y-8 animate-in fade-in duration-300" aria-busy="true">
+      {[0, 1].map((block) => (
+        <div
+          key={block}
+          className={block === 0 ? 'space-y-4' : 'space-y-4 border-t border-border pt-8'}
+        >
+          <Skeleton className="h-3.5 w-32" />
+          {[0, 1, 2].map((row) => (
+            <div key={row} className="space-y-2">
+              <Skeleton className="h-3.5 w-24" />
+              <Skeleton className="h-10 w-full max-w-md" />
             </div>
-            <div className="space-y-2">
-              <Skeleton className="h-3.5 w-28" />
-              <Skeleton className="h-10" />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Skeleton className="h-3.5 w-16" />
-            <Skeleton className="h-10" />
-          </div>
+          ))}
         </div>
       ))}
     </div>