@topconsultnpm/sdkui-react 6.22.0-dev2.47 → 6.22.0-dev2.49

package/lib/components/features/search/TMSearchQueryPanel.js

@@ -24,11 +24,9 @@ import TMToppyMessage from '../../../helper/TMToppyMessage';
 import TMMetadataSorterForm from './TMMetadataSorterForm';
 import TMMetadataOutputForm from './TMMetadataOutputForm';
 import TMTooltip from '../../base/TMTooltip';
-const TMSearchQueryPanel = ({ isSearchViewOnScreen = true, fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, inputMids, onSearchCompleted, onSqdSaved, onBack, onClosePanel, allowMaximize = true, onMaximizePanel, onBackToResult, passToArchiveCallback, maxDcmtsToBeReturned }) => {
+const TMSearchQueryPanel = ({ isSearchViewOnScreen = true, fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, inputMids, onSearchCompleted, onSqdSaved, onBack, onClosePanel, allowMaximize = true, onMaximizePanel, onBackToResult, passToArchiveCallback, maxDcmtsToBeReturned, onRefreshRequested, onDcmtTypeReloaded }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
-    const [shouldSearch, setShouldSearch] = useState(false);
-    const [isQueryPanelActive, setIsQueryPanelActive] = useState(false);
     const [lastQdParams, setLastQdParams] = useState([]);
     const [dcmtTypesList, setDcmtTypesList] = useState([]);
     const [showSqdForm, setShowSqdForm] = useState(false);
@@ -45,12 +43,19 @@ const TMSearchQueryPanel = ({ isSearchViewOnScreen = true, fromDTD, showBackToRe
     const isMobile = deviceType === DeviceType.MOBILE;
     let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
     const tmPanelRef = useRef(null);
+    // Contenitore del form: l'Invio avvia la ricerca solo se il focus si trova al suo interno
+    const contentRef = useRef(null);
     // Passando nella vista risultati si prenota il focus, che verrà ripreso al rientro nella ricerca
     const shouldRefocusOnReturnRef = useRef(false);
     const appliedInputMidsRef = useRef(null);
     const pendingMidsRef = useRef(null);
-    // Flag "accoda": impostato dall'azione secondaria del bottone Ricerca, consumato in executeSearch
-    const appendNextSearchRef = useRef(false);
+    // Impedisce ricerche sovrapposte (doppio Invio, o Invio mentre la precedente e' ancora in corso)
+    const isSearchingRef = useRef(false);
+    // Snapshot letti da runSearch al momento dell'esecuzione: evitano di cercare con dati stantii
+    const qdRef = useRef(undefined);
+    const showAdvancedSearchRef = useRef(false);
+    const searchAsyncRef = useRef();
+    const reloadMetadataAsyncRef = useRef();
     // Tornando dalla vista risultati il pannello dei metadati di ricerca riprende il focus,
     // così è lui quello evidenziato: prendendo il focus gli altri pannelli ricevono l'onBlur e si disattivano
     useEffect(() => {
@@ -135,39 +140,6 @@ const TMSearchQueryPanel = ({ isSearchViewOnScreen = true, fromDTD, showBackToRe
         setQd({ ...qd, where: newWhere });
         setShowAllMdWhere(true);
     }, [qd, fromDTD, inputMids]);
-    // Eseguire la ricerca quando shouldSearch è true e qd è definito
-    useEffect(() => {
-        if (shouldSearch && qd) {
-            const executeSearch = async () => {
-                // Legge e consuma il flag "accoda" impostato dall'azione secondaria del bottone Ricerca
-                const append = appendNextSearchRef.current;
-                appendNextSearchRef.current = false;
-                await searchAsync(qd, showAdvancedSearch, append);
-                setShouldSearch(false); // Resetta il trigger dopo la ricerca
-            };
-            executeSearch();
-        }
-    }, [shouldSearch, qd, showAdvancedSearch]);
-    // Se il pannello è attivo e non ci sono modali aperti, rimuove il focus e avvia la ricerca
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (isQueryPanelActive && !modalIsOpen) {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    // Disattiva l'elemento attivo per forzare l'onBlur
-                    if (document.activeElement instanceof HTMLElement) {
-                        document.activeElement.blur();
-                    }
-                    // Attiva il flag di ricerca. L'useEffect sopra gestirà l'attesa di qd.
-                    setShouldSearch(true);
-                }
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [isQueryPanelActive, modalIsOpen]);
     const setDataAsync = async (sqd) => {
         let newSqd = (sqd?.id == 1) ? sqd : await SavedQueryCacheService.GetAsync(sqd?.id);
         let newQd = SearchEngine.NormalizeQueryDescriptor(newSqd?.qd);
@@ -199,11 +171,92 @@ const TMSearchQueryPanel = ({ isSearchViewOnScreen = true, fromDTD, showBackToRe
             let results = [];
             if (searchResult?.result)
                 results.push(searchResult?.result);
-            // Before notifying onSearchComplete, let's set the panel to NOT active
-            setIsQueryPanelActive(false);
             onSearchCompleted?.(results, searchResult?.qd, append);
         }
     };
+    // Tra l'apertura della ricerca e il click su Ricerca la lista dei metadati del tipo documento può essere
+    // cambiata (metadati aggiunti o rimossi lato amministrazione): prima di cercare si rileggono dal server.
+    // I valori digitati restano, mentre i filtri sui metadati non più disponibili vengono scartati.
+    // Restituisce il qd con cui eseguire la ricerca.
+    const reloadMetadataAsync = async (qdInput) => {
+        if (!qdInput?.from?.tid)
+            return qdInput;
+        let dcmtTypes;
+        try {
+            TMSpinner.show({ description: `${SDKUI_Localizator.Loading} ...`, backgroundColor: 'transparent' });
+            dcmtTypes = await getDcmtTypesByQdAsync(qdInput, true);
+        }
+        finally {
+            TMSpinner.hide();
+        }
+        // Rilettura non riuscita: si cerca con i metadati che si hanno, senza scartare nulla
+        if (dcmtTypes.length <= 0)
+            return qdInput;
+        setDcmtTypesList(dcmtTypes);
+        const reloadedFromDTD = dcmtTypes.find(o => o.id === qdInput.from?.tid);
+        if (reloadedFromDTD)
+            onDcmtTypeReloaded?.(reloadedFromDTD);
+        const { qd: newQd, removedCount } = dropUnavailableMetadataFromQd(qdInput, dcmtTypes);
+        if (removedCount <= 0)
+            return qdInput;
+        setQd(newQd);
+        return newQd;
+    };
+    // Allineati a ogni render: runSearch li legge quando esegue, non quando viene creata
+    qdRef.current = qd;
+    showAdvancedSearchRef.current = showAdvancedSearch;
+    searchAsyncRef.current = searchAsync;
+    reloadMetadataAsyncRef.current = reloadMetadataAsync;
+    // Unico punto di avvio della ricerca: bottone Ricerca, Ricerca e accoda e tasto Invio passano tutti da qui
+    const runSearch = useCallback((append) => {
+        if (isSearchingRef.current)
+            return;
+        isSearchingRef.current = true;
+        // Toglie il focus per far committare il valore del campo in editing
+        if (document.activeElement instanceof HTMLElement)
+            document.activeElement.blur();
+        // Alcuni editor committano il valore in modo asincrono: si attende un tick prima di leggere il qd definitivo
+        setTimeout(async () => {
+            try {
+                // I metadati si rileggono a ogni ricerca: si cerca sempre sulla lista aggiornata
+                const qdToSearch = await reloadMetadataAsyncRef.current?.(qdRef.current) ?? qdRef.current;
+                await searchAsyncRef.current?.(qdToSearch, showAdvancedSearchRef.current, append);
+            }
+            catch (ex) {
+                TMExceptionBoxManager.show({ exception: ex });
+            }
+            finally {
+                isSearchingRef.current = false;
+            }
+        }, 0);
+    }, []);
+    // I dialoghi (TMModal/chooser) escono da contentRef perche' DevExtreme Popup li rende in un portale su document.body:
+    // il controllo di contenimento li esclude gia'. Questi flag coprono il caso in cui il focus sia sul contenitore del pannello.
+    // NB: si usano solo flag locali affidabili, non modalIsOpen, che resterebbe a true se un chooser venisse smontato senza onClose.
+    const isAnyDialogOpen = showFiltersConfig || showOutputConfig || showMetadataSorterForm || showSqdForm || showDistinctValuesPanel;
+    // L'Invio avvia SEMPRE la ricerca quando il focus e' nel form di ricerca (o sul pannello che lo contiene).
+    // Il criterio e' il contenimento nel DOM, non uno stato di "pannello attivo" che puo' desincronizzarsi.
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key !== 'Enter' || e.repeat)
+                return;
+            if (isAnyDialogOpen)
+                return;
+            const content = contentRef.current;
+            const target = e.target;
+            if (!content || !target)
+                return;
+            const isInsideForm = content.contains(target);
+            // Al rientro dai risultati il focus e' sul contenitore del pannello, che e' antenato del form
+            const isPanelContainer = target !== document.body && target !== document.documentElement && target.contains(content);
+            if (!isInsideForm && !isPanelContainer)
+                return;
+            e.preventDefault();
+            runSearch(false);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => { window.removeEventListener('keydown', handleKeyDown); };
+    }, [isAnyDialogOpen, runSearch]);
     const updateIsModalOpen = useCallback((isOpen) => {
         setModalIsOpen(isOpen);
     }, []);
@@ -230,36 +283,15 @@ const TMSearchQueryPanel = ({ isSearchViewOnScreen = true, fromDTD, showBackToRe
             }
         }
     };
-    const handleSearchButtonClick = useCallback(async () => {
-        // Propagazione blur
-        if (document.activeElement instanceof HTMLElement) {
-            document.activeElement.blur();
-        }
-        // Ricerca normale: azzera l'eventuale flag accoda e avvia
-        appendNextSearchRef.current = false;
-        setShouldSearch(true);
-    }, []);
-    const handleSearchAndAppendClick = useCallback(() => {
-        // Propagazione blur
-        if (document.activeElement instanceof HTMLElement) {
-            document.activeElement.blur();
-        }
-        // Ricerca e accoda: imposta il flag consumato da executeSearch
-        appendNextSearchRef.current = true;
-        setShouldSearch(true);
-    }, []);
+    const handleSearchButtonClick = useCallback(() => { runSearch(false); }, [runSearch]);
+    const handleSearchAndAppendClick = useCallback(() => { runSearch(true); }, [runSearch]);
     const searchButtonSecondaryActions = useMemo(() => [{
             name: SDKUI_Localizator.SearchAndAppend,
             icon: _jsx(IconSearch, {}),
             onClick: handleSearchAndAppendClick
         }], [handleSearchAndAppendClick]);
     const handleQdChanged = useCallback((newQd) => {
-        if (!deepCompare(qd, newQd)) {
-            setQd(newQd);
-        }
-    }, []);
-    const handlePanelActiveChanged = useCallback((isActive) => {
-        setIsQueryPanelActive(isActive);
+        setQd(prev => deepCompare(prev, newQd) ? prev : newQd);
     }, []);
     const handleAdvancedMenuClick = useCallback((e) => {
         if (e.button === AdvancedMenuButtons.DistinctValues) {
@@ -357,10 +389,10 @@ const TMSearchQueryPanel = ({ isSearchViewOnScreen = true, fromDTD, showBackToRe
             return false;
         return qd?.orderBy && qd.orderBy.length > 0;
     }, [showAdvancedSearch, qd?.orderBy]);
-    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { ref: tmPanelRef, title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onBack: onBack, onActiveChanged: handlePanelActiveChanged, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
-                        _jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false, onClick: () => setIsQueryPanelActive(true) }) })
+    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { ref: tmPanelRef, title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onBack: onBack, onRefresh: (!SQD || showSqdForm) ? undefined : onRefreshRequested, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
+                        _jsx(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false }) })
                         : _jsx(_Fragment, {}) }), children: [_jsx(ConfirmQueryParamsDialog, {}), SQD
-                        ? _jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { height: '100%', width: '100%', position: 'relative', display: showSqdForm ? 'none' : 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
+                        ? _jsxs("div", { ref: contentRef, onContextMenu: (e) => e.preventDefault(), style: { height: '100%', width: '100%', position: 'relative', display: showSqdForm ? 'none' : 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
                                     ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: handleQdChanged, updateIsModalOpen: updateIsModalOpen })
                                     : _jsx(TMSearchQueryEditor, { qd: qd, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onQdChanged: handleQdChanged, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: handleAdvancedMenuClick, updateIsModalOpen: updateIsModalOpen }), shouldShowOutputBadges && qd?.select && qd.select.length > 0 && (_jsxs(StyledSelectBadgesContainer, { children: [_jsxs(StyledSelectLabel, { children: [SDK_Localizator.QuerySelect, ":"] }), _jsx(StyledSelectBadgesWrapper, { children: (() => {
                                                 const selectItems = qd.select ?? [];
@@ -418,6 +450,33 @@ const TMSearchQueryPanel = ({ isSearchViewOnScreen = true, fromDTD, showBackToRe
                     } })] }));
 };
 export default TMSearchQueryPanel;
+/** Scarta dal qd filtri, colonne e ordinamenti sui metadati non più esistenti o non più accessibili, in base
+ *  alla lista dei metadati appena riletta dal server. I valori digitati su quelli ancora presenti si mantengono. */
+const dropUnavailableMetadataFromQd = (qdInput, dcmtTypes) => {
+    const metadataOf = (tid) => dcmtTypes.find(o => o.id === tid)?.metadata;
+    // Un tipo documento non riletto non è verificabile: i suoi item si mantengono così come sono.
+    // Sui metadati di sistema si verifica solo l'esistenza: i loro permessi non li rendono inutilizzabili.
+    const isStillAvailable = (tid, mid, isUsable) => {
+        const metadata = metadataOf(tid);
+        if (!metadata || metadata.length <= 0 || mid == undefined)
+            return true;
+        const md = metadata.find(o => o.id === mid);
+        if (!md)
+            return false;
+        return md.isSystem == 1 || isUsable(md);
+    };
+    const canSearch = (md) => md.perm?.canSearch != AccessLevels.No;
+    const canOutput = (md) => !(md.perm?.canView == AccessLevels.No && md.perm?.canUpdate == AccessLevels.No);
+    const where = qdInput.where?.filter(o => isStillAvailable(o.tid, o.mid, canSearch)) ?? [];
+    const select = qdInput.select?.filter(o => isStillAvailable(o.tid, o.mid, canOutput)) ?? [];
+    const orderBy = qdInput.orderBy?.filter(o => isStillAvailable(o.tid, o.mid, canOutput)) ?? [];
+    const removedCount = ((qdInput.where?.length ?? 0) - where.length)
+        + ((qdInput.select?.length ?? 0) - select.length)
+        + ((qdInput.orderBy?.length ?? 0) - orderBy.length);
+    let qd = new QueryDescriptor();
+    qd.init({ ...qdInput, where: where, select: select, orderBy: orderBy });
+    return { qd: qd, removedCount: removedCount };
+};
 const searchByQdAsync = async (qdInput, searchParams) => {
     let result;
     let qdSearch;
@@ -475,205 +534,205 @@ export const refreshLastSearch = async (qd) => {
 // =============================================================================
 // STYLED COMPONENTS per i badge degli ordinamenti
 // =============================================================================
-const StyledOrderByBadgesContainer = styled.div `
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    margin: 1px 0;
-    background: linear-gradient(135deg, rgba(74, 150, 210, 0.08) 0%, rgba(37, 89, 165, 0.08) 100%);
-    border-radius: 8px;
-    border: 1px solid rgba(74, 150, 210, 0.2);
+const StyledOrderByBadgesContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    margin: 1px 0;
+    background: linear-gradient(135deg, rgba(74, 150, 210, 0.08) 0%, rgba(37, 89, 165, 0.08) 100%);
+    border-radius: 8px;
+    border: 1px solid rgba(74, 150, 210, 0.2);
 `;
-const StyledOrderByLabel = styled.span `
-    font-size: 0.82rem;
-    font-weight: 600;
-    color: #4A96D2;
-    white-space: nowrap;
+const StyledOrderByLabel = styled.span `
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #4A96D2;
+    white-space: nowrap;
 `;
-const StyledOrderByBadgesWrapper = styled.div `
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    align-items: center;
-    flex: 1;
+const StyledOrderByBadgesWrapper = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    flex: 1;
 `;
-const StyledOrderByBadge = styled.div `
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
-    background: white;
-    border: 1px solid #d1d9e6;
-    border-radius: 16px;
-    font-size: 0.82rem;
-    color: #333;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    
-    .badge-name {
-        max-width: 120px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        
-        @media (max-width: 600px) {
-            max-width: 80px;
-        }
-    }
+const StyledOrderByBadge = styled.div `
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: white;
+    border: 1px solid #d1d9e6;
+    border-radius: 16px;
+    font-size: 0.82rem;
+    color: #333;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    
+    .badge-name {
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+        @media (max-width: 600px) {
+            max-width: 80px;
+        }
+    }
 `;
-const StyledOrderByBadgeMore = styled.div `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 3px 10px;
-    background: linear-gradient(135deg, #4A96D2 0%, #2559A5 100%);
-    border: none;
-    border-radius: 16px;
-    font-size: 0.82rem;
-    font-weight: 600;
-    color: white;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    
-    &:hover {
-        transform: scale(1.05);
-        box-shadow: 0 2px 6px rgba(74, 150, 210, 0.4);
-    }
+const StyledOrderByBadgeMore = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 10px;
+    background: linear-gradient(135deg, #4A96D2 0%, #2559A5 100%);
+    border: none;
+    border-radius: 16px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 2px 6px rgba(74, 150, 210, 0.4);
+    }
 `;
-const StyledOrderByEditButton = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 4px;
-    color: #4A96D2;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    
-    &:hover {
-        background-color: rgba(74, 150, 210, 0.15);
-    }
+const StyledOrderByEditButton = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    color: #4A96D2;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background-color: rgba(74, 150, 210, 0.15);
+    }
 `;
 // =============================================================================
 // STYLED COMPONENTS per i badge degli output (select) - colore verde/teal
 // =============================================================================
-const StyledSelectBadgesContainer = styled.div `
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 10px;
-    margin: 1px 0;
-    background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(27, 94, 32, 0.08) 100%);
-    border-radius: 8px;
-    border: 1px solid rgba(46, 125, 50, 0.2);
+const StyledSelectBadgesContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    margin: 1px 0;
+    background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(27, 94, 32, 0.08) 100%);
+    border-radius: 8px;
+    border: 1px solid rgba(46, 125, 50, 0.2);
 `;
-const StyledSelectLabel = styled.span `
-    font-size: 0.82rem;
-    font-weight: 600;
-    color: #2E7D32;
-    white-space: nowrap;
+const StyledSelectLabel = styled.span `
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #2E7D32;
+    white-space: nowrap;
 `;
-const StyledSelectBadgesWrapper = styled.div `
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    align-items: center;
-    flex: 1;
+const StyledSelectBadgesWrapper = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    flex: 1;
 `;
-const StyledSelectBadge = styled.div `
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 8px;
-    background: white;
-    border: 1px solid #c8e6c9;
-    border-radius: 16px;
-    font-size: 0.82rem;
-    color: #333;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-    
-    .badge-name {
-        max-width: 120px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        
-        @media (max-width: 600px) {
-            max-width: 80px;
-        }
-    }
+const StyledSelectBadge = styled.div `
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: white;
+    border: 1px solid #c8e6c9;
+    border-radius: 16px;
+    font-size: 0.82rem;
+    color: #333;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    
+    .badge-name {
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+        @media (max-width: 600px) {
+            max-width: 80px;
+        }
+    }
 `;
-const StyledSelectBadgeMore = styled.div `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 3px 10px;
-    background: linear-gradient(135deg, #43A047 0%, #2E7D32 100%);
-    border: none;
-    border-radius: 16px;
-    font-size: 0.82rem;
-    font-weight: 600;
-    color: white;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    
-    &:hover {
-        transform: scale(1.05);
-        box-shadow: 0 2px 6px rgba(46, 125, 50, 0.4);
-    }
+const StyledSelectBadgeMore = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 10px;
+    background: linear-gradient(135deg, #43A047 0%, #2E7D32 100%);
+    border: none;
+    border-radius: 16px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 2px 6px rgba(46, 125, 50, 0.4);
+    }
 `;
-const StyledSelectEditButton = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 4px;
-    color: #2E7D32;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    
-    &:hover {
-        background-color: rgba(46, 125, 50, 0.15);
-    }
+const StyledSelectEditButton = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    color: #2E7D32;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background-color: rgba(46, 125, 50, 0.15);
+    }
 `;
-export const StyledToppyTextContainer = styled.div `
-    padding: 22px 8px;
-    width: 100%;
-    max-width: 300px;
-    border: 1px solid #2559A5;
-    border-radius: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    min-height: 100px;
+export const StyledToppyTextContainer = styled.div `
+    padding: 22px 8px;
+    width: 100%;
+    max-width: 300px;
+    border: 1px solid #2559A5;
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-height: 100px;
 `;
-export const StyledToppyText = styled.p `
-    text-align: center;
-    color: #2559A5;
-    font-size: 1rem;
-    user-select: none;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    margin: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    word-break: break-word;
-    line-height: 1.2;
+export const StyledToppyText = styled.p `
+    text-align: center;
+    color: #2559A5;
+    font-size: 1rem;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.2;
 `;
-export const StyledToppyImage = styled.img `
-    width: 100%; 
-    max-width: 120px; 
-    height: auto;
-    display: block; 
+export const StyledToppyImage = styled.img `
+    width: 100%; 
+    max-width: 120px; 
+    height: auto;
+    display: block; 
 `;