chore(admin/frontend): 🔧 Add new queue/job management components, pages with bulk actions, status tabs, search/filtering, and detailed views

admin/frontend/src/components/BulkActionsBar.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+/** @jsxImportSource react */
+
+import { useState } from 'react';
 
 export interface BulkActionsBarProps {
   /** Queue name (for display) */

admin/frontend/src/components/DLQManager.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+/** @jsxImportSource react */
+
+import { useState } from 'react';
 import { useJobs } from '../hooks';
 import { JobDetailsModal } from './JobDetailsModal';
 import type { JobDetails } from '../types';

admin/frontend/src/components/JobDetailPanel.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsxImportSource react */
+
 import type { JobDetails } from '../types';
 
 export interface JobDetailPanelProps {

admin/frontend/src/components/JobDetailsModal.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+/** @jsxImportSource react */
+
+import { useState } from 'react';
 import type { JobDetails } from '../types';
 
 export interface JobDetailsModalProps {

admin/frontend/src/components/JobStatusTabs.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsxImportSource react */
+
 import type { JobState } from '../types';
 
 type StatusWithCount = 'waiting' | 'active' | 'completed' | 'failed' | 'delayed';

admin/frontend/src/components/JobsTable.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+/** @jsxImportSource react */
+
+import { useState } from 'react';
 import { useJobs } from '../hooks';
 import { JobDetailsModal } from './JobDetailsModal';
 import type { JobState, JobDetails } from '../types';

admin/frontend/src/components/QueueCard.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsxImportSource react */
+
 import type { QueueSummary, QueueMetrics } from '../types';
 
 export interface QueueCardProps {

admin/frontend/src/components/QueueDashboard.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useEffect, Component, type ReactNode, type ErrorInfo } from 'react';
+/** @jsxImportSource react */
+
+import { useState, useEffect, useRef, Component, type ReactNode, type ErrorInfo } from 'react';
 import { useQueueMetrics, useQueueWebSocket, useQueueControl } from '../hooks';
 import { QueueList } from './QueueList';
 import { JobsTable } from './JobsTable';
@@ -137,7 +139,7 @@ export function QueueDashboard({
 
   // Auto-select first queue - only when queues first load and no selection exists
   // Using a ref to track if initial selection has been made to prevent race conditions
-  const hasAutoSelected = React.useRef(false);
+  const hasAutoSelected = useRef(false);
   useEffect(() => {
     if (queues.length > 0 && !selectedQueue && !hasAutoSelected.current) {
       hasAutoSelected.current = true;

admin/frontend/src/components/QueueGrid.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsxImportSource react */
+
 import type { QueueStats } from '../types';
 
 export interface QueueGridProps {

admin/frontend/src/components/QueueList.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsxImportSource react */
+
 import { QueueCard } from './QueueCard';
 import type { QueueSummary, QueueMetrics } from '../types';
 

admin/frontend/src/components/QueueSummaryBar.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsxImportSource react */
+
 import type { QueueSummaryStats } from '../types';
 
 export interface QueueSummaryBarProps {

admin/frontend/src/components/SearchBar.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+/** @jsxImportSource react */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
 
 export interface SearchBarProps {
   /** Current search value */

admin/frontend/src/components/ServiceFilter.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+/** @jsxImportSource react */
+
 
 export interface ServiceOption {
   /** Value used for filtering */

admin/frontend/src/pages/QueueDashboardPage.tsx

@@ -1,4 +1,6 @@
-import React, { useCallback, useMemo } from 'react';
+/** @jsxImportSource react */
+
+import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useQueueMetrics } from '../hooks/useQueueMetrics';

admin/frontend/src/pages/QueueDetailPage.tsx

@@ -1,4 +1,6 @@
-import React, { useCallback, useMemo } from 'react';
+/** @jsxImportSource react */
+
+import { useCallback, useMemo } from 'react';
 import { useParams, Link } from 'react-router-dom';
 
 import { useQueueMetrics } from '../hooks/useQueueMetrics';