Разработка интерфейса фронт

frontend/app/(protected)/objects/page.tsx

@@ -1,9 +1,126 @@
-import React from 'react'
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import ObjectGallery from '../../../components/objects/ObjectGallery'
+import { ObjectData } from '../../../components/objects/ObjectCard'
+import Sidebar from '../../../components/ui/Sidebar'
+import detectorsData from '../../../data/detectors.json'
+
+// Интерфейс для данных объекта из JSON
+interface RawObjectData {
+  name: string
+  title: string
+  description: string
+  image?: string
+  location: string
+  address: string
+  floors: number
+  area: number
+  type?: string
+  status?: string
+  zones: Array<{
+    zone_id: string
+    name: string
+    detectors: number[]
+  }>
+}
+
+// Функция для преобразования данных объекта из JSON
+const transformObjectToObjectData = (objectId: string, objectData: RawObjectData): ObjectData => {
+  return {
+    object_id: objectId,
+    title: objectData.title || `Объект ${objectId}`,
+    description: objectData.description || `Описание объекта ${objectData.title || objectId}`,
+    image: objectData.image || '/images/default-object.jpg',
+    location: objectData.location || 'Не указано',
+    floors: objectData.floors,
+    area: objectData.area.toString(),
+    type: objectData.type || 'object',
+    status: objectData.status || 'active'
+  }
+}
+
+const ObjectsPage: React.FC = () => {
+  const [objects, setObjects] = useState<ObjectData[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null)
+
+  useEffect(() => {
+    const loadData = () => {
+      try {
+        setLoading(true)
+        
+        if (detectorsData.objects) {
+          const transformedObjects = Object.entries(detectorsData.objects).map(
+            ([objectId, objectData]) => transformObjectToObjectData(objectId, objectData)
+          )
+          setObjects(transformedObjects)
+        } else {
+          throw new Error('Не удалось получить данные объектов')
+        }
+      } catch (err) {
+        console.error('Ошибка при загрузке данных:', err)
+        setError(err instanceof Error ? err.message : 'Произошла неизвестная ошибка')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadData()
+  }, [])
+
+  const handleObjectSelect = (objectId: string) => {
+    console.log('Object selected:', objectId)
+    setSelectedObjectId(objectId) 
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-[#0e111a]">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
+          <p className="text-white">Загрузка объектов...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-[#0e111a]">
+        <div className="text-center">
+          <div className="text-red-500 mb-4">
+            <svg className="w-12 h-12 mx-auto" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+            </svg>
+          </div>
+          <h3 className="text-lg font-medium text-white mb-2">Ошибка загрузки</h3>
+          <p className="text-[#71717a] mb-4">{error}</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-[#3193f5] hover:bg-[#2563eb] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200"
+          >
+            Попробовать снова
+          </button>
+        </div>
+      </div>
+    )
+  }
 
-const page = () => {
   return (
-    <div>page</div>
+    <div className="flex h-screen bg-[#0e111a]">
+      <Sidebar activeItem={null} />
+      <div className="flex-1 overflow-hidden">
+        <ObjectGallery
+          objects={objects}
+          title="Объекты"
+          onObjectSelect={handleObjectSelect}
+          selectedObjectId={selectedObjectId}
+        />
+      </div>
+    </div>
   )
 }
 
-export default page
+export default ObjectsPage