mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-01 15:23:58 +00:00
Implement new features and enhance existing components for improved user experience
- Added a new `bun.lockb` file for dependency management. - Updated `next.config.ts` to set output to "standalone" for better deployment options. - Removed `package-lock.json` to streamline package management. - Modified `package.json` to update dependencies, including `@prisma/client` and `sonner`, and adjusted build scripts for improved functionality. - Enhanced Tailwind CSS configuration to include new animations and color schemes. - Refactored various dashboard components to improve UI consistency, including adding a new `My Wallet` page and updating existing pages to use a unified styling approach. - Introduced a new `BlockDeviceDialog` component for managing device blocking with user-defined reasons. - Improved logging and error handling in payment verification and device management functions. These changes enhance the overall functionality, maintainability, and user experience of the application.
This commit is contained in:
@ -33,7 +33,6 @@ import { toast } from "sonner";
|
||||
import NumberInput from "./number-input";
|
||||
|
||||
|
||||
|
||||
export function DeviceCartDrawer({
|
||||
billFormula,
|
||||
}: {
|
||||
@ -74,83 +73,88 @@ export function DeviceCartDrawer({
|
||||
paid: false,
|
||||
};
|
||||
|
||||
if (devices.length === 0) return null
|
||||
return (
|
||||
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
|
||||
<MonitorSmartphone />
|
||||
{devices.length > 0 && `(${devices.length})`}
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<div className="mx-auto w-full max-w-sm">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Selected Devices</DrawerTitle>
|
||||
<DrawerDescription>Selected devices pay.</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<div className="flex max-h-[calc(100svh-400px)] flex-col overflow-auto px-4 pb-4 gap-4">
|
||||
{devices.map((device) => (
|
||||
<DeviceCard key={device.id} device={device} />
|
||||
))}
|
||||
</div>
|
||||
<div className="px-4 flex flex-col gap-4">
|
||||
<NumberInput
|
||||
label="Set No of Months"
|
||||
value={months}
|
||||
onChange={(value) => setMonths(value)}
|
||||
maxAllowed={12}
|
||||
isDisabled={devices.length === 0}
|
||||
/>
|
||||
{message && (
|
||||
<span className="title-bg text-lime-800 bg-lime-100/50 dark:text-lime-100 rounded text-center p-2 w-full">
|
||||
{message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
setDisabled(true)
|
||||
const payment = await createPayment(data)
|
||||
setDisabled(false)
|
||||
setDeviceCart([])
|
||||
setMonths(1)
|
||||
if (payment) {
|
||||
router.push(`/payments/${payment.id}`);
|
||||
setTimeout(() => setIsOpen(!isOpen), 2000);
|
||||
} else {
|
||||
toast.error("Something went wrong.")
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
disabled={devices.length === 0 || disabled}
|
||||
>
|
||||
{disabled ? (
|
||||
<>
|
||||
<Loader2 className="ml-2 animate-spin" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Go to payment
|
||||
<CircleDollarSign />
|
||||
</>
|
||||
<>
|
||||
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
<Button size={"lg"} className="bg-sarLinkOrange absolute bottom-10 w-fit z-20 left-1/2 transform -translate-x-1/2" onClick={() => setIsOpen(!isOpen)} variant="outline">
|
||||
<MonitorSmartphone />
|
||||
Pay {devices.length > 0 && `(${devices.length})`} Device
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<div className="mx-auto w-full max-w-sm">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Selected Devices</DrawerTitle>
|
||||
<DrawerDescription>Selected devices pay.</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<div className="flex max-h-[calc(100svh-400px)] flex-col overflow-auto px-4 pb-4 gap-4">
|
||||
{devices.map((device) => (
|
||||
<DeviceCard key={device.id} device={device} />
|
||||
))}
|
||||
</div>
|
||||
<div className="px-4 flex flex-col gap-4">
|
||||
<NumberInput
|
||||
label="Set No of Months"
|
||||
value={months}
|
||||
onChange={(value) => setMonths(value)}
|
||||
maxAllowed={12}
|
||||
isDisabled={devices.length === 0}
|
||||
/>
|
||||
{message && (
|
||||
<span className="title-bg text-lime-800 bg-lime-100/50 dark:text-lime-100 rounded text-center p-2 w-full">
|
||||
{message}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DrawerClose>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDeviceCart([]);
|
||||
}}
|
||||
variant="outline"
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</DrawerFooter>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</div>
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
setDisabled(true)
|
||||
const payment = await createPayment(data)
|
||||
setDisabled(false)
|
||||
setDeviceCart([])
|
||||
setMonths(1)
|
||||
if (payment) {
|
||||
router.push(`/payments/${payment.id}`);
|
||||
setTimeout(() => setIsOpen(!isOpen), 2000);
|
||||
} else {
|
||||
toast.error("Something went wrong.")
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
disabled={devices.length === 0 || disabled}
|
||||
>
|
||||
{disabled ? (
|
||||
<>
|
||||
<Loader2 className="ml-2 animate-spin" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Go to payment
|
||||
<CircleDollarSign />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DrawerClose>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDeviceCart([]);
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
variant="outline"
|
||||
>
|
||||
Clear Selection
|
||||
</Button>
|
||||
</DrawerFooter>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user