Update made info tooltips available on mobile, flex-wrap for smaller screens
This commit is contained in:
@@ -102,10 +102,10 @@ const MedPlanAssistant = () => {
|
||||
<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>
|
||||
<p className="text-muted-foreground mt-1">{t('appSubtitle')}</p>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
|
||||
@@ -116,6 +116,10 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center cursor-help focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md"
|
||||
>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${doseCountDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
|
||||
@@ -123,6 +127,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
|
||||
{doseCountDiff > 0 ? <TrendingUp className="h-3 w-3 inline mr-1" /> : <TrendingDown className="h-3 w-3 inline mr-1" />}
|
||||
{day.doses.length} {day.doses.length === 1 ? t('dose') : t('doses')}
|
||||
</Badge>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-xs">
|
||||
@@ -140,6 +145,10 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center cursor-help focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md"
|
||||
>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${totalMgDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
|
||||
@@ -147,6 +156,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
|
||||
{totalMgDiff > 0 ? <TrendingUp className="h-3 w-3 inline mr-1" /> : <TrendingDown className="h-3 w-3 inline mr-1" />}
|
||||
{day.doses.reduce((sum, dose) => sum + (parseFloat(dose.ldx) || 0), 0).toFixed(1)} mg
|
||||
</Badge>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-xs">
|
||||
|
||||
@@ -14,15 +14,15 @@ import { Label } from './ui/label';
|
||||
|
||||
const LanguageSelector = ({ currentLanguage, onLanguageChange, t }: any) => {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-sm font-medium">{t('language')}:</Label>
|
||||
<div className="flex flex-wrap-reverse items-center gap-2">
|
||||
<Label className="text-sm font-medium">{t('languageSelectorLabel')}</Label>
|
||||
<Select value={currentLanguage} onValueChange={onLanguageChange}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="en">{t('english')}</SelectItem>
|
||||
<SelectItem value="de">{t('german')}</SelectItem>
|
||||
<SelectItem value="en">{t('languageSelectorEN')}</SelectItem>
|
||||
<SelectItem value="de">{t('languageSelectorDE')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ import { Label } from './ui/label';
|
||||
import { Separator } from './ui/separator';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
|
||||
import { ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { ChevronDown, ChevronUp, Info } from 'lucide-react';
|
||||
import { getDefaultState } from '../constants/defaults';
|
||||
|
||||
/**
|
||||
@@ -173,12 +173,19 @@ const Settings = ({
|
||||
checked={showTemplateDay}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showTemplateDay', checked)}
|
||||
/>
|
||||
<Label htmlFor="showTemplateDay" className="font-medium">
|
||||
{t('showTemplateDayInChart')}
|
||||
</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="showTemplateDay" className="font-medium cursor-help">
|
||||
{t('showTemplateDayInChart')}
|
||||
</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('showTemplateDayTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'showTemplateDayTooltip', defaultsForT)}</p>
|
||||
@@ -195,12 +202,19 @@ const Settings = ({
|
||||
checked={showDayReferenceLines}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showDayReferenceLines', checked)}
|
||||
/>
|
||||
<Label htmlFor="showDayReferenceLines" className="font-medium">
|
||||
{t('showDayReferenceLines')}
|
||||
</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="showDayReferenceLines" className="font-medium cursor-help">
|
||||
{t('showDayReferenceLines')}
|
||||
</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('showDayReferenceLinesTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'showDayReferenceLinesTooltip', defaultsForT)}</p>
|
||||
@@ -217,12 +231,19 @@ const Settings = ({
|
||||
checked={showTherapeuticRange}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showTherapeuticRange', checked)}
|
||||
/>
|
||||
<Label htmlFor="showTherapeuticRange" className="font-medium">
|
||||
{t('showTherapeuticRangeLines')}
|
||||
</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="showTherapeuticRange" className="font-medium cursor-help">
|
||||
{t('showTherapeuticRangeLines')}
|
||||
</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('showTherapeuticRangeLinesTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'showTherapeuticRangeLinesTooltip', defaultsForT)}</p>
|
||||
@@ -232,19 +253,28 @@ const Settings = ({
|
||||
</div>
|
||||
{showTherapeuticRange && (
|
||||
<div className="ml-8 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">
|
||||
{t('therapeuticRange')}
|
||||
</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">
|
||||
{t('therapeuticRange')}
|
||||
</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('therapeuticRangeTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'therapeuticRangeTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<div className="flex items-center gap-2">
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<FormNumericInput
|
||||
value={therapeuticRange.min}
|
||||
onChange={val => onUpdateTherapeuticRange('min', val)}
|
||||
@@ -273,16 +303,25 @@ const Settings = ({
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">{t('displayedDays')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('displayedDays')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('displayedDaysTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'displayedDaysTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={displayedDays}
|
||||
onChange={val => onUpdateUiSetting('displayedDays', val)}
|
||||
@@ -296,17 +335,26 @@ const Settings = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">{t('yAxisRange')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('yAxisRange')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('yAxisRangeTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'yAxisRangeTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<div className="flex items-center gap-2">
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<FormNumericInput
|
||||
value={yAxisMin}
|
||||
onChange={val => onUpdateUiSetting('yAxisMin', val)}
|
||||
@@ -392,16 +440,25 @@ const Settings = ({
|
||||
{isSimulationExpanded && (
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">{t('simulationDuration')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('simulationDuration')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('simulationDurationTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'simulationDurationTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={simulationDays}
|
||||
onChange={val => onUpdateUiSetting('simulationDays', val)}
|
||||
@@ -415,16 +472,25 @@ const Settings = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">{t('steadyStateDays')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('steadyStateDays')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('steadyStateDaysTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'steadyStateDaysTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.steadyStateDays}
|
||||
onChange={val => updateAdvancedDirect('steadyStateDays', val)}
|
||||
@@ -451,16 +517,25 @@ const Settings = ({
|
||||
<CardContent className="space-y-4">
|
||||
<h3 className="text-lg font-semibold">{t('dAmphetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">{t('halfLife')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('halfLife')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('halfLifeTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'halfLifeTooltip', defaultsForT))}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={pkParams.damph.halfLife}
|
||||
onChange={val => onUpdatePkParams('damph', { ...pkParams.damph, halfLife: val })}
|
||||
@@ -480,16 +555,25 @@ const Settings = ({
|
||||
|
||||
<h3 className="text-lg font-semibold">{t('lisdexamfetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">{t('conversionHalfLife')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('conversionHalfLife')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('conversionHalfLifeTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'conversionHalfLifeTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.halfLife}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, halfLife: val })}
|
||||
@@ -505,16 +589,25 @@ const Settings = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">{t('absorptionHalfLife')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('absorptionHalfLife')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('absorptionHalfLifeTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'absorptionHalfLifeTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.absorptionHalfLife}
|
||||
onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, absorptionHalfLife: val })}
|
||||
@@ -554,12 +647,19 @@ const Settings = ({
|
||||
checked={pkParams.advanced.weightBasedVd.enabled}
|
||||
onCheckedChange={checked => updateAdvanced('weightBasedVd', 'enabled', checked)}
|
||||
/>
|
||||
<Label htmlFor="weightBasedVdEnabled" className="font-medium">
|
||||
{t('weightBasedVdScaling')}
|
||||
</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="weightBasedVdEnabled" className="font-medium cursor-help">
|
||||
{t('weightBasedVdScaling')}
|
||||
</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('weightBasedVdTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'weightBasedVdTooltip', defaultsForT)}</p>
|
||||
@@ -569,16 +669,25 @@ const Settings = ({
|
||||
</div>
|
||||
{pkParams.advanced.weightBasedVd.enabled && (
|
||||
<div className="ml-8 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-sm font-medium">{t('bodyWeight')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="text-sm font-medium cursor-help">{t('bodyWeight')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('bodyWeightTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'bodyWeightTooltip', defaultsForT))}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.weightBasedVd.bodyWeight}
|
||||
onChange={val => updateAdvanced('weightBasedVd', 'bodyWeight', val)}
|
||||
@@ -602,12 +711,19 @@ const Settings = ({
|
||||
checked={pkParams.advanced.foodEffect.enabled}
|
||||
onCheckedChange={checked => updateAdvanced('foodEffect', 'enabled', checked)}
|
||||
/>
|
||||
<Label htmlFor="foodEffectEnabled" className="font-medium">
|
||||
{t('foodEffectEnabled')}
|
||||
</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="foodEffectEnabled" className="font-medium cursor-help">
|
||||
{t('foodEffectEnabled')}
|
||||
</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('foodEffectTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'foodEffectTooltip', defaultsForT)}</p>
|
||||
@@ -617,16 +733,25 @@ const Settings = ({
|
||||
</div>
|
||||
{pkParams.advanced.foodEffect.enabled && (
|
||||
<div className="ml-8 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-sm font-medium">{t('tmaxDelay')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="text-sm font-medium cursor-help">{t('tmaxDelay')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('tmaxDelayTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'tmaxDelayTooltip', defaultsForT))}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.foodEffect.tmaxDelay}
|
||||
onChange={val => updateAdvanced('foodEffect', 'tmaxDelay', val)}
|
||||
@@ -650,12 +775,19 @@ const Settings = ({
|
||||
checked={pkParams.advanced.urinePh.enabled}
|
||||
onCheckedChange={checked => updateAdvanced('urinePh', 'enabled', checked)}
|
||||
/>
|
||||
<Label htmlFor="urinePHEnabled" className="font-medium">
|
||||
{t('urinePHTendency')}
|
||||
</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label htmlFor="urinePHEnabled" className="font-medium cursor-help">
|
||||
{t('urinePHTendency')}
|
||||
</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('urinePHTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'urinePHTooltip', defaultsForT)}</p>
|
||||
@@ -665,25 +797,34 @@ const Settings = ({
|
||||
</div>
|
||||
{pkParams.advanced.urinePh.enabled && (
|
||||
<div className="ml-8 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-sm font-medium">{t('urinePHValue')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="text-sm font-medium cursor-help">{t('urinePHValue')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('urinePHValueTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{tWithDefaults(t, 'urinePHValueTooltip', defaultsForT)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.urinePh.phTendency}
|
||||
onChange={val => updateAdvanced('urinePh', 'phTendency', val)}
|
||||
increment={0.1}
|
||||
min={5.5}
|
||||
max={8.0}
|
||||
unit={t('phUnit')}
|
||||
required={true}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t('phUnit')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -692,16 +833,25 @@ const Settings = ({
|
||||
|
||||
{/* Oral Bioavailability */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="font-medium">{t('oralBioavailability')}</Label>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Label className="font-medium cursor-help">{t('oralBioavailability')}</Label>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
|
||||
aria-label={t('oralBioavailabilityTooltip')}
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'oralBioavailabilityTooltip', defaultsForT))}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<FormNumericInput
|
||||
value={pkParams.advanced.fOral}
|
||||
onChange={val => updateAdvancedDirect('fOral', val)}
|
||||
|
||||
@@ -10,9 +10,9 @@ export const de = {
|
||||
both: "Beide",
|
||||
|
||||
// Language selector
|
||||
language: "Sprache",
|
||||
english: "English",
|
||||
german: "Deutsch",
|
||||
languageSelectorLabel: "Sprache",
|
||||
languageSelectorEN: "English",
|
||||
languageSelectorDE: "Deutsch",
|
||||
|
||||
// Dose Schedule
|
||||
myPlan: "Mein Plan",
|
||||
|
||||
@@ -10,9 +10,9 @@ export const en = {
|
||||
both: "Both",
|
||||
|
||||
// Language selector
|
||||
language: "Language",
|
||||
english: "English",
|
||||
german: "Deutsch",
|
||||
languageSelectorLabel: "Language",
|
||||
languageSelectorEN: "English",
|
||||
languageSelectorDE: "Deutsch",
|
||||
|
||||
// Dose Schedule
|
||||
myPlan: "My Plan",
|
||||
|
||||
Reference in New Issue
Block a user