feat: Improve sort order input display by showing an empty string for zero values and adding a placeholder.

src/app/dashboard/agent-types/page.tsx

@@ -355,11 +355,12 @@ export default function AgentTypesPage() {
                   </label>
                   <input
                     type="number"
-                    value={formData.sortOrder}
+                    value={formData.sortOrder === 0 ? '' : formData.sortOrder}
                     onChange={(e) => setFormData({ ...formData, sortOrder: parseInt(e.target.value) || 0 })}
                     onFocus={(e) => e.target.select()}
+                    placeholder="0"
                     min={0}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
                   />
                 </div>
                 <div className="flex items-center">

src/app/dashboard/profile-sections/[id]/page.tsx

@@ -661,11 +661,12 @@ export default function SectionDetailPage() {
                     </label>
                     <input
                       type="number"
-                      value={fieldForm.sortOrder}
+                      value={fieldForm.sortOrder === 0 ? '' : fieldForm.sortOrder}
                       onChange={(e) => setFieldForm({ ...fieldForm, sortOrder: parseInt(e.target.value) || 0 })}
                       onFocus={(e) => e.target.select()}
+                      placeholder="0"
                       min={0}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
                     />
                   </div>
                   <div className="flex items-center space-x-6 pt-6">
@@ -921,11 +922,12 @@ export default function SectionDetailPage() {
                   </label>
                   <input
                     type="number"
-                    value={assignForm.sortOrder}
+                    value={assignForm.sortOrder === 0 ? '' : assignForm.sortOrder}
                     onChange={(e) => setAssignForm({ ...assignForm, sortOrder: parseInt(e.target.value) || 0 })}
                     onFocus={(e) => e.target.select()}
+                    placeholder="0"
                     min={0}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
                   />
                 </div>
                 <div className="flex items-center">

src/app/dashboard/profile-sections/page.tsx

@@ -424,11 +424,12 @@ export default function ProfileSectionsPage() {
                   </label>
                   <input
                     type="number"
-                    value={formData.sortOrder}
+                    value={formData.sortOrder === 0 ? '' : formData.sortOrder}
                     onChange={(e) => setFormData({ ...formData, sortOrder: parseInt(e.target.value) || 0 })}
                     onFocus={(e) => e.target.select()}
+                    placeholder="0"
                     min={0}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white"
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-gray-900 bg-white placeholder:text-gray-500"
                   />
                 </div>
                 <div className="flex items-center space-x-6">