Add payment processing and device management features

- 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.

components/number-input.tsx

@@ -0,0 +1,50 @@
+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>
+  );
+}