still working on frontend UI

frontend/src/pages/TapeLibraries.tsx

@@ -0,0 +1,190 @@
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { physicalTapeAPI, vtlAPI, type PhysicalTapeLibrary, type VirtualTapeLibrary } from '@/api/tape'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { HardDrive, Plus, RefreshCw } from 'lucide-react'
+import { Link } from 'react-router-dom'
+
+export default function TapeLibraries() {
+  const [activeTab, setActiveTab] = useState<'physical' | 'vtl'>('vtl')
+
+  const { data: physicalLibraries, isLoading: loadingPhysical } = useQuery<PhysicalTapeLibrary[]>({
+    queryKey: ['physical-tape-libraries'],
+    queryFn: physicalTapeAPI.listLibraries,
+    enabled: activeTab === 'physical',
+  })
+
+  const { data: vtlLibraries, isLoading: loadingVTL } = useQuery<VirtualTapeLibrary[]>({
+    queryKey: ['vtl-libraries'],
+    queryFn: vtlAPI.listLibraries,
+    enabled: activeTab === 'vtl',
+  })
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Tape Libraries</h1>
+          <p className="mt-2 text-sm text-gray-600">
+            Manage physical and virtual tape libraries
+          </p>
+        </div>
+        <div className="flex gap-2">
+          {activeTab === 'vtl' && (
+            <Link to="/tape/vtl/create">
+              <Button>
+                <Plus className="h-4 w-4 mr-2" />
+                Create VTL
+              </Button>
+            </Link>
+          )}
+          {activeTab === 'physical' && (
+            <Button variant="outline">
+              <RefreshCw className="h-4 w-4 mr-2" />
+              Discover Libraries
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="border-b border-gray-200">
+        <nav className="-mb-px flex space-x-8">
+          <button
+            onClick={() => setActiveTab('vtl')}
+            className={`py-4 px-1 border-b-2 font-medium text-sm ${
+              activeTab === 'vtl'
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            }`}
+          >
+            Virtual Tape Libraries ({vtlLibraries?.length || 0})
+          </button>
+          <button
+            onClick={() => setActiveTab('physical')}
+            className={`py-4 px-1 border-b-2 font-medium text-sm ${
+              activeTab === 'physical'
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            }`}
+          >
+            Physical Libraries ({physicalLibraries?.length || 0})
+          </button>
+        </nav>
+      </div>
+
+      {/* Content */}
+      {activeTab === 'vtl' && (
+        <div>
+          {loadingVTL ? (
+            <p className="text-sm text-gray-500">Loading VTL libraries...</p>
+          ) : vtlLibraries && vtlLibraries.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {vtlLibraries.map((library: VirtualTapeLibrary) => (
+                <LibraryCard key={library.id} library={library} type="vtl" />
+              ))}
+            </div>
+          ) : (
+            <Card>
+              <CardContent className="p-12 text-center">
+                <HardDrive className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+                <h3 className="text-lg font-medium text-gray-900 mb-2">No Virtual Tape Libraries</h3>
+                <p className="text-sm text-gray-500 mb-4">
+                  Create your first virtual tape library to get started
+                </p>
+                <Link to="/tape/vtl/create">
+                  <Button>
+                    <Plus className="h-4 w-4 mr-2" />
+                    Create VTL Library
+                  </Button>
+                </Link>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      )}
+
+      {activeTab === 'physical' && (
+        <div>
+          {loadingPhysical ? (
+            <p className="text-sm text-gray-500">Loading physical libraries...</p>
+          ) : physicalLibraries && physicalLibraries.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {physicalLibraries.map((library: PhysicalTapeLibrary) => (
+                <LibraryCard key={library.id} library={library} type="physical" />
+              ))}
+            </div>
+          ) : (
+            <Card>
+              <CardContent className="p-12 text-center">
+                <HardDrive className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+                <h3 className="text-lg font-medium text-gray-900 mb-2">No Physical Tape Libraries</h3>
+                <p className="text-sm text-gray-500 mb-4">
+                  Discover physical tape libraries connected to the system
+                </p>
+                <Button variant="outline">
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                  Discover Libraries
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface LibraryCardProps {
+  library: PhysicalTapeLibrary | VirtualTapeLibrary
+  type: 'physical' | 'vtl'
+}
+
+function LibraryCard({ library, type }: LibraryCardProps) {
+  const isPhysical = type === 'physical'
+  const libraryPath = isPhysical ? `/tape/physical/${library.id}` : `/tape/vtl/${library.id}`
+
+  return (
+    <Link to={libraryPath}>
+      <Card className="hover:border-blue-500 transition-colors">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg">{library.name}</CardTitle>
+            {library.is_active ? (
+              <span className="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">
+                Active
+              </span>
+            ) : (
+              <span className="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded">
+                Inactive
+              </span>
+            )}
+          </div>
+          {isPhysical && 'serial_number' in library && (
+            <CardDescription>Serial: {library.serial_number}</CardDescription>
+          )}
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-500">Slots:</span>
+              <span className="font-medium">{library.slot_count}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-500">Drives:</span>
+              <span className="font-medium">{library.drive_count}</span>
+            </div>
+            {isPhysical && 'vendor' in library && library.vendor && (
+              <div className="flex justify-between">
+                <span className="text-gray-500">Vendor:</span>
+                <span className="font-medium">{library.vendor} {library.model}</span>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}
+