style: fix design

src/app/(modules)/segment/page.tsx

@@ -168,6 +168,28 @@ export default function ChainagePage() {
       setError('Segment name is required');
       return;
     }
+    if (!startLat || !startLng || !endLat || !endLng) {
+      setError('All GPS coordinates are required for segments');
+      return;
+    }
+    const parsedStartLat = parseFloat(startLat);
+    const parsedStartLng = parseFloat(startLng);
+    const parsedEndLat = parseFloat(endLat);
+    const parsedEndLng = parseFloat(endLng);
+
+    if (parsedStartLat < -90 || parsedStartLat > 90 || parsedEndLat < -90 || parsedEndLat > 90) {
+      setError('Latitude values must be between -90 and 90');
+      return;
+    }
+    if (
+      parsedStartLng < -180 ||
+      parsedStartLng > 180 ||
+      parsedEndLng < -180 ||
+      parsedEndLng > 180
+    ) {
+      setError('Longitude values must be between -180 and 180');
+      return;
+    }
     if (!chainageStartKm || !chainageEndKm) {
       setError('Segment start and end values are required');
       return;
@@ -182,10 +204,10 @@ export default function ChainagePage() {
           segment_name: segmentName.trim(),
           chainage_start_km: parseFloat(chainageStartKm),
           chainage_end_km: parseFloat(chainageEndKm),
-          start_lat: startLat ? parseFloat(startLat) : 0,
+          start_lat: parsedStartLat,
-          start_lng: startLng ? parseFloat(startLng) : 0,
+          start_lng: parsedStartLng,
-          end_lat: endLat ? parseFloat(endLat) : 0,
+          end_lat: parsedEndLat,
-          end_lng: endLng ? parseFloat(endLng) : 0,
+          end_lng: parsedEndLng,
           direction: direction as 'UP' | 'DOWN',
         };
         await chainageService.updateChainage(currentChainage.id, data);
@@ -198,10 +220,10 @@ export default function ChainagePage() {
           segment_name: segmentName.trim(),
           chainage_start_km: parseFloat(chainageStartKm),
           chainage_end_km: parseFloat(chainageEndKm),
-          start_lat: startLat ? parseFloat(startLat) : 0,
+          start_lat: parsedStartLat,
-          start_lng: startLng ? parseFloat(startLng) : 0,
+          start_lng: parsedStartLng,
-          end_lat: endLat ? parseFloat(endLat) : 0,
+          end_lat: parsedEndLat,
-          end_lng: endLng ? parseFloat(endLng) : 0,
+          end_lng: parsedEndLng,
           direction: direction,
         };
         await chainageService.createChainage(data);
@@ -279,6 +301,10 @@ export default function ChainagePage() {
   const isFormComplete =
     selectedPackageId &&
     segmentName.trim() &&
+    startLat &&
+    startLng &&
+    endLat &&
+    endLng &&
     chainageStartKm &&
     chainageEndKm;
 
@@ -464,7 +490,10 @@ export default function ChainagePage() {
           }
         }}
       >
-        <DialogContent className="sm:max-w-2xl" onOpenAutoFocus={(e) => e.preventDefault()}>
+        <DialogContent
+          className="max-h-[90vh] overflow-y-auto sm:max-w-2xl"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
           <DialogHeader className="gap-2">
             <DialogTitle className="flex items-center gap-3 text-xl">
               <div className="p-2 rounded-lg bg-primary text-primary-foreground shadow-sm">
@@ -659,10 +688,11 @@ export default function ChainagePage() {
               </div>
 
               {/* GPS Coordinates Grid */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-5 pt-4">
+              <div className="space-y-6 pt-4">
-                <div className="space-y-3 rounded-lg border border-border/50 bg-muted/10 p-4">
+                <div className="space-y-3">
                   <p className="text-[11px] font-black text-muted-foreground tracking-widest flex items-center gap-2">
                     <MapPin className="h-3.5 w-3.5 opacity-60" /> START COORDINATES
+                    <span className="text-destructive">*</span>
                   </p>
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                     <div className="space-y-2">
@@ -676,10 +706,13 @@ export default function ChainagePage() {
                         id="s-lat"
                         type="number"
                         step="any"
+                        min="-90"
+                        max="90"
                         value={startLat}
                         onChange={(e) => setStartLat(e.target.value)}
-                        placeholder="0.0000"
+                        placeholder="-90 to 90"
                         className="h-10 bg-background/70 border-border/40 text-xs font-mono"
+                        required
                       />
                     </div>
                     <div className="space-y-2">
@@ -693,18 +726,22 @@ export default function ChainagePage() {
                         id="s-lng"
                         type="number"
                         step="any"
+                        min="-180"
+                        max="180"
                         value={startLng}
                         onChange={(e) => setStartLng(e.target.value)}
-                        placeholder="0.0000"
+                        placeholder="-180 to 180"
                         className="h-10 bg-background/70 border-border/40 text-xs font-mono"
+                        required
                       />
                     </div>
                   </div>
                 </div>
 
-                <div className="space-y-3 rounded-lg border border-border/50 bg-muted/10 p-4">
+                <div className="space-y-3">
                   <p className="text-[11px] font-black text-muted-foreground tracking-widest flex items-center gap-2">
                     <MapPin className="h-3.5 w-3.5 opacity-60" /> END COORDINATES
+                    <span className="text-destructive">*</span>
                   </p>
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                     <div className="space-y-2">
@@ -718,10 +755,13 @@ export default function ChainagePage() {
                         id="e-lat"
                         type="number"
                         step="any"
+                        min="-90"
+                        max="90"
                         value={endLat}
                         onChange={(e) => setEndLat(e.target.value)}
-                        placeholder="0.0000"
+                        placeholder="-90 to 90"
                         className="h-10 bg-background/70 border-border/40 text-xs font-mono"
+                        required
                       />
                     </div>
                     <div className="space-y-2">
@@ -735,10 +775,13 @@ export default function ChainagePage() {
                         id="e-lng"
                         type="number"
                         step="any"
+                        min="-180"
+                        max="180"
                         value={endLng}
                         onChange={(e) => setEndLng(e.target.value)}
-                        placeholder="0.0000"
+                        placeholder="-180 to 180"
                         className="h-10 bg-background/70 border-border/40 text-xs font-mono"
+                        required
                       />
                     </div>
                   </div>