Enhance pop-up components with connection indicators and improve styling

- Refactored IncidentPopup, TimelinePopup, and UnitPopup components to include connection lines and dots for better visual indication of their relation to the map.
- Updated the layout and styling of the pop-ups for improved readability and consistency.
- Adjusted the TIME_ZONES data to reflect more accurate geographical locations.
- Enhanced the digital clock display in the TimeZonesDisplay component with improved styling and shadow effects.
- Added new CSS styles for digital clock presentation to enhance user experience.

sigap-website/app/_components/map/pop-up/crime-popup.tsx

@@ -82,6 +82,7 @@ export default function IncidentPopup({ longitude, latitude, onClose, incident }
             maxWidth="320px"
             className="incident-popup z-50"
         >
+            <div className="relative">
                 <Card
                     className={`bg-background p-0 w-full max-w-[320px] shadow-xl border-0 overflow-hidden border-l-4 ${getBorderColor(incident.status)}`}
                 >
@@ -177,6 +178,29 @@ export default function IncidentPopup({ longitude, latitude, onClose, incident }
                         </div>
                     </div>
                 </Card>
+                {/* Connection line */}
+                <div
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
+                    style={{
+                        width: '2px',
+                        height: '20px',
+                        backgroundColor: 'red',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+                {/* Connection dot */}
+                <div
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
+                    style={{
+                        width: '6px',
+                        height: '6px',
+                        backgroundColor: 'red',
+                        borderRadius: '50%',
+                        marginTop: '20px',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+            </div>
         </Popup>
     )
 }

sigap-website/app/_components/map/pop-up/district-popup.tsx

@@ -108,6 +108,7 @@ export default function DistrictPopup({
             maxWidth="300px"
             className="district-popup z-50"
         >
+            <div className="relative">
                 <Card className="bg-background p-0 w-full max-w-[300px] shadow-xl border-0 overflow-hidden">
                     <div className="bg-tertiary text-white p-3 relative">
                         {/* Custom close button */}
@@ -128,10 +129,6 @@ export default function DistrictPopup({
                             </div>
                             {getCrimeRateBadge(district.level)}
                         </div>
-                    {/* <div className="mt-1 text-white/80 text-xs flex items-center gap-2">
-                        <Calendar className="h-3 w-3" />
-                        <span>{getTimePeriod()}</span>
-                    </div> */}
                     </div>
 
                     <div className="grid grid-cols-3 gap-1 p-2 bg-background">
@@ -155,7 +152,6 @@ export default function DistrictPopup({
                     </div>
 
                     <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-                    {/* Improved tab headers */}
                         <TabsList className="w-full grid grid-cols-3 h-10 rounded-none bg-background border-b">
                             <TabsTrigger
                                 value="overview"
@@ -177,7 +173,6 @@ export default function DistrictPopup({
                             </TabsTrigger>
                         </TabsList>
 
-                    {/* Tab content with improved section headers */}
                         <TabsContent value="overview" className="mt-0 p-4">
                             <div className="text-sm space-y-3">
                                 <div className="flex items-start gap-3">
@@ -337,6 +332,29 @@ export default function DistrictPopup({
                         </TabsContent>
                     </Tabs>
                 </Card>
+                {/* Connection line */}
+                <div
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
+                    style={{
+                        width: '2px',
+                        height: '20px',
+                        backgroundColor: 'red',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+                {/* Connection dot */}
+                <div
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
+                    style={{
+                        width: '6px',
+                        height: '6px',
+                        backgroundColor: 'red',
+                        borderRadius: '50%',
+                        marginTop: '20px',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+            </div>
         </Popup>
     )
 }

sigap-website/app/_components/map/pop-up/incident-popup.tsx

@@ -65,6 +65,7 @@ export default function IncidentPopup({
             maxWidth="320px"
             className="incident-popup z-50"
         >
+            <div className="relative">
                 <Card
                     className="bg-background p-0 w-full max-w-[320px] shadow-xl border-0 overflow-hidden border-l-4 border-l-red-600"
                 >
@@ -175,6 +176,29 @@ export default function IncidentPopup({
                         </div>
                     </div>
                 </Card>
+                {/* Connection line */}
+                <div
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
+                    style={{
+                        width: '2px',
+                        height: '20px',
+                        backgroundColor: 'red',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+                {/* Connection dot */}
+                <div
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
+                    style={{
+                        width: '6px',
+                        height: '6px',
+                        backgroundColor: 'red',
+                        borderRadius: '50%',
+                        marginTop: '20px',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+            </div>
         </Popup>
     )
 }

sigap-website/app/_components/map/pop-up/timeline-popup.tsx

@@ -7,7 +7,6 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../..
 import { Button } from "../../ui/button"
 import { Badge } from "../../ui/badge"
 
-
 interface TimelinePopupProps {
     longitude: number
     latitude: number
@@ -63,6 +62,7 @@ export default function TimelinePopup({
             className="z-10"
             maxWidth="300px"
         >
+            <div className="relative">
                 <Card className="border-0 shadow-none">
                     <CardHeader className="p-3 pb-2">
                         <div className="flex items-center justify-between">
@@ -117,6 +117,29 @@ export default function TimelinePopup({
                         </div>
                     </CardContent>
                 </Card>
+                {/* Connection line */}
+                <div
+                    className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full"
+                    style={{
+                        width: '2px',
+                        height: '20px',
+                        backgroundColor: 'red',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+                {/* Connection dot */}
+                <div
+                    className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full"
+                    style={{
+                        width: '6px',
+                        height: '6px',
+                        backgroundColor: 'red',
+                        borderRadius: '50%',
+                        marginBottom: '20px',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+            </div>
         </Popup>
     )
 }

sigap-website/app/_components/map/pop-up/unit-popup.tsx

@@ -56,6 +56,7 @@ export default function UnitPopup({
             maxWidth="320px"
             className="unit-popup z-50"
         >
+            <div className="relative">
                 <Card
                     className="bg-background p-0 w-full max-w-[320px] shadow-xl border-0 overflow-hidden border-l-4 border-l-blue-700"
                 >
@@ -162,6 +163,29 @@ export default function UnitPopup({
                         </div>
                     </div>
                 </Card>
+                {/* Connection line */}
+                <div
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
+                    style={{
+                        width: '2px',
+                        height: '20px',
+                        backgroundColor: 'red',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+                {/* Connection dot */}
+                <div
+                    className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full"
+                    style={{
+                        width: '6px',
+                        height: '6px',
+                        backgroundColor: 'red',
+                        borderRadius: '50%',
+                        marginTop: '20px',
+                        boxShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
+                    }}
+                />
+            </div>
         </Popup>
     )
 }

sigap-website/app/_components/map/timezone.tsx

@@ -11,9 +11,9 @@ interface TimeZoneMarker {
 }
 
 const TIME_ZONES: TimeZoneMarker[] = [
-  { name: "WIB", offset: 7, longitude: 106.8456, latitude: -6.2088 }, // Jakarta
+    { name: "WIB", offset: 7, longitude: 110.5, latitude: -3.3 },    // Between Java and Sumatra
-  { name: "WITA", offset: 8, longitude: 115.1889, latitude: -8.4095 }, // Denpasar
+    { name: "WITA", offset: 8, longitude: 118.8, latitude: -2.5 },    // Between Java and Kalimantan
-  { name: "WIT", offset: 9, longitude: 140.7887, latitude: -2.5916 }, // Jayapura
+    { name: "WIT", offset: 9, longitude: 128.0, latitude: -2.0 },    // Between Sulawesi and Papua
 ]
 
 export default function TimeZonesDisplay() {
@@ -49,12 +49,19 @@ export default function TimeZonesDisplay() {
     <>
       {TIME_ZONES.map((zone) => (
         <Marker key={zone.name} longitude={zone.longitude} latitude={zone.latitude}>
-          <div className="relative group">
+              <div className="relative">
-            <div className="absolute -translate-x-1/2 -translate-y-full mb-2 pointer-events-none">
+                  <div className="absolute -translate-x-1/2 -translate-y-1/2 pointer-events-none">
-              <div className="bg-black/80 text-white px-2 py-1 rounded-md text-xs font-mono">
+                      <div className="bg-black/90 border-2 border-orange-600/70 rounded-lg p-2 shadow-lg">
-                <div className="text-center font-bold">{zone.name}</div>
+                          <div className="text-center text-orange-500 text-xs font-bold">{zone.name} / GMT+{zone.offset}</div>
-                <div className="digital-clock">{currentTimes[zone.name] || "00:00:00"}</div>
+                          <div
-                <div className="text-center text-xs text-gray-300">GMT+{zone.offset}</div>
+                              className="digital-clock font-mono font-bold text-amber-500 text-xl md:text-2xl tracking-wider"
+                              style={{
+                                  textShadow: '0 0 5px rgba(255,170,0,0.7)',
+                                  fontFamily: "'Digital', monospace"
+                              }}
+                          >
+                              {currentTimes[zone.name] || "00:00:00"}
+                          </div>
               </div>
             </div>
           </div>

sigap-website/app/_styles/globals.css

@@ -217,3 +217,16 @@
   text-align: center;
   color: #ccc;
 }
+
+/* Digital Clock Styling */
+.digital-clock {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.05em;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+  display: inline-block;
+  margin: 0.25rem 0;
+}
+