import React, { useState, useMemo } from 'react';
import {
Ship, Anchor, Zap, Shield, Waves, Target,
Search, Info, Fuel, Package, Activity,
ChevronDown, ChevronUp, LayoutGrid, List, X
} from 'lucide-react';
const NavyFleetDashboard = () => {
const [selectedCategory, setSelectedCategory] = useState('All');
const [searchQuery, setSearchQuery] = useState('');
const [viewMode, setViewMode] = useState('grid');
const [expandedShips, setExpandedShips] = useState({});
const toggleExpand = (id) => {
setExpandedShips(prev => ({
...prev,
[id]: !prev[id]
}));
};
const categories = [
{ name: 'All', icon:
{/* Header Section */}
{/* Global Controls: Search & Categories */}
U.S. NAVY 2026 ROSTER
Search for any active ship or explore by functional classification.
{/* Search Box */}
{/* Grid Layout */}
{filteredShips.length > 0 ? (
viewMode === 'grid' ? (
{categories.map((cat) => (
))}
{filteredShips.map((ship) => (
))}
) : (
/* List Layout */
{ship.category}
{ship.hull}
{ship.class}
{ship.type}
{ship.desc}
{Object.entries(ship.stats).map(([key, val]) => (
))}
{/* Expandable Roster */}
{key.replace('_', ' ')}
{val}
{/* Auto-expand roster if searching */}
{(expandedShips[ship.id] || searchQuery) && (
{ship.roster.map((name, idx) => {
const isMatch = searchQuery && name.toLowerCase().includes(searchQuery.toLowerCase());
return (
)}
{ship.count} Units Active
{ship.status}
{filteredShips.map((ship) => (
))}
)
) : (
/* Empty State */
{ship.class}
{ship.hull}{ship.desc}
{ship.roster.map((n, i) => {
const isMatch = searchQuery && n.toLowerCase().includes(searchQuery.toLowerCase());
return (
{n}
);
})}
No ships found
Try searching for a different name or hull number.
