mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-11-05 19:27:19 +00:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| dc10fa6be4 | |||
| 39e84723b1 | |||
| 19043aa692 | |||
| f2a17d522b | |||
| 43b8e22196 | |||
| c041c2e7d7 | |||
| e5298aa323 |
241
CHANGELOG.md
Normal file
241
CHANGELOG.md
Normal file
@@ -0,0 +1,241 @@
|
|||||||
|
# Changelog
|
||||||
|
|
||||||
|
## <small>0.2.2 (2025-09-20)</small>
|
||||||
|
|
||||||
|
* refactor: remove table captions from all tables 🔧 ([39e8472](https://github.com/i701/sarlink-portal/commit/39e8472))
|
||||||
|
* fix: hide account information once the payment is verified/expired/cancelled 🔧 ([f2a17d5](https://github.com/i701/sarlink-portal/commit/f2a17d5))
|
||||||
|
* fix: remove pagination if there is only 1 page 🔧 ([43b8e22](https://github.com/i701/sarlink-portal/commit/43b8e22))
|
||||||
|
* fix: set 100 MVR for default wallet topup amount 🔧 ([19043aa](https://github.com/i701/sarlink-portal/commit/19043aa))
|
||||||
|
|
||||||
|
## <small>0.2.1 (2025-09-20)</small>
|
||||||
|
|
||||||
|
* fix: add release script 🔧 ([e5298aa](https://github.com/i701/sarlink-portal/commit/e5298aa))
|
||||||
|
|
||||||
|
## 0.2.0 (2025-09-20)
|
||||||
|
|
||||||
|
* fix: add error message display for general errors in OTP verification form ([25404b6](https://github.com/i701/sarlink-portal/commit/25404b6))
|
||||||
|
* fix: add logging for user data and adjust verification check in signin function ([4127035](https://github.com/i701/sarlink-portal/commit/4127035))
|
||||||
|
* fix: add missing release script ([741358e](https://github.com/i701/sarlink-portal/commit/741358e))
|
||||||
|
* fix: added missing release script to package.json 🔧 ([1399527](https://github.com/i701/sarlink-portal/commit/1399527))
|
||||||
|
* fix: correct conditional expression for progress indicator color 🐛 ([0c7f34f](https://github.com/i701/sarlink-portal/commit/0c7f34f))
|
||||||
|
* fix: correct font variable usage and improve type handling in dynamic filter ([3f92a00](https://github.com/i701/sarlink-portal/commit/3f92a00))
|
||||||
|
* fix: correct OTP type in VerifyRegistrationOTP function ([de1e76f](https://github.com/i701/sarlink-portal/commit/de1e76f))
|
||||||
|
* fix: correct user verification logic in VerifyRegistrationOTP function ([9c67386](https://github.com/i701/sarlink-portal/commit/9c67386))
|
||||||
|
* fix: enhance error handling in handleApiResponse function for better clarity 🐛 ([b90a4af](https://github.com/i701/sarlink-portal/commit/b90a4af))
|
||||||
|
* fix: enhance verification feedback in VerifyRegistrationOTP function and update UI messages ([3703b3e](https://github.com/i701/sarlink-portal/commit/3703b3e))
|
||||||
|
* fix: ensure device list is refreshed after adding a new device ([ac11fee](https://github.com/i701/sarlink-portal/commit/ac11fee))
|
||||||
|
* fix: openssl ([b9cfc55](https://github.com/i701/sarlink-portal/commit/b9cfc55))
|
||||||
|
* fix: pagination in PaymentsTable and TopupsTable components 🐛 ([783d4b3](https://github.com/i701/sarlink-portal/commit/783d4b3))
|
||||||
|
* fix: remove unnecessary JSON display of payment creation date and improve conditional styling in Mob ([71f48b1](https://github.com/i701/sarlink-portal/commit/71f48b1))
|
||||||
|
* fix: remove unused authentication imports in PaymentPage component ([886b0b1](https://github.com/i701/sarlink-portal/commit/886b0b1))
|
||||||
|
* fix: remove unused components and fix build 🐛 ([383ffdd](https://github.com/i701/sarlink-portal/commit/383ffdd))
|
||||||
|
* fix: remove unused imports from authentication pages for cleaner code ([1ae529c](https://github.com/i701/sarlink-portal/commit/1ae529c))
|
||||||
|
* fix: remove unused session retrieval in PaymentPage component ([3d12786](https://github.com/i701/sarlink-portal/commit/3d12786))
|
||||||
|
* fix: remove unused type prop from BlockDeviceDialog component ([de1e842](https://github.com/i701/sarlink-portal/commit/de1e842))
|
||||||
|
* fix: reset form after successfully adding a device in AddDeviceDialog ([067acef](https://github.com/i701/sarlink-portal/commit/067acef))
|
||||||
|
* fix: revert wut ([ff70624](https://github.com/i701/sarlink-portal/commit/ff70624))
|
||||||
|
* fix: simplify condition for displaying pending payment link in ClickableRow component 🐛 ([d1fdcc8](https://github.com/i701/sarlink-portal/commit/d1fdcc8))
|
||||||
|
* fix: streamline redirect logic for verified OTP response ([322f526](https://github.com/i701/sarlink-portal/commit/322f526))
|
||||||
|
* fix: update error messages and statuses in VerifyRegistrationOTP function for clarity ([e0e3de0](https://github.com/i701/sarlink-portal/commit/e0e3de0))
|
||||||
|
* fix: update OTP verification status message in VerifyRegistrationOTP function ([6a078d9](https://github.com/i701/sarlink-portal/commit/6a078d9))
|
||||||
|
* fix: update signin function to handle user verification response correctly ([00705bc](https://github.com/i701/sarlink-portal/commit/00705bc))
|
||||||
|
* fix: update verification error message in VerifyRegistrationOTP function ([12f9811](https://github.com/i701/sarlink-portal/commit/12f9811))
|
||||||
|
* fix: update welcome message in ApplicationLayout and simplify payment verification logic in DevicesT ([a093ab1](https://github.com/i701/sarlink-portal/commit/a093ab1))
|
||||||
|
* fix: verification response handling 🐛 ([c67b8ad](https://github.com/i701/sarlink-portal/commit/c67b8ad))
|
||||||
|
* fix(devices): fix payment amount generation by passing actual values 🐛 ([76a4e3d](https://github.com/i701/sarlink-portal/commit/76a4e3d))
|
||||||
|
* fix(sidebar): adjust transition durations for consistency 🐛 ([dcf58c4](https://github.com/i701/sarlink-portal/commit/dcf58c4))
|
||||||
|
* fix(signup-form): update header and welcome message for clarity ([db261ae](https://github.com/i701/sarlink-portal/commit/db261ae))
|
||||||
|
* fix(wallet-transactions): improve badge text color for transaction types (mobile) ([2193865](https://github.com/i701/sarlink-portal/commit/2193865))
|
||||||
|
* fix(wallet): update styling for total debit/credit display in wallet transactions table ([3943c0d](https://github.com/i701/sarlink-portal/commit/3943c0d))
|
||||||
|
* add admin checks for admin pages and run biome formating 🔨 ([9b2f2c1](https://github.com/i701/sarlink-portal/commit/9b2f2c1))
|
||||||
|
* Add Agreements page, enhance Devices and Users components with sorting and filtering options, and im ([9021f01](https://github.com/i701/sarlink-portal/commit/9021f01))
|
||||||
|
* Add AlertDialog and Badge components for user verification ([8e6f802](https://github.com/i701/sarlink-portal/commit/8e6f802))
|
||||||
|
* add auto deploy ([02e1bcb](https://github.com/i701/sarlink-portal/commit/02e1bcb))
|
||||||
|
* add auto deploy ([5e1364e](https://github.com/i701/sarlink-portal/commit/5e1364e))
|
||||||
|
* Add filter, pagination, search, and user table components ([1b43c85](https://github.com/i701/sarlink-portal/commit/1b43c85))
|
||||||
|
* add mirror to gitea ([d60dd3a](https://github.com/i701/sarlink-portal/commit/d60dd3a))
|
||||||
|
* add mirror to gitea ([9e9fab5](https://github.com/i701/sarlink-portal/commit/9e9fab5))
|
||||||
|
* add non stretched favicon ([e9c71c1](https://github.com/i701/sarlink-portal/commit/e9c71c1))
|
||||||
|
* Add payment processing and device management features ([e815da4](https://github.com/i701/sarlink-portal/commit/e815da4))
|
||||||
|
* add seed script and use postgres for db ([a0d85b1](https://github.com/i701/sarlink-portal/commit/a0d85b1))
|
||||||
|
* Add title background styling to globals.css ([762939b](https://github.com/i701/sarlink-portal/commit/762939b))
|
||||||
|
* Add user rejection and device addition functionalities ([2cbf9fb](https://github.com/i701/sarlink-portal/commit/2cbf9fb))
|
||||||
|
* attempt 2 building with docker ([a5b18e8](https://github.com/i701/sarlink-portal/commit/a5b18e8))
|
||||||
|
* attempt 4 docker ([8e068f1](https://github.com/i701/sarlink-portal/commit/8e068f1))
|
||||||
|
* attempt no 3 docker ([994956a](https://github.com/i701/sarlink-portal/commit/994956a))
|
||||||
|
* attempt to build docker again ([d72f9ae](https://github.com/i701/sarlink-portal/commit/d72f9ae))
|
||||||
|
* auto build ([fe3161e](https://github.com/i701/sarlink-portal/commit/fe3161e))
|
||||||
|
* bruh ([c79f06c](https://github.com/i701/sarlink-portal/commit/c79f06c))
|
||||||
|
* bun can build ([d5c9253](https://github.com/i701/sarlink-portal/commit/d5c9253))
|
||||||
|
* clean up dangling images after restart ([2597ac7](https://github.com/i701/sarlink-portal/commit/2597ac7))
|
||||||
|
* clean up dangling images after restart ([f9ed95a](https://github.com/i701/sarlink-portal/commit/f9ed95a))
|
||||||
|
* cleaner output ([4776952](https://github.com/i701/sarlink-portal/commit/4776952))
|
||||||
|
* cleaner output ([480f649](https://github.com/i701/sarlink-portal/commit/480f649))
|
||||||
|
* deploy in 1 ssh session ([135edf8](https://github.com/i701/sarlink-portal/commit/135edf8))
|
||||||
|
* deploy in 1 ssh session ([5bc8366](https://github.com/i701/sarlink-portal/commit/5bc8366))
|
||||||
|
* docker build works now ([5fb6f52](https://github.com/i701/sarlink-portal/commit/5fb6f52))
|
||||||
|
* down kohffa up kuraanee.. also there is 1 ui ([e841932](https://github.com/i701/sarlink-portal/commit/e841932))
|
||||||
|
* Enhance dashboard functionality with new payment and device management features ([c6f4571](https://github.com/i701/sarlink-portal/commit/c6f4571))
|
||||||
|
* Enhance device management and user experience features ([745f8d8](https://github.com/i701/sarlink-portal/commit/745f8d8))
|
||||||
|
* Enhance payment processing and device management features ([1a195d2](https://github.com/i701/sarlink-portal/commit/1a195d2))
|
||||||
|
* Enhance payment processing and device management features ([75ad431](https://github.com/i701/sarlink-portal/commit/75ad431))
|
||||||
|
* Enhance payment processing and user interaction features ([36f22c0](https://github.com/i701/sarlink-portal/commit/36f22c0))
|
||||||
|
* Enhance user management and payment processing features ([0a63e43](https://github.com/i701/sarlink-portal/commit/0a63e43))
|
||||||
|
* Enhance user verification and data validation features ([ff0eae6](https://github.com/i701/sarlink-portal/commit/ff0eae6))
|
||||||
|
* Enhance user verification and UI components ([2c67848](https://github.com/i701/sarlink-portal/commit/2c67848))
|
||||||
|
* example readme for prod deployment ([40b40ad](https://github.com/i701/sarlink-portal/commit/40b40ad))
|
||||||
|
* f all that just deploy ([1b724ca](https://github.com/i701/sarlink-portal/commit/1b724ca))
|
||||||
|
* final fix ([d14b0b3](https://github.com/i701/sarlink-portal/commit/d14b0b3))
|
||||||
|
* first commit ([7389de4](https://github.com/i701/sarlink-portal/commit/7389de4))
|
||||||
|
* fix docker build yml ([c0a71dd](https://github.com/i701/sarlink-portal/commit/c0a71dd))
|
||||||
|
* fix docker build yml ([b22a26a](https://github.com/i701/sarlink-portal/commit/b22a26a))
|
||||||
|
* fix getProfile import in PaymentId 🐛 ([361a01d](https://github.com/i701/sarlink-portal/commit/361a01d))
|
||||||
|
* fix:wut ([e2e5751](https://github.com/i701/sarlink-portal/commit/e2e5751))
|
||||||
|
* hamker magic ([ef32b74](https://github.com/i701/sarlink-portal/commit/ef32b74))
|
||||||
|
* Implement new features and enhance existing components for improved user experience ([bdf3729](https://github.com/i701/sarlink-portal/commit/bdf3729))
|
||||||
|
* Implement Omada device management and enhance payment processing ([e9d81c0](https://github.com/i701/sarlink-portal/commit/e9d81c0))
|
||||||
|
* Implement parental control features and enhance device management ([c06c4fe](https://github.com/i701/sarlink-portal/commit/c06c4fe))
|
||||||
|
* Initial commit from Create Next App ([92d9e90](https://github.com/i701/sarlink-portal/commit/92d9e90))
|
||||||
|
* installing openssl ([cd86a7a](https://github.com/i701/sarlink-portal/commit/cd86a7a))
|
||||||
|
* npx now ([bfba3cf](https://github.com/i701/sarlink-portal/commit/bfba3cf))
|
||||||
|
* optimize container build ([0e6f405](https://github.com/i701/sarlink-portal/commit/0e6f405))
|
||||||
|
* prepare for docker env ([fd4e147](https://github.com/i701/sarlink-portal/commit/fd4e147))
|
||||||
|
* prepare for docker env ([f9cac92](https://github.com/i701/sarlink-portal/commit/f9cac92))
|
||||||
|
* Refactor authentication actions and add user verification functionality ([3f68d83](https://github.com/i701/sarlink-portal/commit/3f68d83))
|
||||||
|
* Refactor authentication and dashboard components ([0322bee](https://github.com/i701/sarlink-portal/commit/0322bee))
|
||||||
|
* Refactor authentication components and enhance user session handling ([3f8bb4e](https://github.com/i701/sarlink-portal/commit/3f8bb4e))
|
||||||
|
* Refactor authentication middleware to use native fetch, update dependencies, and enhance error handl ([8ffabb1](https://github.com/i701/sarlink-portal/commit/8ffabb1))
|
||||||
|
* Refactor dashboard components and update global styles ([b91f34b](https://github.com/i701/sarlink-portal/commit/b91f34b))
|
||||||
|
* Refactor Docker setup and add Prisma Studio service ([1d6f4fa](https://github.com/i701/sarlink-portal/commit/1d6f4fa))
|
||||||
|
* Refactor Omada actions and enhance payment processing ([586c0e7](https://github.com/i701/sarlink-portal/commit/586c0e7))
|
||||||
|
* Refactor payment verification and add MAC address guide ([07349cd](https://github.com/i701/sarlink-portal/commit/07349cd))
|
||||||
|
* Refactor SMS notification handling to use environment variables ([5c167e4](https://github.com/i701/sarlink-portal/commit/5c167e4))
|
||||||
|
* Refactor UI components for improved consistency and functionality ([0f17800](https://github.com/i701/sarlink-portal/commit/0f17800))
|
||||||
|
* Refactor user actions and authentication components ([490150f](https://github.com/i701/sarlink-portal/commit/490150f))
|
||||||
|
* Refactor user verification and data handling ([a3f0759](https://github.com/i701/sarlink-portal/commit/a3f0759))
|
||||||
|
* registration verification WIP ([470e845](https://github.com/i701/sarlink-portal/commit/470e845))
|
||||||
|
* remove prisma stuff ([c799362](https://github.com/i701/sarlink-portal/commit/c799362))
|
||||||
|
* remove prisma stuff ([91563cb](https://github.com/i701/sarlink-portal/commit/91563cb))
|
||||||
|
* remove test api route ([0943898](https://github.com/i701/sarlink-portal/commit/0943898))
|
||||||
|
* remove unused imports ([fcf4f37](https://github.com/i701/sarlink-portal/commit/fcf4f37))
|
||||||
|
* remove welcome banner after 4 seconds with animation ✨ ([6c5f848](https://github.com/i701/sarlink-portal/commit/6c5f848))
|
||||||
|
* rename walet page to transaction history 🔨 ([b32b61a](https://github.com/i701/sarlink-portal/commit/b32b61a))
|
||||||
|
* Show no agreements if there is no agreement in agreement page 🔨 ([950ac67](https://github.com/i701/sarlink-portal/commit/950ac67))
|
||||||
|
* swap trusted origins for .env variables ([7acd118](https://github.com/i701/sarlink-portal/commit/7acd118))
|
||||||
|
* switch to node ([7bfdc10](https://github.com/i701/sarlink-portal/commit/7bfdc10))
|
||||||
|
* temporary fix for build and remove previous auth related code ([e8296ae](https://github.com/i701/sarlink-portal/commit/e8296ae))
|
||||||
|
* TEMPORARY FIX TO TEST BUILD ([b932fcf](https://github.com/i701/sarlink-portal/commit/b932fcf))
|
||||||
|
* Update dependencies and refactor calendar component ([df820ff](https://github.com/i701/sarlink-portal/commit/df820ff))
|
||||||
|
* update logo to omega ([cd2cff7](https://github.com/i701/sarlink-portal/commit/cd2cff7))
|
||||||
|
* Update package.json for turbopack support, enhance AppSidebar with new icons, and add Textarea and a ([2b0bd51](https://github.com/i701/sarlink-portal/commit/2b0bd51))
|
||||||
|
* update packages ([8673b87](https://github.com/i701/sarlink-portal/commit/8673b87))
|
||||||
|
* update readme ([a242500](https://github.com/i701/sarlink-portal/commit/a242500))
|
||||||
|
* update README todos ✏️ ([40bf841](https://github.com/i701/sarlink-portal/commit/40bf841))
|
||||||
|
* Update user schema and forms to include address and consent fields ([4e78ff2](https://github.com/i701/sarlink-portal/commit/4e78ff2))
|
||||||
|
* wip ([7fadcd5](https://github.com/i701/sarlink-portal/commit/7fadcd5))
|
||||||
|
* WIP feat(admin-devices): enhance device management from admin with dynamic filters and improved bloc ([01b064a](https://github.com/i701/sarlink-portal/commit/01b064a))
|
||||||
|
* wth what was yarn doing here 😭 ([967a1d2](https://github.com/i701/sarlink-portal/commit/967a1d2))
|
||||||
|
* refactor: add topup expiry filter to the Topups component and simplify expired badge display in Topu ([5de4bb9](https://github.com/i701/sarlink-portal/commit/5de4bb9))
|
||||||
|
* refactor: add tryCatch utility for error handling, update device-related components and types, and c ([aa18484](https://github.com/i701/sarlink-portal/commit/aa18484))
|
||||||
|
* refactor: enhance authentication and signup flow with new providers, update middleware matcher, and ([99c5fef](https://github.com/i701/sarlink-portal/commit/99c5fef))
|
||||||
|
* refactor: enhance error handling and add pagination to device queries ([aff9d26](https://github.com/i701/sarlink-portal/commit/aff9d26))
|
||||||
|
* refactor: enhance parental control features and improve device blocking logic 🔨 ([c90b003](https://github.com/i701/sarlink-portal/commit/c90b003))
|
||||||
|
* refactor: enhance topup payment verification with improved state management and error handling 🔨 ([013befa](https://github.com/i701/sarlink-portal/commit/013befa))
|
||||||
|
* refactor: enhance topup status display and improve conditional rendering in TopupsTable component 🔨 ([8c94c92](https://github.com/i701/sarlink-portal/commit/8c94c92))
|
||||||
|
* refactor: implement device payment verification with useActionState hook 🔨 ([1a11f1a](https://github.com/i701/sarlink-portal/commit/1a11f1a))
|
||||||
|
* refactor: implement session checking utility, enhance device queries with session validation, and im ([daab793](https://github.com/i701/sarlink-portal/commit/daab793))
|
||||||
|
* refactor: improve state management and layout in Topup components 🔨 ([a61231c](https://github.com/i701/sarlink-portal/commit/a61231c))
|
||||||
|
* refactor: migrate authentication and signup flow to use external API and improve type safety ([0fd269d](https://github.com/i701/sarlink-portal/commit/0fd269d))
|
||||||
|
* refactor: remove layout error component from dashboard ([bb5eff8](https://github.com/i701/sarlink-portal/commit/bb5eff8))
|
||||||
|
* refactor: remove unused import and improve conditional rendering in block device dialog 🔨 ([8051b00](https://github.com/i701/sarlink-portal/commit/8051b00))
|
||||||
|
* refactor: remove unused import from device-card and devices-table components ([4e16c0a](https://github.com/i701/sarlink-portal/commit/4e16c0a))
|
||||||
|
* refactor: remove unused import of checkIdOrPhone in OTP verification page ([acb0ead](https://github.com/i701/sarlink-portal/commit/acb0ead))
|
||||||
|
* refactor: remove unused imports in TopupToPay component 🔨 ([8f9b4ba](https://github.com/i701/sarlink-portal/commit/8f9b4ba))
|
||||||
|
* refactor: remove unused imports in user payments page component 🔨 ([905b4fa](https://github.com/i701/sarlink-portal/commit/905b4fa))
|
||||||
|
* refactor: remove unused user verification function and clean up user type definitions 🔨 ([78673e0](https://github.com/i701/sarlink-portal/commit/78673e0))
|
||||||
|
* refactor: reorder imports and improve variable naming in CancelPaymentButton component 🔨 ([837cc35](https://github.com/i701/sarlink-portal/commit/837cc35))
|
||||||
|
* refactor: reorganize imports and enhance admin category filtering in AppSidebar 🔨 ([1549b20](https://github.com/i701/sarlink-portal/commit/1549b20))
|
||||||
|
* refactor: reorganize imports and improve session handling in various components 🔨 ([a6d844e](https://github.com/i701/sarlink-portal/commit/a6d844e))
|
||||||
|
* refactor: replace custom authentication middleware with NextAuth, remove unused authentication pages ([32bb01b](https://github.com/i701/sarlink-portal/commit/32bb01b))
|
||||||
|
* refactor: simplify FloatingInput and Textarea components by removing unnecessary forwardRef usage 🔨 ([5809e26](https://github.com/i701/sarlink-portal/commit/5809e26))
|
||||||
|
* refactor: streamline authentication flow by removing unused code, replacing custom auth utilities wi ([ef9f032](https://github.com/i701/sarlink-portal/commit/ef9f032))
|
||||||
|
* refactor: streamline package.json and tailwind.config.ts ([9e0d2d2](https://github.com/i701/sarlink-portal/commit/9e0d2d2))
|
||||||
|
* refactor: update authentication flow to use NextAuth, replace better-auth with axios for API calls, ([020d74c](https://github.com/i701/sarlink-portal/commit/020d74c))
|
||||||
|
* refactor: update authentication flow to use PIN instead of email/password, enhance OTP verification ([dbdc1df](https://github.com/i701/sarlink-portal/commit/dbdc1df))
|
||||||
|
* refactor: update axios client import, enhance device and payment handling, and add cancel payment bu ([7e49bf1](https://github.com/i701/sarlink-portal/commit/7e49bf1))
|
||||||
|
* refactor: update cancelPayment function to use PATCH method and new endpoint 🔨 ([e984705](https://github.com/i701/sarlink-portal/commit/e984705))
|
||||||
|
* refactor: update payment types and user interface, enhance error handling, and adjust API base URL ([9e2a2f4](https://github.com/i701/sarlink-portal/commit/9e2a2f4))
|
||||||
|
* refactor: update progress component styles and add radix-ui/react-progress dependency 🔨 ([cd1dba0](https://github.com/i701/sarlink-portal/commit/cd1dba0))
|
||||||
|
* refactor: update topup status handling in DynamicFilter and TopupsTable components ✨ ([378fb40](https://github.com/i701/sarlink-portal/commit/378fb40))
|
||||||
|
* refactor: use single seperate AccountInfomation component and integrate it into DevicesToPay and Top ([fa12cd7](https://github.com/i701/sarlink-portal/commit/fa12cd7))
|
||||||
|
* refactor(sidebar): re arrange sidebar links 🔨 ([1e2329e](https://github.com/i701/sarlink-portal/commit/1e2329e))
|
||||||
|
* feat: add "Top Ups" option to sidebar with appropriate permissions and icon ✨ ([89a35a9](https://github.com/i701/sarlink-portal/commit/89a35a9))
|
||||||
|
* feat: add admin check for device and payment pages; update session type to include is_admin property ([6aea548](https://github.com/i701/sarlink-portal/commit/6aea548))
|
||||||
|
* feat: add age validation in signup and update payment verification logic ([0c093f1](https://github.com/i701/sarlink-portal/commit/0c093f1))
|
||||||
|
* feat: add custom headers configuration to next.js config for stream/suspense support ✨ ([3e3b5f1](https://github.com/i701/sarlink-portal/commit/3e3b5f1))
|
||||||
|
* feat: add custom headers configuration to next.js config for stream/suspense support ✨ ([683d857](https://github.com/i701/sarlink-portal/commit/683d857))
|
||||||
|
* feat: add Dashboard layout main Error component for error handling in dashboard ([7750c5a](https://github.com/i701/sarlink-portal/commit/7750c5a))
|
||||||
|
* feat: add disabled prop to DevicesToPay component and update button state management ✨ ([9f9f2e4](https://github.com/i701/sarlink-portal/commit/9f9f2e4))
|
||||||
|
* feat: add dual range slider component and integrate it into dynamic filter for device management ([0157ecc](https://github.com/i701/sarlink-portal/commit/0157ecc))
|
||||||
|
* feat: add example environment configuration file and update .gitignore to include .env files ([378c120](https://github.com/i701/sarlink-portal/commit/378c120))
|
||||||
|
* feat: add expiry label to ExpiryCountDown component ✨ ([4797ee8](https://github.com/i701/sarlink-portal/commit/4797ee8))
|
||||||
|
* feat: add expiry label to ExpiryCountDown component in TopupPage ✨ ([9e25da7](https://github.com/i701/sarlink-portal/commit/9e25da7))
|
||||||
|
* feat: add floating label input component for enhanced form usability ✨ ([9c1d1c5](https://github.com/i701/sarlink-portal/commit/9c1d1c5))
|
||||||
|
* feat: add getProfile function and integrate user profile retrieval in payment and layout components ([ba91d2c](https://github.com/i701/sarlink-portal/commit/ba91d2c))
|
||||||
|
* feat: add loading skeleton for devices table and improve payment processing logic ([0d578c9](https://github.com/i701/sarlink-portal/commit/0d578c9))
|
||||||
|
* feat: add loading state and full-page loader component; update payment page and application layout t ([bed426a](https://github.com/i701/sarlink-portal/commit/bed426a))
|
||||||
|
* feat: add payment method filter to payments page ✨ ([13f0e72](https://github.com/i701/sarlink-portal/commit/13f0e72))
|
||||||
|
* feat: add payment method filter to payments page ✨ ([da7d101](https://github.com/i701/sarlink-portal/commit/da7d101))
|
||||||
|
* feat: add radio filter for topup expiry ✨ ([d499353](https://github.com/i701/sarlink-portal/commit/d499353))
|
||||||
|
* feat: add radio filter for topup expiry ✨ ([154226b](https://github.com/i701/sarlink-portal/commit/154226b))
|
||||||
|
* feat: add topup management features including topup creation, cancellation, and countdown timer ✨ ([f3328f7](https://github.com/i701/sarlink-portal/commit/f3328f7))
|
||||||
|
* feat: add vendor information to device components and update related UI elements ([8438ceb](https://github.com/i701/sarlink-portal/commit/8438ceb))
|
||||||
|
* feat: enforce strict TypeScript rules and add biome configuration ([79ecb62](https://github.com/i701/sarlink-portal/commit/79ecb62))
|
||||||
|
* feat: enhance device cart with cancel feature and improve payments table filters ([2834f23](https://github.com/i701/sarlink-portal/commit/2834f23))
|
||||||
|
* feat: enhance dual-range-slider handling in DynamicFilter component ✨ ([f4c34d3](https://github.com/i701/sarlink-portal/commit/f4c34d3))
|
||||||
|
* feat: enhance error handling and improve API response management across components ([6365a70](https://github.com/i701/sarlink-portal/commit/6365a70))
|
||||||
|
* feat: enhance MAC address guide with contact button for assistance ([c705add](https://github.com/i701/sarlink-portal/commit/c705add))
|
||||||
|
* feat: enhance OTP verification flow with error handling and response checks ([0b2dcfc](https://github.com/i701/sarlink-portal/commit/0b2dcfc))
|
||||||
|
* feat: enhance payment and topup interfaces with status and expiration details ✨ ([df2b3da](https://github.com/i701/sarlink-portal/commit/df2b3da))
|
||||||
|
* feat: enhance payment retrieval with flexible query parameters and add dynamic filters to payments p ([9fe3c3b](https://github.com/i701/sarlink-portal/commit/9fe3c3b))
|
||||||
|
* feat: enhance payment retrieval with flexible query parameters and add dynamic filters to payments p ([fa0d088](https://github.com/i701/sarlink-portal/commit/fa0d088))
|
||||||
|
* feat: implement add device functionality with validation and error handling; refactor related compon ([d2b2812](https://github.com/i701/sarlink-portal/commit/d2b2812))
|
||||||
|
* feat: implement AuthLayout component and streamline OTP verification forms with enhanced messaging ([a4ffb1e](https://github.com/i701/sarlink-portal/commit/a4ffb1e))
|
||||||
|
* feat: implement checkTempIdOrPhone function and update OTP verification logic ([f3f5800](https://github.com/i701/sarlink-portal/commit/f3f5800))
|
||||||
|
* feat: implement topup functionality with create, get, and cancel operations ✨ ([ee461bb](https://github.com/i701/sarlink-portal/commit/ee461bb))
|
||||||
|
* feat: implement user profile page and integrate profile fetching logic in AccountPopover and Applica ([a20c939](https://github.com/i701/sarlink-portal/commit/a20c939))
|
||||||
|
* feat: implement user registration and OTP verification flow with backend integration ([0f9d110](https://github.com/i701/sarlink-portal/commit/0f9d110))
|
||||||
|
* feat: implement user verification and rejection functionality with improved error handling ✨ ([255c03a](https://github.com/i701/sarlink-portal/commit/255c03a))
|
||||||
|
* feat: integrate backend mobile login and enhance user verification flow ([2cb2059](https://github.com/i701/sarlink-portal/commit/2cb2059))
|
||||||
|
* feat: integrate checkTempIdOrPhone in signup logic to validate temporary phone numbers ([923887b](https://github.com/i701/sarlink-portal/commit/923887b))
|
||||||
|
* feat: update authentication layout and forms for improved user experience; add new dependencies and ([406733b](https://github.com/i701/sarlink-portal/commit/406733b))
|
||||||
|
* feat: update cancelTopup API call to use PATCH method and enhance success message with topup details ([b9d8e56](https://github.com/i701/sarlink-portal/commit/b9d8e56))
|
||||||
|
* feat: update signup and OTP verification forms to enhance error handling and state management ([1e023eb](https://github.com/i701/sarlink-portal/commit/1e023eb))
|
||||||
|
* feat: update Topup interface with status and paid_at fields; modify table display for topup details ([ef7121f](https://github.com/i701/sarlink-portal/commit/ef7121f))
|
||||||
|
* feat(admin-topup): add description field to topup form and validation for amount ([3da668a](https://github.com/i701/sarlink-portal/commit/3da668a))
|
||||||
|
* feat(admin-topup): add description field to topup request payload ([a717c3d](https://github.com/i701/sarlink-portal/commit/a717c3d))
|
||||||
|
* feat(admin): add admin payment tables + filters✨ ([c34285c](https://github.com/i701/sarlink-portal/commit/c34285c))
|
||||||
|
* feat(admin): add usertable and update next config ✨ ([780239d](https://github.com/i701/sarlink-portal/commit/780239d))
|
||||||
|
* feat(agreements): implement agreement fetching and display with error handling ([171b1d4](https://github.com/i701/sarlink-portal/commit/171b1d4))
|
||||||
|
* feat(devices): add proper filter handling and update shadcn 🔨 ([59adaaf](https://github.com/i701/sarlink-portal/commit/59adaaf))
|
||||||
|
* feat(filters): replace existing filters with dynamic filters for improved user and device management ([9926de9](https://github.com/i701/sarlink-portal/commit/9926de9))
|
||||||
|
* feat(portal-ui): enhance user and device information display in admin and user devices tables ✨ ([3cd3bba](https://github.com/i701/sarlink-portal/commit/3cd3bba))
|
||||||
|
* feat(topups): add support for fetching all topups in getTopups function ✨ ([aedf7cd](https://github.com/i701/sarlink-portal/commit/aedf7cd))
|
||||||
|
* feat(user-agreement): implement user agreement upload functionality and update related components ✨ ([c2578f1](https://github.com/i701/sarlink-portal/commit/c2578f1))
|
||||||
|
* feat(user-topups): add user topups page with dynamic filtering and admin table integration ✨ ([1f6fe7d](https://github.com/i701/sarlink-portal/commit/1f6fe7d))
|
||||||
|
* feat(user-update-form): display field errors in user update form ✨ ([17aa65a](https://github.com/i701/sarlink-portal/commit/17aa65a))
|
||||||
|
* feat(user-verification): implement user verification functionality and update dialog UI ✨ ([dc3b5f9](https://github.com/i701/sarlink-portal/commit/dc3b5f9))
|
||||||
|
* feat(user): add admin topup functionality in user details page ✨ ([644e4f7](https://github.com/i701/sarlink-portal/commit/644e4f7))
|
||||||
|
* feat(user): implement user update functionality and enhance verification page UI ✨ ([8fac07b](https://github.com/i701/sarlink-portal/commit/8fac07b))
|
||||||
|
* feat(verify-user): add link to view user agreement and improve layout for user information ([eadd790](https://github.com/i701/sarlink-portal/commit/eadd790))
|
||||||
|
* feat(wallet): implement wallet transactions table and filtering options ✨ ([e0b76bb](https://github.com/i701/sarlink-portal/commit/e0b76bb))
|
||||||
|
* feat(wallet): update transaction type from CREDIT to TOPUP and display total debit/credit amounts ✨ ([e9af120](https://github.com/i701/sarlink-portal/commit/e9af120))
|
||||||
|
* chore: update package.json ♻️ ([71fc914](https://github.com/i701/sarlink-portal/commit/71fc914))
|
||||||
|
* chore: update package.json to add millify dependency and remove unnecessary newline ([f7122cb](https://github.com/i701/sarlink-portal/commit/f7122cb))
|
||||||
|
* chore: update README with new todos 🔧 ([fb3ad13](https://github.com/i701/sarlink-portal/commit/fb3ad13))
|
||||||
|
* chore: upgrade to tailwind v4 and add a generic filter for dynamic filter handling ([11ac852](https://github.com/i701/sarlink-portal/commit/11ac852))
|
||||||
|
* chore(package-lock): update brace-expansion to version 1.1.12 and form-data to version 4.0.4 ([5fda723](https://github.com/i701/sarlink-portal/commit/5fda723))
|
||||||
|
* chore(README): update task list to reflect completed features in parental control and admin controls ([8bcf481](https://github.com/i701/sarlink-portal/commit/8bcf481))
|
||||||
|
* chore(user-payments-table): remove unused imports 🔧 ([d7b8e4e](https://github.com/i701/sarlink-portal/commit/d7b8e4e))
|
||||||
|
* chore(user-update-form): remove unused import for cleaner code 🔧 ([7a02cb2](https://github.com/i701/sarlink-portal/commit/7a02cb2))
|
||||||
|
* bug: fix payment status display and force timezones in creation date in PaymentsTable and DevicesTo ([27a0b5d](https://github.com/i701/sarlink-portal/commit/27a0b5d))
|
||||||
@@ -1,78 +1,76 @@
|
|||||||
import { Skeleton } from "@/components/ui/skeleton";
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
export default function DevicesTableSkeleton() {
|
export default function DevicesTableSkeleton() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="hidden sm:block">
|
<div className="hidden sm:block">
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all devices.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>Device Name</TableHead>
|
||||||
<TableHead>Device Name</TableHead>
|
<TableHead>MAC Address</TableHead>
|
||||||
<TableHead>MAC Address</TableHead>
|
<TableHead>#</TableHead>
|
||||||
<TableHead>#</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{Array.from({ length: 10 }).map((_, i) => (
|
||||||
{Array.from({ length: 10 }).map((_, i) => (
|
<TableRow key={`${i + 1}`}>
|
||||||
<TableRow key={`${i + 1}`}>
|
<TableCell>
|
||||||
<TableCell>
|
<Skeleton className="w-full h-10 rounded" />
|
||||||
<Skeleton className="w-full h-10 rounded" />
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell>
|
||||||
<TableCell>
|
<Skeleton className="w-full h-10 rounded" />
|
||||||
<Skeleton className="w-full h-10 rounded" />
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell>
|
||||||
<TableCell>
|
<Skeleton className="w-full h-10 rounded" />
|
||||||
<Skeleton className="w-full h-10 rounded" />
|
</TableCell>
|
||||||
</TableCell>
|
</TableRow>
|
||||||
</TableRow>
|
))}
|
||||||
))}
|
</TableBody>
|
||||||
</TableBody>
|
<TableFooter>
|
||||||
<TableFooter>
|
<TableRow>
|
||||||
<TableRow>
|
<TableCell colSpan={2}>
|
||||||
<TableCell colSpan={2}>
|
<Skeleton className="w-full h-4 rounded" />
|
||||||
<Skeleton className="w-full h-4 rounded" />
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell className="text-muted-foreground">
|
||||||
<TableCell className="text-muted-foreground">
|
<Skeleton className="w-20 h-4 rounded" />
|
||||||
<Skeleton className="w-20 h-4 rounded" />
|
</TableCell>
|
||||||
</TableCell>
|
</TableRow>
|
||||||
</TableRow>
|
</TableFooter>
|
||||||
</TableFooter>
|
</Table>
|
||||||
</Table>
|
</div>
|
||||||
</div>
|
<div className="sm:hidden my-4">
|
||||||
<div className="sm:hidden my-4">
|
{Array.from({ length: 10 }).map((_, i) => (
|
||||||
{Array.from({ length: 10 }).map((_, i) => (
|
<DeviceCardSkeleton key={`${i + 1}`} />
|
||||||
<DeviceCardSkeleton key={`${i + 1}`} />
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
</>
|
||||||
</>
|
);
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function DeviceCardSkeleton() {
|
function DeviceCardSkeleton() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex text-sm justify-between items-center my-2 p-4 border rounded-md bg-gray-100",
|
"flex text-sm justify-between items-center my-2 p-4 border rounded-md bg-gray-100",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
|
<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
|
||||||
<Skeleton className="w-32 h-6" />
|
<Skeleton className="w-32 h-6" />
|
||||||
<Skeleton className="w-36 h-6" />
|
<Skeleton className="w-36 h-6" />
|
||||||
<Skeleton className="w-32 h-4" />
|
<Skeleton className="w-32 h-4" />
|
||||||
<Skeleton className="w-40 h-8" />
|
<Skeleton className="w-40 h-8" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,72 +9,72 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
|
|||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { tryCatch } from "@/utils/tryCatch";
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
export default async function TopupPage({
|
export default async function TopupPage({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
params: Promise<{ topupId: string }>;
|
params: Promise<{ topupId: string }>;
|
||||||
}) {
|
}) {
|
||||||
const topupId = (await params).topupId;
|
const topupId = (await params).topupId;
|
||||||
const [error, topup] = await tryCatch(getTopup({ id: topupId }));
|
const [error, topup] = await tryCatch(getTopup({ id: topupId }));
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message === "Invalid token.") redirect("/auth/signin");
|
if (error.message === "Invalid token.") redirect("/auth/signin");
|
||||||
return <ClientErrorMessage message={error.message} />;
|
return <ClientErrorMessage message={error.message} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
|
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
|
||||||
<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
|
<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
|
||||||
<div className="flex flex-col gap-4 items-end w-full">
|
<div className="flex flex-col gap-4 items-end w-full">
|
||||||
{!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
|
{!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
|
||||||
<Button
|
<Button
|
||||||
disabled
|
disabled
|
||||||
className={cn(
|
className={cn(
|
||||||
"rounded-md opacity-100! uppercase font-semibold",
|
"rounded-md opacity-100! uppercase font-semibold",
|
||||||
topup?.paid
|
topup?.paid
|
||||||
? "text-green-900 bg-green-500/20"
|
? "text-green-900 bg-green-500/20"
|
||||||
: "text-inherit bg-yellow-400",
|
: "text-inherit bg-yellow-400",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{topup.status}
|
{topup.status}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{topup.status === "PENDING" && !topup.is_expired && (
|
{topup.status === "PENDING" && !topup.is_expired && (
|
||||||
<Button>
|
<Button>
|
||||||
<TextShimmer>Payment Pending</TextShimmer>{" "}
|
<TextShimmer>Payment Pending</TextShimmer>{" "}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!topup.paid &&
|
{!topup.paid &&
|
||||||
(topup.is_expired ? (
|
(topup.is_expired ? (
|
||||||
<Button
|
<Button
|
||||||
disabled
|
disabled
|
||||||
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
|
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
|
||||||
>
|
>
|
||||||
Topup Expired
|
Topup Expired
|
||||||
</Button>
|
</Button>
|
||||||
) : topup.status === "PENDING" ? (
|
) : topup.status === "PENDING" ? (
|
||||||
<CancelTopupButton topupId={topupId} />
|
<CancelTopupButton topupId={topupId} />
|
||||||
) : topup.status === "CANCELLED" ? (
|
) : topup.status === "CANCELLED" ? (
|
||||||
<Button disabled>Topup Cancelled</Button>
|
<Button disabled>Topup Cancelled</Button>
|
||||||
) : (
|
) : (
|
||||||
""
|
""
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
|
{!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
|
||||||
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
|
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
id="user-topup-details"
|
id="user-topup-details"
|
||||||
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||||
>
|
>
|
||||||
<TopupToPay
|
<TopupToPay
|
||||||
disabled={
|
disabled={
|
||||||
topup.paid || topup.is_expired || topup.status === "CANCELLED"
|
topup.paid || topup.is_expired || topup.status === "CANCELLED"
|
||||||
}
|
}
|
||||||
topup={topup || undefined}
|
topup={topup || undefined}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
// commitlint.config.js
|
|
||||||
export default {
|
export default {
|
||||||
extends: ['@commitlint/config-conventional']
|
extends: ['@commitlint/config-conventional']
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,14 +4,13 @@ import { redirect } from "next/navigation";
|
|||||||
import { getServerSession } from "next-auth";
|
import { getServerSession } from "next-auth";
|
||||||
import { authOptions } from "@/app/auth";
|
import { authOptions } from "@/app/auth";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { getDevices } from "@/queries/devices";
|
import { getDevices } from "@/queries/devices";
|
||||||
@@ -21,156 +20,155 @@ import ClientErrorMessage from "../client-error-message";
|
|||||||
import Pagination from "../pagination";
|
import Pagination from "../pagination";
|
||||||
|
|
||||||
export async function AdminDevicesTable({
|
export async function AdminDevicesTable({
|
||||||
searchParams,
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{
|
searchParams: Promise<{
|
||||||
[key: string]: unknown;
|
[key: string]: unknown;
|
||||||
}>;
|
}>;
|
||||||
}) {
|
}) {
|
||||||
const resolvedParams = await searchParams;
|
const resolvedParams = await searchParams;
|
||||||
const session = await getServerSession(authOptions);
|
const session = await getServerSession(authOptions);
|
||||||
const isAdmin = session?.user?.is_admin;
|
const isAdmin = session?.user?.is_admin;
|
||||||
|
|
||||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
const offset = (page - 1) * limit;
|
const offset = (page - 1) * limit;
|
||||||
|
|
||||||
// Build params object for getDevices
|
// Build params object for getDevices
|
||||||
const apiParams: Record<string, string | number | undefined> = {};
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
apiParams.limit = limit;
|
apiParams.limit = limit;
|
||||||
apiParams.offset = offset;
|
apiParams.offset = offset;
|
||||||
|
|
||||||
const [error, devices] = await tryCatch(getDevices(apiParams, true));
|
const [error, devices] = await tryCatch(getDevices(apiParams, true));
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message === "UNAUTHORIZED") {
|
if (error.message === "UNAUTHORIZED") {
|
||||||
redirect("/auth/signin");
|
redirect("/auth/signin");
|
||||||
} else {
|
} else {
|
||||||
return <ClientErrorMessage message={error.message} />;
|
return <ClientErrorMessage message={error.message} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { meta, data } = devices;
|
const { meta, data } = devices;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{data?.length === 0 ? (
|
{data?.length === 0 ? (
|
||||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||||
<h3>No devices.</h3>
|
<h3>No devices.</h3>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all devices.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>Device Name</TableHead>
|
||||||
<TableHead>Device Name</TableHead>
|
<TableHead>User</TableHead>
|
||||||
<TableHead>User</TableHead>
|
<TableHead>MAC Address</TableHead>
|
||||||
<TableHead>MAC Address</TableHead>
|
<TableHead>Vendor</TableHead>
|
||||||
<TableHead>Vendor</TableHead>
|
<TableHead>#</TableHead>
|
||||||
<TableHead>#</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{data?.map((device) => (
|
||||||
{data?.map((device) => (
|
<TableRow key={device.id}>
|
||||||
<TableRow key={device.id}>
|
<TableCell>
|
||||||
<TableCell>
|
<div className="flex flex-col items-start">
|
||||||
<div className="flex flex-col items-start">
|
<Link
|
||||||
<Link
|
className={cn(
|
||||||
className={cn(
|
"hover:underline font-semibold",
|
||||||
"hover:underline font-semibold",
|
device.is_active ? "text-green-600" : "",
|
||||||
device.is_active ? "text-green-600" : "",
|
)}
|
||||||
)}
|
href={`/devices/${device.id}`}
|
||||||
href={`/devices/${device.id}`}
|
>
|
||||||
>
|
{device.name}
|
||||||
{device.name}
|
</Link>
|
||||||
</Link>
|
{device.is_active ? (
|
||||||
{device.is_active ? (
|
<div className="text-muted-foreground">
|
||||||
<div className="text-muted-foreground">
|
Active until{" "}
|
||||||
Active until{" "}
|
<span className="font-semibold">
|
||||||
<span className="font-semibold">
|
{new Date(
|
||||||
{new Date(
|
device.expiry_date || "",
|
||||||
device.expiry_date || "",
|
).toLocaleDateString("en-US", {
|
||||||
).toLocaleDateString("en-US", {
|
month: "short",
|
||||||
month: "short",
|
day: "2-digit",
|
||||||
day: "2-digit",
|
year: "numeric",
|
||||||
year: "numeric",
|
})}
|
||||||
})}
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
) : (
|
<p className="text-muted-foreground">
|
||||||
<p className="text-muted-foreground">
|
Device Inactive
|
||||||
Device Inactive
|
</p>
|
||||||
</p>
|
)}
|
||||||
)}
|
{device.has_a_pending_payment && (
|
||||||
{device.has_a_pending_payment && (
|
<Link href={`/payments/${device.pending_payment_id}`}>
|
||||||
<Link href={`/payments/${device.pending_payment_id}`}>
|
<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
|
||||||
<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
|
Payment Pending{" "}
|
||||||
Payment Pending{" "}
|
<HandCoins className="animate-pulse" size={14} />
|
||||||
<HandCoins className="animate-pulse" size={14} />
|
</span>
|
||||||
</span>
|
</Link>
|
||||||
</Link>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
{device.blocked_by === "ADMIN" && device.blocked && (
|
{device.blocked_by === "ADMIN" && device.blocked && (
|
||||||
<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
|
<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
|
||||||
<span className="font-semibold">Comment</span>
|
<span className="font-semibold">Comment</span>
|
||||||
<p className="text-neutral-400">
|
<p className="text-neutral-400">
|
||||||
{device?.reason_for_blocking}
|
{device?.reason_for_blocking}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="font-medium">
|
<TableCell className="font-medium">
|
||||||
<div className="flex flex-col items-start">
|
<div className="flex flex-col items-start">
|
||||||
{device?.user?.name}
|
{device?.user?.name}
|
||||||
<span className="text-muted-foreground">
|
<span className="text-muted-foreground">
|
||||||
{device?.user?.id_card}
|
{device?.user?.id_card}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="font-medium">{device.mac}</TableCell>
|
<TableCell className="font-medium">{device.mac}</TableCell>
|
||||||
<TableCell className="font-medium">
|
<TableCell className="font-medium">
|
||||||
{device?.vendor}
|
{device?.vendor}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
{!device.has_a_pending_payment && (
|
{!device.has_a_pending_payment && (
|
||||||
<BlockDeviceDialog
|
<BlockDeviceDialog
|
||||||
admin={isAdmin}
|
admin={isAdmin}
|
||||||
type={device.blocked ? "unblock" : "block"}
|
type={device.blocked ? "unblock" : "block"}
|
||||||
device={device}
|
device={device}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableFooter>
|
<TableFooter>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={5} className="text-muted-foreground">
|
<TableCell colSpan={5} className="text-muted-foreground">
|
||||||
{meta?.total === 1 ? (
|
{meta?.total === 1 ? (
|
||||||
<p className="text-center">Total {meta?.total} device.</p>
|
<p className="text-center">Total {meta?.total} device.</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-center">
|
<p className="text-center">
|
||||||
Total {meta?.total} devices.
|
Total {meta?.total} devices.
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableFooter>
|
</TableFooter>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Pagination
|
<Pagination
|
||||||
totalPages={meta?.last_page}
|
totalPages={meta?.last_page}
|
||||||
currentPage={meta?.current_page}
|
currentPage={meta?.current_page}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,14 +2,13 @@ import Link from "next/link";
|
|||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { getTopups } from "@/actions/payment";
|
import { getTopups } from "@/actions/payment";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import { tryCatch } from "@/utils/tryCatch";
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
import Pagination from "../pagination";
|
import Pagination from "../pagination";
|
||||||
@@ -17,123 +16,122 @@ import { Badge } from "../ui/badge";
|
|||||||
import { Button } from "../ui/button";
|
import { Button } from "../ui/button";
|
||||||
|
|
||||||
export async function AdminTopupsTable({
|
export async function AdminTopupsTable({
|
||||||
searchParams,
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{
|
searchParams: Promise<{
|
||||||
[key: string]: unknown;
|
[key: string]: unknown;
|
||||||
}>;
|
}>;
|
||||||
}) {
|
}) {
|
||||||
const resolvedParams = await searchParams;
|
const resolvedParams = await searchParams;
|
||||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
const offset = (page - 1) * limit;
|
const offset = (page - 1) * limit;
|
||||||
// Build params object
|
// Build params object
|
||||||
const apiParams: Record<string, string | number | undefined> = {};
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
apiParams.limit = limit;
|
apiParams.limit = limit;
|
||||||
apiParams.offset = offset;
|
apiParams.offset = offset;
|
||||||
const [error, topups] = await tryCatch(getTopups(apiParams, true));
|
const [error, topups] = await tryCatch(getTopups(apiParams, true));
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message.includes("Unauthorized")) {
|
if (error.message.includes("Unauthorized")) {
|
||||||
redirect("/auth/signin");
|
redirect("/auth/signin");
|
||||||
} else {
|
} else {
|
||||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { data, meta } = topups;
|
const { data, meta } = topups;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{data?.length === 0 ? (
|
{data?.length === 0 ? (
|
||||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||||
<h3>No topups yet.</h3>
|
<h3>No topups yet.</h3>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all topups.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>User</TableHead>
|
||||||
<TableHead>User</TableHead>
|
<TableHead>Status</TableHead>
|
||||||
<TableHead>Status</TableHead>
|
<TableHead>Amount</TableHead>
|
||||||
<TableHead>Amount</TableHead>
|
<TableHead>Action</TableHead>
|
||||||
<TableHead>Action</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{topups?.data?.map((topup) => (
|
||||||
{topups?.data?.map((topup) => (
|
<TableRow key={topup.id}>
|
||||||
<TableRow key={topup.id}>
|
<TableCell>
|
||||||
<TableCell>
|
<div className="flex flex-col items-start">
|
||||||
<div className="flex flex-col items-start">
|
{topup?.user?.name}
|
||||||
{topup?.user?.name}
|
<span className="text-muted-foreground">
|
||||||
<span className="text-muted-foreground">
|
{topup?.user?.id_card}
|
||||||
{topup?.user?.id_card}
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell>
|
||||||
<TableCell>
|
<span className="font-semibold pr-2">
|
||||||
<span className="font-semibold pr-2">
|
{topup.paid ? (
|
||||||
{topup.paid ? (
|
<Badge
|
||||||
<Badge
|
className="bg-green-100 dark:bg-green-700"
|
||||||
className="bg-green-100 dark:bg-green-700"
|
variant="outline"
|
||||||
variant="outline"
|
>
|
||||||
>
|
{topup.status}
|
||||||
{topup.status}
|
</Badge>
|
||||||
</Badge>
|
) : topup.is_expired ? (
|
||||||
) : topup.is_expired ? (
|
<Badge>Expired</Badge>
|
||||||
<Badge>Expired</Badge>
|
) : (
|
||||||
) : (
|
<Badge variant="outline">{topup.status}</Badge>
|
||||||
<Badge variant="outline">{topup.status}</Badge>
|
)}
|
||||||
)}
|
</span>
|
||||||
</span>
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell>
|
||||||
<TableCell>
|
<span className="font-semibold pr-2">
|
||||||
<span className="font-semibold pr-2">
|
{topup.amount.toFixed(2)}
|
||||||
{topup.amount.toFixed(2)}
|
</span>
|
||||||
</span>
|
MVR
|
||||||
MVR
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell>
|
||||||
<TableCell>
|
<div>
|
||||||
<div>
|
<div className="flex items-center gap-2 mt-2">
|
||||||
<div className="flex items-center gap-2 mt-2">
|
<Link
|
||||||
<Link
|
className="font-medium hover:underline"
|
||||||
className="font-medium hover:underline"
|
href={`/top-ups/${topup.id}`}
|
||||||
href={`/top-ups/${topup.id}`}
|
>
|
||||||
>
|
<Button size={"sm"} variant="outline">
|
||||||
<Button size={"sm"} variant="outline">
|
View Details
|
||||||
View Details
|
</Button>
|
||||||
</Button>
|
</Link>
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</TableCell>
|
||||||
</TableCell>
|
</TableRow>
|
||||||
</TableRow>
|
))}
|
||||||
))}
|
</TableBody>
|
||||||
</TableBody>
|
<TableFooter>
|
||||||
<TableFooter>
|
<TableRow>
|
||||||
<TableRow>
|
<TableCell colSpan={4} className="text-muted-foreground">
|
||||||
<TableCell colSpan={4} className="text-muted-foreground">
|
{meta?.total === 1 ? (
|
||||||
{meta?.total === 1 ? (
|
<p className="text-center">Total {meta?.total} topup.</p>
|
||||||
<p className="text-center">Total {meta?.total} topup.</p>
|
) : (
|
||||||
) : (
|
<p className="text-center">Total {meta?.total} topups.</p>
|
||||||
<p className="text-center">Total {meta?.total} topups.</p>
|
)}
|
||||||
)}
|
</TableCell>
|
||||||
</TableCell>
|
</TableRow>
|
||||||
</TableRow>
|
</TableFooter>
|
||||||
</TableFooter>
|
</Table>
|
||||||
</Table>
|
</div>
|
||||||
</div>
|
<Pagination
|
||||||
<Pagination
|
totalPages={meta?.last_page}
|
||||||
totalPages={meta?.last_page}
|
currentPage={meta?.current_page}
|
||||||
currentPage={meta?.current_page}
|
/>
|
||||||
/>
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,170 +5,168 @@ import Pagination from "@/components/pagination";
|
|||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import { tryCatch } from "@/utils/tryCatch";
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
import ClientErrorMessage from "../client-error-message";
|
import ClientErrorMessage from "../client-error-message";
|
||||||
|
|
||||||
export async function UsersPaymentsTable({
|
export async function UsersPaymentsTable({
|
||||||
searchParams,
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{
|
searchParams: Promise<{
|
||||||
[key: string]: unknown;
|
[key: string]: unknown;
|
||||||
}>;
|
}>;
|
||||||
}) {
|
}) {
|
||||||
const resolvedParams = await searchParams;
|
const resolvedParams = await searchParams;
|
||||||
|
|
||||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
const offset = (page - 1) * limit;
|
const offset = (page - 1) * limit;
|
||||||
|
|
||||||
// Build params object for getDevices
|
// Build params object for getDevices
|
||||||
const apiParams: Record<string, string | number | undefined> = {};
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
apiParams.limit = limit;
|
apiParams.limit = limit;
|
||||||
apiParams.offset = offset;
|
apiParams.offset = offset;
|
||||||
|
|
||||||
const [error, payments] = await tryCatch(getPayments(apiParams, true));
|
const [error, payments] = await tryCatch(getPayments(apiParams, true));
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message === "UNAUTHORIZED") {
|
if (error.message === "UNAUTHORIZED") {
|
||||||
redirect("/auth/signin");
|
redirect("/auth/signin");
|
||||||
} else {
|
} else {
|
||||||
return <ClientErrorMessage message={error.message} />;
|
return <ClientErrorMessage message={error.message} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { meta, data } = payments;
|
const { meta, data } = payments;
|
||||||
|
|
||||||
// return <pre>{JSON.stringify(payments, null, 2)}</pre>;
|
// return <pre>{JSON.stringify(payments, null, 2)}</pre>;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{data.length === 0 ? (
|
{data.length === 0 ? (
|
||||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||||
<h3>No user payments yet.</h3>
|
<h3>No user payments yet.</h3>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all users.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>Devices paid</TableHead>
|
||||||
<TableHead>Devices paid</TableHead>
|
<TableHead>User</TableHead>
|
||||||
<TableHead>User</TableHead>
|
<TableHead>Amount</TableHead>
|
||||||
<TableHead>Amount</TableHead>
|
<TableHead>Duration</TableHead>
|
||||||
<TableHead>Duration</TableHead>
|
<TableHead>Payment Status</TableHead>
|
||||||
<TableHead>Payment Status</TableHead>
|
<TableHead>Payment Method</TableHead>
|
||||||
<TableHead>Payment Method</TableHead>
|
<TableHead>MIB Reference</TableHead>
|
||||||
<TableHead>MIB Reference</TableHead>
|
<TableHead>Paid At</TableHead>
|
||||||
<TableHead>Paid At</TableHead>
|
<TableHead>Action</TableHead>
|
||||||
<TableHead>Action</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{data.map((payment) => (
|
||||||
{data.map((payment) => (
|
<TableRow
|
||||||
<TableRow
|
className={`${payment.paid && "title-bg dark:bg-black"}`}
|
||||||
className={`${payment.paid && "title-bg dark:bg-black"}`}
|
key={payment.id}
|
||||||
key={payment.id}
|
>
|
||||||
>
|
<TableCell className="font-medium">
|
||||||
<TableCell className="font-medium">
|
<ol className="list-disc list-inside text-sm">
|
||||||
<ol className="list-disc list-inside text-sm">
|
{payment.devices.map((device) => (
|
||||||
{payment.devices.map((device) => (
|
<li
|
||||||
<li
|
key={device.id}
|
||||||
key={device.id}
|
className="text-sm text-muted-foreground"
|
||||||
className="text-sm text-muted-foreground"
|
>
|
||||||
>
|
{device.name}
|
||||||
{device.name}
|
</li>
|
||||||
</li>
|
))}
|
||||||
))}
|
</ol>
|
||||||
</ol>
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell className="font-medium">
|
||||||
<TableCell className="font-medium">
|
{/* {payment.user.id_card} */}
|
||||||
{/* {payment.user.id_card} */}
|
<div className="flex flex-col items-start">
|
||||||
<div className="flex flex-col items-start">
|
{payment?.user?.name}
|
||||||
{payment?.user?.name}
|
<span className="text-muted-foreground">
|
||||||
<span className="text-muted-foreground">
|
{payment?.user?.id_card}
|
||||||
{payment?.user?.id_card}
|
</span>
|
||||||
</span>
|
</div>{" "}
|
||||||
</div>{" "}
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell>{payment.amount} MVR</TableCell>
|
||||||
<TableCell>{payment.amount} MVR</TableCell>
|
<TableCell>{payment.number_of_months} Months</TableCell>
|
||||||
<TableCell>{payment.number_of_months} Months</TableCell>
|
|
||||||
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
{payment.status === "PENDING" ? (
|
{payment.status === "PENDING" ? (
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="bg-yellow-100 text-black"
|
className="bg-yellow-100 text-black"
|
||||||
>
|
>
|
||||||
{payment.status}
|
{payment.status}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : payment.status === "PAID" ? (
|
) : payment.status === "PAID" ? (
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="bg-lime-100 text-black"
|
className="bg-lime-100 text-black"
|
||||||
>
|
>
|
||||||
{payment.status}
|
{payment.status}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="bg-red-100 text-black"
|
className="bg-red-100 text-black"
|
||||||
>
|
>
|
||||||
{payment.status}
|
{payment.status}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>{payment.method}</TableCell>
|
<TableCell>{payment.method}</TableCell>
|
||||||
<TableCell>{payment.mib_reference}</TableCell>
|
<TableCell>{payment.mib_reference}</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
{new Date(payment.paid_at ?? "").toLocaleDateString(
|
{new Date(payment.paid_at ?? "").toLocaleDateString(
|
||||||
"en-US",
|
"en-US",
|
||||||
{
|
{
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
},
|
},
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Link href={`/payments/${payment.id}`}>
|
<Link href={`/payments/${payment.id}`}>
|
||||||
<Button>Details</Button>
|
<Button>Details</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableFooter>
|
<TableFooter>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={10} className="text-muted-foreground">
|
<TableCell colSpan={10} className="text-muted-foreground">
|
||||||
{meta?.total === 1 ? (
|
{meta?.total === 1 ? (
|
||||||
<p className="text-center">Total {meta?.total} payment.</p>
|
<p className="text-center">Total {meta?.total} payment.</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-center">Total {meta?.total} payments.</p>
|
<p className="text-center">Total {meta?.total} payments.</p>
|
||||||
)}{" "}
|
)}{" "}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableFooter>
|
</TableFooter>
|
||||||
</Table>
|
</Table>
|
||||||
<Pagination
|
<Pagination
|
||||||
totalPages={meta?.last_page}
|
totalPages={meta?.last_page}
|
||||||
currentPage={meta?.current_page}
|
currentPage={meta?.current_page}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,14 +2,13 @@ import { redirect } from "next/navigation";
|
|||||||
import { getServerSession } from "next-auth";
|
import { getServerSession } from "next-auth";
|
||||||
import { authOptions } from "@/app/auth";
|
import { authOptions } from "@/app/auth";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import { getDevices } from "@/queries/devices";
|
import { getDevices } from "@/queries/devices";
|
||||||
import { tryCatch } from "@/utils/tryCatch";
|
import { tryCatch } from "@/utils/tryCatch";
|
||||||
@@ -19,107 +18,106 @@ import DeviceCard from "./device-card";
|
|||||||
import Pagination from "./pagination";
|
import Pagination from "./pagination";
|
||||||
|
|
||||||
export async function DevicesTable({
|
export async function DevicesTable({
|
||||||
searchParams,
|
searchParams,
|
||||||
parentalControl,
|
parentalControl,
|
||||||
additionalFilters = {},
|
additionalFilters = {},
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{
|
searchParams: Promise<{
|
||||||
[key: string]: unknown;
|
[key: string]: unknown;
|
||||||
}>;
|
}>;
|
||||||
parentalControl?: boolean;
|
parentalControl?: boolean;
|
||||||
additionalFilters?: Record<string, string | number | boolean>;
|
additionalFilters?: Record<string, string | number | boolean>;
|
||||||
}) {
|
}) {
|
||||||
const resolvedParams = await searchParams;
|
const resolvedParams = await searchParams;
|
||||||
const session = await getServerSession(authOptions);
|
const session = await getServerSession(authOptions);
|
||||||
const isAdmin = session?.user?.is_admin;
|
const isAdmin = session?.user?.is_admin;
|
||||||
|
|
||||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
const offset = (page - 1) * limit;
|
const offset = (page - 1) * limit;
|
||||||
|
|
||||||
// Build params object for getDevices
|
// Build params object for getDevices
|
||||||
const apiParams: Record<string, string | number | undefined> = {};
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const [key, value] of Object.entries(additionalFilters)) {
|
for (const [key, value] of Object.entries(additionalFilters)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
apiParams.limit = limit;
|
apiParams.limit = limit;
|
||||||
apiParams.offset = offset;
|
apiParams.offset = offset;
|
||||||
const [error, devices] = await tryCatch(getDevices(apiParams));
|
const [error, devices] = await tryCatch(getDevices(apiParams));
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message === "UNAUTHORIZED") {
|
if (error.message === "UNAUTHORIZED") {
|
||||||
redirect("/auth/signin");
|
redirect("/auth/signin");
|
||||||
} else {
|
} else {
|
||||||
return <ClientErrorMessage message={error.message} />;
|
return <ClientErrorMessage message={error.message} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { meta, data } = devices;
|
const { meta, data } = devices;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{data?.length === 0 ? (
|
{data?.length === 0 ? (
|
||||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||||
<h3>{parentalControl ? "No active devices" : "No devices."}</h3>
|
<h3>{parentalControl ? "No active devices" : "No devices."}</h3>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="hidden sm:block">
|
<div className="hidden sm:block">
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all devices.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>Device Name</TableHead>
|
||||||
<TableHead>Device Name</TableHead>
|
<TableHead>MAC Address</TableHead>
|
||||||
<TableHead>MAC Address</TableHead>
|
<TableHead>Vendor</TableHead>
|
||||||
<TableHead>Vendor</TableHead>
|
<TableHead>#</TableHead>
|
||||||
<TableHead>#</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{data?.map((device) => (
|
||||||
{data?.map((device) => (
|
<ClickableRow
|
||||||
<ClickableRow
|
admin={isAdmin}
|
||||||
admin={isAdmin}
|
key={device.id}
|
||||||
key={device.id}
|
device={device}
|
||||||
device={device}
|
parentalControl={parentalControl}
|
||||||
parentalControl={parentalControl}
|
/>
|
||||||
/>
|
))}
|
||||||
))}
|
</TableBody>
|
||||||
</TableBody>
|
<TableFooter>
|
||||||
<TableFooter>
|
<TableRow>
|
||||||
<TableRow>
|
<TableCell colSpan={4} className="text-muted-foreground">
|
||||||
<TableCell colSpan={4} className="text-muted-foreground">
|
{meta?.total === 1 ? (
|
||||||
{meta?.total === 1 ? (
|
<p className="text-center">Total {meta?.total} device.</p>
|
||||||
<p className="text-center">Total {meta?.total} device.</p>
|
) : (
|
||||||
) : (
|
<p className="text-center">
|
||||||
<p className="text-center">
|
Total {meta?.total} devices.
|
||||||
Total {meta?.total} devices.
|
</p>
|
||||||
</p>
|
)}
|
||||||
)}
|
</TableCell>
|
||||||
</TableCell>
|
</TableRow>
|
||||||
</TableRow>
|
</TableFooter>
|
||||||
</TableFooter>
|
</Table>
|
||||||
</Table>
|
</div>
|
||||||
</div>
|
<div className="sm:hidden my-4">
|
||||||
<div className="sm:hidden my-4">
|
{data?.map((device) => (
|
||||||
{data?.map((device) => (
|
<DeviceCard
|
||||||
<DeviceCard
|
parentalControl={parentalControl}
|
||||||
parentalControl={parentalControl}
|
key={device.id}
|
||||||
key={device.id}
|
device={device}
|
||||||
device={device}
|
/>
|
||||||
/>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
<Pagination
|
||||||
<Pagination
|
totalPages={meta?.last_page}
|
||||||
totalPages={meta?.last_page}
|
currentPage={meta?.current_page}
|
||||||
currentPage={meta?.current_page}
|
/>
|
||||||
/>
|
</>
|
||||||
</>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,62 +1,63 @@
|
|||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { Minus, Plus } from "lucide-react";
|
import { Minus, Plus } from "lucide-react";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Group,
|
Group,
|
||||||
Input,
|
Input,
|
||||||
Label,
|
Label,
|
||||||
NumberField,
|
NumberField,
|
||||||
} from "react-aria-components";
|
} from "react-aria-components";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
export default function NumberInput({
|
export default function NumberInput({
|
||||||
maxAllowed,
|
maxAllowed,
|
||||||
label,
|
label,
|
||||||
value,
|
value = 100,
|
||||||
onChange,
|
onChange,
|
||||||
className,
|
className,
|
||||||
isDisabled,
|
isDisabled,
|
||||||
}: {
|
}: {
|
||||||
maxAllowed?: number;
|
maxAllowed?: number;
|
||||||
label: string;
|
label: string;
|
||||||
value: number;
|
value?: number;
|
||||||
onChange: (value: number) => void;
|
onChange: (value: number) => void;
|
||||||
className?: string;
|
className?: string;
|
||||||
isDisabled?: boolean;
|
isDisabled?: boolean;
|
||||||
}) {
|
}) {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (maxAllowed) {
|
if (maxAllowed) {
|
||||||
if (value > maxAllowed) {
|
if (value > maxAllowed) {
|
||||||
onChange(maxAllowed);
|
onChange(maxAllowed);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [maxAllowed, value, onChange]);
|
}, [maxAllowed, value, onChange]);
|
||||||
return (
|
|
||||||
<NumberField
|
return (
|
||||||
isDisabled={isDisabled}
|
<NumberField
|
||||||
className={cn(className)}
|
isDisabled={isDisabled}
|
||||||
value={value}
|
className={cn(className)}
|
||||||
minValue={0}
|
value={value}
|
||||||
onChange={onChange}
|
minValue={0}
|
||||||
>
|
onChange={onChange}
|
||||||
<div className="space-y-2">
|
>
|
||||||
<Label className="text-sm font-medium text-foreground">{label}</Label>
|
<div className="space-y-2">
|
||||||
<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">
|
<Label className="text-sm font-medium text-foreground">{label}</Label>
|
||||||
<Button
|
<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">
|
||||||
slot="decrement"
|
<Button
|
||||||
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"
|
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>
|
<Minus size={16} strokeWidth={2} aria-hidden="true" />
|
||||||
<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
|
</Button>
|
||||||
<Button
|
<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
|
||||||
slot="increment"
|
<Button
|
||||||
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"
|
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>
|
<Plus size={16} strokeWidth={2} aria-hidden="true" />
|
||||||
</Group>
|
</Button>
|
||||||
</div>
|
</Group>
|
||||||
</NumberField>
|
</div>
|
||||||
);
|
</NumberField>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,109 +1,113 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
|
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRouter, useSearchParams } from "next/navigation";
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
type PaginationProps = {
|
type PaginationProps = {
|
||||||
totalPages: number;
|
totalPages: number;
|
||||||
currentPage: number;
|
currentPage: number;
|
||||||
maxVisible?: number;
|
maxVisible?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Pagination({
|
export default function Pagination({
|
||||||
totalPages,
|
totalPages,
|
||||||
currentPage,
|
currentPage,
|
||||||
maxVisible = 4,
|
maxVisible = 4,
|
||||||
}: PaginationProps) {
|
}: PaginationProps) {
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const activePage = searchParams.get("page") ?? 1;
|
const activePage = searchParams.get("page") ?? 1;
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
|
const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const params = Object.fromEntries(
|
const params = Object.fromEntries(
|
||||||
Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
|
Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
|
||||||
);
|
);
|
||||||
setQueryParams(params);
|
setQueryParams(params);
|
||||||
}, [searchParams]);
|
}, [searchParams]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!searchParams.has("page")) {
|
if (!searchParams.has("page")) {
|
||||||
router.replace(`?page=1${IncludeQueries()}`);
|
router.replace(`?page=1${IncludeQueries()}`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function IncludeQueries() {
|
function IncludeQueries() {
|
||||||
return Object.entries(queryParams)
|
return Object.entries(queryParams)
|
||||||
.map(([key, value]) => `&${key}=${value}`)
|
.map(([key, value]) => `&${key}=${value}`)
|
||||||
.join("");
|
.join("");
|
||||||
}
|
}
|
||||||
|
|
||||||
const generatePageNumbers = (): (number | string)[] => {
|
const generatePageNumbers = (): (number | string)[] => {
|
||||||
const halfVisible = Math.floor(maxVisible / 2);
|
const halfVisible = Math.floor(maxVisible / 2);
|
||||||
let startPage = Math.max(currentPage - halfVisible, 1);
|
let startPage = Math.max(currentPage - halfVisible, 1);
|
||||||
const endPage = Math.min(startPage + maxVisible - 1, totalPages);
|
const endPage = Math.min(startPage + maxVisible - 1, totalPages);
|
||||||
|
|
||||||
if (endPage - startPage + 1 < maxVisible) {
|
if (endPage - startPage + 1 < maxVisible) {
|
||||||
startPage = Math.max(endPage - maxVisible + 1, 1);
|
startPage = Math.max(endPage - maxVisible + 1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
const pageNumbers: (number | string)[] = [];
|
const pageNumbers: (number | string)[] = [];
|
||||||
|
|
||||||
if (startPage > 1) {
|
if (startPage > 1) {
|
||||||
pageNumbers.push(1);
|
pageNumbers.push(1);
|
||||||
if (startPage > 2) pageNumbers.push("...");
|
if (startPage > 2) pageNumbers.push("...");
|
||||||
}
|
}
|
||||||
|
|
||||||
for (let i = startPage; i <= endPage; i++) {
|
for (let i = startPage; i <= endPage; i++) {
|
||||||
pageNumbers.push(i);
|
pageNumbers.push(i);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (endPage < totalPages) {
|
if (endPage < totalPages) {
|
||||||
if (endPage < totalPages - 1) pageNumbers.push("...");
|
if (endPage < totalPages - 1) pageNumbers.push("...");
|
||||||
pageNumbers.push(totalPages);
|
pageNumbers.push(totalPages);
|
||||||
}
|
}
|
||||||
|
|
||||||
return pageNumbers;
|
return pageNumbers;
|
||||||
};
|
};
|
||||||
|
|
||||||
const pageNumbers = generatePageNumbers();
|
const pageNumbers = generatePageNumbers();
|
||||||
|
|
||||||
return (
|
if (totalPages <= 1) {
|
||||||
<div className="flex items-center justify-center space-x-2 my-4">
|
return null;
|
||||||
{currentPage > 1 && (
|
}
|
||||||
<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
|
|
||||||
<Button variant="secondary" className="flex items-center gap-2">
|
|
||||||
<ArrowLeftIcon className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{pageNumbers.map((page) => (
|
return (
|
||||||
<React.Fragment key={`${page}`}>
|
<div className="flex items-center justify-center space-x-2 my-4">
|
||||||
{typeof page === "number" ? (
|
{currentPage > 1 && (
|
||||||
<Link href={`?page=${page}${IncludeQueries()}`}>
|
<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
|
||||||
<Button
|
<Button variant="secondary" className="flex items-center gap-2">
|
||||||
variant={Number(activePage) === page ? "default" : "outline"}
|
<ArrowLeftIcon className="h-4 w-4" />
|
||||||
>
|
</Button>
|
||||||
{page}
|
</Link>
|
||||||
</Button>
|
)}
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<span className="px-2">...</span>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{currentPage < totalPages && (
|
{pageNumbers.map((page) => (
|
||||||
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
|
<React.Fragment key={`${page}`}>
|
||||||
<Button variant="secondary" className="flex items-center gap-2">
|
{typeof page === "number" ? (
|
||||||
<ArrowRightIcon className="h-4 w-4" />
|
<Link href={`?page=${page}${IncludeQueries()}`}>
|
||||||
</Button>
|
<Button
|
||||||
</Link>
|
variant={Number(activePage) === page ? "default" : "outline"}
|
||||||
)}
|
>
|
||||||
</div>
|
{page}
|
||||||
);
|
</Button>
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<span className="px-2">...</span>
|
||||||
|
)}
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{currentPage < totalPages && (
|
||||||
|
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
|
||||||
|
<Button variant="secondary" className="flex items-center gap-2">
|
||||||
|
<ArrowRightIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,14 +3,13 @@ import Link from "next/link";
|
|||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { getPayments } from "@/actions/payment";
|
import { getPayments } from "@/actions/payment";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import type { Payment } from "@/lib/backend-types";
|
import type { Payment } from "@/lib/backend-types";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
@@ -21,266 +20,265 @@ import { Button } from "./ui/button";
|
|||||||
import { Separator } from "./ui/separator";
|
import { Separator } from "./ui/separator";
|
||||||
|
|
||||||
export async function PaymentsTable({
|
export async function PaymentsTable({
|
||||||
searchParams,
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{
|
searchParams: Promise<{
|
||||||
[key: string]: unknown;
|
[key: string]: unknown;
|
||||||
}>;
|
}>;
|
||||||
}) {
|
}) {
|
||||||
const resolvedParams = await searchParams;
|
const resolvedParams = await searchParams;
|
||||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
const offset = (page - 1) * limit;
|
const offset = (page - 1) * limit;
|
||||||
const apiParams: Record<string, string | number | undefined> = {};
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
apiParams.limit = limit;
|
apiParams.limit = limit;
|
||||||
apiParams.offset = offset;
|
apiParams.offset = offset;
|
||||||
const [error, payments] = await tryCatch(getPayments(apiParams));
|
const [error, payments] = await tryCatch(getPayments(apiParams));
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message.includes("Unauthorized")) {
|
if (error.message.includes("Unauthorized")) {
|
||||||
redirect("/auth/signin");
|
redirect("/auth/signin");
|
||||||
} else {
|
} else {
|
||||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { data, meta } = payments;
|
const { data, meta } = payments;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{data?.length === 0 ? (
|
{data?.length === 0 ? (
|
||||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||||
<h3>No Payments.</h3>
|
<h3>No Payments.</h3>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="hidden sm:block">
|
<div className="hidden sm:block">
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all devices.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>Details</TableHead>
|
||||||
<TableHead>Details</TableHead>
|
<TableHead>Duration</TableHead>
|
||||||
<TableHead>Duration</TableHead>
|
<TableHead>Status</TableHead>
|
||||||
<TableHead>Status</TableHead>
|
<TableHead>Amount</TableHead>
|
||||||
<TableHead>Amount</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{payments?.data?.map((payment) => (
|
||||||
{payments?.data?.map((payment) => (
|
<TableRow key={payment.id}>
|
||||||
<TableRow key={payment.id}>
|
<TableCell>
|
||||||
<TableCell>
|
<div
|
||||||
<div
|
className={cn(
|
||||||
className={cn(
|
"flex flex-col items-start border rounded p-2",
|
||||||
"flex flex-col items-start border rounded p-2",
|
payment?.paid
|
||||||
payment?.paid
|
? "bg-green-500/10 border-dashed border-green-500"
|
||||||
? "bg-green-500/10 border-dashed border-green-500"
|
: payment?.is_expired
|
||||||
: payment?.is_expired
|
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
)}
|
||||||
)}
|
>
|
||||||
>
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<Calendar size={16} opacity={0.5} />
|
||||||
<Calendar size={16} opacity={0.5} />
|
<span className="text-muted-foreground">
|
||||||
<span className="text-muted-foreground">
|
{new Date(payment.created_at).toLocaleDateString(
|
||||||
{new Date(payment.created_at).toLocaleDateString(
|
"en-US",
|
||||||
"en-US",
|
{
|
||||||
{
|
month: "short",
|
||||||
month: "short",
|
day: "2-digit",
|
||||||
day: "2-digit",
|
year: "numeric",
|
||||||
year: "numeric",
|
minute: "2-digit",
|
||||||
minute: "2-digit",
|
hour: "2-digit",
|
||||||
hour: "2-digit",
|
timeZone: "Indian/Maldives", // Force consistent timezone
|
||||||
timeZone: "Indian/Maldives", // Force consistent timezone
|
},
|
||||||
},
|
)}
|
||||||
)}
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2 mt-2">
|
<div className="flex items-center gap-2 mt-2">
|
||||||
<Link
|
<Link
|
||||||
className="font-medium hover:underline"
|
className="font-medium hover:underline"
|
||||||
href={`/payments/${payment.id}`}
|
href={`/payments/${payment.id}`}
|
||||||
>
|
>
|
||||||
<Button size={"sm"} variant="outline">
|
<Button size={"sm"} variant="outline">
|
||||||
View Details
|
View Details
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
||||||
<h3 className="text-sm font-medium">Devices</h3>
|
<h3 className="text-sm font-medium">Devices</h3>
|
||||||
<ol className="list-disc list-inside text-sm">
|
<ol className="list-disc list-inside text-sm">
|
||||||
{payment.devices.map((device) => (
|
{payment.devices.map((device) => (
|
||||||
<li
|
<li
|
||||||
key={device.id}
|
key={device.id}
|
||||||
className="text-sm text-muted-foreground"
|
className="text-sm text-muted-foreground"
|
||||||
>
|
>
|
||||||
{device.name}
|
{device.name}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
||||||
<TableCell className="font-medium">
|
<TableCell className="font-medium">
|
||||||
{payment.number_of_months} Months
|
{payment.number_of_months} Months
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<span className="font-semibold pr-2">
|
<span className="font-semibold pr-2">
|
||||||
{payment.paid ? (
|
{payment.paid ? (
|
||||||
<Badge
|
<Badge
|
||||||
className={cn(
|
className={cn(
|
||||||
payment.status === "PENDING"
|
payment.status === "PENDING"
|
||||||
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
||||||
: "bg-green-100 dark:bg-green-700",
|
: "bg-green-100 dark:bg-green-700",
|
||||||
)}
|
)}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
>
|
>
|
||||||
{payment.status}
|
{payment.status}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : payment.is_expired ? (
|
) : payment.is_expired ? (
|
||||||
<Badge>Expired</Badge>
|
<Badge>Expired</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge variant="outline">{payment.status}</Badge>
|
<Badge variant="outline">{payment.status}</Badge>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<span className="font-semibold pr-2">
|
<span className="font-semibold pr-2">
|
||||||
{payment.amount.toFixed(2)}
|
{payment.amount.toFixed(2)}
|
||||||
</span>
|
</span>
|
||||||
MVR
|
MVR
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableFooter>
|
<TableFooter>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={4} className="text-muted-foreground">
|
<TableCell colSpan={4} className="text-muted-foreground">
|
||||||
{meta?.total === 1 ? (
|
{meta?.total === 1 ? (
|
||||||
<p className="text-center">
|
<p className="text-center">
|
||||||
Total {meta?.total} payment.
|
Total {meta?.total} payment.
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-center">
|
<p className="text-center">
|
||||||
Total {meta?.total} payments.
|
Total {meta?.total} payments.
|
||||||
</p>
|
</p>
|
||||||
)}{" "}
|
)}{" "}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableFooter>
|
</TableFooter>
|
||||||
</Table>
|
</Table>
|
||||||
<Pagination
|
<Pagination
|
||||||
totalPages={meta.last_page}
|
totalPages={meta.last_page}
|
||||||
currentPage={meta.current_page}
|
currentPage={meta.current_page}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="sm:hidden block">
|
<div className="sm:hidden block">
|
||||||
{data.map((payment) => (
|
{data.map((payment) => (
|
||||||
<MobilePaymentDetails key={payment.id} payment={payment} />
|
<MobilePaymentDetails key={payment.id} payment={payment} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MobilePaymentDetails({
|
export function MobilePaymentDetails({
|
||||||
payment,
|
payment,
|
||||||
isAdmin = false,
|
isAdmin = false,
|
||||||
}: {
|
}: {
|
||||||
payment: Payment;
|
payment: Payment;
|
||||||
isAdmin?: boolean;
|
isAdmin?: boolean;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex flex-col items-start border rounded p-2 my-2",
|
"flex flex-col items-start border rounded p-2 my-2",
|
||||||
payment?.paid
|
payment?.paid
|
||||||
? "bg-green-500/10 border-dashed border-green-500"
|
? "bg-green-500/10 border-dashed border-green-500"
|
||||||
: payment?.is_expired
|
: payment?.is_expired
|
||||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Calendar size={16} opacity={0.5} />
|
<Calendar size={16} opacity={0.5} />
|
||||||
<span className="text-muted-foreground text-sm">
|
<span className="text-muted-foreground text-sm">
|
||||||
{new Date(payment.created_at).toLocaleDateString("en-US", {
|
{new Date(payment.created_at).toLocaleDateString("en-US", {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
timeZone: "Indian/Maldives", // Force consistent timezone
|
timeZone: "Indian/Maldives", // Force consistent timezone
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2 mt-2">
|
<div className="flex items-center gap-2 mt-2">
|
||||||
<Link
|
<Link
|
||||||
className="font-medium hover:underline"
|
className="font-medium hover:underline"
|
||||||
href={`/payments/${payment.id}`}
|
href={`/payments/${payment.id}`}
|
||||||
>
|
>
|
||||||
<Button size={"sm"} variant="outline">
|
<Button size={"sm"} variant="outline">
|
||||||
View Details
|
View Details
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
||||||
<h3 className="text-sm font-medium">Devices</h3>
|
<h3 className="text-sm font-medium">Devices</h3>
|
||||||
<ol className="list-disc list-inside text-sm">
|
<ol className="list-disc list-inside text-sm">
|
||||||
{payment.devices.map((device) => (
|
{payment.devices.map((device) => (
|
||||||
<li key={device.id} className="text-sm text-muted-foreground">
|
<li key={device.id} className="text-sm text-muted-foreground">
|
||||||
{device.name}
|
{device.name}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ol>
|
</ol>
|
||||||
<div className="block sm:hidden">
|
<div className="block sm:hidden">
|
||||||
<Separator className="my-2" />
|
<Separator className="my-2" />
|
||||||
<h3 className="text-sm font-medium">Duration</h3>
|
<h3 className="text-sm font-medium">Duration</h3>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
{payment.number_of_months} Months
|
{payment.number_of_months} Months
|
||||||
</span>
|
</span>
|
||||||
<Separator className="my-2" />
|
<Separator className="my-2" />
|
||||||
<h3 className="text-sm font-medium">Amount</h3>
|
<h3 className="text-sm font-medium">Amount</h3>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
{payment.amount.toFixed(2)} MVR
|
{payment.amount.toFixed(2)} MVR
|
||||||
</span>
|
</span>
|
||||||
<span className="font-semibold pr-2">
|
<span className="font-semibold pr-2">
|
||||||
{payment.paid ? (
|
{payment.paid ? (
|
||||||
<Badge
|
<Badge
|
||||||
className={cn(
|
className={cn(
|
||||||
payment.status === "PENDING"
|
payment.status === "PENDING"
|
||||||
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
||||||
: "bg-green-100 dark:bg-green-700",
|
: "bg-green-100 dark:bg-green-700",
|
||||||
)}
|
)}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
>
|
>
|
||||||
{payment.status}
|
{payment.status}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : payment.is_expired ? (
|
) : payment.is_expired ? (
|
||||||
<Badge>Expired</Badge>
|
<Badge>Expired</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge variant="secondary">{payment.status}</Badge>
|
<Badge variant="secondary">{payment.status}</Badge>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<div className="my-2 text-primary flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
|
<div className="my-2 text-primary flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
|
||||||
{payment?.user?.name}
|
{payment?.user?.name}
|
||||||
<span className="text-muted-foreground">
|
<span className="text-muted-foreground">
|
||||||
{payment?.user?.id_card}
|
{payment?.user?.id_card}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,151 +3,155 @@ import { BadgeDollarSign, Loader2 } from "lucide-react";
|
|||||||
import { useActionState, useEffect } from "react";
|
import { useActionState, useEffect } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import {
|
import {
|
||||||
type VerifyTopupPaymentState,
|
type VerifyTopupPaymentState,
|
||||||
verifyTopupPayment,
|
verifyTopupPayment,
|
||||||
} from "@/actions/payment";
|
} from "@/actions/payment";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCaption,
|
||||||
TableCell,
|
TableCell,
|
||||||
TableFooter,
|
TableFooter,
|
||||||
TableRow,
|
TableRow,
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import type { Topup } from "@/lib/backend-types";
|
import type { Topup } from "@/lib/backend-types";
|
||||||
import { AccountInfomation } from "./account-information";
|
import { AccountInfomation } from "./account-information";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
const initialState: VerifyTopupPaymentState = {
|
const initialState: VerifyTopupPaymentState = {
|
||||||
message: "",
|
message: "",
|
||||||
success: false,
|
success: false,
|
||||||
fieldErrors: {},
|
fieldErrors: {},
|
||||||
};
|
};
|
||||||
export default function TopupToPay({
|
export default function TopupToPay({
|
||||||
topup,
|
topup,
|
||||||
disabled,
|
disabled,
|
||||||
}: {
|
}: {
|
||||||
topup?: Topup;
|
topup?: Topup;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const [state, formAction, isPending] = useActionState(
|
const [state, formAction, isPending] = useActionState(
|
||||||
verifyTopupPayment,
|
verifyTopupPayment,
|
||||||
initialState,
|
initialState,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Handle toast notifications based on state changes
|
// Handle toast notifications based on state changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (state.success && state.message) {
|
if (state.success && state.message) {
|
||||||
toast.success("Topup successful!", {
|
toast.success("Topup successful!", {
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
description: state.transaction
|
description: state.transaction
|
||||||
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
|
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
|
||||||
: state.message,
|
: state.message,
|
||||||
});
|
});
|
||||||
} else if (
|
} else if (
|
||||||
!state.success &&
|
!state.success &&
|
||||||
state.message &&
|
state.message &&
|
||||||
state.message !== initialState.message
|
state.message !== initialState.message
|
||||||
) {
|
) {
|
||||||
toast.error("Topup Payment Verification Failed", {
|
toast.error("Topup Payment Verification Failed", {
|
||||||
closeButton: true,
|
closeButton: true,
|
||||||
description: state.message,
|
description: state.message,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [state]);
|
}, [state]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||||
<Table>
|
<Table>
|
||||||
<TableCaption>
|
<TableCaption>
|
||||||
<div className="max-w-sm mx-auto">
|
{!topup?.paid ||
|
||||||
<p>Please send the following amount to the payment address</p>
|
topup?.is_expired ||
|
||||||
<AccountInfomation
|
(topup?.status !== "CANCELLED" && (
|
||||||
accName="Baraveli Dev"
|
<div className="max-w-sm mx-auto">
|
||||||
accountNo="90101400028321000"
|
<p>Please send the following amount to the payment address</p>
|
||||||
/>
|
<AccountInfomation
|
||||||
{topup?.paid ? (
|
accName="Baraveli Dev"
|
||||||
<Button
|
accountNo="90101400028321000"
|
||||||
size={"lg"}
|
/>
|
||||||
variant={"secondary"}
|
{topup?.paid ? (
|
||||||
disabled
|
<Button
|
||||||
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
size={"lg"}
|
||||||
>
|
variant={"secondary"}
|
||||||
Topup Payment Verified
|
disabled
|
||||||
</Button>
|
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||||
) : (
|
>
|
||||||
<div className="flex flex-col gap-2">
|
Topup Payment Verified
|
||||||
<form action={formAction}>
|
</Button>
|
||||||
<input
|
) : (
|
||||||
type="hidden"
|
<div className="flex flex-col gap-2">
|
||||||
name="topupId"
|
<form action={formAction}>
|
||||||
value={topup?.id ?? ""}
|
<input
|
||||||
/>
|
type="hidden"
|
||||||
<Button
|
name="topupId"
|
||||||
disabled={disabled || isPending}
|
value={topup?.id ?? ""}
|
||||||
type="submit"
|
/>
|
||||||
size={"lg"}
|
<Button
|
||||||
className="mb-4 w-full"
|
disabled={disabled || isPending}
|
||||||
>
|
type="submit"
|
||||||
{isPending ? "Processing payment..." : "I have paid"}
|
size={"lg"}
|
||||||
{isPending ? (
|
className="mb-4 w-full"
|
||||||
<Loader2 className="animate-spin" />
|
>
|
||||||
) : (
|
{isPending ? "Processing payment..." : "I have paid"}
|
||||||
<BadgeDollarSign />
|
{isPending ? (
|
||||||
)}
|
<Loader2 className="animate-spin" />
|
||||||
</Button>
|
) : (
|
||||||
</form>
|
<BadgeDollarSign />
|
||||||
</div>
|
)}
|
||||||
)}
|
</Button>
|
||||||
</div>
|
</form>
|
||||||
</TableCaption>
|
</div>
|
||||||
<TableBody className="">
|
)}
|
||||||
<TableRow>
|
</div>
|
||||||
<TableCell>Topup created</TableCell>
|
))}
|
||||||
<TableCell className="text-right text-muted-foreground">
|
</TableCaption>
|
||||||
{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
|
<TableBody className="">
|
||||||
month: "short",
|
<TableRow>
|
||||||
day: "2-digit",
|
<TableCell>Topup created</TableCell>
|
||||||
year: "numeric",
|
<TableCell className="text-right text-muted-foreground">
|
||||||
minute: "2-digit",
|
{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
|
||||||
hour: "2-digit",
|
month: "short",
|
||||||
second: "2-digit",
|
day: "2-digit",
|
||||||
})}
|
year: "numeric",
|
||||||
</TableCell>
|
minute: "2-digit",
|
||||||
</TableRow>
|
hour: "2-digit",
|
||||||
<TableRow>
|
second: "2-digit",
|
||||||
<TableCell>Payment received</TableCell>
|
})}
|
||||||
<TableCell className="text-right text-sarLinkOrange">
|
</TableCell>
|
||||||
{topup?.paid_at
|
</TableRow>
|
||||||
? new Date(topup.paid_at).toLocaleDateString("en-US", {
|
<TableRow>
|
||||||
month: "short",
|
<TableCell>Payment received</TableCell>
|
||||||
day: "2-digit",
|
<TableCell className="text-right text-sarLinkOrange">
|
||||||
year: "numeric",
|
{topup?.paid_at
|
||||||
minute: "2-digit",
|
? new Date(topup.paid_at).toLocaleDateString("en-US", {
|
||||||
hour: "2-digit",
|
month: "short",
|
||||||
second: "2-digit",
|
day: "2-digit",
|
||||||
})
|
year: "numeric",
|
||||||
: "-"}
|
minute: "2-digit",
|
||||||
</TableCell>
|
hour: "2-digit",
|
||||||
</TableRow>
|
second: "2-digit",
|
||||||
<TableRow>
|
})
|
||||||
<TableCell>MIB Reference</TableCell>
|
: "-"}
|
||||||
<TableCell className="text-right">
|
</TableCell>
|
||||||
{topup?.mib_reference ? topup.mib_reference : "-"}
|
</TableRow>
|
||||||
</TableCell>
|
<TableRow>
|
||||||
</TableRow>
|
<TableCell>MIB Reference</TableCell>
|
||||||
</TableBody>
|
<TableCell className="text-right">
|
||||||
<TableFooter>
|
{topup?.mib_reference ? topup.mib_reference : "-"}
|
||||||
<TableRow className="">
|
</TableCell>
|
||||||
<TableCell colSpan={1}>Total Due</TableCell>
|
</TableRow>
|
||||||
<TableCell className="text-right text-3xl font-bold">
|
</TableBody>
|
||||||
{topup?.amount?.toFixed(2)}
|
<TableFooter>
|
||||||
</TableCell>
|
<TableRow className="">
|
||||||
</TableRow>
|
<TableCell colSpan={1}>Total Due</TableCell>
|
||||||
</TableFooter>
|
<TableCell className="text-right text-3xl font-bold">
|
||||||
</Table>
|
{topup?.amount?.toFixed(2)}
|
||||||
</div>
|
</TableCell>
|
||||||
</div>
|
</TableRow>
|
||||||
);
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,14 +3,13 @@ import Link from "next/link";
|
|||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { getTopups } from "@/actions/payment";
|
import { getTopups } from "@/actions/payment";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import type { Topup } from "@/lib/backend-types";
|
import type { Topup } from "@/lib/backend-types";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
@@ -20,200 +19,199 @@ import { Badge } from "./ui/badge";
|
|||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
export async function TopupsTable({
|
export async function TopupsTable({
|
||||||
searchParams,
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{
|
searchParams: Promise<{
|
||||||
[key: string]: unknown;
|
[key: string]: unknown;
|
||||||
}>;
|
}>;
|
||||||
}) {
|
}) {
|
||||||
const resolvedParams = await searchParams;
|
const resolvedParams = await searchParams;
|
||||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
const offset = (page - 1) * limit;
|
const offset = (page - 1) * limit;
|
||||||
// Build params object
|
// Build params object
|
||||||
const apiParams: Record<string, string | number | undefined> = {};
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
apiParams.limit = limit;
|
apiParams.limit = limit;
|
||||||
apiParams.offset = offset;
|
apiParams.offset = offset;
|
||||||
const [error, topups] = await tryCatch(getTopups(apiParams));
|
const [error, topups] = await tryCatch(getTopups(apiParams));
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message.includes("Unauthorized")) {
|
if (error.message.includes("Unauthorized")) {
|
||||||
redirect("/auth/signin");
|
redirect("/auth/signin");
|
||||||
} else {
|
} else {
|
||||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { data, meta } = topups;
|
const { data, meta } = topups;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{data?.length === 0 ? (
|
{data?.length === 0 ? (
|
||||||
<div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
|
<div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
|
||||||
<h3>No topups.</h3>
|
<h3>No topups.</h3>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className="hidden sm:block">
|
<div className="hidden sm:block">
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all topups.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>Details</TableHead>
|
||||||
<TableHead>Details</TableHead>
|
<TableHead>Status</TableHead>
|
||||||
<TableHead>Status</TableHead>
|
<TableHead>Amount</TableHead>
|
||||||
<TableHead>Amount</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{topups?.data?.map((topup) => (
|
||||||
{topups?.data?.map((topup) => (
|
<TableRow key={topup.id}>
|
||||||
<TableRow key={topup.id}>
|
<TableCell>
|
||||||
<TableCell>
|
<div
|
||||||
<div
|
className={cn(
|
||||||
className={cn(
|
"flex flex-col items-start border rounded p-2",
|
||||||
"flex flex-col items-start border rounded p-2",
|
topup?.paid
|
||||||
topup?.paid
|
? "bg-green-500/10 border-dashed border-green-500"
|
||||||
? "bg-green-500/10 border-dashed border-green-500"
|
: topup?.is_expired
|
||||||
: topup?.is_expired
|
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
)}
|
||||||
)}
|
>
|
||||||
>
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex items-center gap-2">
|
<Calendar size={16} opacity={0.5} />
|
||||||
<Calendar size={16} opacity={0.5} />
|
<span className="text-muted-foreground">
|
||||||
<span className="text-muted-foreground">
|
{new Date(topup.created_at).toLocaleDateString(
|
||||||
{new Date(topup.created_at).toLocaleDateString(
|
"en-US",
|
||||||
"en-US",
|
{
|
||||||
{
|
month: "short",
|
||||||
month: "short",
|
day: "2-digit",
|
||||||
day: "2-digit",
|
year: "numeric",
|
||||||
year: "numeric",
|
minute: "2-digit",
|
||||||
minute: "2-digit",
|
hour: "2-digit",
|
||||||
hour: "2-digit",
|
},
|
||||||
},
|
)}
|
||||||
)}
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2 mt-2">
|
<div className="flex items-center gap-2 mt-2">
|
||||||
<Link
|
<Link
|
||||||
className="font-medium hover:underline"
|
className="font-medium hover:underline"
|
||||||
href={`/top-ups/${topup.id}`}
|
href={`/top-ups/${topup.id}`}
|
||||||
>
|
>
|
||||||
<Button size={"sm"} variant="outline">
|
<Button size={"sm"} variant="outline">
|
||||||
View Details
|
View Details
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<span className="font-semibold pr-2">
|
<span className="font-semibold pr-2">
|
||||||
{topup.paid ? (
|
{topup.paid ? (
|
||||||
<Badge
|
<Badge
|
||||||
className="bg-green-100 dark:bg-green-700"
|
className="bg-green-100 dark:bg-green-700"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
>
|
>
|
||||||
{topup.status}
|
{topup.status}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : topup.is_expired ? (
|
) : topup.is_expired ? (
|
||||||
<Badge>Expired</Badge>
|
<Badge>Expired</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge variant="outline">{topup.status}</Badge>
|
<Badge variant="outline">{topup.status}</Badge>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<span className="font-semibold pr-2">
|
<span className="font-semibold pr-2">
|
||||||
{topup.amount.toFixed(2)}
|
{topup.amount.toFixed(2)}
|
||||||
</span>
|
</span>
|
||||||
MVR
|
MVR
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableFooter>
|
<TableFooter>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={4} className="text-muted-foreground">
|
<TableCell colSpan={4} className="text-muted-foreground">
|
||||||
{meta?.total === 1 ? (
|
{meta?.total === 1 ? (
|
||||||
<p className="text-center">Total {meta?.total} topup.</p>
|
<p className="text-center">Total {meta?.total} topup.</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-center">Total {meta?.total} topups.</p>
|
<p className="text-center">Total {meta?.total} topups.</p>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableFooter>
|
</TableFooter>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
<div className="sm:hidden block">
|
<div className="sm:hidden block">
|
||||||
{data.map((topup) => (
|
{data.map((topup) => (
|
||||||
<MobileTopupDetails key={topup.id} topup={topup} />
|
<MobileTopupDetails key={topup.id} topup={topup} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<Pagination
|
<Pagination
|
||||||
totalPages={meta?.last_page}
|
totalPages={meta?.last_page}
|
||||||
currentPage={meta?.current_page}
|
currentPage={meta?.current_page}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MobileTopupDetails({ topup }: { topup: Topup }) {
|
function MobileTopupDetails({ topup }: { topup: Topup }) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex flex-col items-start border rounded p-2 my-2",
|
"flex flex-col items-start border rounded p-2 my-2",
|
||||||
topup?.paid
|
topup?.paid
|
||||||
? "bg-green-500/10 border-dashed border-green=500"
|
? "bg-green-500/10 border-dashed border-green=500"
|
||||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Calendar size={16} opacity={0.5} />
|
<Calendar size={16} opacity={0.5} />
|
||||||
<span className="text-muted-foreground text-sm">
|
<span className="text-muted-foreground text-sm">
|
||||||
{new Date(topup.created_at).toLocaleDateString("en-US", {
|
{new Date(topup.created_at).toLocaleDateString("en-US", {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center gap-2 mt-2">
|
<div className="flex items-center gap-2 mt-2">
|
||||||
<Link
|
<Link
|
||||||
className="font-medium hover:underline"
|
className="font-medium hover:underline"
|
||||||
href={`/top-ups/${topup.id}`}
|
href={`/top-ups/${topup.id}`}
|
||||||
>
|
>
|
||||||
<Button size={"sm"} variant="outline">
|
<Button size={"sm"} variant="outline">
|
||||||
View Details
|
View Details
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
||||||
<div className="block sm:hidden">
|
<div className="block sm:hidden">
|
||||||
<h3 className="text-sm font-medium">Amount</h3>
|
<h3 className="text-sm font-medium">Amount</h3>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
{topup.amount.toFixed(2)} MVR
|
{topup.amount.toFixed(2)} MVR
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="font-semibold pr-2">
|
<span className="font-semibold pr-2">
|
||||||
{topup.paid ? (
|
{topup.paid ? (
|
||||||
<Badge className="bg-green-100 dark:bg-green-700" variant="outline">
|
<Badge className="bg-green-100 dark:bg-green-700" variant="outline">
|
||||||
{topup.status}
|
{topup.status}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : topup.is_expired ? (
|
) : topup.is_expired ? (
|
||||||
<Badge>Expired</Badge>
|
<Badge>Expired</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge variant="secondary">{topup.status}</Badge>
|
<Badge variant="secondary">{topup.status}</Badge>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,18 +1,3 @@
|
|||||||
// import {
|
|
||||||
// Table,
|
|
||||||
// TableBody,
|
|
||||||
// TableCaption,
|
|
||||||
// TableCell,
|
|
||||||
// TableFooter,
|
|
||||||
// TableHead,
|
|
||||||
// TableHeader,
|
|
||||||
// TableRow,
|
|
||||||
// } from "@/components/ui/table";
|
|
||||||
// import Link from "next/link";
|
|
||||||
// import Pagination from "./pagination";
|
|
||||||
// import { Badge } from "./ui/badge";
|
|
||||||
// import { Button } from "./ui/button";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { getUsers } from "@/queries/users";
|
import { getUsers } from "@/queries/users";
|
||||||
@@ -22,136 +7,134 @@ import Pagination from "./pagination";
|
|||||||
import { Badge } from "./ui/badge";
|
import { Badge } from "./ui/badge";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "./ui/table";
|
} from "./ui/table";
|
||||||
|
|
||||||
export async function UsersTable({
|
export async function UsersTable({
|
||||||
searchParams,
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{
|
searchParams: Promise<{
|
||||||
[key: string]: unknown;
|
[key: string]: unknown;
|
||||||
}>;
|
}>;
|
||||||
}) {
|
}) {
|
||||||
const resolvedParams = await searchParams;
|
const resolvedParams = await searchParams;
|
||||||
|
|
||||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
const offset = (page - 1) * limit;
|
const offset = (page - 1) * limit;
|
||||||
const apiParams: Record<string, string | number | undefined> = {};
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
apiParams.limit = limit;
|
apiParams.limit = limit;
|
||||||
apiParams.offset = offset;
|
apiParams.offset = offset;
|
||||||
const [error, users] = await tryCatch(getUsers(apiParams));
|
const [error, users] = await tryCatch(getUsers(apiParams));
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message === "UNAUTHORIZED") {
|
if (error.message === "UNAUTHORIZED") {
|
||||||
redirect("/auth/signin");
|
redirect("/auth/signin");
|
||||||
}
|
}
|
||||||
return <ClientErrorMessage message={error.message} />;
|
return <ClientErrorMessage message={error.message} />;
|
||||||
}
|
}
|
||||||
const { meta, data } = users;
|
const { meta, data } = users;
|
||||||
|
|
||||||
// return null;
|
// return null;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{users?.data.length === 0 ? (
|
{users?.data.length === 0 ? (
|
||||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||||
<h3>No Users yet.</h3>
|
<h3>No Users yet.</h3>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all users.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>Name</TableHead>
|
||||||
<TableHead>Name</TableHead>
|
<TableHead>ID Card</TableHead>
|
||||||
<TableHead>ID Card</TableHead>
|
<TableHead>Atoll</TableHead>
|
||||||
<TableHead>Atoll</TableHead>
|
<TableHead>Island</TableHead>
|
||||||
<TableHead>Island</TableHead>
|
<TableHead>House Name</TableHead>
|
||||||
<TableHead>House Name</TableHead>
|
<TableHead>Status</TableHead>
|
||||||
<TableHead>Status</TableHead>
|
<TableHead>Dob</TableHead>
|
||||||
<TableHead>Dob</TableHead>
|
<TableHead>Phone Number</TableHead>
|
||||||
<TableHead>Phone Number</TableHead>
|
<TableHead>Action</TableHead>
|
||||||
<TableHead>Action</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{data.map((user) => (
|
||||||
{data.map((user) => (
|
<TableRow
|
||||||
<TableRow
|
className={`${user.verified && "title-bg dark:bg-black"}`}
|
||||||
className={`${user.verified && "title-bg dark:bg-black"}`}
|
key={user.id}
|
||||||
key={user.id}
|
>
|
||||||
>
|
<TableCell className="font-medium">
|
||||||
<TableCell className="font-medium">
|
{user.first_name} {user.last_name}
|
||||||
{user.first_name} {user.last_name}
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell className="font-medium">{user.id_card}</TableCell>
|
||||||
<TableCell className="font-medium">{user.id_card}</TableCell>
|
<TableCell>{user.atoll?.name}</TableCell>
|
||||||
<TableCell>{user.atoll?.name}</TableCell>
|
<TableCell>{user.island?.name}</TableCell>
|
||||||
<TableCell>{user.island?.name}</TableCell>
|
<TableCell>{user.address}</TableCell>
|
||||||
<TableCell>{user.address}</TableCell>
|
|
||||||
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
{user.verified ? (
|
{user.verified ? (
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="bg-lime-100 text-black"
|
className="bg-lime-100 text-black"
|
||||||
>
|
>
|
||||||
Verified
|
Verified
|
||||||
</Badge>
|
</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge
|
<Badge
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="bg-yellow-100 text-black"
|
className="bg-yellow-100 text-black"
|
||||||
>
|
>
|
||||||
Unverified
|
Unverified
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
{new Date(user.dob ?? "").toLocaleDateString("en-US", {
|
{new Date(user.dob ?? "").toLocaleDateString("en-US", {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
})}
|
})}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
||||||
<TableCell>{user.mobile}</TableCell>
|
<TableCell>{user.mobile}</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Link href={`/users/${user.id}/details`}>
|
<Link href={`/users/${user.id}/details`}>
|
||||||
<Button>Details</Button>
|
<Button>Details</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableFooter>
|
<TableFooter>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={9}>
|
<TableCell colSpan={9}>
|
||||||
{meta?.total === 1 ? (
|
{meta?.total === 1 ? (
|
||||||
<p className="text-center">Total {meta?.total} user.</p>
|
<p className="text-center">Total {meta?.total} user.</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-center">Total {meta?.total} users.</p>
|
<p className="text-center">Total {meta?.total} users.</p>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableFooter>
|
</TableFooter>
|
||||||
</Table>
|
</Table>
|
||||||
<Pagination
|
<Pagination
|
||||||
totalPages={meta?.last_page}
|
totalPages={meta?.last_page}
|
||||||
currentPage={meta?.current_page}
|
currentPage={meta?.current_page}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,14 +2,13 @@ import { Calendar } from "lucide-react";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import {
|
import {
|
||||||
Table,
|
Table,
|
||||||
TableBody,
|
TableBody,
|
||||||
TableCaption,
|
TableCell,
|
||||||
TableCell,
|
TableFooter,
|
||||||
TableFooter,
|
TableHead,
|
||||||
TableHead,
|
TableHeader,
|
||||||
TableHeader,
|
TableRow,
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import type { WalletTransaction } from "@/lib/backend-types";
|
import type { WalletTransaction } from "@/lib/backend-types";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
@@ -20,224 +19,223 @@ import { Badge } from "./ui/badge";
|
|||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
export async function WalletTransactionsTable({
|
export async function WalletTransactionsTable({
|
||||||
searchParams,
|
searchParams,
|
||||||
}: {
|
}: {
|
||||||
searchParams: Promise<{
|
searchParams: Promise<{
|
||||||
[key: string]: unknown;
|
[key: string]: unknown;
|
||||||
}>;
|
}>;
|
||||||
}) {
|
}) {
|
||||||
const resolvedParams = await searchParams;
|
const resolvedParams = await searchParams;
|
||||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||||
const limit = 10;
|
const limit = 10;
|
||||||
const offset = (page - 1) * limit;
|
const offset = (page - 1) * limit;
|
||||||
// Build params object
|
// Build params object
|
||||||
const apiParams: Record<string, string | number | undefined> = {};
|
const apiParams: Record<string, string | number | undefined> = {};
|
||||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||||
if (value !== undefined && value !== "") {
|
if (value !== undefined && value !== "") {
|
||||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
apiParams.limit = limit;
|
apiParams.limit = limit;
|
||||||
apiParams.offset = offset;
|
apiParams.offset = offset;
|
||||||
const [error, transactions] = await tryCatch(
|
const [error, transactions] = await tryCatch(
|
||||||
getWaleltTransactions(apiParams),
|
getWaleltTransactions(apiParams),
|
||||||
);
|
);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
if (error.message.includes("Unauthorized")) {
|
if (error.message.includes("Unauthorized")) {
|
||||||
redirect("/auth/signin");
|
redirect("/auth/signin");
|
||||||
} else {
|
} else {
|
||||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const { data, meta } = transactions;
|
const { data, meta } = transactions;
|
||||||
const totalDebit = data.reduce(
|
const totalDebit = data.reduce(
|
||||||
(acc, trx) => acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
|
(acc, trx) => acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
|
||||||
0,
|
0,
|
||||||
);
|
);
|
||||||
const totalCredit = data.reduce(
|
const totalCredit = data.reduce(
|
||||||
(acc, trx) => acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
|
(acc, trx) => acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
|
||||||
0,
|
0,
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{data?.length === 0 ? (
|
{data?.length === 0 ? (
|
||||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||||
<h3>No transactions yet.</h3>
|
<h3>No transactions yet.</h3>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex gap-4 mb-4 w-full">
|
<div className="flex gap-4 mb-4 w-full">
|
||||||
<div className="bg-red-400 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
|
<div className="bg-red-400 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
|
||||||
<h5 className="text-lg font-semibold">Total Debit</h5>
|
<h5 className="text-lg font-semibold">Total Debit</h5>
|
||||||
<p>{totalDebit.toFixed(2)} MVR</p>
|
<p>{totalDebit.toFixed(2)} MVR</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-green-400 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 p-2 px-4 rounded-md mb-2">
|
<div className="bg-green-400 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 p-2 px-4 rounded-md mb-2">
|
||||||
<h5 className="text-lg font-semibold">Total Credit</h5>
|
<h5 className="text-lg font-semibold">Total Credit</h5>
|
||||||
<p>{totalCredit.toFixed(2)} MVR</p>
|
<p>{totalCredit.toFixed(2)} MVR</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden sm:block">
|
<div className="hidden sm:block">
|
||||||
<Table className="overflow-scroll">
|
<Table className="overflow-scroll">
|
||||||
<TableCaption>Table of all transactions.</TableCaption>
|
<TableHeader>
|
||||||
<TableHeader>
|
<TableRow>
|
||||||
<TableRow>
|
<TableHead>Description</TableHead>
|
||||||
<TableHead>Description</TableHead>
|
<TableHead>Amount</TableHead>
|
||||||
<TableHead>Amount</TableHead>
|
<TableHead>Transaction Type</TableHead>
|
||||||
<TableHead>Transaction Type</TableHead>
|
<TableHead>View Details</TableHead>
|
||||||
<TableHead>View Details</TableHead>
|
<TableHead>Created at</TableHead>
|
||||||
<TableHead>Created at</TableHead>
|
</TableRow>
|
||||||
</TableRow>
|
</TableHeader>
|
||||||
</TableHeader>
|
<TableBody className="overflow-scroll">
|
||||||
<TableBody className="overflow-scroll">
|
{transactions?.data?.map((trx) => (
|
||||||
{transactions?.data?.map((trx) => (
|
<TableRow
|
||||||
<TableRow
|
className={cn(
|
||||||
className={cn(
|
"items-start border rounded p-2",
|
||||||
"items-start border rounded p-2",
|
trx?.transaction_type === "TOPUP"
|
||||||
trx?.transaction_type === "TOPUP"
|
? "credit-bg"
|
||||||
? "credit-bg"
|
: "debit-bg",
|
||||||
: "debit-bg",
|
)}
|
||||||
)}
|
key={trx.id}
|
||||||
key={trx.id}
|
>
|
||||||
>
|
<TableCell>
|
||||||
<TableCell>
|
<span className="text-muted-foreground">
|
||||||
<span className="text-muted-foreground">
|
{trx.description}
|
||||||
{trx.description}
|
</span>
|
||||||
</span>
|
</TableCell>
|
||||||
</TableCell>
|
<TableCell>{trx.amount.toFixed(2)} MVR</TableCell>
|
||||||
<TableCell>{trx.amount.toFixed(2)} MVR</TableCell>
|
|
||||||
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<span className="font-semibold pr-2">
|
<span className="font-semibold pr-2">
|
||||||
{trx.transaction_type === "TOPUP" ? (
|
{trx.transaction_type === "TOPUP" ? (
|
||||||
<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
|
<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
|
||||||
{trx.transaction_type}
|
{trx.transaction_type}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
|
<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
|
||||||
{trx.transaction_type}
|
{trx.transaction_type}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<span className="">
|
<span className="">
|
||||||
{new Date(trx.created_at).toLocaleDateString("en-US", {
|
{new Date(trx.created_at).toLocaleDateString("en-US", {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Button>
|
<Button>
|
||||||
<Link
|
<Link
|
||||||
className="font-medium "
|
className="font-medium "
|
||||||
href={
|
href={
|
||||||
trx.transaction_type === "TOPUP"
|
trx.transaction_type === "TOPUP"
|
||||||
? `/top-ups/${trx.reference_id}`
|
? `/top-ups/${trx.reference_id}`
|
||||||
: `/payments/${trx.reference_id}`
|
: `/payments/${trx.reference_id}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
View Details
|
View Details
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</TableBody>
|
||||||
<TableFooter>
|
<TableFooter>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell colSpan={5} className="text-muted-foreground">
|
<TableCell colSpan={5} className="text-muted-foreground">
|
||||||
{meta?.total === 1 ? (
|
{meta?.total === 1 ? (
|
||||||
<p className="text-center">
|
<p className="text-center">
|
||||||
Total {meta?.total} transaction.
|
Total {meta?.total} transaction.
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="text-center">
|
<p className="text-center">
|
||||||
Total {meta?.total} transactions.
|
Total {meta?.total} transactions.
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableFooter>
|
</TableFooter>
|
||||||
</Table>
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
<div className="sm:hidden block">
|
<div className="sm:hidden block">
|
||||||
{data.map((trx) => (
|
{data.map((trx) => (
|
||||||
<MobileTransactionDetails key={trx.id} trx={trx} />
|
<MobileTransactionDetails key={trx.id} trx={trx} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<Pagination
|
<Pagination
|
||||||
totalPages={meta?.last_page}
|
totalPages={meta?.last_page}
|
||||||
currentPage={meta?.current_page}
|
currentPage={meta?.current_page}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
|
function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex flex-col items-start border rounded p-2 my-2",
|
"flex flex-col items-start border rounded p-2 my-2",
|
||||||
trx?.transaction_type === "TOPUP" ? "credit-bg" : "debit-bg",
|
trx?.transaction_type === "TOPUP" ? "credit-bg" : "debit-bg",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="bg-white shadow dark:bg-black p-2 rounded w-full">
|
<div className="bg-white shadow dark:bg-black p-2 rounded w-full">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Calendar size={16} opacity={0.5} />
|
<Calendar size={16} opacity={0.5} />
|
||||||
<span className="text-muted-foreground text-sm">
|
<span className="text-muted-foreground text-sm">
|
||||||
{new Date(trx.created_at).toLocaleDateString("en-US", {
|
{new Date(trx.created_at).toLocaleDateString("en-US", {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
minute: "2-digit",
|
minute: "2-digit",
|
||||||
hour: "2-digit",
|
hour: "2-digit",
|
||||||
})}
|
})}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-muted-foreground py-4">{trx.description}</p>
|
<p className="text-sm text-muted-foreground py-4">{trx.description}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
||||||
<div className="block sm:hidden">
|
<div className="block sm:hidden">
|
||||||
<h3 className="text-sm font-medium">Amount</h3>
|
<h3 className="text-sm font-medium">Amount</h3>
|
||||||
<span className="text-sm text-muted-foreground">
|
<span className="text-sm text-muted-foreground">
|
||||||
{trx.amount.toFixed(2)} MVR
|
{trx.amount.toFixed(2)} MVR
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="font-semibold pr-2">
|
<span className="font-semibold pr-2">
|
||||||
{trx.transaction_type === "TOPUP" ? (
|
{trx.transaction_type === "TOPUP" ? (
|
||||||
<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
|
<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
|
||||||
{trx.transaction_type}
|
{trx.transaction_type}
|
||||||
</Badge>
|
</Badge>
|
||||||
) : (
|
) : (
|
||||||
<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
|
<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
|
||||||
{trx.transaction_type}
|
{trx.transaction_type}
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2 mt-2 w-full">
|
<div className="flex items-center gap-2 mt-2 w-full">
|
||||||
<Link
|
<Link
|
||||||
className="font-medium hover:underline"
|
className="font-medium hover:underline"
|
||||||
href={
|
href={
|
||||||
trx.transaction_type === "TOPUP"
|
trx.transaction_type === "TOPUP"
|
||||||
? `/top-ups/${trx.reference_id}`
|
? `/top-ups/${trx.reference_id}`
|
||||||
: `/payments/${trx.reference_id}`
|
: `/payments/${trx.reference_id}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Button size={"sm"} className="w-full">
|
<Button size={"sm"} className="w-full">
|
||||||
View Details
|
View Details
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,101 +7,100 @@ import { toast } from "sonner";
|
|||||||
import { createTopup } from "@/actions/payment";
|
import { createTopup } from "@/actions/payment";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
Drawer,
|
Drawer,
|
||||||
DrawerClose,
|
DrawerClose,
|
||||||
DrawerContent,
|
DrawerContent,
|
||||||
DrawerDescription,
|
DrawerDescription,
|
||||||
DrawerFooter,
|
DrawerFooter,
|
||||||
DrawerHeader,
|
DrawerHeader,
|
||||||
DrawerTitle,
|
DrawerTitle,
|
||||||
DrawerTrigger,
|
DrawerTrigger,
|
||||||
} from "@/components/ui/drawer";
|
} from "@/components/ui/drawer";
|
||||||
import { WalletDrawerOpenAtom, walletTopUpValue } from "@/lib/atoms";
|
import { WalletDrawerOpenAtom, walletTopUpValue } from "@/lib/atoms";
|
||||||
import type { TopupType } from "@/lib/types";
|
import type { TopupType } from "@/lib/types";
|
||||||
import NumberInput from "./number-input";
|
import NumberInput from "./number-input";
|
||||||
|
|
||||||
export function Wallet({ walletBalance }: { walletBalance: number }) {
|
export function Wallet({ walletBalance }: { walletBalance: number }) {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const [amount, setAmount] = useAtom(walletTopUpValue);
|
const [amount, setAmount] = useAtom(walletTopUpValue);
|
||||||
const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
|
const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
|
||||||
const [disabled, setDisabled] = useState(false);
|
const [disabled, setDisabled] = useState(false);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
if (pathname === "/payment") {
|
if (pathname === "/payment") {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const data: TopupType = {
|
const data: TopupType = {
|
||||||
amount: Number.parseFloat(amount.toFixed(2)),
|
amount: Number.parseFloat(amount.toFixed(2)),
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||||
<DrawerTrigger asChild>
|
<DrawerTrigger asChild>
|
||||||
<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
|
<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
|
||||||
{walletBalance}{" "}
|
{walletBalance} MVR
|
||||||
MVR
|
<Wallet2 />
|
||||||
<Wallet2 />
|
</Button>
|
||||||
</Button>
|
</DrawerTrigger>
|
||||||
</DrawerTrigger>
|
<DrawerContent>
|
||||||
<DrawerContent>
|
<div className="mx-auto w-full max-w-sm">
|
||||||
<div className="mx-auto w-full max-w-sm">
|
<DrawerHeader>
|
||||||
<DrawerHeader>
|
<DrawerTitle>Wallet</DrawerTitle>
|
||||||
<DrawerTitle>Wallet</DrawerTitle>
|
<DrawerDescription asChild>
|
||||||
<DrawerDescription asChild>
|
<div>
|
||||||
<div>
|
Your wallet balance is{" "}
|
||||||
Your wallet balance is{" "}
|
<span className="font-semibold">
|
||||||
<span className="font-semibold">
|
{new Intl.NumberFormat("en-US", {
|
||||||
{new Intl.NumberFormat("en-US", {
|
minimumFractionDigits: 2,
|
||||||
minimumFractionDigits: 2,
|
maximumFractionDigits: 2,
|
||||||
maximumFractionDigits: 2,
|
}).format(walletBalance)}
|
||||||
}).format(walletBalance)}
|
</span>{" "}
|
||||||
</span>{" "}
|
</div>
|
||||||
</div>
|
</DrawerDescription>
|
||||||
</DrawerDescription>
|
</DrawerHeader>
|
||||||
</DrawerHeader>
|
|
||||||
|
|
||||||
<div className="px-4 flex flex-col gap-4">
|
<div className="px-4 flex flex-col gap-4">
|
||||||
<NumberInput
|
<NumberInput
|
||||||
label="Set amount to top up"
|
label="Set amount to top up"
|
||||||
value={amount}
|
value={amount}
|
||||||
onChange={(value) => setAmount(value)}
|
onChange={(value) => setAmount(value)}
|
||||||
maxAllowed={5000}
|
maxAllowed={5000}
|
||||||
isDisabled={amount === 0}
|
isDisabled={amount === 0}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<DrawerFooter>
|
<DrawerFooter>
|
||||||
<Button
|
<Button
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
setDisabled(true);
|
setDisabled(true);
|
||||||
const topup = await createTopup(data);
|
const topup = await createTopup(data);
|
||||||
setDisabled(false);
|
setDisabled(false);
|
||||||
if (topup) {
|
if (topup) {
|
||||||
router.push(`/top-ups/${topup.id}`);
|
router.push(`/top-ups/${topup.id}`);
|
||||||
setIsOpen(!isOpen);
|
setIsOpen(!isOpen);
|
||||||
} else {
|
} else {
|
||||||
toast.error("Something went wrong.");
|
toast.error("Something went wrong.");
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="w-full"
|
className="w-full"
|
||||||
disabled={amount === 0 || disabled}
|
disabled={amount === 0 || disabled}
|
||||||
>
|
>
|
||||||
{disabled ? (
|
{disabled ? (
|
||||||
<Loader2 className="ml-2 animate-spin" />
|
<Loader2 className="ml-2 animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
Go to payment
|
Go to payment
|
||||||
<CircleDollarSign />
|
<CircleDollarSign />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
<DrawerClose asChild>
|
<DrawerClose asChild>
|
||||||
<Button variant="outline">Cancel</Button>
|
<Button variant="outline">Cancel</Button>
|
||||||
</DrawerClose>
|
</DrawerClose>
|
||||||
</DrawerFooter>
|
</DrawerFooter>
|
||||||
</div>
|
</div>
|
||||||
</DrawerContent>
|
</DrawerContent>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
22
lib/atoms.ts
22
lib/atoms.ts
@@ -10,7 +10,7 @@ export const discountPercentageAtom = atom(75);
|
|||||||
export const numberOfDevicesAtom = atom(1);
|
export const numberOfDevicesAtom = atom(1);
|
||||||
export const numberOfDaysAtom = atom(30);
|
export const numberOfDaysAtom = atom(30);
|
||||||
export const numberOfMonths = atom(1);
|
export const numberOfMonths = atom(1);
|
||||||
export const walletTopUpValue = atom(1);
|
export const walletTopUpValue = atom(100);
|
||||||
export const formulaResultAtom = atom("");
|
export const formulaResultAtom = atom("");
|
||||||
export const deviceCartAtom = atom<Device[]>([]);
|
export const deviceCartAtom = atom<Device[]>([]);
|
||||||
export const cartDrawerOpenAtom = atom(false);
|
export const cartDrawerOpenAtom = atom(false);
|
||||||
@@ -19,14 +19,14 @@ export const loadingDevicesToPayAtom = atom(false);
|
|||||||
|
|
||||||
// Export the atoms with their store
|
// Export the atoms with their store
|
||||||
export const atoms = {
|
export const atoms = {
|
||||||
initialPriceAtom,
|
initialPriceAtom,
|
||||||
discountPercentageAtom,
|
discountPercentageAtom,
|
||||||
numberOfDevicesAtom,
|
numberOfDevicesAtom,
|
||||||
numberOfDaysAtom,
|
numberOfDaysAtom,
|
||||||
numberOfMonths,
|
numberOfMonths,
|
||||||
formulaResultAtom,
|
formulaResultAtom,
|
||||||
deviceCartAtom,
|
deviceCartAtom,
|
||||||
cartDrawerOpenAtom,
|
cartDrawerOpenAtom,
|
||||||
walletTopUpValue,
|
walletTopUpValue,
|
||||||
loadingDevicesToPayAtom,
|
loadingDevicesToPayAtom,
|
||||||
};
|
};
|
||||||
|
|||||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "sarlink-portal",
|
"name": "sarlink-portal",
|
||||||
"version": "0.1.0",
|
"version": "0.2.2",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "sarlink-portal",
|
"name": "sarlink-portal",
|
||||||
"version": "0.1.0",
|
"version": "0.2.2",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@commitlint/cli": "^19.8.1",
|
"@commitlint/cli": "^19.8.1",
|
||||||
"@commitlint/config-conventional": "^19.8.1",
|
"@commitlint/config-conventional": "^19.8.1",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "sarlink-portal",
|
"name": "sarlink-portal",
|
||||||
"version": "0.1.0",
|
"version": "0.2.2",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
Reference in New Issue
Block a user