From e2ee26b31fec34c5a3d2a5f450d897df4046426f Mon Sep 17 00:00:00 2001
From: Haralan Dobrev <harry@hkdobrev.com>
Date: Sun, 19 Apr 2026 11:16:08 +0300
Subject: [PATCH 1/2] Add video violation type filter and display in admin

Add type dropdown filter (standard/video) to violation list, show video
badge with camera icon in the table, and display video signal indicator
in violation details view.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../modules/violations/ViolationDetails.js      |  6 ++++++
 .../modules/violations/ViolationFilter.js       | 17 ++++++++++++++++-
 .../modules/violations/ViolationList.js         | 13 +++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/modules/violations/ViolationDetails.js b/src/components/modules/violations/ViolationDetails.js
index ce6a530..62177ae 100644
--- a/src/components/modules/violations/ViolationDetails.js
+++ b/src/components/modules/violations/ViolationDetails.js
@@ -11,6 +11,7 @@ import {
   faUpload,
   faEyeSlash,
   faDove,
+  faVideo,
 } from '@fortawesome/free-solid-svg-icons'
 
 import { ContentPanel } from '../Modules'
@@ -380,6 +381,11 @@ export default (props) => {
               </>
             )}
           </FancyButtonRed>
+          {data.type === 'video' && (
+            <p style={{ color: '#e44', fontWeight: 'bold', fontSize: '16px' }}>
+              <FontAwesomeIcon icon={faVideo} /> Видео сигнал
+            </p>
+          )}
           <hr />
           <h2>Описание</h2>
           <p
diff --git a/src/components/modules/violations/ViolationFilter.js b/src/components/modules/violations/ViolationFilter.js
index fa6a3c1..a5485c6 100644
--- a/src/components/modules/violations/ViolationFilter.js
+++ b/src/components/modules/violations/ViolationFilter.js
@@ -92,6 +92,8 @@ export default function ViolationFilter(props) {
   const [assigneeUsers, setAssigneeUsers] = useState([])
   const [assignee, setAssignee] = useState(query.get('assignee') || '')
 
+  const [type, setType] = useState(query.get('type') || '')
+
   const params = new URLSearchParams()
   const fields = {
     country,
@@ -103,6 +105,7 @@ export default function ViolationFilter(props) {
     status,
     published,
     assignee,
+    type,
   }
 
   for (const [key, value] of Object.entries(fields)) {
@@ -160,6 +163,7 @@ export default function ViolationFilter(props) {
     setSection('')
     setPublished('')
     setAssignee('')
+    setType('')
   }
 
   return (
@@ -182,7 +186,18 @@ export default function ViolationFilter(props) {
               setStatus={setStatus}
             />
           </td>
-          <td></td>
+          <td>
+            Тип:<br></br>
+            <select
+              value={type}
+              onChange={(e) => setType(e.target.value)}
+              style={{ padding: '5px', fontSize: '15px' }}
+            >
+              <option value="">Всички</option>
+              <option value="standard">Стандартен</option>
+              <option value="video">Видео</option>
+            </select>
+          </td>
         </tr>
         <tr>
           <td>
diff --git a/src/components/modules/violations/ViolationList.js b/src/components/modules/violations/ViolationList.js
index 0a27bdb..1bdc752 100644
--- a/src/components/modules/violations/ViolationList.js
+++ b/src/components/modules/violations/ViolationList.js
@@ -14,6 +14,7 @@ import { AuthContext } from '../../App'
 import Loading from '../../layout/Loading'
 
 import styled from 'styled-components'
+import { faVideo } from '@fortawesome/free-solid-svg-icons'
 import ViolationFilter from './ViolationFilter'
 
 const TableViewContainer = styled.div`
@@ -116,6 +117,7 @@ export default (props) => {
       cityRegion: query.get('cityRegion'),
       status: query.get('status'),
       published: query.get('published'),
+      type: query.get('type'),
       page: query.get('page'),
     }
 
@@ -142,6 +144,7 @@ export default (props) => {
     query.get('cityRegion'),
     query.get('status'),
     query.get('published'),
+    query.get('type'),
   ])
 
   const status = (apiStatus) => {
@@ -252,6 +255,7 @@ export default (props) => {
                 <th>№ на секция</th>
                 <th>Град</th>
                 <th>Автор</th>
+                <th>Тип</th>
                 <th>Описание</th>
                 <th>Статут</th>
               </tr>
@@ -305,6 +309,15 @@ export default (props) => {
                         ? `${violation.author.firstName} ${violation.author.lastName[0]}.`
                         : violation?.author?.name}
                     </td>
+                    <td>
+                      {violation.type === 'video' ? (
+                        <span style={{ color: '#e44', fontWeight: 'bold' }}>
+                          <FontAwesomeIcon icon={faVideo} /> Видео
+                        </span>
+                      ) : (
+                        'Стандартен'
+                      )}
+                    </td>
                     <td>{violation.description.slice(0, 40) + '...'}</td>
                     <td>{status(violation.status)}</td>
                   </tr>

From a616d808ea5d0de7574747d1ae2ee2fe63e7ea21 Mon Sep 17 00:00:00 2001
From: Haralan Dobrev <harry@hkdobrev.com>
Date: Sun, 19 Apr 2026 11:58:31 +0300
Subject: [PATCH 2/2] Fix colSpan and merge duplicate faVideo import

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/modules/violations/ViolationList.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/violations/ViolationList.js b/src/components/modules/violations/ViolationList.js
index 1bdc752..7bd8f5b 100644
--- a/src/components/modules/violations/ViolationList.js
+++ b/src/components/modules/violations/ViolationList.js
@@ -8,13 +8,13 @@ import {
   faFastForward,
   faFastBackward,
   faCircle,
+  faVideo,
 } from '@fortawesome/free-solid-svg-icons'
 
 import { AuthContext } from '../../App'
 import Loading from '../../layout/Loading'
 
 import styled from 'styled-components'
-import { faVideo } from '@fortawesome/free-solid-svg-icons'
 import ViolationFilter from './ViolationFilter'
 
 const TableViewContainer = styled.div`
@@ -263,7 +263,7 @@ export default (props) => {
             <tbody>
               {loading ? (
                 <tr key="loading">
-                  <td colSpan="8">
+                  <td colSpan="9">
                     <Loading />
                   </td>
                 </tr>