добавлен фильтр количеста вывода записей на странице История тревог

frontend/components/alerts/DetectorList.tsx

@@ -68,7 +68,7 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
   const [detectors, setDetectors] = useState<Detector[]>([])
   const [searchTerm, setSearchTerm] = useState<string>(initialSearchTerm)
   const [currentPage, setCurrentPage] = useState(1)
-  const itemsPerPage = 20
+  const [itemsPerPage, setItemsPerPage] = useState(10)
 
   useEffect(() => {
     const loadDetectors = async () => {
@@ -80,6 +80,7 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
         const rawArray: RawDetector[] = Object.values(detectorsData).filter(
           (detector) => (objectId ? detector.object === objectId : true)
         )
+        
         const normalized: Detector[] = rawArray.map((d) => ({
           detector_id: d.detector_id,
           name: d.name,
@@ -89,7 +90,8 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
           floor: d.floor,
           checked: false,
         }))
-        console.log('[DetectorList] Payload:', payload) 
+        console.log('[DetectorList] Payload:', payload)
+        console.log('[DetectorList] Total detectors:', normalized.length) 
         setDetectors(normalized)
       } catch (e) {
         console.error('Failed to load detectors:', e)
@@ -129,6 +131,30 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
         </div>
         
         <div className="flex items-center gap-3">
+          {/* Выбор количества элементов */}
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-400">Показывать:</span>
+            <div className="relative">
+              <select
+                value={itemsPerPage}
+                onChange={(e) => {
+                  setItemsPerPage(Number(e.target.value))
+                  setCurrentPage(1)
+                }}
+                className="bg-[#161824] text-white px-3 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none text-sm font-medium appearance-none pr-8"
+                style={{ fontFamily: 'Inter, sans-serif' }}
+              >
+                <option value="10">10</option>
+                <option value="20">20</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+              </select>
+              <svg className="w-4 h-4 absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </div>
+          </div>
+          
           <div className="relative">
             <input
               type="text"

frontend/components/alerts/DetectorList.tsx — копия 2

@@ -151,28 +151,6 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
           <table className="w-full">
             <thead>
               <tr className="border-b border-gray-700">
-                <th className="text-left text-white font-medium py-3 w-12">
-                  <input
-                    type="checkbox"
-                    checked={selectedDetectors.length === currentDetectors.length && currentDetectors.length > 0}
-                    onChange={(e) => {
-                      if (e.target.checked) {
-                        currentDetectors.forEach(detector => {
-                          if (!selectedDetectors.includes(detector.detector_id)) {
-                            onDetectorSelect(detector.detector_id, true)
-                          }
-                        })
-                      } else {
-                        currentDetectors.forEach(detector => {
-                          if (selectedDetectors.includes(detector.detector_id)) {
-                            onDetectorSelect(detector.detector_id, false)
-                          }
-                        })
-                      }
-                    }}
-                    className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
-                  />
-                </th>
                 <th className="text-left text-white font-medium py-3">Детектор</th>
                 <th className="text-left text-white font-medium py-3">Статус</th>
                 <th className="text-left text-white font-medium py-3">Местоположение</th>
@@ -185,14 +163,6 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
                 
                 return (
                   <tr key={detector.detector_id} className="border-b border-gray-800">
-                    <td className="py-3">
-                      <input
-                        type="checkbox"
-                        checked={isSelected}
-                        onChange={(e) => onDetectorSelect(detector.detector_id, e.target.checked)}
-                        className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
-                      />
-                    </td>
                     <td className="py-3 text-white text-sm">{detector.name}</td>
                     <td className="py-3">
                       <div className="flex items-center gap-2">