Daniel Volz
8718311876
- Extract App.tsx from 764 lines to ~404 lines - Create reusable components: MedDetailModal, MobileEditModal, ShareDialog, etc. - Add AppContext for global state management - Split pages: DashboardPage, MedicationsPage, SchedulePage, SettingsPage, PlannerPage - Create custom hooks: useAuth, useMedications, useSettings, useDoses, useSchedule - Add utility functions in separate modules - Fix stock status logic (>30 days = green/normal) - Fix reminder threshold calculation (use reminderDaysBefore not lowStockDays) - Fix takenBy validation (send [] instead of null) - Fix datetime format for blister start times (add Z suffix) - Style 'All OK' status as green/bold BREAKING: None - all existing functionality preserved
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
// =============================================================================
|
||
// ConfirmModal Component - Simple confirmation dialog
|
||
// =============================================================================
|
||
|
||
import { ReactNode } from "react";
|
||
|
||
export interface ConfirmModalProps {
|
||
title: string;
|
||
message: string | ReactNode;
|
||
confirmLabel: string;
|
||
cancelLabel: string;
|
||
onConfirm: () => void;
|
||
onCancel: () => void;
|
||
isLoading?: boolean;
|
||
confirmVariant?: "primary" | "danger" | "success";
|
||
}
|
||
|
||
export function ConfirmModal({
|
||
title,
|
||
message,
|
||
confirmLabel,
|
||
cancelLabel,
|
||
onConfirm,
|
||
onCancel,
|
||
isLoading = false,
|
||
confirmVariant = "primary"
|
||
}: ConfirmModalProps) {
|
||
return (
|
||
<div className="modal-overlay" onClick={onCancel}>
|
||
<div className="modal-content" onClick={(e) => e.stopPropagation()} style={{ maxWidth: "450px" }}>
|
||
<button className="modal-close" onClick={onCancel}>
|
||
×
|
||
</button>
|
||
<h2 style={{ marginBottom: "16px", paddingRight: "2rem" }}>{title}</h2>
|
||
<div style={{ marginBottom: "24px" }}>{typeof message === "string" ? <p>{message}</p> : message}</div>
|
||
<div
|
||
className="modal-footer"
|
||
style={{ padding: "1rem 0 0 0", borderTop: "none", justifyContent: "flex-end" }}
|
||
>
|
||
<button type="button" className="ghost" onClick={onCancel} disabled={isLoading}>
|
||
{cancelLabel}
|
||
</button>
|
||
<button type="button" className={confirmVariant} onClick={onConfirm} disabled={isLoading}>
|
||
{confirmLabel}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|