fix: prevent profile page from crashing for null profile values 🔨

refactor: add animations ✨
style: add skeletons to paymentId and deviceId pages ♻️
2025-11-05 19:27:19 +00:00 · 2025-09-24 20:04:04 +05:00 · 2025-09-24 19:33:48 +05:00 · 2025-09-24 18:20:35 +05:00 · 2025-09-24 17:46:04 +05:00 · 2025-09-21 10:07:16 +05:00
54 changed files with 3301 additions and 2434 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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))
--- a/actions/user-actions.ts
+++ b/actions/user-actions.ts
@@ -129,7 +129,6 @@ export type UpdateUserFormState = {
 	payload?: FormData;
 };

-
 export async function updateUser(
 	_prevState: UpdateUserFormState,
 	formData: FormData,
@@ -190,7 +189,6 @@ export async function updateUser(
 	};
 }

-
 export async function updateUserAgreement(
 	_prevState: UpdateUserFormState,
 	formData: FormData,
@@ -258,14 +256,13 @@ export async function adminUserTopup(
 	const description = formData.get("description") as string;
 	const session = await getServerSession(authOptions);

-
 	if (!amount) {
 		return {
 			status: false,
 			message: "Amount is required",
 			fieldErrors: { amount: ["Amount is required"], description: [] },
 			payload: formData,
-		}
+		};
 	}
 	const response = await fetch(
 		`${process.env.SARLINK_API_BASE_URL}/api/billing/admin-topup/`,
--- a/app/(dashboard)/devices/[deviceId]/loading.tsx
+++ b/app/(dashboard)/devices/[deviceId]/loading.tsx
@@ -0,0 +1,33 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function DeviceLoading() {
+  return (
+    <div>
+      <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
+        <div className="flex flex-col space-y-2 justify-between items-start">
+          <Skeleton className="h-8 w-44" />
+          <Skeleton className="h-4 w-40" />
+          <Skeleton className="h-4 w-48" />
+        </div>
+        <div className="flex items-center gap-2 flex-col">
+          <Skeleton className="h-10 w-32" />
+        </div>
+      </div>
+
+      <div
+        id="user-filters"
+        className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <Skeleton className="h-10 sm:w-64" />
+        {/* <Filter
+        options={sortfilterOptions}
+        defaultOption="asc"
+        queryParamKey="sortBy"
+      /> */}
+      </div>
+      {/* <Suspense key={query} fallback={"loading...."}>
+      <DevicesTable searchParams={searchParams} />
+    </Suspense> */}
+    </div>
+  );
+}
--- a/app/(dashboard)/devices/[deviceId]/page.tsx
+++ b/app/(dashboard)/devices/[deviceId]/page.tsx
@@ -1,9 +1,9 @@
+import { redirect } from "next/navigation";
 import ClientErrorMessage from "@/components/client-error-message";
 import Search from "@/components/search";
 import { Badge } from "@/components/ui/badge";
 import { getDevice } from "@/queries/devices";
 import { tryCatch } from "@/utils/tryCatch";
-import { redirect } from "next/navigation";

 export default async function DeviceDetails({
  params,
@@ -25,13 +25,18 @@ export default async function DeviceDetails({

  return (
    <div>
-			<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-2">
+      <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
        <div className="flex flex-col justify-between items-start">
-					<h3 className="text-2xl text-sarLinkOrange font-bold">
+          <h3 className="text-2xl text-sarLinkOrange motion-preset-slide-down-md font-bold">
            {device?.name}
          </h3>
-					<Badge variant={"secondary"}>{device?.mac}</Badge>
-					<p className="text-muted-foreground text-sm mt-2">
+          <Badge
+            className="motion-preset-slide-down-md motion-delay-75"
+            variant={"secondary"}
+          >
+            {device?.mac}
+          </Badge>
+          <p className="text-muted-foreground text-sm mt-2 motion-preset-slide-down-md motion-delay-100">
            Device active until{" "}
            {new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
              month: "short",
@@ -40,7 +45,7 @@ export default async function DeviceDetails({
            })}
          </p>
        </div>
-				<div className="flex items-center gap-2 flex-col">
+        <div className="flex items-center gap-2 flex-col motion-preset-fade">
          {device?.expiry_date && new Date() < new Date(device.expiry_date) && (
            <p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
              ACTIVE
--- a/app/(dashboard)/devices/device-table-skeleton.tsx
+++ b/app/(dashboard)/devices/device-table-skeleton.tsx
@@ -1,78 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableFooter,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
-import { cn } from "@/lib/utils";
-
-export default function DevicesTableSkeleton() {
-	return (
-		<>
-			<div className="hidden sm:block">
-				<Table className="overflow-scroll">
-					<TableCaption>Table of all devices.</TableCaption>
-					<TableHeader>
-						<TableRow>
-							<TableHead>Device Name</TableHead>
-							<TableHead>MAC Address</TableHead>
-							<TableHead>#</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody className="overflow-scroll">
-						{Array.from({ length: 10 }).map((_, i) => (
-							<TableRow key={`${i + 1}`}>
-								<TableCell>
-									<Skeleton className="w-full h-10 rounded" />
-								</TableCell>
-								<TableCell>
-									<Skeleton className="w-full h-10 rounded" />
-								</TableCell>
-								<TableCell>
-									<Skeleton className="w-full h-10 rounded" />
-								</TableCell>
-							</TableRow>
-						))}
-					</TableBody>
-					<TableFooter>
-						<TableRow>
-							<TableCell colSpan={2}>
-								<Skeleton className="w-full  h-4 rounded" />
-							</TableCell>
-							<TableCell className="text-muted-foreground">
-								<Skeleton className="w-20 h-4 rounded" />
-							</TableCell>
-						</TableRow>
-					</TableFooter>
-				</Table>
-			</div>
-			<div className="sm:hidden my-4">
-				{Array.from({ length: 10 }).map((_, i) => (
-					<DeviceCardSkeleton key={`${i + 1}`} />
-				))}
-			</div>
-		</>
-	);
-}
-
-function DeviceCardSkeleton() {
-	return (
-		<div
-			className={cn(
-				"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">
-				<Skeleton className="w-32 h-6" />
-				<Skeleton className="w-36 h-6" />
-				<Skeleton className="w-32 h-4" />
-				<Skeleton className="w-40 h-8" />
-			</div>
-		</div>
-	);
-}
--- a/app/(dashboard)/devices/loading.tsx
+++ b/app/(dashboard)/devices/loading.tsx
@@ -0,0 +1,25 @@
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LoadingComponent() {
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <Skeleton className="w-48 h-8" />
+        <Skeleton className="w-36 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
+      </div>
+      <div
+        id="user-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+      >
+        <DevicesTableSkeleton
+          headers={["Device Name", "Mac Address", "Vendor", "#"]}
+          length={10}
+        />
+      </div>
+    </div>
+  );
+}
--- a/app/(dashboard)/devices/page.tsx
+++ b/app/(dashboard)/devices/page.tsx
@@ -1,10 +1,10 @@
 import { getServerSession } from "next-auth";
 import { Suspense } from "react";
 import { authOptions } from "@/app/auth";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { DevicesTable } from "@/components/devices-table";
 import DynamicFilter from "@/components/generic-filter";
 import AddDeviceDialogForm from "@/components/user/add-device-dialog";
-import DevicesTableSkeleton from "./device-table-skeleton";

 export default async function Devices({
 	searchParams,
@@ -53,7 +53,15 @@ export default async function Devices({
 					]}
 				/>
 			</div>
-			<Suspense key={query || page} fallback={<DevicesTableSkeleton />}>
+			<Suspense
+				key={query || page}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Device Name", "Mac Address", "Vendor", "#"]}
+						length={10}
+					/>
+				}
+			>
 				<DevicesTable parentalControl={false} searchParams={searchParams} />
 			</Suspense>
 		</div>
--- a/app/(dashboard)/parental-control/loading.tsx
+++ b/app/(dashboard)/parental-control/loading.tsx
@@ -0,0 +1,25 @@
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LoadingComponent() {
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <Skeleton className="w-48 h-8" />
+        <Skeleton className="w-20 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
+      </div>
+      <div
+        id="user-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+      >
+        <DevicesTableSkeleton
+          headers={["Device Name", "Mac Address", "Vendor", "#"]}
+          length={10}
+        />
+      </div>
+    </div>
+  );
+}
--- a/app/(dashboard)/parental-control/page.tsx
+++ b/app/(dashboard)/parental-control/page.tsx
@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import { DevicesTable } from "@/components/devices-table";
 import DynamicFilter from "@/components/generic-filter";

@@ -51,7 +52,15 @@ export default async function ParentalControl({
 					]}
 				/>{" "}
 			</div>
-			<Suspense key={(await searchParams).page} fallback={"loading...."}>
+			<Suspense
+				key={(await searchParams).page}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Device Name", "Mac Address", "Vendor", "#"]}
+						length={10}
+					/>
+				}
+			>
 				<DevicesTable
 					parentalControl={true}
 					searchParams={searchParams}
--- a/app/(dashboard)/payments/[paymentId]/loading.tsx
+++ b/app/(dashboard)/payments/[paymentId]/loading.tsx
@@ -0,0 +1,63 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableRow,
+} from "@/components/ui/table";
+
+export default function PaymentLoading() {
+  return (
+    <div className="mx-2">
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4">
+        <Skeleton className="h-8 w-48" />
+      </div>
+      <div className="flex flex-col gap-4 mt-7 w-full border rounded-md border-dashed title-bg py-3 px-2 mb-3">
+        <Skeleton className="h-5 w-36" />
+      </div>
+      <div className="flex flex-col gap-3 w-full">
+        {Array.from({ length: 1 }).map((_, i) => (
+          <Skeleton
+            key={`${i + 1}`}
+            className="w-full border border-gray-300 h-13 rounded-sm"
+          />
+        ))}
+        <div className="pb-4 w-full gap-4 flex sm:flex-row flex-col items-start justify-start">
+          <div className="my-1 w-full flex items-center justify-between p-2 text-sm text-foreground border rounded">
+            <Table>
+              <TableBody className="">
+                <TableRow>
+                  <TableCell>Payment created</TableCell>
+                  <TableCell className="text-right">
+                    <Skeleton className="h-5 inline-block w-24" />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Total Devices</TableCell>
+                  <TableCell className="text-right text-xl">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Duration</TableCell>
+                  <TableCell className="text-right text-xl">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+              <TableFooter>
+                <TableRow className="">
+                  <TableCell colSpan={1}>Total Due</TableCell>
+                  <TableCell className="text-right text-3xl font-bold">
+                    <Skeleton className="h-5 w-24 inline-block" />
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/app/(dashboard)/payments/loading.tsx
+++ b/app/(dashboard)/payments/loading.tsx
@@ -0,0 +1,25 @@
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LoadingComponent() {
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <Skeleton className="w-48 h-8" />
+        <Skeleton className="w-20 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
+      </div>
+      <div
+        id="user-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+      >
+        <DevicesTableSkeleton
+          headers={["Details", "Duration", "Status", "Amount"]}
+          length={10}
+        />
+      </div>
+    </div>
+  );
+}
--- a/app/(dashboard)/payments/page.tsx
+++ b/app/(dashboard)/payments/page.tsx
@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import DynamicFilter from "@/components/generic-filter";
 import { PaymentsTable } from "@/components/payments-table";

@@ -14,8 +15,8 @@ export default async function Payments({

 	return (
 		<div>
-			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-				<h3 className="text-sarLinkOrange text-2xl">My Payments</h3>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-3 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">My Subscriptions</h3>
 			</div>
 			<div
 				id="user-filters"
@@ -72,7 +73,15 @@ export default async function Payments({
 					]}
 				/>{" "}
 			</div>
-			<Suspense key={query} fallback={"loading...."}>
+			<Suspense
+				key={query}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Details", "Duration", "Status", "Amount"]}
+						length={10}
+					/>
+				}
+			>
 				<PaymentsTable searchParams={searchParams} />
 			</Suspense>
 		</div>
--- a/app/(dashboard)/profile/page.tsx
+++ b/app/(dashboard)/profile/page.tsx
@@ -41,14 +41,14 @@ export default async function Profile() {
          <FloatingLabelInput
            id="floating-island"
            label="Island"
-						value={`${profile?.atoll.name}. ${profile?.island.name}`}
+            value={`${profile?.atoll?.name}. ${profile?.island?.name}`}
            readOnly
          />
          <FloatingLabelInput
            id="floating-dob"
            label="Date of Birth"
            value={`${new Date(
-							profile?.dob.toString() ?? "",
+              profile?.dob?.toString() ?? "",
            ).toLocaleDateString("en-US", {
              month: "short",
              day: "2-digit",
--- a/app/(dashboard)/top-ups/loading.tsx
+++ b/app/(dashboard)/top-ups/loading.tsx
@@ -0,0 +1,25 @@
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function LoadingComponent() {
+  return (
+    <div>
+      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+        <Skeleton className="w-48 h-8" />
+        <Skeleton className="w-20 h-8" />
+      </div>
+      <div>
+        <Skeleton className="w-full rounded-md mt-5 mb-6 sm:w-48 h-9" />
+      </div>
+      <div
+        id="user-filters"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-endO"
+      >
+        <DevicesTableSkeleton
+          headers={["Details", "Status", "Amount"]}
+          length={10}
+        />
+      </div>
+    </div>
+  );
+}
--- a/app/(dashboard)/top-ups/page.tsx
+++ b/app/(dashboard)/top-ups/page.tsx
@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import DynamicFilter from "@/components/generic-filter";
 import { TopupsTable } from "@/components/topups-table";

@@ -78,7 +79,15 @@ export default async function Topups({
 					]}
 				/>
 			</div>
-			<Suspense key={query} fallback={"loading...."}>
+			<Suspense
+				key={query}
+				fallback={
+					<DevicesTableSkeleton
+						headers={["Details", "Status", "Amount"]}
+						length={10}
+					/>
+				}
+			>
 				<TopupsTable searchParams={searchParams} />
 			</Suspense>
 		</div>
--- a/app/(dashboard)/wallet/page.tsx
+++ b/app/(dashboard)/wallet/page.tsx
@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import DevicesTableSkeleton from "@/components/device-table-skeleton";
 import DynamicFilter from "@/components/generic-filter";
 import { WalletTransactionsTable } from "@/components/wallet-transactions-table";

@@ -55,7 +56,21 @@ export default async function Wallet({
 					]}
 				/>
 			</div>
-      <Suspense key={query} fallback={"loading...."}>
+			<Suspense
+				key={query}
+				fallback={
+					<DevicesTableSkeleton
+						headers={[
+							"Description",
+							"Amount",
+							"Transaction Type",
+							"View Details",
+							"Created at",
+						]}
+						length={10}
+					/>
+				}
+			>
 				<WalletTransactionsTable searchParams={searchParams} />
 			</Suspense>
 		</div>
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,4 +1,3 @@
-// commitlint.config.js
 export default {
-  extends: ['@commitlint/config-conventional']
+	extends: ["@commitlint/config-conventional"],
 };
--- a/components/admin/admin-devices-table.tsx
+++ b/components/admin/admin-devices-table.tsx
@@ -6,7 +6,6 @@ import { authOptions } from "@/app/auth";
 import {
 	Table,
 	TableBody,
-	TableCaption,
 	TableCell,
 	TableFooter,
 	TableHead,
@@ -64,7 +63,6 @@ export async function AdminDevicesTable({
 				<>
 					<div>
 						<Table className="overflow-scroll">
-							<TableCaption>Table of all devices.</TableCaption>
 							<TableHeader>
 								<TableRow>
 									<TableHead>Device Name</TableHead>
--- a/components/admin/admin-topup-form.tsx
+++ b/components/admin/admin-topup-form.tsx
@@ -104,7 +104,9 @@ export default function AddTopupDialogForm({ user_id }: { user_id?: string }) {
 								<Label htmlFor="description">Topup Description</Label>
 								<input type="hidden" name="user_id" value={user_id} />
 								<Textarea
-									defaultValue={(state?.payload?.get("description") || "") as string}
+									defaultValue={
+										(state?.payload?.get("description") || "") as string
+									}
 									rows={10}
 									name="description"
 									id="topup_description"
--- a/components/admin/admin-topup-table.tsx
+++ b/components/admin/admin-topup-table.tsx
@@ -4,7 +4,6 @@ import { getTopups } from "@/actions/payment";
 import {
 	Table,
 	TableBody,
-	TableCaption,
 	TableCell,
 	TableFooter,
 	TableHead,
@@ -56,7 +55,6 @@ export async function AdminTopupsTable({
 				<>
 					<div>
 						<Table className="overflow-scroll">
-							<TableCaption>Table of all topups.</TableCaption>
 							<TableHeader>
 								<TableRow>
 									<TableHead>User</TableHead>
--- a/components/admin/user-payments-table.tsx
+++ b/components/admin/user-payments-table.tsx
@@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import {
 	Table,
 	TableBody,
-	TableCaption,
 	TableCell,
 	TableFooter,
 	TableHead,
@@ -60,7 +59,6 @@ export async function UsersPaymentsTable({
 			) : (
 				<>
 					<Table className="overflow-scroll">
-						<TableCaption>Table of all users.</TableCaption>
 						<TableHeader>
 							<TableRow>
 								<TableHead>Devices paid</TableHead>
--- a/components/agreement-card.tsx
+++ b/components/agreement-card.tsx
@@ -1,24 +1,27 @@
-import { EyeIcon } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { EyeIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardDescription,
 	CardFooter,
 	CardHeader,
-  CardTitle
-} from "@/components/ui/card"
+	CardTitle,
+} from "@/components/ui/card";

 export function AgreementCard({ agreement }: { agreement: string }) {
 	return (
 		<Card className="w-full max-w-sm">
 			<CardHeader>
 				<CardTitle>Sarlink User Agreement</CardTitle>
-        <CardDescription>
-          User agreement for Sarlink services.
-        </CardDescription>
+				<CardDescription>User agreement for Sarlink services.</CardDescription>
 			</CardHeader>
 			<CardFooter className="flex-col gap-2">
-        <a target="_blank" rel="noopener noreferrer" className="w-full hover:cursor-pointer" href={agreement}>
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					className="w-full hover:cursor-pointer"
+					href={agreement}
+				>
 					<Button type="button" className="w-full hover:cursor-pointer">
 						<EyeIcon />
 						View Agreement
@@ -26,5 +29,5 @@ export function AgreementCard({ agreement }: { agreement: string }) {
 				</a>
 			</CardFooter>
 		</Card>
-  )
+	);
 }
--- a/components/block-device-dialog.tsx
+++ b/components/block-device-dialog.tsx
@@ -37,7 +37,7 @@ const initialState: BlockDeviceFormState = {

 export default function BlockDeviceDialog({
 	device,
-	// admin,
+	admin,
 	parentalControl = false,
 }: {
 	device: Device;
@@ -100,7 +100,7 @@ export default function BlockDeviceDialog({
 	}

 	// If device is not blocked and user is not admin, show simple block button
-	if (!device.blocked && parentalControl) {
+	if ((!device.blocked && parentalControl) || !admin) {
 		return (
 			<Button
 				onClick={handleSimpleBlock}
--- a/components/clickable-row.tsx
+++ b/components/clickable-row.tsx
@@ -12,10 +12,12 @@ export default function ClickableRow({
  device,
  parentalControl,
  admin = false,
+  idx,
 }: {
  device: Device;
  parentalControl?: boolean;
  admin?: boolean;
+  idx?: number;
 }) {
  const [devices, setDeviceCart] = useAtom(deviceCartAtom);

@@ -26,6 +28,7 @@ export default function ClickableRow({
        (parentalControl === false && device.blocked) || device.is_active
          ? "cursor-not-allowed hover:bg-accent-foreground/10"
          : "cursor-pointer hover:bg-muted-foreground/10",
+        `motion-preset-fade-md motion-delay-${(idx || 1) * 75}ms`,
      )}
      onClick={() => {
        if (device.blocked) return;
--- a/components/device-card.tsx
+++ b/components/device-card.tsx
@@ -12,6 +12,7 @@ import { Badge } from "./ui/badge";
 export default function DeviceCard({
  device,
  parentalControl,
+  isAdmin,
 }: {
  device: Device;
  parentalControl?: boolean;
@@ -40,7 +41,7 @@ export default function DeviceCard({
    >
      <div
        className={cn(
-					"flex text-sm justify-between items-center my-2 p-4 border rounded-md",
+          "flex text-sm justify-between items-center my-2 p-4 border rounded-md motion-preset-fade-md",
          isChecked ? "bg-accent" : "",
          device.is_active
            ? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"
@@ -104,7 +105,7 @@ export default function DeviceCard({
            <AddDevicesToCartButton device={device} />
          ) : (
            <BlockDeviceDialog
-							admin={false}
+              admin={isAdmin}
              type={device.blocked ? "unblock" : "block"}
              device={device}
            />
--- a/components/device-table-skeleton.tsx
+++ b/components/device-table-skeleton.tsx
@@ -0,0 +1,66 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+type TableSkeletonProps = {
+	headers: string[];
+	length: number;
+};
+
+export default function TableSkeleton({ headers, length }: TableSkeletonProps) {
+	return (
+		<>
+			<div className="hidden sm:block w-full">
+				<Table className="overflow-scroll w-full">
+					<TableHeader>
+						<TableRow>
+							{headers.map((header, index) => (
+								<TableHead key={`${index + 1}`}>{header}</TableHead>
+							))}
+						</TableRow>
+					</TableHeader>
+					<TableBody className="overflow-scroll">
+						{Array.from({ length }).map((_, i) => (
+							<TableRow key={`${i + 1}`}>
+								{headers.map((_, index) => (
+									<TableCell key={`${index + 1}`}>
+										<Skeleton className="w-full h-10 rounded" />
+									</TableCell>
+								))}
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="sm:hidden my-4 w-full">
+				{Array.from({ length }).map((_, i) => (
+					<DeviceCardSkeleton key={`${i + 1}`} />
+				))}
+			</div>
+		</>
+	);
+}
+
+function DeviceCardSkeleton() {
+	return (
+		<div
+			className={cn(
+				"flex text-sm justify-between items-center my-2 p-4 border rounded-md w-full",
+			)}
+		>
+			<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-36 h-6" />
+				<Skeleton className="w-32 h-4" />
+				<Skeleton className="w-40 h-8" />
+			</div>
+		</div>
+	);
+}
--- a/components/devices-for-payment.tsx
+++ b/components/devices-for-payment.tsx
@@ -20,7 +20,6 @@ export default function DevicesForPayment() {
 	const [months, setMonths] = useAtom(numberOfMonths);
 	const [disabled, setDisabled] = useState(false);

-
 	if (pathname === "/payments") {
 		return null;
 	}
@@ -48,7 +47,6 @@ export default function DevicesForPayment() {
 					maxAllowed={12}
 					isDisabled={devices.length === 0}
 				/>
-
 			</div>
 			<Button
 				onClick={async () => {
--- a/components/devices-table.tsx
+++ b/components/devices-table.tsx
@@ -4,7 +4,6 @@ import { authOptions } from "@/app/auth";
 import {
  Table,
  TableBody,
-	TableCaption,
  TableCell,
  TableFooter,
  TableHead,
@@ -71,7 +70,6 @@ export async function DevicesTable({
        <>
          <div className="hidden sm:block">
            <Table className="overflow-scroll">
-							<TableCaption>Table of all devices.</TableCaption>
              <TableHeader>
                <TableRow>
                  <TableHead>Device Name</TableHead>
@@ -81,12 +79,13 @@ export async function DevicesTable({
                </TableRow>
              </TableHeader>
              <TableBody className="overflow-scroll">
-								{data?.map((device) => (
+                {data?.map((device, idx) => (
                  <ClickableRow
                    admin={isAdmin}
                    key={device.id}
                    device={device}
                    parentalControl={parentalControl}
+                    idx={idx + 1}
                  />
                ))}
              </TableBody>
@@ -111,6 +110,7 @@ export async function DevicesTable({
                parentalControl={parentalControl}
                key={device.id}
                device={device}
+                isAdmin={isAdmin}
              />
            ))}
          </div>
--- a/components/devices-to-pay.tsx
+++ b/components/devices-to-pay.tsx
@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/table";
 import type { Payment } from "@/lib/backend-types";
 import type { User } from "@/lib/types/user";
+import { shouldShowPaymentInfo } from "@/lib/utils";
 import { AccountInfomation } from "./account-information";
 import { Button } from "./ui/button";

@@ -77,11 +78,13 @@ export default function DevicesToPay({
          {devices?.map((device) => (
            <div
              key={device.id}
-							className="bg-muted border rounded p-2 flex gap-2 items-center"
+              className="bg-muted border rounded p-2 flex gap-2 items-center motion-preset-fade"
            >
              <div className="flex flex-col">
-								<div className="text-sm font-medium">{device.name}</div>
-								<div className="text-xs text-muted-foreground">
+                <div className="text-sm font-medium motion-preset-slide-up">
+                  {device.name}
+                </div>
+                <div className="text-xs text-muted-foreground motion-preset-slide-up motion-delay-100">
                  {device.mac}
                </div>
              </div>
@@ -92,6 +95,7 @@ export default function DevicesToPay({
      <div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
        <Table>
          <TableCaption>
+            {shouldShowPaymentInfo(payment) && (
              <div className="max-w-sm mx-auto">
                <p>Please send the following amount to the payment address</p>
                <AccountInfomation
@@ -122,6 +126,7 @@ export default function DevicesToPay({
                          type="submit"
                          variant={"secondary"}
                          size={"lg"}
+                          className="w-full"
                        >
                          {isPending
                            ? "Processing payment..."
@@ -141,7 +146,7 @@ export default function DevicesToPay({
                        disabled={isPending || disabled}
                        type="submit"
                        size={"lg"}
-											className="mb-4"
+                        className="mb-4 w-full"
                      >
                        {isPending ? "Processing payment..." : "I have paid"}
                        {isPending ? (
@@ -154,11 +159,12 @@ export default function DevicesToPay({
                  </div>
                )}
              </div>
+            )}
          </TableCaption>
          <TableBody className="">
            <TableRow>
              <TableCell>Payment created</TableCell>
-							<TableCell className="text-right">
+              <TableCell className="text-right motion-preset-slide-up-sm">
                {new Date(payment?.created_at ?? "").toLocaleDateString(
                  "en-US",
                  {
@@ -174,13 +180,13 @@ export default function DevicesToPay({
            </TableRow>
            <TableRow>
              <TableCell>Total Devices</TableCell>
-							<TableCell className="text-right text-xl">
+              <TableCell className="text-right text-xl motion-preset-slide-up-sm motion-delay-75">
                {devices?.length}
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell>Duration</TableCell>
-							<TableCell className="text-right text-xl">
+              <TableCell className="text-right text-xl motion-preset-slide-up-sm motion-delay-100">
                {payment?.number_of_months} Months
              </TableCell>
            </TableRow>
@@ -188,7 +194,7 @@ export default function DevicesToPay({
          <TableFooter>
            <TableRow className="">
              <TableCell colSpan={1}>Total Due</TableCell>
-							<TableCell className="text-right text-3xl font-bold">
+              <TableCell className="text-right text-3xl font-bold motion-preset-slide-up-sm motion-delay-150">
                {payment?.amount?.toFixed(2)}
              </TableCell>
            </TableRow>
--- a/components/number-input.tsx
+++ b/components/number-input.tsx
@@ -1,4 +1,3 @@
-import { cn } from "@/lib/utils";
 import { Minus, Plus } from "lucide-react";
 import { useEffect } from "react";
 import {
@@ -8,18 +7,19 @@ import {
 	Label,
 	NumberField,
 } from "react-aria-components";
+import { cn } from "@/lib/utils";

 export default function NumberInput({
 	maxAllowed,
 	label,
-	value,
+	value = 100,
 	onChange,
 	className,
 	isDisabled,
 }: {
 	maxAllowed?: number;
 	label: string;
-	value: number;
+	value?: number;
 	onChange: (value: number) => void;
 	className?: string;
 	isDisabled?: boolean;
@@ -31,6 +31,7 @@ export default function NumberInput({
 			}
 		}
 	}, [maxAllowed, value, onChange]);
+
 	return (
 		<NumberField
 			isDisabled={isDisabled}
--- a/components/pagination.tsx
+++ b/components/pagination.tsx
@@ -1,9 +1,9 @@
 "use client";
-import { Button } from "@/components/ui/button";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";

 type PaginationProps = {
 	totalPages: number;
@@ -71,6 +71,10 @@ export default function Pagination({

 	const pageNumbers = generatePageNumbers();

+	if (totalPages <= 1) {
+		return null;
+	}
+
 	return (
 		<div className="flex items-center justify-center space-x-2 my-4">
 			{currentPage > 1 && (
--- a/components/payments-table.tsx
+++ b/components/payments-table.tsx
@@ -5,7 +5,6 @@ import { getPayments } from "@/actions/payment";
 import {
  Table,
  TableBody,
-	TableCaption,
  TableCell,
  TableFooter,
  TableHead,
@@ -59,7 +58,6 @@ export async function PaymentsTable({
        <>
          <div className="hidden sm:block">
            <Table className="overflow-scroll">
-							<TableCaption>Table of all devices.</TableCaption>
              <TableHeader>
                <TableRow>
                  <TableHead>Details</TableHead>
@@ -70,7 +68,7 @@ export async function PaymentsTable({
              </TableHeader>
              <TableBody className="overflow-scroll">
                {payments?.data?.map((payment) => (
-									<TableRow key={payment.id}>
+                  <TableRow className="motion-preset-fade-md" key={payment.id}>
                    <TableCell>
                      <div
                        className={cn(
@@ -199,7 +197,7 @@ export function MobilePaymentDetails({
  return (
    <div
      className={cn(
-				"flex flex-col items-start border rounded p-2 my-2",
+        "flex flex-col items-start border rounded p-2 my-2 motion-preset-fade-md",
        payment?.paid
          ? "bg-green-500/10 border-dashed border-green-500"
          : payment?.is_expired
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -1,8 +1,7 @@
 "use client";

-import { Moon, Sun } from "lucide-react";
+import { MonitorIcon, Moon, MoonIcon, Sun, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
-import * as React from "react";

 import { Button } from "@/components/ui/button";
 import {
@@ -25,14 +24,26 @@ export function ModeToggle() {
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end">
-				<DropdownMenuItem onClick={() => setTheme("light")}>
+				<DropdownMenuItem
+					className="flex justify-between items-center"
+					onClick={() => setTheme("light")}
+				>
 					Light
+					<SunIcon className="ml-2 h-4 w-4" />
 				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("dark")}>
+				<DropdownMenuItem
+					className="flex justify-between items-center"
+					onClick={() => setTheme("dark")}
+				>
 					Dark
+					<MoonIcon className="ml-2 h-4 w-4" />
 				</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme("system")}>
+				<DropdownMenuItem
+					className="flex justify-between items-center"
+					onClick={() => setTheme("system")}
+				>
 					System
+					<MonitorIcon className="ml-2 h-4 w-4" />
 				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>
--- a/components/topup-to-pay.tsx
+++ b/components/topup-to-pay.tsx
@@ -15,6 +15,7 @@ import {
  TableRow,
 } from "@/components/ui/table";
 import type { Topup } from "@/lib/backend-types";
+import { shouldShowTopupPaymentInfo } from "@/lib/utils";
 import { AccountInfomation } from "./account-information";
 import { Button } from "./ui/button";

@@ -61,6 +62,7 @@ export default function TopupToPay({
      <div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
        <Table>
          <TableCaption>
+            {shouldShowTopupPaymentInfo(topup) && (
              <div className="max-w-sm mx-auto">
                <p>Please send the following amount to the payment address</p>
                <AccountInfomation
@@ -101,6 +103,7 @@ export default function TopupToPay({
                  </div>
                )}
              </div>
+            )}
          </TableCaption>
          <TableBody className="">
            <TableRow>
--- a/components/topups-table.tsx
+++ b/components/topups-table.tsx
@@ -5,7 +5,6 @@ import { getTopups } from "@/actions/payment";
 import {
  Table,
  TableBody,
-	TableCaption,
  TableCell,
  TableFooter,
  TableHead,
@@ -59,7 +58,6 @@ export async function TopupsTable({
        <>
          <div className="hidden sm:block">
            <Table className="overflow-scroll">
-							<TableCaption>Table of all topups.</TableCaption>
              <TableHeader>
                <TableRow>
                  <TableHead>Details</TableHead>
@@ -73,7 +71,7 @@ export async function TopupsTable({
                    <TableCell>
                      <div
                        className={cn(
-													"flex flex-col items-start border rounded p-2",
+                          "flex flex-col items-start border rounded p-2 motion-preset-fade-md",
                          topup?.paid
                            ? "bg-green-500/10 border-dashed border-green-500"
                            : topup?.is_expired
@@ -167,9 +165,11 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
  return (
    <div
      className={cn(
-				"flex flex-col items-start border rounded p-2 my-2",
+        "flex flex-col items-start border rounded p-2 my-2 motion-preset-fade-md",
        topup?.paid
-					? "bg-green-500/10 border-dashed border-green=500"
+          ? "bg-green-500/10 border-dashed border-green-500"
+          : topup?.is_expired
+            ? "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",
      )}
    >
--- a/components/ui/app-sidebar.tsx
+++ b/components/ui/app-sidebar.tsx
@@ -204,7 +204,7 @@ export async function AppSidebar({
                            <Link className="text-md" href={item.link}>
                              {item.icon}
                              <span
-                                className={`opacity-70 motion-preset-slide-left-md ml-2`}
+                                className={`opacity-70 motion-preset-fade motion-duration-300 ml-2`}
                              >
                                {item.title}
                              </span>
--- a/components/user-table.tsx
+++ b/components/user-table.tsx
@@ -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 { redirect } from "next/navigation";
 import { getUsers } from "@/queries/users";
@@ -24,7 +9,6 @@ import { Button } from "./ui/button";
 import {
 	Table,
 	TableBody,
-	TableCaption,
 	TableCell,
 	TableFooter,
 	TableHead,
@@ -72,7 +56,6 @@ export async function UsersTable({
 			) : (
 				<>
 					<Table className="overflow-scroll">
-						<TableCaption>Table of all users.</TableCaption>
 						<TableHeader>
 							<TableRow>
 								<TableHead>Name</TableHead>
--- a/components/wallet-transactions-table.tsx
+++ b/components/wallet-transactions-table.tsx
@@ -4,7 +4,6 @@ import { redirect } from "next/navigation";
 import {
  Table,
  TableBody,
-	TableCaption,
  TableCell,
  TableFooter,
  TableHead,
@@ -67,19 +66,22 @@ export async function WalletTransactionsTable({
        </div>
      ) : (
        <div>
-					<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">
-							<h5 className="text-lg font-semibold">Total Debit</h5>
+          <div className="flex gap-4 mb-4 w-full motion-preset-fade-md">
+            <div className="bg-red-300 ring-4 ring-red-500/20 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 uppercase font-barlow">
+                Total Debit
+              </h5>
              <p>{totalDebit.toFixed(2)} MVR</p>
            </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">
-							<h5 className="text-lg font-semibold">Total Credit</h5>
+            <div className="bg-green-300 ring-4 ring-green-500/20 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 uppercase font-barlow">
+                Total Credit
+              </h5>
              <p>{totalCredit.toFixed(2)} MVR</p>
            </div>
          </div>
          <div className="hidden sm:block">
            <Table className="overflow-scroll">
-							<TableCaption>Table of all transactions.</TableCaption>
              <TableHeader>
                <TableRow>
                  <TableHead>Description</TableHead>
@@ -93,7 +95,7 @@ export async function WalletTransactionsTable({
                {transactions?.data?.map((trx) => (
                  <TableRow
                    className={cn(
-											"items-start border rounded p-2",
+                      "items-start border rounded p-2 motion-preset-slide-down-sm",
                      trx?.transaction_type === "TOPUP"
                        ? "credit-bg"
                        : "debit-bg",
--- a/components/wallet.tsx
+++ b/components/wallet.tsx
@@ -39,8 +39,7 @@ export function Wallet({ walletBalance }: { walletBalance: number }) {
 		<Drawer open={isOpen} onOpenChange={setIsOpen}>
 			<DrawerTrigger asChild>
 				<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
-					{walletBalance}{" "}
-					MVR
+					{walletBalance} MVR
 					<Wallet2 />
 				</Button>
 			</DrawerTrigger>
--- a/components/welcome-banner.tsx
+++ b/components/welcome-banner.tsx
@@ -29,7 +29,7 @@ export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
          exit={{ opacity: 0 }}
        >
          Welcome,{" "}
-          <p className="font-semibold motion-preset-slide-down inline-block motion-delay-200">
+          <p className="font-semibold motion-preset-fade inline-block motion-delay-200">
            {firstName} {lastName}
          </p>
        </motion.div>
--- a/lib/atoms.ts
+++ b/lib/atoms.ts
@@ -10,7 +10,7 @@ export const discountPercentageAtom = atom(75);
 export const numberOfDevicesAtom = atom(1);
 export const numberOfDaysAtom = atom(30);
 export const numberOfMonths = atom(1);
-export const walletTopUpValue = atom(1);
+export const walletTopUpValue = atom(100);
 export const formulaResultAtom = atom("");
 export const deviceCartAtom = atom<Device[]>([]);
 export const cartDrawerOpenAtom = atom(false);
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import type { Payment, Topup } from "./backend-types";

 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
@@ -46,3 +47,26 @@ export function validateApiKey(request: Request) {
    throw new Error("Invalid API key");
  }
 }
+
+export function shouldShowTopupPaymentInfo(topup: Topup | undefined): boolean {
+  if (!topup) return false;
+
+  return !(
+    topup.paid ||
+    topup.is_expired ||
+    topup.status === "CANCELLED" ||
+    topup.status === "VERIFIED"
+  );
+}
+
+
+export function shouldShowPaymentInfo(topup: Payment | undefined): boolean {
+  if (!topup) return false;
+
+  return !(
+    topup.paid ||
+    topup.is_expired ||
+    topup.status === "CANCELLED" ||
+    topup.status === "PAID"
+  );
+}
--- a/next.config.ts
+++ b/next.config.ts
@@ -6,6 +6,7 @@ const nextConfig: NextConfig = {
 		serverActions: {
 			bodySizeLimit: "20mb",
 		},
+		devtoolSegmentExplorer: true,
 	},
 	images: {
 		remotePatterns: [
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sarlink-portal",
-  "version": "0.1.0",
+  "version": "0.2.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sarlink-portal",
-      "version": "0.1.0",
+      "version": "0.2.2",
      "dependencies": {
        "@commitlint/cli": "^19.8.1",
        "@commitlint/config-conventional": "^19.8.1",
@@ -30,7 +30,7 @@
        "lucide-react": "^0.523.0",
        "moment": "^2.30.1",
        "motion": "^12.15.0",
-        "next": "15.3.3",
+        "next": "15.5.3",
        "next-auth": "^4.24.11",
        "next-themes": "^0.4.6",
        "nextjs-toploader": "^3.7.15",
@@ -717,6 +717,16 @@
      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
      "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="
    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@eslint-community/eslint-utils": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
@@ -851,13 +861,13 @@
      }
    },
    "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.3.tgz",
-      "integrity": "sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
+      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "@eslint/core": "^0.15.1",
+        "@eslint/core": "^0.15.2",
        "levn": "^0.4.1"
      },
      "engines": {
@@ -865,9 +875,9 @@
      }
    },
    "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
-      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
+      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
@@ -1050,13 +1060,100 @@
        "node": ">=10.13.0"
      }
    },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz",
-      "integrity": "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==",
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.4.tgz",
+      "integrity": "sha512-sitdlPzDVyvmINUdJle3TNHl+AG9QcwiAMsXmccqsCOMZNIdW2/7S26w0LyU8euiLVzFBL3dXPwVCq/ODnf2vA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.4.tgz",
+      "integrity": "sha512-rZheupWIoa3+SOdF/IcUe1ah4ZDpKBGWcsPX6MT0lYniH9micvIU7HQkYTfrx5Xi8u+YqwLtxC/3vl8TQN6rMg==",
      "cpu": [
        "x64"
      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.3.tgz",
+      "integrity": "sha512-QzWAKo7kpHxbuHqUC28DZ9pIKpSi2ts2OJnoIGI26+HMgq92ZZ4vk8iJd4XsxN+tYfNJxzH6W62X5eTcsBymHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.3.tgz",
+      "integrity": "sha512-Ju+g2xn1E2AKO6YBhxjj+ACcsPQRHT0bhpglxcEf+3uyPY+/gL8veniKoo96335ZaPo03bdDXMv0t+BBFAbmRA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.3.tgz",
+      "integrity": "sha512-x1uE93lyP6wEwGvgAIV0gP6zmaL/a0tGzJs/BIDDG0zeBhMnuUPm7ptxGhUbcGs4okDJrk4nxgrmxpib9g6HpA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
      "optional": true,
      "os": [
        "linux"
@@ -1065,13 +1162,110 @@
        "url": "https://opencollective.com/libvips"
      }
    },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz",
-      "integrity": "sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==",
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.3.tgz",
+      "integrity": "sha512-I4RxkXU90cpufazhGPyVujYwfIm9Nk1QDEmiIsaPwdnm013F7RIceaCc87kAH+oUB1ezqEvC6ga4m7MSlqsJvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.3.tgz",
+      "integrity": "sha512-Y2T7IsQvJLMCBM+pmPbM3bKT/yYJvVtLJGfCs4Sp95SjvnFIjynbjzsa7dY1fRJX45FTSfDksbTp6AGWudiyCg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.3.tgz",
+      "integrity": "sha512-RgWrs/gVU7f+K7P+KeHFaBAJlNkD1nIZuVXdQv6S+fNA6syCcoboNjsV2Pou7zNlVdNQoQUpQTk8SWDHUA3y/w==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.3.tgz",
+      "integrity": "sha512-3JU7LmR85K6bBiRzSUc/Ff9JBVIFVvq6bomKE0e63UXGeRw2HPVEjoJke1Yx+iU4rL7/7kUjES4dZ/81Qjhyxg==",
      "cpu": [
        "x64"
      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.3.tgz",
+      "integrity": "sha512-F9q83RZ8yaCwENw1GieztSfj5msz7GGykG/BA+MOUefvER69K/ubgFHNeSyUu64amHIYKGDs4sRCMzXVj8sEyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.3.tgz",
+      "integrity": "sha512-U5PUY5jbc45ANM6tSJpsgqmBF/VsL6LnxJmIf11kB7J5DctHgqm0SkuXzVWtIY90GnJxKnC/JT251TDnk1fu/g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.4.tgz",
+      "integrity": "sha512-Xyam4mlqM0KkTHYVSuc6wXRmM7LGN0P12li03jAnZ3EJWZqj83+hi8Y9UxZUbxsgsK1qOEwg7O0Bc0LjqQVtxA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
      "optional": true,
      "os": [
        "linux"
@@ -1083,7 +1277,215 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.1.0"
+        "@img/sharp-libvips-linux-arm": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.4.tgz",
+      "integrity": "sha512-YXU1F/mN/Wu786tl72CyJjP/Ngl8mGHN1hST4BGl+hiW5jhCnV2uRVTNOcaYPs73NeT/H8Upm3y9582JVuZHrQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.4.tgz",
+      "integrity": "sha512-F4PDtF4Cy8L8hXA2p3TO6s4aDt93v+LKmpcYFLAVdkkD3hSxZzee0rh6/+94FpAynsuMpLX5h+LRsSG3rIciUQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.4.tgz",
+      "integrity": "sha512-qVrZKE9Bsnzy+myf7lFKvng6bQzhNUAYcVORq2P7bDlvmF6u2sCmK2KyEQEBdYk+u3T01pVsPrkj943T1aJAsw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.4.tgz",
+      "integrity": "sha512-ZfGtcp2xS51iG79c6Vhw9CWqQC8l2Ot8dygxoDoIQPTat/Ov3qAa8qpxSrtAEAJW+UjTXc4yxCjNfxm4h6Xm2A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.4.tgz",
+      "integrity": "sha512-8hDVvW9eu4yHWnjaOOR8kHVrew1iIX+MUgwxSuH2XyYeNRtLUe4VNioSqbNkB7ZYQJj9rUTT4PyRscyk2PXFKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.4.tgz",
+      "integrity": "sha512-lU0aA5L8QTlfKjpDCEFOZsTYGn3AEiO6db8W5aQDxj0nQkVrZWmN3ZP9sYKWJdtq3PWPhUNlqehWyXpYDcI9Sg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.4.tgz",
+      "integrity": "sha512-33QL6ZO/qpRyG7woB/HUALz28WnTMI2W1jgX3Nu2bypqLIKx/QKMILLJzJjI+SIbvXdG9fUnmrxR7vbi1sTBeA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.5.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.4.tgz",
+      "integrity": "sha512-2Q250do/5WXTwxW3zjsEuMSv5sUU4Tq9VThWKlU2EYLm4MB7ZeMwF+SFJutldYODXF6jzc6YEOC+VfX0SZQPqA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.4.tgz",
+      "integrity": "sha512-3ZeLue5V82dT92CNL6rsal6I2weKw1cYu+rGKm8fOCCtJTR2gYeUfY3FqUnIJsMUPIH68oS5jmZ0NiJ508YpEw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.4.tgz",
+      "integrity": "sha512-xIyj4wpYs8J18sVN3mSQjwrw7fKUqRw+Z5rnHNCy5fYTxigBz81u5mOMPmFumwjcn8+ld1ppptMBCLic1nz6ig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
      }
    },
    "node_modules/@inquirer/ansi": {
@@ -1509,9 +1911,10 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.3.tgz",
-      "integrity": "sha512-OdiMrzCl2Xi0VTjiQQUK0Xh7bJHnOuET2s+3V+Y40WJBAXrJeGA3f+I8MZJ/YQ3mVGi5XGR1L66oFlgqXhQ4Vw=="
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.3.tgz",
+      "integrity": "sha512-RSEDTRqyihYXygx/OJXwvVupfr9m04+0vH8vyy0HfZ7keRto6VX9BbEk0J2PUk0VGy6YhklJUSrgForov5F9pw==",
+      "license": "MIT"
    },
    "node_modules/@next/eslint-plugin-next": {
      "version": "15.1.2",
@@ -1548,12 +1951,13 @@
      }
    },
    "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.3.3.tgz",
-      "integrity": "sha512-WRJERLuH+O3oYB4yZNVahSVFmtxRNjNF1I1c34tYMoJb0Pve+7/RaLAJJizyYiFhjYNGHRAE1Ri2Fd23zgDqhg==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.3.tgz",
+      "integrity": "sha512-nzbHQo69+au9wJkGKTU9lP7PXv0d1J5ljFpvb+LnEomLtSbJkbZyEs6sbF3plQmiOB2l9OBtN2tNSvCH1nQ9Jg==",
      "cpu": [
        "arm64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "darwin"
@@ -1563,12 +1967,13 @@
      }
    },
    "node_modules/@next/swc-darwin-x64": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.3.3.tgz",
-      "integrity": "sha512-XHdzH/yBc55lu78k/XwtuFR/ZXUTcflpRXcsu0nKmF45U96jt1tsOZhVrn5YH+paw66zOANpOnFQ9i6/j+UYvw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.3.tgz",
+      "integrity": "sha512-w83w4SkOOhekJOcA5HBvHyGzgV1W/XvOfpkrxIse4uPWhYTTRwtGEM4v/jiXwNSJvfRvah0H8/uTLBKRXlef8g==",
      "cpu": [
        "x64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "darwin"
@@ -1578,12 +1983,13 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.3.3.tgz",
-      "integrity": "sha512-VZ3sYL2LXB8znNGcjhocikEkag/8xiLgnvQts41tq6i+wql63SMS1Q6N8RVXHw5pEUjiof+II3HkDd7GFcgkzw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.3.tgz",
+      "integrity": "sha512-+m7pfIs0/yvgVu26ieaKrifV8C8yiLe7jVp9SpcIzg7XmyyNE7toC1fy5IOQozmr6kWl/JONC51osih2RyoXRw==",
      "cpu": [
        "arm64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "linux"
@@ -1593,12 +1999,13 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.3.3.tgz",
-      "integrity": "sha512-h6Y1fLU4RWAp1HPNJWDYBQ+e3G7sLckyBXhmH9ajn8l/RSMnhbuPBV/fXmy3muMcVwoJdHL+UtzRzs0nXOf9SA==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.3.tgz",
+      "integrity": "sha512-u3PEIzuguSenoZviZJahNLgCexGFhso5mxWCrrIMdvpZn6lkME5vc/ADZG8UUk5K1uWRy4hqSFECrON6UKQBbQ==",
      "cpu": [
        "arm64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "linux"
@@ -1608,12 +2015,13 @@
      }
    },
    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.3.3.tgz",
-      "integrity": "sha512-jJ8HRiF3N8Zw6hGlytCj5BiHyG/K+fnTKVDEKvUCyiQ/0r5tgwO7OgaRiOjjRoIx2vwLR+Rz8hQoPrnmFbJdfw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.3.tgz",
+      "integrity": "sha512-lDtOOScYDZxI2BENN9m0pfVPJDSuUkAD1YXSvlJF0DKwZt0WlA7T7o3wrcEr4Q+iHYGzEaVuZcsIbCps4K27sA==",
      "cpu": [
        "x64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "linux"
@@ -1623,12 +2031,13 @@
      }
    },
    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.3.3.tgz",
-      "integrity": "sha512-HrUcTr4N+RgiiGn3jjeT6Oo208UT/7BuTr7K0mdKRBtTbT4v9zJqCDKO97DUqqoBK1qyzP1RwvrWTvU6EPh/Cw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.3.tgz",
+      "integrity": "sha512-9vWVUnsx9PrY2NwdVRJ4dUURAQ8Su0sLRPqcCCxtX5zIQUBES12eRVHq6b70bbfaVaxIDGJN2afHui0eDm+cLg==",
      "cpu": [
        "x64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "linux"
@@ -1638,12 +2047,13 @@
      }
    },
    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.3.3.tgz",
-      "integrity": "sha512-SxorONgi6K7ZUysMtRF3mIeHC5aA3IQLmKFQzU0OuhuUYwpOBc1ypaLJLP5Bf3M9k53KUUUj4vTPwzGvl/NwlQ==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.3.tgz",
+      "integrity": "sha512-1CU20FZzY9LFQigRi6jM45oJMU3KziA5/sSG+dXeVaTm661snQP6xu3ykGxxwU5sLG3sh14teO/IOEPVsQMRfA==",
      "cpu": [
        "arm64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "win32"
@@ -1653,12 +2063,13 @@
      }
    },
    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.3.tgz",
-      "integrity": "sha512-4QZG6F8enl9/S2+yIiOiju0iCTFd93d8VC1q9LZS4p/Xuk81W2QDjCFeoogmrWWkAD59z8ZxepBQap2dKS5ruw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.3.tgz",
+      "integrity": "sha512-JMoLAq3n3y5tKXPQwCK5c+6tmwkuFDa2XAxz8Wm4+IVthdBZdZGh+lmiLUHg9f9IDwIQpUjp+ysd6OkYTyZRZw==",
      "cpu": [
        "x64"
      ],
+      "license": "MIT",
      "optional": true,
      "os": [
        "win32"
@@ -5014,10 +5425,6 @@
      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="
    },
-    "node_modules/@swc/counter": {
-      "version": "0.1.3",
-      "license": "Apache-2.0"
-    },
    "node_modules/@swc/helpers": {
      "version": "0.5.15",
      "license": "Apache-2.0",
@@ -6051,12 +6458,13 @@
      }
    },
    "node_modules/axios": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
-      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
+      "license": "MIT",
      "dependencies": {
        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
        "proxy-from-env": "^1.1.0"
      }
    },
@@ -6132,15 +6540,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
    "node_modules/c12": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.0.tgz",
@@ -6461,19 +6860,6 @@
        "react-dom": "^18 || ^19 || ^19.0.0-rc"
      }
    },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "license": "MIT",
@@ -6488,16 +6874,6 @@
      "version": "1.1.4",
      "license": "MIT"
    },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "optional": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
    "node_modules/combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -7417,9 +7793,9 @@
      "license": "MIT"
    },
    "node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.0.tgz",
+      "integrity": "sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==",
      "license": "Apache-2.0",
      "engines": {
        "node": ">=8"
@@ -9191,12 +9567,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "optional": true
-    },
    "node_modules/is-async-function": {
      "version": "2.0.0",
      "dev": true,
@@ -10511,14 +10881,13 @@
      }
    },
    "node_modules/next": {
-      "version": "15.3.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.3.3.tgz",
-      "integrity": "sha512-JqNj29hHNmCLtNvd090SyRbXJiivQ+58XjCcrC50Crb5g5u2zi7Y2YivbsEfzk6AtVI80akdOQbaMZwWB1Hthw==",
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.3.tgz",
+      "integrity": "sha512-r/liNAx16SQj4D+XH/oI1dlpv9tdKJ6cONYPwwcCC46f2NjpaRWY+EKCzULfgQYV6YKXjHBchff2IZBSlZmJNw==",
+      "license": "MIT",
      "dependencies": {
-        "@next/env": "15.3.3",
-        "@swc/counter": "0.1.3",
+        "@next/env": "15.5.3",
        "@swc/helpers": "0.5.15",
-        "busboy": "1.6.0",
        "caniuse-lite": "^1.0.30001579",
        "postcss": "8.4.31",
        "styled-jsx": "5.1.6"
@@ -10530,19 +10899,19 @@
        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.3.3",
-        "@next/swc-darwin-x64": "15.3.3",
-        "@next/swc-linux-arm64-gnu": "15.3.3",
-        "@next/swc-linux-arm64-musl": "15.3.3",
-        "@next/swc-linux-x64-gnu": "15.3.3",
-        "@next/swc-linux-x64-musl": "15.3.3",
-        "@next/swc-win32-arm64-msvc": "15.3.3",
-        "@next/swc-win32-x64-msvc": "15.3.3",
-        "sharp": "^0.34.1"
+        "@next/swc-darwin-arm64": "15.5.3",
+        "@next/swc-darwin-x64": "15.5.3",
+        "@next/swc-linux-arm64-gnu": "15.5.3",
+        "@next/swc-linux-arm64-musl": "15.5.3",
+        "@next/swc-linux-x64-gnu": "15.5.3",
+        "@next/swc-linux-x64-musl": "15.5.3",
+        "@next/swc-win32-arm64-msvc": "15.5.3",
+        "@next/swc-win32-x64-msvc": "15.5.3",
+        "sharp": "^0.34.3"
      },
      "peerDependencies": {
        "@opentelemetry/api": "^1.1.0",
-        "@playwright/test": "^1.41.2",
+        "@playwright/test": "^1.51.1",
        "babel-plugin-react-compiler": "*",
        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
@@ -12242,15 +12611,16 @@
      }
    },
    "node_modules/sharp": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.1.tgz",
-      "integrity": "sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==",
+      "version": "0.34.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.4.tgz",
+      "integrity": "sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==",
      "hasInstallScript": true,
+      "license": "Apache-2.0",
      "optional": true,
      "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.3",
-        "semver": "^7.7.1"
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.0",
+        "semver": "^7.7.2"
      },
      "engines": {
        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -12259,32 +12629,35 @@
        "url": "https://opencollective.com/libvips"
      },
      "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.1",
-        "@img/sharp-darwin-x64": "0.34.1",
-        "@img/sharp-libvips-darwin-arm64": "1.1.0",
-        "@img/sharp-libvips-darwin-x64": "1.1.0",
-        "@img/sharp-libvips-linux-arm": "1.1.0",
-        "@img/sharp-libvips-linux-arm64": "1.1.0",
-        "@img/sharp-libvips-linux-ppc64": "1.1.0",
-        "@img/sharp-libvips-linux-s390x": "1.1.0",
-        "@img/sharp-libvips-linux-x64": "1.1.0",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
-        "@img/sharp-libvips-linuxmusl-x64": "1.1.0",
-        "@img/sharp-linux-arm": "0.34.1",
-        "@img/sharp-linux-arm64": "0.34.1",
-        "@img/sharp-linux-s390x": "0.34.1",
-        "@img/sharp-linux-x64": "0.34.1",
-        "@img/sharp-linuxmusl-arm64": "0.34.1",
-        "@img/sharp-linuxmusl-x64": "0.34.1",
-        "@img/sharp-wasm32": "0.34.1",
-        "@img/sharp-win32-ia32": "0.34.1",
-        "@img/sharp-win32-x64": "0.34.1"
+        "@img/sharp-darwin-arm64": "0.34.4",
+        "@img/sharp-darwin-x64": "0.34.4",
+        "@img/sharp-libvips-darwin-arm64": "1.2.3",
+        "@img/sharp-libvips-darwin-x64": "1.2.3",
+        "@img/sharp-libvips-linux-arm": "1.2.3",
+        "@img/sharp-libvips-linux-arm64": "1.2.3",
+        "@img/sharp-libvips-linux-ppc64": "1.2.3",
+        "@img/sharp-libvips-linux-s390x": "1.2.3",
+        "@img/sharp-libvips-linux-x64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.3",
+        "@img/sharp-linux-arm": "0.34.4",
+        "@img/sharp-linux-arm64": "0.34.4",
+        "@img/sharp-linux-ppc64": "0.34.4",
+        "@img/sharp-linux-s390x": "0.34.4",
+        "@img/sharp-linux-x64": "0.34.4",
+        "@img/sharp-linuxmusl-arm64": "0.34.4",
+        "@img/sharp-linuxmusl-x64": "0.34.4",
+        "@img/sharp-wasm32": "0.34.4",
+        "@img/sharp-win32-arm64": "0.34.4",
+        "@img/sharp-win32-ia32": "0.34.4",
+        "@img/sharp-win32-x64": "0.34.4"
      }
    },
    "node_modules/sharp/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
      "optional": true,
      "bin": {
        "semver": "bin/semver.js"
@@ -12390,15 +12763,6 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "optional": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
    "node_modules/smart-buffer": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
@@ -12526,12 +12890,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
    "node_modules/string_decoder": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "sarlink-portal",
-  "version": "0.1.0",
+	"version": "0.2.2",
 	"type": "module",
 	"private": true,
 	"scripts": {
@@ -34,7 +34,7 @@
 		"lucide-react": "^0.523.0",
 		"moment": "^2.30.1",
 		"motion": "^12.15.0",
-    "next": "15.3.3",
+		"next": "15.5.3",
 		"next-auth": "^4.24.11",
 		"next-themes": "^0.4.6",
 		"nextjs-toploader": "^3.7.15",
Author	SHA1	Message	Date
i701	f0cf2d5223	fix: prevent profile page from crashing for null profile values 🔨 All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 11m11s Details	2025-09-24 20:04:04 +05:00
i701	9ad1887f88	refactor: add animations ✨ All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 10m27s Details	2025-09-24 19:33:48 +05:00
i701	f8774f51e6	style: add skeletons to paymentId and deviceId pages ♻️ All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 9m13s Details	2025-09-24 18:20:35 +05:00
i701	31a05ae917	style: add skeletons to paymentId and deviceId pages ♻️ All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 10m58s Details	2025-09-24 17:46:04 +05:00
i701	5dab74b14b	refactor: create utility function to hide AccountInformation component for topup and payment 🔧 All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 8m50s Details	2025-09-21 10:07:16 +05:00
i701	a60e9a9c85	chore: add skeletons to tables and loading.tsx files for routes and run formatting ♻️ All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 12m20s Details	2025-09-20 20:42:14 +05:00
i701	5277c13fb7	fix: allow admins only to block with details in parental control page (mobile view) 🐛 All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 9m39s Details	2025-09-20 19:07:08 +05:00
i701	035cd02012	fix: payment info display logic condition 🐛 All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 15m16s Details	2025-09-20 14:57:21 +05:00
i701	dc10fa6be4	chore: release v0.2.2 Some checks failed Build and Push Docker Images / Build and Push Docker Images (push) Failing after 1m26s Details	2025-09-20 14:41:32 +05:00
i701	39e84723b1	refactor: remove table captions from all tables 🔧	2025-09-20 14:40:55 +05:00
i701	19043aa692	fix: set 100 MVR for default wallet topup amount 🔧	2025-09-20 14:25:48 +05:00
i701	f2a17d522b	fix: hide account information once the payment is verified/expired/cancelled 🔧	2025-09-20 14:17:48 +05:00
i701	43b8e22196	fix: remove pagination if there is only 1 page 🔧	2025-09-20 14:09:12 +05:00
i701	c041c2e7d7	chore: release v0.2.1 All checks were successful Build and Push Docker Images / Build and Push Docker Images (push) Successful in 14m23s Details	2025-09-20 13:39:13 +05:00
i701	e5298aa323	fix: add release script 🔧	2025-09-20 13:37:35 +05:00