Update migrated js to ts and shadcn
This commit is contained in:
162
src/App.tsx
Normal file
162
src/App.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
import React from 'react';
|
||||
|
||||
// Components
|
||||
import DoseSchedule from './components/dose-schedule';
|
||||
import DeviationList from './components/deviation-list';
|
||||
import SuggestionPanel from './components/suggestion-panel';
|
||||
import SimulationChart from './components/simulation-chart';
|
||||
import Settings from './components/settings';
|
||||
import LanguageSelector from './components/language-selector';
|
||||
import { Button } from './components/ui/button';
|
||||
|
||||
// Custom Hooks
|
||||
import { useAppState } from './hooks/useAppState';
|
||||
import { useSimulation } from './hooks/useSimulation';
|
||||
import { useLanguage } from './hooks/useLanguage';
|
||||
|
||||
// --- Main Component ---
|
||||
const MedPlanAssistant = () => {
|
||||
const { currentLanguage, t, changeLanguage } = useLanguage();
|
||||
|
||||
const {
|
||||
appState,
|
||||
updateState,
|
||||
updateNestedState,
|
||||
updateUiSetting,
|
||||
handleReset
|
||||
} = useAppState();
|
||||
|
||||
const {
|
||||
pkParams,
|
||||
doses,
|
||||
therapeuticRange,
|
||||
doseIncrement,
|
||||
uiSettings
|
||||
} = appState;
|
||||
|
||||
const {
|
||||
showDayTimeOnXAxis,
|
||||
chartView,
|
||||
yAxisMin,
|
||||
yAxisMax,
|
||||
simulationDays,
|
||||
displayedDays
|
||||
} = uiSettings;
|
||||
|
||||
const {
|
||||
deviations,
|
||||
suggestion,
|
||||
idealProfile,
|
||||
deviatedProfile,
|
||||
correctedProfile,
|
||||
addDeviation,
|
||||
removeDeviation,
|
||||
handleDeviationChange,
|
||||
applySuggestion
|
||||
} = useSimulation(appState);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-4 sm:p-6 lg:p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<header className="mb-8">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold tracking-tight">{t.appTitle}</h1>
|
||||
<p className="text-muted-foreground mt-1">{t.appSubtitle}</p>
|
||||
</div>
|
||||
<LanguageSelector currentLanguage={currentLanguage} onLanguageChange={changeLanguage} t={t} />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
|
||||
{/* Both Columns - Chart */}
|
||||
<div className="xl:col-span-2 bg-card p-6 rounded-lg border min-h-[600px] flex flex-col">
|
||||
<div className="flex justify-center gap-2 mb-4">
|
||||
<Button
|
||||
onClick={() => updateUiSetting('chartView', 'damph')}
|
||||
variant={chartView === 'damph' ? 'default' : 'secondary'}
|
||||
>
|
||||
{t.dAmphetamine}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => updateUiSetting('chartView', 'ldx')}
|
||||
variant={chartView === 'ldx' ? 'default' : 'secondary'}
|
||||
>
|
||||
{t.lisdexamfetamine}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => updateUiSetting('chartView', 'both')}
|
||||
variant={chartView === 'both' ? 'default' : 'secondary'}
|
||||
>
|
||||
{t.both}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<SimulationChart
|
||||
idealProfile={idealProfile}
|
||||
deviatedProfile={deviatedProfile}
|
||||
correctedProfile={correctedProfile}
|
||||
chartView={chartView}
|
||||
showDayTimeOnXAxis={showDayTimeOnXAxis}
|
||||
therapeuticRange={therapeuticRange}
|
||||
simulationDays={simulationDays}
|
||||
displayedDays={displayedDays}
|
||||
yAxisMin={yAxisMin}
|
||||
yAxisMax={yAxisMax}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Left Column - Controls */}
|
||||
<div className="xl:col-span-1 space-y-6">
|
||||
<DoseSchedule
|
||||
doses={doses}
|
||||
doseIncrement={doseIncrement}
|
||||
onUpdateDoses={(newDoses: any) => updateState('doses', newDoses)}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<DeviationList
|
||||
deviations={deviations}
|
||||
doseIncrement={doseIncrement}
|
||||
simulationDays={simulationDays}
|
||||
onAddDeviation={addDeviation}
|
||||
onRemoveDeviation={removeDeviation}
|
||||
onDeviationChange={handleDeviationChange}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
<SuggestionPanel
|
||||
suggestion={suggestion}
|
||||
onApplySuggestion={applySuggestion}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Settings */}
|
||||
<div className="xl:col-span-1 space-y-6">
|
||||
<Settings
|
||||
pkParams={pkParams}
|
||||
therapeuticRange={therapeuticRange}
|
||||
uiSettings={uiSettings}
|
||||
onUpdatePkParams={(key: any, value: any) => updateNestedState('pkParams', key, value)}
|
||||
onUpdateTherapeuticRange={(key: any, value: any) => updateNestedState('therapeuticRange', key, value)}
|
||||
onUpdateUiSetting={updateUiSetting}
|
||||
onReset={handleReset}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer className="mt-8 p-4 bg-muted rounded-lg text-sm text-muted-foreground border">
|
||||
<h3 className="font-semibold mb-2 text-foreground">{t.importantNote}</h3>
|
||||
<p>{t.disclaimer}</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MedPlanAssistant;
|
||||
Reference in New Issue
Block a user