fix(web): corrige LiveMap, StaffChat, Settings, inventario, sync e diversos de UI (#62)

Author: ggfto

web/src/components/Listeners.tsx

@@ -173,6 +173,7 @@ export default function Listeners() {
             off('showEntityInfo', showEntityInfo)
             off('showNearbyEntities', showNearbyEntities)
             off('setMessages', setMessages)
+            off('updatePermissions', setPermissions)
         }
 
     }, [on, off, setPlayers, setVehicleDev, setShowCoords, setEntityInfo, setNearbyEntities, setGameData, sendNui, setLastPlayersFetch, setMyPermissions, setPagination, setStaffMessages, setSupportedLanguages, setPermissionDefinitions, setCategoryDefinitions])

web/src/components/map/LiveMap.tsx

@@ -154,14 +154,17 @@ function MapResetter({ resetTrigger, initialZoom }: { resetTrigger: number, init
 
 function MapController({ centerOnMarkerId, markers }: { centerOnMarkerId?: string | number | null, markers: MapMarker[] }) {
     const map = useMap()
+    // Keep the latest markers in a ref so we can look up the target without
+    // re-running the fly-to effect on every poll (markers is a new array each poll).
+    const markersRef = useRef(markers)
+    markersRef.current = markers
     useEffect(() => {
-        if (centerOnMarkerId && markers.length > 0) {
-            const target = markers.find(m => String(m.id) === String(centerOnMarkerId))
-            if (target) {
-                map.flyTo([target.y, target.x], 3)
-            }
+        if (!centerOnMarkerId) return
+        const target = markersRef.current.find(m => String(m.id) === String(centerOnMarkerId))
+        if (target) {
+            map.flyTo([target.y, target.x], 3)
         }
-    }, [centerOnMarkerId, markers, map])
+    }, [centerOnMarkerId, map])
     return null
 }
 
@@ -259,10 +262,11 @@ export default function LiveMap({
     // Effect to handle player selection from props
     useEffect(() => {
         if (selectedPlayerId) {
-            setTimeout(() => {
+            const timer = setTimeout(() => {
                 const marker = markerRefs.current[selectedPlayerId]
                 if (marker) marker.openPopup()
             }, 300)
+            return () => clearTimeout(timer)
         } else {
             Object.values(markerRefs.current).forEach(marker => {
                 if (marker && marker.closePopup) marker.closePopup()

web/src/components/players/InventoryItem.tsx

@@ -61,6 +61,13 @@ export const InventoryItem: React.FC<InventoryItemProps> = ({
     const imageUrls = getImageUrl(name)
     const [currentImageIndex, setCurrentImageIndex] = React.useState(0)
 
+    // Reset image fallback state when the item occupying this slot changes,
+    // otherwise a previous item's error/index leaks into the new item.
+    React.useEffect(() => {
+        setImageError(false)
+        setCurrentImageIndex(0)
+    }, [name])
+
     const handleImageError = () => {
         if (currentImageIndex < imageUrls.length - 1) {
             setCurrentImageIndex(prev => prev + 1)

web/src/components/players/InventoryViewerModal.tsx

@@ -120,7 +120,13 @@ const InventorySlot = ({ target, onClose, onAddComparison, isSecondary, otherTar
         const handleNuiMessage = (event: MessageEvent) => {
             const { action, data: eventData } = event.data;
             if (action === 'inventoryUpdate') {
-                const invId = target.type === 'player' ? Number(target.id) : (target.type === 'trunk' ? 'trunk' + target.id : 'glovebox' + target.id);
+                const invId = target.type === 'player'
+                    ? Number(target.id)
+                    : target.type === 'trunk'
+                        ? 'trunk' + target.id
+                        : target.type === 'chest'
+                            ? 'chest' + target.id
+                            : 'glovebox' + target.id;
                 if (eventData.inventoryId === invId) {
                     fetchInventory();
                 }
@@ -409,7 +415,7 @@ const InventorySlot = ({ target, onClose, onAddComparison, isSecondary, otherTar
         return slots
     }
 
-    const weightPercent = data ? Math.min(100, (data.weight / data.maxWeight) * 100) : 0
+    const weightPercent = data && data.maxWeight > 0 ? Math.min(100, (data.weight / data.maxWeight) * 100) : 0
     const formatTotalWeight = (w: number) => (w / 1000).toFixed(1)
 
     return (

web/src/components/players/ScreenModal.tsx

@@ -62,7 +62,7 @@ export default function ScreenModal({ playerId, onClose, playerName }: ScreenMod
                 // Normalize for MriPlayerVitals component
                 setVitals({
                     ...v,
-                    health: v.health || 100,
+                    health: v.health ?? 100,
                     metadata: {
                         ...v.metadata,
                         hunger: v.metadata?.hunger ?? 100,

web/src/components/vip/AddVipModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { MriActionModal, MriInput, MriSelect, MriDatePicker } from '@mriqbox/ui-kit'
 import { Crown } from 'lucide-react'
 import { useI18n } from '@/hooks/useI18n'
@@ -54,6 +54,16 @@ export default function AddVipModal({ ranks = [], onClose, onSubmit }: Props) {
         { label: t('player.actions.money.types.crypto'), value: 'crypto' },
     ]
 
+    // Seed defaults once ranks arrive async (not only on first mount, when ranks is still empty)
+    useEffect(() => {
+        if (ranks.length === 0 || rankId) return
+        const first = ranks[0]
+        setRankId(first.id)
+        setSalary(first.salary)
+        setSalaryType(first.salaryType)
+        setInventoryLimit(first.inventoryLimit)
+    }, [ranks, rankId])
+
     const rankOptions = ranks.map(r => ({ label: r.label, value: r.id }))
 
     const handleRankChange = (id: string) => {
@@ -63,6 +73,9 @@ export default function AddVipModal({ ranks = [], onClose, onSubmit }: Props) {
     }
 
     const handleConfirm = () => {
+        // Reject empty identifier for the selected method
+        if (method === 'citizenid' && !citizenid.trim()) return
+        if (method === 'source' && !source.trim()) return
         let expiration = 0
         if (duration === 'custom') {
             if (!customDate) return

web/src/pages/Dashboard/Dashboard.tsx

@@ -338,11 +338,15 @@ export default function Dashboard() {
             }, 500)
             return () => {
                 mounted = false
+                abortSyncRef.current = true
                 clearTimeout(timer)
             }
         } else {
             fetchPlayers()
-            return () => { mounted = false }
+            return () => {
+                mounted = false
+                abortSyncRef.current = true
+            }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sendNui, playersSearch, lastPlayersFetch, setPlayers, setPagination, setLastPlayersFetch, syncRemainingPages])
@@ -566,7 +570,12 @@ export default function Dashboard() {
                                                 onChange={(e) => setAnnouncement(e.target.value)}
                                                 placeholder={t('qadmin.dashboard.announcement.placeholder')}
                                                 className="flex-1 bg-muted/30 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary/50 transition-all placeholder:text-muted-foreground/50"
-                                                onKeyDown={(e) => e.key === 'Enter' && handleSendAnnounce()}
+                                                onKeyDown={(e) => {
+                                                    if (e.key === 'Enter' && !e.shiftKey) {
+                                                        e.preventDefault()
+                                                        if (!sendingAnnounce) handleSendAnnounce()
+                                                    }
+                                                }}
                                             />
                                             <MriButton
                                                 onClick={handleSendAnnounce}

web/src/pages/Logs.tsx

@@ -1054,7 +1054,7 @@ export default function Logs() {
 
     const handleExport = () => {
         const content = logs.map(l =>
-            `[${formatTime(l.created_at)}] [${l.level.toUpperCase()}] [${l.category}] ${l.resource} | ${l.message} | by ${l.admin}`
+            `[${formatTime(l.created_at)}] [${(l.level || 'info').toUpperCase()}] [${l.category}] ${l.resource} | ${l.message} | by ${l.admin}`
         ).join('\n')
         const blob = new Blob([content], { type: 'text/plain' })
         const url = URL.createObjectURL(blob)

web/src/pages/Players.tsx

@@ -126,6 +126,13 @@ export default function Players() {
     const [stashInput, setStashInput] = useState('')
 
     const abortSyncRef = useRef(false)
+    const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    // Abort the background page-sync recursion and clear its pending timer on unmount
+    useEffect(() => () => {
+        abortSyncRef.current = true
+        if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current)
+    }, [])
 
     const getPlayerKey = useCallback((p: any) => {
         if (!p) return t('common.unknown')
@@ -226,7 +233,8 @@ export default function Players() {
             if (pageToFetch === 1) {
                 setPlayers(data)
                 if (searchQuery === '' && pagesCount > 1) {
-                    setTimeout(() => syncRemainingPages(2, pagesCount, ''), 1000)
+                    if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current)
+                    syncTimeoutRef.current = setTimeout(() => syncRemainingPages(2, pagesCount, ''), 1000)
                 }
                 if (searchQuery === '') {
                     setLastPlayersFetch(Date.now())
@@ -882,7 +890,7 @@ export default function Players() {
                                                 else if (mName === 'black_money') color = "text-red-500";
 
                                                 const isCurrency = ['cash', 'bank', 'black_money'].includes(mName);
-                                                const labelKey = `option_${mName} `;
+                                                const labelKey = `option_${mName}`;
                                                 const translated = t(labelKey);
                                                 const label = translated !== labelKey ? translated : mName;
 
@@ -1121,7 +1129,7 @@ export default function Players() {
                         availableTypes={
                             Array.isArray(selectedPlayer.money)
                                 ? selectedPlayer.money.map((m: any) => {
-                                    const labelRaw = t(`option_${m.name} `) !== `option_${m.name} ` ? t(`option_${m.name} `) : m.name;
+                                    const labelRaw = t(`option_${m.name}`) !== `option_${m.name}` ? t(`option_${m.name}`) : m.name;
                                     return {
                                         label: labelRaw.charAt(0).toUpperCase() + labelRaw.slice(1),
                                         value: m.name
@@ -1205,7 +1213,7 @@ export default function Players() {
                                 onChange={(e) => setStashInput((e.target as HTMLInputElement).value)}
                                 placeholder="ex: police_stash_1"
                                 className="bg-background border-border h-10"
-                                onKeyDown={(e) => { if (e.key === 'Enter' && stashInput.trim()) { sendAction({ event: 'mri_Qadmin:client:openStash', type: 'client' }, { Stash: { value: stashInput.trim() } }); setShowOpenStashModal(false); setStashInput('') } }}
+                                onKeyDown={(e) => { if (e.key === 'Enter' && stashInput.trim()) { sendAction({ event: 'mri_Qadmin:client:openStash', type: 'client', perms: 'qadmin.action.open_stash' }, { Stash: { value: stashInput.trim() } }); setShowOpenStashModal(false); setStashInput('') } }}
                             />
                         </div>
                     </MriActionModal>

web/src/pages/Settings.tsx

@@ -18,15 +18,19 @@ const WALL_DEFAULTS = {
 }
 
 const hexToRgb = (hex: string) => {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!hex) return '0, 0, 255';
+    let h = hex.replace(/^#/, '');
+    // Support shorthand 3-digit hex (#FFF -> #FFFFFF)
+    if (h.length === 3) h = h.split('').map(c => c + c).join('');
+    const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
     return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : '0, 0, 255';
 }
 
 const rgbToHex = (rgb: string) => {
     if (!rgb) return '#0000FF';
     if (rgb.startsWith('#')) return rgb;
     const parts = rgb.split(',').map(x => parseInt(x.trim()));
-    if (parts.length < 3) return '#0000FF';
+    if (parts.length < 3 || parts.some(n => Number.isNaN(n))) return '#0000FF';
     const [r, g, b] = parts;
     return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
 }
@@ -120,6 +124,11 @@ export default function Settings() {
 
     const timeoutRef = React.useRef<Record<string, any>>({})
 
+    // Clear any pending debounced wall-color saves on unmount
+    React.useEffect(() => () => {
+        Object.values(timeoutRef.current).forEach(clearTimeout)
+    }, [])
+
     const handleLocalWallChange = (type: 'global' | 'principal', key: string, value: string) => {
         setLocalWallSettings((prev: any) => {
             const next = { ...prev }
@@ -177,7 +186,18 @@ export default function Settings() {
         try {
             const rgbValue = hexToRgb(value);
             await sendNui('mri_Qadmin:server:SaveWallSetting', { type, key, value: rgbValue })
-            await fetchWallSettings() // Sync back from server
+            // Update ONLY the saved key from our confirmed value instead of
+            // refetching-and-replacing the whole object. A full replace here
+            // races with rapid picker changes and clobbers the value the user
+            // is actively editing on a different key.
+            const applyKey = (obj: any) => {
+                const next = { ...obj }
+                if (type === 'global') next.settings = { ...next.settings, [key]: value }
+                else next.colors = { ...next.colors, [key]: value }
+                return next
+            }
+            setWallSettings((prev: any) => applyKey(prev))
+            setLocalWallSettings((prev: any) => applyKey(prev))
         } finally {
             setSaving(false)
         }