Upload 3 files

app.js

@@ -35,7 +35,7 @@ const elements = Object.fromEntries(
     "madonDialog", "closeMadonDialog", "madonForm", "madonRepresentativeOptions",
     "madonMessagePreview", "copyMadonMessage", "openMadonGroup", "sendMadonMessage",
     "documentationDialog", "closeDocumentationDialog", "documentationEntity",
-    "documentationUnavailable", "documentationForm", "fieldStatus", "fieldStatement",
+    "documentationUnavailable", "documentationForm", "fieldStatus", "otherStatusField", "otherStatus", "fieldStatement",
     "statementCount", "documentationPhotos", "photoPreviews", "documentationError",
     "uploadProgress", "uploadProgressBar", "cancelDocumentationButton", "saveDocumentationButton",
     "adminView", "adminLogoutButton", "adminUpdatedAt", "refreshAdminButton", "adminStats",
@@ -469,7 +469,7 @@ function renderAdminRecords() {
     details.className = "admin-record-details";
     details.append(
       detailItem("السجل التجاري", record.commercialRecord || "-"),
-      detailItem("حالة التوثيق", record.fieldStatus || "-"),
+      detailItem("الحالة الميدانية", record.fieldStatus || "-"),
       detailItem("عدد الصور", record.photoCount || 0),
     );
     if (record.statement) details.append(detailItem("الإفادة", record.statement, "wide"));
@@ -1132,6 +1132,8 @@ function openDocumentationDialog(row) {
     detailItem("رقم العقد", row.contractNumber || "لا يوجد رقم عقد", "ltr-value"),
   );
   elements.fieldStatus.value = "";
+  elements.otherStatus.value = "";
+  elements.otherStatusField.hidden = true;
   elements.fieldStatement.value = "";
   elements.statementCount.textContent = "0";
   elements.documentationPhotos.value = "";
@@ -1552,6 +1554,17 @@ elements.cancelDocumentationButton.addEventListener("click", closeDocumentationD
 elements.documentationDialog.addEventListener("click", (event) => {
   if (event.target === elements.documentationDialog) closeDocumentationDialog();
 });
+elements.fieldStatus.addEventListener("change", () => {
+  const isOther = elements.fieldStatus.value === "أخرى";
+  elements.otherStatusField.hidden = !isOther;
+  elements.otherStatus.required = isOther;
+  if (!isOther) elements.otherStatus.value = "";
+  elements.documentationError.textContent = "";
+  if (isOther) elements.otherStatus.focus();
+});
+elements.otherStatus.addEventListener("input", () => {
+  elements.documentationError.textContent = "";
+});
 elements.fieldStatement.addEventListener("input", () => {
   elements.statementCount.textContent = String(elements.fieldStatement.value.length);
   elements.documentationError.textContent = "";
@@ -1574,10 +1587,16 @@ elements.documentationForm.addEventListener("submit", async (event) => {
     return;
   }
   if (!elements.fieldStatus.value) {
-    elements.documentationError.textContent = "اختر حالة التوثيق.";
+    elements.documentationError.textContent = "اختر الحالة الميدانية.";
     elements.fieldStatus.focus();
     return;
   }
+  const customStatus = elements.otherStatus.value.trim();
+  if (elements.fieldStatus.value === "أخرى" && customStatus.length < 3) {
+    elements.documentationError.textContent = "اكتب توضيح الحالة الأخرى.";
+    elements.otherStatus.focus();
+    return;
+  }
   if (!elements.fieldStatement.value.trim()) {
     elements.documentationError.textContent = "اكتب الإفادة الميدانية.";
     elements.fieldStatement.focus();
@@ -1609,7 +1628,7 @@ elements.documentationForm.addEventListener("submit", async (event) => {
         commercialRecord: documentationRow.commercialRecord,
         contractNumber: documentationRow.contractNumber,
         city: documentationRow.city,
-        fieldStatus: elements.fieldStatus.value,
+        fieldStatus: elements.fieldStatus.value === "أخرى" ? `أخرى: ${customStatus}` : elements.fieldStatus.value,
         statement: elements.fieldStatement.value.trim(),
         photos,
       }),

index.html

@@ -264,7 +264,7 @@
               <input id="adminDateFilter" class="date-input" type="date" />
             </label>
             <label class="field-group">
-              <span>حالة التوثيق</span>
+              <span>الحالة الميدانية</span>
               <div class="select-shell">
                 <select id="adminStatusFilter"><option value="">جميع الحالات</option></select>
                 <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
@@ -428,21 +428,26 @@
 
         <form id="documentationForm" class="share-form" novalidate>
           <label class="dialog-field" for="fieldStatus">
-            <span>حالة التوثيق</span>
+            <span>الحالة الميدانية</span>
             <div class="select-shell">
               <select id="fieldStatus" required>
                 <option value="">اختر الحالة</option>
-                <option value="تمت الزيارة">تمت الزيارة</option>
-                <option value="تم التواصل">تم التواصل</option>
-                <option value="تحتاج متابعة">تحتاج متابعة</option>
-                <option value="لم يعثر عليها">لم يعثر عليها</option>
-                <option value="مغلقة">مغلقة</option>
+                <option value="مغلقة مؤقتًا">مغلقة مؤقتًا</option>
+                <option value="مغلقة نهائيًا">مغلقة نهائيًا</option>
+                <option value="تم الاستيفاء">تم الاستيفاء</option>
+                <option value="رفض الإدلاء بالبيانات">رفض الإدلاء بالبيانات</option>
                 <option value="أخرى">أخرى</option>
               </select>
               <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
             </div>
           </label>
 
+          <label id="otherStatusField" class="dialog-field other-status-field" for="otherStatus" hidden>
+            <span>توضيح الحالة الأخرى</span>
+            <input id="otherStatus" type="text" maxlength="120" placeholder="اكتب الحالة الميدانية..." />
+            <small>ستظهر هذه العبارة كحالة المنشأة في لوحة المشرف.</small>
+          </label>
+
           <label class="dialog-field" for="fieldStatement">
             <span>الإفادة الميدانية</span>
             <textarea id="fieldStatement" rows="5" maxlength="1500" placeholder="اكتب الإفادة بشكل واضح ومختصر..." required></textarea>

style.css

@@ -1475,6 +1475,23 @@ footer {
   line-height: 1.75;
 }
 
+.other-status-field input {
+  width: 100%;
+  min-height: 50px;
+  padding: 0 12px;
+  color: var(--ink);
+  background: #fff;
+  border: 1px solid #cfdee5;
+  border-radius: 8px;
+  outline: 0;
+  font: inherit;
+}
+
+.other-status-field input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.12);
+}
+
 #fieldStatement:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.12);