vmi-virtual-memorial/vmi-wd-frontend / 91f48cd

+import Header from '@/components/Header';

+      <Header 

+        breadcrumbs={[

+          { label: 'Home', href: '/' },

+          { label: conflict.name }

+        ]}

+      />

+                    {person.full_display_name || person.display_name}

+'use client';

+

+import { useState, useEffect } from 'react';

+import Link from 'next/link';

+import Header from '@/components/Header';

+

+interface Person {

+  id: number;

+  display_name: string;

+  rank: string;

+  unit: string;

+}

+

+interface ConflictWithCasualties {

+  id: number;

+  name: string;

+  start_year: number;

+  end_year: number | null;

+  description: string;

+  casualty_count: number;

+  casualties: Person[];

+}

+

+export default function MemorialIndexPage() {

+  const [conflicts, setConflicts] = useState<ConflictWithCasualties[]>([]);

+  const [loading, setLoading] = useState(true);

+  const [error, setError] = useState<string | null>(null);

+  const [expandedConflicts, setExpandedConflicts] = useState<Set<number>>(new Set());

+

+  useEffect(() => {

+    async function fetchData() {

+      try {

+        const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';

+        const response = await fetch(`${apiUrl}/memorial/index/`);

+        

+        if (!response.ok) {

+          throw new Error('Failed to fetch memorial index');

+        }

+        

+        const data = await response.json();

+        setConflicts(data);

+        

+        // By default, expand conflicts with casualties

+        const defaultExpanded = new Set(

+          data.filter((c: ConflictWithCasualties) => c.casualty_count > 0).map((c: ConflictWithCasualties) => c.id)

+        );

+        setExpandedConflicts(defaultExpanded);

+      } catch (err) {

+        setError(err instanceof Error ? err.message : 'Failed to load data');

+        console.error(err);

+      } finally {

+        setLoading(false);

+      }

+    }

+    

+    fetchData();

+  }, []);

+

+  const toggleConflict = (conflictId: number) => {

+    const newExpanded = new Set(expandedConflicts);

+    if (newExpanded.has(conflictId)) {

+      newExpanded.delete(conflictId);

+    } else {

+      newExpanded.add(conflictId);

+    }

+    setExpandedConflicts(newExpanded);

+  };

+

+  const toggleAll = () => {

+    if (expandedConflicts.size === conflicts.length) {

+      setExpandedConflicts(new Set());

+    } else {

+      setExpandedConflicts(new Set(conflicts.map(c => c.id)));

+    }

+  };

+

+  if (loading) {

+    return (

+      <div className="min-h-screen bg-vmi-cream flex items-center justify-center">

+        <p className="text-gray-600 text-xl">Loading memorial index...</p>

+      </div>

+    );

+  }

+

+  if (error) {

+    return (

+      <div className="min-h-screen bg-vmi-cream flex items-center justify-center">

+        <div className="text-center">

+          <p className="text-red-600 mb-4 text-xl">{error}</p>

+          <Link href="/" className="text-vmi-red hover:text-vmi-dark-red underline font-semibold">

+            Return to Home

+          </Link>

+        </div>

+      </div>

+    );

+  }

+

+  const totalCasualties = conflicts.reduce((sum, conflict) => sum + conflict.casualty_count, 0);

+

+  return (

+    <div className="min-h-screen bg-vmi-cream">

+      <Header 

+        breadcrumbs={[

+          { label: 'Home', href: '/' },

+          { label: 'Complete Memorial Index' }

+        ]}

+        showSearch={true}

+        showIndex={false}

+      />

+

+      {/* Main Content */}

+      <main className="max-w-6xl mx-auto px-4 py-12">

+        {/* Index Header */}

+        <div className="bg-vmi-light-gold border-2 border-vmi-gold rounded-lg p-8 mb-12 shadow-xl">

+          <h1 className="text-4xl font-black text-vmi-red mb-4">

+            VMI Memorial Index

+          </h1>

+          <p className="text-xl text-gray-700 mb-6">

+            Complete listing of all VMI alumni who made the ultimate sacrifice in service to their country.

+          </p>

+          <div className="flex flex-wrap gap-6 text-lg">

+            <div>

+              <span className="font-bold text-gray-700">Total Conflicts:</span>{' '}

+              <span className="text-vmi-red font-bold">{conflicts.length}</span>

+            </div>

+            <div>

+              <span className="font-bold text-gray-700">Total Lives Given:</span>{' '}

+              <span className="text-vmi-red font-bold">{totalCasualties}</span>

+            </div>

+          </div>

+          <div className="mt-6">

+            <button

+              onClick={toggleAll}

+              className="bg-vmi-red text-white px-6 py-2 rounded hover:bg-vmi-dark-red transition-colors font-semibold"

+            >

+              {expandedConflicts.size === conflicts.length ? 'Collapse All' : 'Expand All'}

+            </button>

+          </div>

+        </div>

+

+        {/* Conflicts and Casualties */}

+        <div className="space-y-8">

+          {conflicts.map((conflict) => (

+            <div key={conflict.id} className="bg-white border-2 border-gray-300 rounded-lg shadow-xl overflow-hidden">

+              {/* Conflict Header */}

+              <div 

+                className="p-6 bg-gray-50 border-b-2 border-gray-300 cursor-pointer hover:bg-gray-100 transition-colors"

+                onClick={() => toggleConflict(conflict.id)}

+              >

+                <div className="flex justify-between items-center">

+                  <div className="flex-1">

+                    <h2 className="text-2xl font-bold text-vmi-red mb-1">

+                      {conflict.name}

+                    </h2>

+                    <p className="text-gray-600">

+                      {conflict.start_year} – {conflict.end_year || 'Present'}

+                    </p>

+                  </div>

+                  <div className="flex items-center gap-4">

+                    <div className="text-right">

+                      <p className="text-3xl font-black text-vmi-red">{conflict.casualty_count}</p>

+                      <p className="text-sm text-gray-600 uppercase tracking-wide">Casualties</p>

+                    </div>

+                    <div className="text-2xl text-gray-400">

+                      {expandedConflicts.has(conflict.id) ? '−' : '+'}

+                    </div>

+                  </div>

+                </div>

+              </div>

+

+              {/* Casualties List */}

+              {expandedConflicts.has(conflict.id) && conflict.casualty_count > 0 && (

+                <div className="p-6">

+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

+                    {conflict.casualties.map((person) => (

+                      <Link

+                        key={person.id}

+                        href={`/memorial/person/${person.id}`}

+                        className="block p-4 border border-gray-200 rounded hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"

+                      >

+                        <h3 className="font-bold text-gray-800 group-hover:text-vmi-red transition-colors">

+                          {person.display_name}

+                        </h3>

+                        {person.rank && (

+                          <p className="text-gray-700 text-sm">{person.rank}</p>

+                        )}

+                        {person.unit && (

+                          <p className="text-gray-600 text-sm italic">{person.unit}</p>

+                        )}

+                      </Link>

+                    ))}

+                  </div>

+                </div>

+              )}

+

+              {/* No casualties message */}

+              {expandedConflicts.has(conflict.id) && conflict.casualty_count === 0 && (

+                <div className="p-6 text-center text-gray-600">

+                  <p>No casualties recorded for this conflict.</p>

+                </div>

+              )}

+            </div>

+          ))}

+        </div>

+      </main>

+    </div>

+  );

+}

+import Header from '@/components/Header';

+      <Header 

+        breadcrumbs={[

+          { label: 'Home', href: '/' },

+          { label: person.conflict_name, href: `/memorial/conflict/${person.conflict}` },

+          { label: person.display_name }

+        ]}

+      />

+            {person.full_display_name || person.display_name}

+              {person.class_year && (

+                <p className="text-lg">

+                  <span className="font-bold text-gray-700">Class Year:</span> {person.class_year}

+                </p>

+              )}

+'use client';

+

+import { useState, useEffect } from 'react';

+import Link from 'next/link';

+import { searchPeople, getSearchFilters, PersonSearchResult, SearchFilters } from '@/lib/api';

+import Header from '@/components/Header';

+

+export default function MemorialSearchPage() {

+  // Search state

+  const [searchTerm, setSearchTerm] = useState('');

+  const [selectedClassYears, setSelectedClassYears] = useState<number[]>([]);

+  const [selectedConflicts, setSelectedConflicts] = useState<number[]>([]);

+  const [dateFrom, setDateFrom] = useState('');

+  const [dateTo, setDateTo] = useState('');

+  const [noDate, setNoDate] = useState(false);

+  

+  // Results state

+  const [results, setResults] = useState<PersonSearchResult[]>([]);

+  const [totalCount, setTotalCount] = useState(0);

+  const [loading, setLoading] = useState(false);

+  const [hasSearched, setHasSearched] = useState(false);

+  

+  // Filters state

+  const [filters, setFilters] = useState<SearchFilters>({ conflicts: [], class_years: [] });

+

+  // Load all people on mount and get filters

+  useEffect(() => {

+    async function initialize() {

+      try {

+        // Get filters

+        const filterData = await getSearchFilters();

+        setFilters(filterData);

+        

+        // Load all people initially

+        const params = {

+          q: '',

+          class_year: '',

+          conflict: '',

+          date_from: '',

+          date_to: '',

+          no_date: false

+        };

+        

+        const data = await searchPeople(params);

+        setResults(data.results);

+        setTotalCount(data.count);

+        setHasSearched(true);

+      } catch (err) {

+        console.error('Failed to initialize:', err);

+      }

+    }

+    

+    initialize();

+  }, []);

+

+  const performSearch = async () => {

+    setLoading(true);

+    setHasSearched(true);

+    

+    try {

+      const params = {

+        q: searchTerm,

+        class_year: selectedClassYears.join(','),

+        conflict: selectedConflicts.join(','),

+        date_from: dateFrom,

+        date_to: dateTo,

+        no_date: noDate

+      };

+      

+      const data = await searchPeople(params);

+      setResults(data.results);

+      setTotalCount(data.count);

+    } catch (err) {

+      console.error('Search failed:', err);

+      setResults([]);

+      setTotalCount(0);

+    } finally {

+      setLoading(false);

+    }

+  };

+

+  const handleSubmit = (e: React.FormEvent) => {

+    e.preventDefault();

+    performSearch();

+  };

+

+  const toggleClassYear = (year: number) => {

+    setSelectedClassYears(prev =>

+      prev.includes(year) 

+        ? prev.filter(y => y !== year)

+        : [...prev, year]

+    );

+  };

+

+  const toggleConflict = (conflictId: number) => {

+    setSelectedConflicts(prev =>

+      prev.includes(conflictId)

+        ? prev.filter(c => c !== conflictId)

+        : [...prev, conflictId]

+    );

+  };

+

+  const clearFilters = () => {

+    setSearchTerm('');

+    setSelectedClassYears([]);

+    setSelectedConflicts([]);

+    setDateFrom('');

+    setDateTo('');

+    setNoDate(false);

+  };

+

+  return (

+    <div className="min-h-screen bg-vmi-cream">

+      <Header 

+        breadcrumbs={[

+          { label: 'Home', href: '/' },

+          { label: 'Memorial Index', href: '/memorial' },

+          { label: 'Search Memorial' }

+        ]}

+        showSearch={false}

+      />

+

+      {/* Main Content */}

+      <main className="max-w-7xl mx-auto px-4 py-12">

+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">

+          {/* Search Form - Left Sidebar */}

+          <div className="lg:col-span-1">

+            <div className="bg-white border-2 border-gray-300 rounded-lg p-6 shadow-xl sticky top-6">

+              <h2 className="text-2xl font-bold text-vmi-red mb-6">Search Filters</h2>

+              

+              <form onSubmit={handleSubmit} className="space-y-6">

+                {/* Name Search */}

+                <div>

+                  <label htmlFor="search" className="block text-sm font-bold text-gray-700 mb-2">

+                    Search by Name

+                  </label>

+                  <input

+                    type="text"

+                    id="search"

+                    value={searchTerm}

+                    onChange={(e) => setSearchTerm(e.target.value)}

+                    placeholder="Enter name..."

+                    className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-vmi-gold"

+                  />

+                </div>

+

+                {/* Class Year Filter */}

+                <div>

+                  <label className="block text-sm font-bold text-gray-700 mb-2">

+                    Class Year

+                  </label>

+                  <div className="max-h-40 overflow-y-auto border border-gray-300 rounded p-2">

+                    {filters.class_years.map(year => (

+                      <label key={year} className="flex items-center mb-1 cursor-pointer hover:bg-gray-50">

+                        <input

+                          type="checkbox"

+                          checked={selectedClassYears.includes(year)}

+                          onChange={() => toggleClassYear(year)}

+                          className="mr-2 text-vmi-red focus:ring-vmi-gold"

+                        />

+                        <span className="text-sm">{year}</span>

+                      </label>

+                    ))}

+                  </div>

+                </div>

+

+                {/* Conflict Filter */}

+                <div>

+                  <label className="block text-sm font-bold text-gray-700 mb-2">

+                    Conflict

+                  </label>

+                  <div className="max-h-40 overflow-y-auto border border-gray-300 rounded p-2">

+                    {filters.conflicts.map(conflict => (

+                      <label key={conflict.id} className="flex items-center mb-1 cursor-pointer hover:bg-gray-50">

+                        <input

+                          type="checkbox"

+                          checked={selectedConflicts.includes(conflict.id)}

+                          onChange={() => toggleConflict(conflict.id)}

+                          className="mr-2 text-vmi-red focus:ring-vmi-gold"

+                        />

+                        <span className="text-sm">{conflict.name}</span>

+                      </label>

+                    ))}

+                  </div>

+                </div>

+

+                {/* Date Range */}

+                <div>

+                  <label className="block text-sm font-bold text-gray-700 mb-2">

+                    Date of Death

+                  </label>

+                  <div className="space-y-2">

+                    <input

+                      type="date"

+                      value={dateFrom}

+                      onChange={(e) => setDateFrom(e.target.value)}

+                      disabled={noDate}

+                      placeholder="From"

+                      className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-vmi-gold disabled:bg-gray-100"

+                    />

+                    <input

+                      type="date"

+                      value={dateTo}

+                      onChange={(e) => setDateTo(e.target.value)}

+                      disabled={noDate}

+                      placeholder="To"

+                      className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-vmi-gold disabled:bg-gray-100"

+                    />

+                    <label className="flex items-center cursor-pointer">

+                      <input

+                        type="checkbox"

+                        checked={noDate}

+                        onChange={(e) => setNoDate(e.target.checked)}

+                        className="mr-2 text-vmi-red focus:ring-vmi-gold"

+                      />

+                      <span className="text-sm">No date recorded</span>

+                    </label>

+                  </div>

+                </div>

+

+                {/* Buttons */}

+                <div className="space-y-2">

+                  <button

+                    type="submit"

+                    className="w-full bg-vmi-red text-white px-4 py-2 rounded font-bold hover:bg-vmi-dark-red transition-colors"

+                  >

+                    Search

+                  </button>

+                  <button

+                    type="button"

+                    onClick={clearFilters}

+                    className="w-full bg-gray-300 text-gray-700 px-4 py-2 rounded font-bold hover:bg-gray-400 transition-colors"

+                  >

+                    Clear Filters

+                  </button>

+                </div>

+              </form>

+            </div>

+          </div>

+

+          {/* Results - Right Side */}

+          <div className="lg:col-span-3">

+            <div className="bg-white border-2 border-gray-300 rounded-lg p-6 shadow-xl">

+              <div className="mb-6">

+                <h1 className="text-3xl font-bold text-vmi-red mb-2">Memorial Search</h1>

+                {hasSearched && (

+                  <p className="text-gray-600">

+                    Found {totalCount} {totalCount === 1 ? 'person' : 'people'}

+                  </p>

+                )}

+              </div>

+

+              {loading ? (

+                <div className="text-center py-12">

+                  <p className="text-gray-600">Searching...</p>

+                </div>

+              ) : results.length > 0 ? (

+                <div className="space-y-4">

+                  {results.map((person) => (

+                    <Link

+                      key={person.id}

+                      href={`/memorial/person/${person.id}`}

+                      className="block p-6 border-2 border-gray-200 rounded-lg hover:border-vmi-gold hover:bg-vmi-light-gold transition-all duration-200 group"

+                    >

+                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">

+                        <div>

+                          <h3 className="text-xl font-bold text-gray-800 group-hover:text-vmi-red transition-colors">

+                            {person.full_display_name}

+                          </h3>

+                          {person.rank && (

+                            <p className="text-gray-700">{person.rank}</p>

+                          )}

+                          {person.unit && (

+                            <p className="text-gray-600 text-sm italic">{person.unit}</p>

+                          )}

+                        </div>

+                        <div>

+                          <p className="text-gray-700 font-semibold">{person.conflict_name}</p>

+                          {person.date_of_death && (

+                            <p className="text-gray-600 text-sm">

+                              {new Date(person.date_of_death).toLocaleDateString('en-US', {

+                                year: 'numeric',

+                                month: 'long',

+                                day: 'numeric'

+                              })}

+                            </p>

+                          )}

+                        </div>

+                        <div className="text-right">

+                          <span className="text-vmi-red group-hover:text-vmi-dark-red font-bold">

+                            View Details →

+                          </span>

+                        </div>

+                      </div>

+                    </Link>

+                  ))}

+                </div>

+              ) : hasSearched ? (

+                <div className="text-center py-12">

+                  <p className="text-gray-600 text-lg">No results found matching your criteria.</p>

+                  <button

+                    onClick={clearFilters}

+                    className="mt-4 text-vmi-red hover:text-vmi-dark-red underline font-semibold"

+                  >

+                    Clear filters and try again

+                  </button>

+                </div>

+              ) : (

+                <div className="text-center py-12">

+                  <p className="text-gray-600 text-lg">Use the filters to search the memorial database.</p>

+                </div>

+              )}

+            </div>

+          </div>

+        </div>

+      </main>

+    </div>

+  );

+}

+        <div className="max-w-6xl mx-auto px-4 py-6">

+          <div className="flex justify-between items-center">

+            <div className="flex items-center space-x-3">

+              {/* VMI Seal placeholder - replace with actual image */}

+              <div className="w-16 h-16 bg-vmi-gold rounded-full flex items-center justify-center text-vmi-red font-bold text-xl border-4 border-white">

+                VMI

+              </div>

+              <div className="text-white">

+                <div className="text-sm uppercase tracking-wide">Virginia Military Institute</div>

+                <div className="text-xs">Lexington, Virginia</div>

+              </div>

+            {/* Navigation */}

+            <nav className="flex items-center space-x-4">

+              <Link 

+                href="/memorial/search" 

+                className="text-vmi-gold hover:text-white transition-colors font-semibold"

+              >

+                Search Memorial

+              </Link>

+              <Link 

+                href="/memorial" 

+                className="bg-vmi-gold text-vmi-red px-6 py-2 rounded font-bold hover:bg-white transition-colors shadow-md"

+              >

+                View Complete Index

+              </Link>

+            </nav>

+import Link from 'next/link';

+

+interface BreadcrumbItem {

+  label: string;

+  href?: string;

+}

+

+interface HeaderProps {

+  breadcrumbs: BreadcrumbItem[];

+  showSearch?: boolean;

+  showIndex?: boolean;

+}

+

+export default function Header({ breadcrumbs, showSearch = true, showIndex = true }: HeaderProps) {

+  return (

+    <header className="bg-[#AE122A] shadow-lg">

+      <div className="max-w-6xl mx-auto px-4 py-6">

+        <div className="flex justify-between items-center">

+          {/* Breadcrumb Navigation */}

+          <nav className="flex items-center space-x-3 text-white flex-wrap">

+            {breadcrumbs.map((item, index) => (

+              <div key={index} className="flex items-center">

+                {item.href ? (

+                  <Link 

+                    href={item.href} 

+                    className="text-[#FFD619] hover:text-white transition-colors"

+                  >

+                    {item.label}

+                  </Link>

+                ) : (

+                  <span className="font-semibold">{item.label}</span>

+                )}

+                {index < breadcrumbs.length - 1 && (

+                  <span className="text-[#FFD619] ml-3">›</span>

+                )}

+              </div>

+            ))}

+          </nav>

+

+          {/* Right Navigation */}

+          {(showSearch || showIndex) && (

+            <div className="flex items-center space-x-4">

+              {showSearch && (

+                <Link 

+                  href="/memorial/search" 

+                  className="text-[#FFD619] hover:text-white transition-colors font-semibold"

+                >

+                  Search Memorial

+                </Link>

+              )}

+              {showIndex && (

+                <Link 

+                  href="/memorial" 

+                  className="bg-[#FFD619] text-[#AE122A] px-6 py-2 rounded font-bold hover:bg-white transition-colors shadow-md"

+                >

+                  View Complete Index

+                </Link>

+              )}

+            </div>

+          )}

+        </div>

+      </div>

+    </header>

+  );

+}

+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api';

+// const API_BASE_URL = 'https://web-production-6002.up.railway.app/api';

+  class_year?: number;

+  full_display_name?: string;

+export interface PersonSearchResult {

+  id: number;

+  display_name: string;

+  full_display_name: string;

+  class_year: number | null;

+  rank: string;

+  unit: string;

+  date_of_death: string | null;

+  conflict_name: string;

+  conflict_id: number;

+}

+

+export interface SearchFilters {

+  conflicts: Conflict[];

+  class_years: number[];

+}

+

+export interface SearchParams {

+  q?: string;

+  class_year?: string;

+  conflict?: string;

+  date_from?: string;

+  date_to?: string;

+  no_date?: boolean;

+}

+

+  const response = await fetch(`${API_BASE_URL}/memorial/conflicts/`);

+  const response = await fetch(`${API_BASE_URL}/memorial/persons/?conflict=${conflictId}`);

+  const response = await fetch(`${API_BASE_URL}/memorial/persons/${personId}/`);

+}

+

+// Fetch memorial index (all conflicts with casualties)

+export async function getMemorialIndex(): Promise<Conflict[]> {

+  const response = await fetch(`${API_BASE_URL}/memorial/index/`);

+  if (!response.ok) {

+    throw new Error('Failed to fetch memorial index');

+  }

+  return response.json();

+}

+

+// Search people with filters

+export async function searchPeople(params: SearchParams): Promise<{ count: number; results: PersonSearchResult[] }> {

+  const queryParams = new URLSearchParams();

+  

+  if (params.q) queryParams.append('q', params.q);

+  if (params.class_year) queryParams.append('class_year', params.class_year);

+  if (params.conflict) queryParams.append('conflict', params.conflict);

+  if (params.date_from) queryParams.append('date_from', params.date_from);

+  if (params.date_to) queryParams.append('date_to', params.date_to);

+  if (params.no_date !== undefined) queryParams.append('no_date', params.no_date.toString());

+  

+  const response = await fetch(`${API_BASE_URL}/memorial/persons/search/?${queryParams.toString()}`);

+  if (!response.ok) {

+    throw new Error('Failed to search people');

+  }

+  return response.json();

+}

+

+// Get available search filters

+export async function getSearchFilters(): Promise<SearchFilters> {

+  const response = await fetch(`${API_BASE_URL}/memorial/search-filters/`);

+  if (!response.ok) {

+    throw new Error('Failed to fetch search filters');

+  }

+  return response.json();

+        'vmi-red': '#AE122A',

+        'vmi-gold': '#FFD619',

+        'vmi-dark-red': '#8A0E22',

+        'vmi-light-gold': '#FFF3B8',

+        'vmi-cream': '#d7d4c9',

+        'vmi-black': '#1A1A1A',

+        'vmi-gray': '#4A4A4A',

+        'vmi-light-gray': '#F5F5F5',

+      },

+      fontFamily: {

+        'serif': ['Crimson Text', 'Georgia', 'serif'],

+        'display': ['Playfair Display', 'Georgia', 'serif'],

+

+export default config;