Create React + Vite + TypeScript + TailwindCSS dashboard for dairy cow thermal stress monitoring

[Copilot]

Built a professional frontend-only dashboard to monitor THI (Temperature-Humidity Index) in dairy cows and track reproduction impact when THI exceeds 68.

Implementation

Tech Stack

• React 19 + Vite 7 + TypeScript
• TailwindCSS 4 with PostCSS
• React Router for navigation
• Recharts for data visualization
• date-fns for date handling

Architecture

src/
├── components/      # Layout, Filters
├── pages/          # Overview, DataTable, CowList, CowProfile
├── data/           # Mock data generator (50 cows, 90 days)
├── types/          # TypeScript interfaces
└── utils/          # React Context for state management

Mock Data Generation

• THI calculated using formula: T - (0.55 - 0.0055 × RH) × (T - 58)
• Stress levels: none (<68), mild (68-72), moderate (72-80), severe (≥80)
• Seasonal temperature variation with daily randomness
• Reproduction events (insemination, pregnancy checks, calving, heat detection)

Features

Overview Dashboard

• 6 KPIs: total cows, avg THI, cows in stress, reproduction impact %, pregnancy rate, avg stress days
• Time series chart with THI threshold line at 68
• Bar chart for THI distribution across ranges
• Pie chart for stress level breakdown
• Progress bars for reproduction status

Data Table

• Sortable columns (timestamp, cow ID, THI, stress level)
• Pagination (50 rows/page, 1500 total measurements)
• Color-coded THI values by severity
• Visual badges for stress levels and reproduction impact

Cow Profiles

• Card grid with search by name/ID/breed
• Individual stats: avg THI, stress %, reproduction impact %
• Click through to detailed profile

Individual Cow Profile

• 30-day THI evolution chart
• Stress distribution histogram
• Temperature/humidity dual-axis chart
• Reproduction event timeline
• Alert banner for consecutive stress days > 3

Filters

• Date range presets (7d, 30d, 90d, all)
• THI threshold buttons (all, >68, >72)
• Stress level dropdown
• Cow selection (shows selected count)
• Applied across all pages via React Context

Configuration

TailwindCSS 4

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
}

TypeScript
Strict mode enabled with verbatimModuleSyntax for proper type imports.

Data Context Pattern

// Single data initialization, memoized filters
const initialData = initializeMockData();

export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [cows] = useState<CowData[]>(initialData.cows);
  const [filters, setFilters] = useState<FilterOptions>({ /* ... */ });
  
  const filteredReadings = useMemo(() => {
    return thiReadings.filter(/* date, THI, cow, stress level */);
  }, [thiReadings, filters]);
  
  return <DataContext.Provider value={{ /* ... */ }}>{children}</DataContext.Provider>;
};

Notes

• French UI for agricultural context
• CodeQL security scan: 0 vulnerabilities
• All ESLint rules passing
• Production build: 644KB JS (193KB gzipped)

Original prompt

Créer un starter repo : React + Vite + TypeScript + TailwindCSS. Générer une application dashboard professionnelle pour l'étude du stress thermique des vaches et de l'incidence sur leurs reproductions (THI>68) avec :

• Sans backend, frontend only
• Pages : Overview (KPIs), Filtres (THI, plage de dates, par vache), Table détaillée, Vue profil vache
• Graphiques interactifs (barres groupées/empilées, série temporelle, pourcentages)
• README

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.