feat(mobile): add enrollment, staffing inputs and missing data flags

Author: fferreyra

mobile/index.html

@@ -85,6 +85,22 @@ <h4>Oloosirkon Secondary</h4>
                 <p class="type-text">Type: Initial Assessment</p>
               </div>
             </div>
+
+            <!-- Card 3: Missing Data -->
+            <div class="inspection-card" style="border-left: 3px solid var(--color-danger);">
+              <div class="card-header">
+                <h4>Enkorika Primary</h4>
+                <span class="badge" style="background-color: rgba(239, 68, 68, 0.2); color: var(--color-danger);"><i
+                    class="fa-solid fa-triangle-exclamation"></i> Incomplete</span>
+              </div>
+              <div class="card-body">
+                <p><i class="fa-solid fa-location-dot"></i> Kajiado Central</p>
+                <p style="color: var(--color-danger); margin-top: 4px; font-weight: 500;"><i
+                    class="fa-solid fa-circle-exclamation" style="color: var(--color-danger);"></i> Missing: Playgroup
+                  Data, Teacher Count</p>
+                <p class="type-text">Status: Action Required Before Sync</p>
+              </div>
+            </div>
           </div>
 
           <!-- Action Buttons Area -->
@@ -113,8 +129,49 @@ <h4>Oloosirkon Secondary</h4>
 
           <div class="wizard-content">
             <div class="wizard-title">
-              <h2>Infrastructure Assessment</h2>
-              <p>Provide feedback on the physical assets.</p>
+              <h2>School Details & Infrastructure</h2>
+              <p>Provide details on enrollment, staffing, and physical assets.</p>
+            </div>
+
+            <!-- Enrollment Settings -->
+            <div class="form-group box-style">
+              <label>Learner Enrollment</label>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);">
+                <div>
+                  <label
+                    style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; display: block;">Playgroup</label>
+                  <input type="number" placeholder="Total" class="form-input">
+                </div>
+                <div>
+                  <label style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; display: block;">PP1
+                    (Boys/Girls)</label>
+                  <input type="text" placeholder="e.g. 15/18" class="form-input">
+                </div>
+                <div>
+                  <label style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; display: block;">PP2
+                    (Boys/Girls)</label>
+                  <input type="text" placeholder="e.g. 20/22" class="form-input">
+                </div>
+              </div>
+            </div>
+
+            <!-- Staffing Settings -->
+            <div class="form-group box-style">
+              <label>Staffing & Teachers</label>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);">
+                <div>
+                  <label
+                    style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; display: block;">Qualified
+                    Teachers</label>
+                  <input type="number" placeholder="Count" class="form-input">
+                </div>
+                <div>
+                  <label
+                    style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; display: block;">Teacher-Child
+                    Ratio</label>
+                  <input type="text" placeholder="e.g. 1:25" class="form-input">
+                </div>
+              </div>
             </div>
 
             <div class="form-group box-style">
@@ -302,6 +359,19 @@ <h4>Media Upload Failed</h4>
                 <p><i class="fa-regular fa-clock"></i> Yesterday, 04:30 PM</p>
               </div>
             </div>
+
+            <div class="inspection-card" style="border-left: 3px solid var(--color-danger);">
+              <div class="card-header">
+                <h4>Sync Blocked</h4>
+                <span class="badge"
+                  style="background-color: rgba(239, 68, 68, 0.2); color: var(--color-danger);">Incomplete</span>
+              </div>
+              <div class="card-body">
+                <p style="color: var(--color-danger); font-weight: 500;"><i
+                    class="fa-solid fa-file-circle-exclamation"></i> 2 records missing critical indicators</p>
+                <p><i class="fa-regular fa-clock"></i> Tap to resolve</p>
+              </div>
+            </div>
           </div>
         </section>
 

mobile/src/style.css

@@ -543,6 +543,27 @@ body {
   color: var(--color-primary);
 }
 
+.form-input {
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: 0.95rem;
+  transition: border-color 0.2s;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.form-input::placeholder {
+  color: var(--text-muted);
+}
+
 .photo-upload {
   border: 2px dashed var(--border-color);
   border-radius: var(--radius-lg);