mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-02-22 17:42:00 +00:00
i701
e815da495a
- Introduced createPayment action for handling payment creation. - Added PaymentsTable component for displaying payment records with pagination. - Implemented new PaymentPage for viewing individual payment details and associated devices. - Refactored DeviceCartDrawer to integrate payment creation and device selection. - Enhanced DevicesToPay component to display devices based on payment status. - Updated PriceCalculator component for better user input handling. - Introduced NumberInput component for consistent number input across forms. - Modified Prisma schema to include new fields for payments and devices. - Improved overall user experience with responsive design adjustments and new UI elements.
51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { Minus, Plus } from "lucide-react";
|
|
import { useEffect } from "react";
|
|
import {
|
|
Button,
|
|
Group,
|
|
Input,
|
|
Label,
|
|
NumberField,
|
|
} from "react-aria-components";
|
|
|
|
|
|
export default function NumberInput({
|
|
maxAllowed,
|
|
label,
|
|
value,
|
|
onChange,
|
|
className,
|
|
isDisabled,
|
|
}: { maxAllowed?: number, label: string; value: number; onChange: (value: number) => void, className?: string, isDisabled?: boolean }) {
|
|
useEffect(() => {
|
|
if (maxAllowed) {
|
|
if (value > maxAllowed) {
|
|
onChange(maxAllowed);
|
|
}
|
|
}
|
|
}, [maxAllowed, value, onChange]);
|
|
return (
|
|
<NumberField isDisabled={isDisabled} className={cn(className)} value={value} minValue={0} onChange={onChange}>
|
|
<div className="space-y-2">
|
|
<Label className="text-sm font-medium text-foreground">{label}</Label>
|
|
<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-[disabled]:opacity-50 data-[focus-within]:outline-none data-[focus-within]:ring-[3px] data-[focus-within]:ring-ring/20">
|
|
<Button
|
|
slot="decrement"
|
|
className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<Minus size={16} strokeWidth={2} aria-hidden="true" />
|
|
</Button>
|
|
<Input className="w-full grow bg-background px-3 py-2 text-center tabular-nums text-foreground focus:outline-none" />
|
|
<Button
|
|
slot="increment"
|
|
className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<Plus size={16} strokeWidth={2} aria-hidden="true" />
|
|
</Button>
|
|
</Group>
|
|
</div>
|
|
</NumberField>
|
|
);
|
|
}
|