104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import { Button } from "~/components/ui/button";
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "~/components/ui/dialog";
|
|
|
|
interface TimeBankAdjustmentDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
teamName: string | undefined;
|
|
amount: string;
|
|
onAmountChange: (value: string) => void;
|
|
unit: "seconds" | "minutes" | "hours";
|
|
onUnitChange: (value: "seconds" | "minutes" | "hours") => void;
|
|
direction: "add" | "remove";
|
|
onDirectionChange: (value: "add" | "remove") => void;
|
|
isAdjusting: boolean;
|
|
onConfirm: () => void;
|
|
}
|
|
|
|
export function TimeBankAdjustmentDialog({
|
|
open,
|
|
onOpenChange,
|
|
teamName,
|
|
amount,
|
|
onAmountChange,
|
|
unit,
|
|
onUnitChange,
|
|
direction,
|
|
onDirectionChange,
|
|
isAdjusting,
|
|
onConfirm,
|
|
}: TimeBankAdjustmentDialogProps) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Adjust Time Bank</DialogTitle>
|
|
<DialogDescription>
|
|
{teamName ? `Adjusting time for ${teamName}` : "Adjust a team's time bank"}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col gap-4 py-2">
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => onDirectionChange("add")}
|
|
className={`flex-1 py-2 rounded-md border text-sm font-medium transition-colors ${
|
|
direction === "add"
|
|
? "bg-emerald-500/20 border-emerald-500 text-emerald-400"
|
|
: "border-border text-muted-foreground hover:bg-muted"
|
|
}`}
|
|
>
|
|
Add Time
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onDirectionChange("remove")}
|
|
className={`flex-1 py-2 rounded-md border text-sm font-medium transition-colors ${
|
|
direction === "remove"
|
|
? "bg-destructive/20 border-destructive text-destructive"
|
|
: "border-border text-muted-foreground hover:bg-muted"
|
|
}`}
|
|
>
|
|
Remove Time
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="number"
|
|
min="0.001"
|
|
step="any"
|
|
value={amount}
|
|
onChange={(e) => onAmountChange(e.target.value)}
|
|
className="flex-1 px-3 py-2 border rounded-md bg-background text-foreground text-base md:text-sm"
|
|
placeholder="Amount"
|
|
/>
|
|
<select
|
|
value={unit}
|
|
onChange={(e) => onUnitChange(e.target.value as "seconds" | "minutes" | "hours")}
|
|
className="px-3 py-2 border rounded-md bg-background text-foreground text-base md:text-sm"
|
|
>
|
|
<option value="seconds">Seconds</option>
|
|
<option value="minutes">Minutes</option>
|
|
<option value="hours">Hours</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={onConfirm}
|
|
disabled={isAdjusting}
|
|
variant={direction === "remove" ? "destructive" : "default"}
|
|
>
|
|
{isAdjusting ? "Adjusting..." : direction === "add" ? "Add Time" : "Remove Time"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|