v1.6.0: fix offer items mobile layout and localStorage draft save/restore

- Fix items table description column width on mobile (was ~82px, now ~260px)
- Activate unused offers-items-table CSS class in OfferDetail form
- Save all form fields to localStorage draft (language, VAT, exchange rate were missing)
- Use DRAFT_KEY constant in loadOfferDraft, add error logging

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-ts",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "description": "",
   "main": "dist/server.js",
   "scripts": {

src/admin/offers.css

@@ -491,10 +491,69 @@
   display: none;
 }
 
+@media (max-width: 768px) {
+  .offers-items-table .admin-table td .admin-form-input {
+    font-size: 16px;
+    min-height: 44px;
+    padding: 9px 10px;
+  }
+
+  /* Give the description column more room by shrinking numeric columns */
+  .offers-col-qty {
+    width: 4rem !important;
+  }
+  .offers-col-unit {
+    width: 4rem !important;
+  }
+  .offers-col-price {
+    width: 5.5rem !important;
+  }
+  .offers-col-included {
+    width: 3.5rem !important;
+  }
+  .offers-col-total {
+    width: 5.5rem !important;
+  }
+  .offers-col-del {
+    width: 2.5rem !important;
+  }
+}
+
 @media (max-width: 640px) {
   .offers-items-table {
     margin: 0 -1rem;
     width: calc(100% + 2rem);
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+
+  .offers-items-table .admin-table {
+    min-width: 700px;
+  }
+
+  .offers-items-table .admin-table td {
+    padding: 6px;
+    font-size: 12px;
+  }
+
+  .offers-items-table .admin-table th {
+    font-size: 10px;
+    padding: 6px;
+  }
+
+  /* Further reduce numeric columns on very small screens */
+  .offers-col-qty {
+    width: 3.5rem !important;
+  }
+  .offers-col-unit {
+    width: 3.5rem !important;
+  }
+  .offers-col-price {
+    width: 5rem !important;
+  }
+  .offers-col-total {
+    width: 5rem !important;
   }
 }
 

src/admin/pages/AuditLog.tsx

@@ -391,32 +391,25 @@ export default function AuditLog() {
       >
         <div className="admin-card-body">
           <div className="admin-table-responsive">
-            <table className="admin-table">
-              <thead>
-                <tr>
-                  <th>Čas</th>
-                  <th>Uživatel</th>
-                  <th>Akce</th>
-                  <th>Typ entity</th>
-                  <th>Popis</th>
-                  <th>IP</th>
-                </tr>
-              </thead>
-              <tbody>
-                <Skeleton
-                  name="audit-log-rows"
-                  loading={isPending}
-                  fixture={
-                    <div style={{ padding: "1rem" }}>
-                      {Array.from({ length: 10 }, (_, i) => (
-                        <div
-                          key={i}
-                          style={{
-                            display: "flex",
-                            gap: "1rem",
-                            marginBottom: "0.75rem",
-                          }}
-                        >
+            <Skeleton
+              name="audit-log-rows"
+              loading={isPending}
+              fixture={
+                <table className="admin-table">
+                  <thead>
+                    <tr>
+                      <th>Čas</th>
+                      <th>Uživatel</th>
+                      <th>Akce</th>
+                      <th>Typ entity</th>
+                      <th>Popis</th>
+                      <th>IP</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Array.from({ length: 10 }, (_, i) => (
+                      <tr key={i}>
+                        <td>
                           <div
                             style={{
                               width: 110,
@@ -425,6 +418,8 @@ export default function AuditLog() {
                               borderRadius: 4,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
                               width: 80,
@@ -433,6 +428,8 @@ export default function AuditLog() {
                               borderRadius: 4,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
                               width: 70,
@@ -441,6 +438,8 @@ export default function AuditLog() {
                               borderRadius: 10,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
                               width: 80,
@@ -449,14 +448,18 @@ export default function AuditLog() {
                               borderRadius: 4,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
-                              flex: 1,
+                              width: "100%",
                               height: 14,
                               background: "var(--bg-tertiary)",
                               borderRadius: 4,
                             }}
                           />
+                        </td>
+                        <td>
                           <div
                             style={{
                               width: 90,
@@ -465,63 +468,75 @@ export default function AuditLog() {
                               borderRadius: 4,
                             }}
                           />
-                        </div>
-                      ))}
-                    </div>
-                  }
-                >
-                  <>
-                    {logs.length === 0 && (
-                      <tr>
-                        <td colSpan={6}>
-                          <div className="admin-empty-state">
-                            <div className="admin-empty-icon">
-                              <svg
-                                width="28"
-                                height="28"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="1.5"
-                              >
-                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                <polyline points="14 2 14 8 20 8" />
-                                <line x1="16" y1="13" x2="8" y2="13" />
-                                <line x1="16" y1="17" x2="8" y2="17" />
-                              </svg>
-                            </div>
-                            <p>Žádné záznamy k zobrazení</p>
-                          </div>
                         </td>
                       </tr>
-                    )}
-                    {logs.length > 0 &&
-                      logs.map((log) => (
-                        <tr key={log.id}>
-                          <td className="admin-mono">
-                            {formatDatetime(log.created_at)}
-                          </td>
-                          <td className="fw-500">{log.username || "-"}</td>
-                          <td>
-                            <span
-                              className={`admin-badge ${ACTION_BADGE_CLASS[log.action] || "admin-badge-secondary"}`}
+                    ))}
+                  </tbody>
+                </table>
+              }
+            >
+              <table className="admin-table">
+                <thead>
+                  <tr>
+                    <th>Čas</th>
+                    <th>Uživatel</th>
+                    <th>Akce</th>
+                    <th>Typ entity</th>
+                    <th>Popis</th>
+                    <th>IP</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {logs.length === 0 && (
+                    <tr>
+                      <td colSpan={6}>
+                        <div className="admin-empty-state">
+                          <div className="admin-empty-icon">
+                            <svg
+                              width="28"
+                              height="28"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
                             >
-                              {ACTION_LABELS[log.action] || log.action}
-                            </span>
-                          </td>
-                          <td>
-                            {ENTITY_TYPE_LABELS[log.entity_type || ""] ||
-                              log.entity_type ||
-                              "-"}
-                          </td>
-                          <td>{log.description || "-"}</td>
-                          <td className="admin-mono">{log.user_ip || "-"}</td>
-                        </tr>
-                      ))}
-                  </>
-                </Skeleton>
-              </tbody>
-            </table>
+                              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                              <polyline points="14 2 14 8 20 8" />
+                              <line x1="16" y1="13" x2="8" y2="13" />
+                              <line x1="16" y1="17" x2="8" y2="17" />
+                            </svg>
+                          </div>
+                          <p>Žádné záznamy k zobrazení</p>
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                  {logs.length > 0 &&
+                    logs.map((log) => (
+                      <tr key={log.id}>
+                        <td className="admin-mono">
+                          {formatDatetime(log.created_at)}
+                        </td>
+                        <td className="fw-500">{log.username || "-"}</td>
+                        <td>
+                          <span
+                            className={`admin-badge ${ACTION_BADGE_CLASS[log.action] || "admin-badge-secondary"}`}
+                          >
+                            {ACTION_LABELS[log.action] || log.action}
+                          </span>
+                        </td>
+                        <td>
+                          {ENTITY_TYPE_LABELS[log.entity_type || ""] ||
+                            log.entity_type ||
+                            "-"}
+                        </td>
+                        <td>{log.description || "-"}</td>
+                        <td className="admin-mono">{log.user_ip || "-"}</td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </Skeleton>
           </div>
 
           <Pagination

src/admin/pages/OfferDetail.tsx

@@ -274,9 +274,10 @@ function loadOfferDraft(): {
   sections?: unknown[];
 } | null {
   try {
-    const raw = localStorage.getItem("boha_offer_draft");
+    const raw = localStorage.getItem(DRAFT_KEY);
     return raw ? JSON.parse(raw) : null;
-  } catch {
+  } catch (e) {
+    console.error("Failed to load offer draft:", e);
     return null;
   }
 }
@@ -353,17 +354,28 @@ export default function OfferDetail() {
     const draft = loadOfferDraft();
     if (draft?.form) {
       return {
-        ...emptyForm,
+        quotation_number:
+          (draft.form.quotation_number as string) || emptyForm.quotation_number,
         project_code:
           (draft.form.project_code as string) || emptyForm.project_code,
+        customer_id:
+          (draft.form.customer_id as number | null) ?? emptyForm.customer_id,
         customer_name:
           (draft.form.customer_name as string) || emptyForm.customer_name,
         created_at: (draft.form.created_at as string) || emptyForm.created_at,
         valid_until:
           (draft.form.valid_until as string) || emptyForm.valid_until,
         currency: (draft.form.currency as string) || emptyForm.currency,
-        customer_id:
-          (draft.form.customer_id as number | null) ?? emptyForm.customer_id,
+        language: (draft.form.language as string) || emptyForm.language,
+        vat_rate: (draft.form.vat_rate as number) ?? emptyForm.vat_rate,
+        apply_vat: (draft.form.apply_vat as boolean) ?? emptyForm.apply_vat,
+        exchange_rate:
+          (draft.form.exchange_rate as string) || emptyForm.exchange_rate,
+        scope_title:
+          (draft.form.scope_title as string) || emptyForm.scope_title,
+        scope_description:
+          (draft.form.scope_description as string) ||
+          emptyForm.scope_description,
       };
     }
     return emptyForm;
@@ -590,22 +602,27 @@ export default function OfferDetail() {
   useEffect(() => {
     if (isEdit) return;
     try {
+      const data = JSON.parse(debouncedDraft);
       const draft = {
         form: {
-          project_code: form.project_code,
-          customer_id: form.customer_id,
-          customer_name: form.customer_name,
-          created_at: form.created_at,
-          valid_until: form.valid_until,
-          currency: form.currency,
+          project_code: data.form.project_code ?? "",
+          customer_id: data.form.customer_id ?? null,
+          customer_name: data.form.customer_name ?? "",
+          created_at: data.form.created_at ?? "",
+          valid_until: data.form.valid_until ?? "",
+          currency: data.form.currency ?? "CZK",
+          language: data.form.language ?? "EN",
+          vat_rate: data.form.vat_rate ?? 21,
+          apply_vat: data.form.apply_vat ?? false,
+          exchange_rate: data.form.exchange_rate ?? "",
         },
-        items,
-        sections,
+        items: data.items,
+        sections: data.sections,
         savedAt: new Date().toISOString(),
       };
       localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
-    } catch {
-      /* localStorage full or unavailable */
+    } catch (e) {
+      console.error("Failed to save offer draft:", e);
     }
   }, [debouncedDraft]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -697,8 +714,8 @@ export default function OfferDetail() {
         if (!isEdit) {
           try {
             localStorage.removeItem(DRAFT_KEY);
-          } catch {
-            /* ignore */
+          } catch (e) {
+            console.error("Failed to remove offer draft:", e);
           }
         }
         if (!isEdit && result.data?.id) {
@@ -1283,7 +1300,7 @@ export default function OfferDetail() {
               </p>
             )}
 
-            <div className="admin-table-responsive">
+            <div className="offers-items-table">
               <DndContext
                 sensors={dndSensors}
                 collisionDetection={closestCenter}
@@ -1316,18 +1333,42 @@ export default function OfferDetail() {
                         <th style={{ width: "2.5rem", textAlign: "center" }}>
                           #
                         </th>
-                        <th>Popis</th>
-                        <th style={{ width: "5rem" }}>Množství</th>
-                        <th style={{ width: "5rem" }}>Jednotka</th>
-                        <th style={{ width: "7rem" }}>Cena/ks</th>
-                        <th style={{ width: "4rem", textAlign: "center" }}>
+                        <th className="offers-col-desc">Popis</th>
+                        <th
+                          className="offers-col-qty"
+                          style={{ width: "5rem" }}
+                        >
+                          Množství
+                        </th>
+                        <th
+                          className="offers-col-unit"
+                          style={{ width: "5rem" }}
+                        >
+                          Jednotka
+                        </th>
+                        <th
+                          className="offers-col-price"
+                          style={{ width: "7rem" }}
+                        >
+                          Cena/ks
+                        </th>
+                        <th
+                          className="offers-col-included"
+                          style={{ width: "4rem", textAlign: "center" }}
+                        >
                           V ceně
                         </th>
-                        <th style={{ width: "7rem", textAlign: "right" }}>
+                        <th
+                          className="offers-col-total"
+                          style={{ width: "7rem", textAlign: "right" }}
+                        >
                           Celkem
                         </th>
                         {!isInvalidated && !isLockedByOther && (
-                          <th style={{ width: "3rem" }} />
+                          <th
+                            className="offers-col-del"
+                            style={{ width: "3rem" }}
+                          />
                         )}
                       </tr>
                     </thead>

src/admin/pages/OffersTemplates.tsx

@@ -71,7 +71,7 @@ export default function OffersTemplates() {
         </div>
       </motion.div>
 
-      <div className="admin-tabs">
+      <div className="admin-tabs mb-4">
         <button
           className={`admin-tab ${activeTab === "items" ? "active" : ""}`}
           onClick={() => setActiveTab("items")}

src/admin/pages/Settings.tsx

@@ -1546,15 +1546,31 @@ export default function Settings() {
                       </tbody>
                     </table>
                   ) : (
-                    <Skeleton
-                      name="settings-permissions"
-                      loading={
-                        !role.permissions || role.permissions.length === 0
-                      }
-                      fixture={<span>...</span>}
+                    <div
+                      style={{
+                        padding: "1rem",
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "0.5rem",
+                      }}
                     >
-                      <span>{role.permissions?.length || 0} oprávnění</span>
-                    </Skeleton>
+                      <div
+                        style={{
+                          height: "0.75rem",
+                          background: "#e0e0e0",
+                          borderRadius: "4px",
+                          width: "60%",
+                        }}
+                      />
+                      <div
+                        style={{
+                          height: "0.75rem",
+                          background: "#e0e0e0",
+                          borderRadius: "4px",
+                          width: "40%",
+                        }}
+                      />
+                    </div>
                   )}
                 </div>
               </motion.div>

src/routes/admin/attendance.ts

@@ -220,8 +220,14 @@ export default async function attendanceRoutes(
       userId,
       isAdmin,
       authUserId: authData.userId,
-      month: query.month ? Number(query.month) : undefined,
-      year: query.year ? Number(query.year) : undefined,
+      month: query.month
+        ? Number(String(query.month).split("-")[1])
+        : undefined,
+      year: query.month
+        ? Number(String(query.month).split("-")[0])
+        : query.year
+          ? Number(query.year)
+          : undefined,
     });
 
     return reply.send({