enhance: migrate admin dashboard list tables to Plugin UI DataViews

[MdAsifHossainNadim]

All Submissions:

• My code follow the WordPress' coding standards
• My code satisfies feature requirements
• My code is tested
• My code passes the PHPCS tests
• My code has proper inline documentation
• I've included related pull request(s) (optional)
• I've included developer documentation (optional)
• I've added proper labels to this pull request

Changes proposed in this Pull Request:

This is the parent/coordination PR for migrating every admin (React) dashboard list table off the legacy AdminDataViews wrapper (dokan/src/components/dataviews/AdminDataViewTable.tsx) and onto the unified DataViews component re-exported from @dokan/components (sourced from @wedevs/plugin-ui) — the same component the vendor dashboard already uses since v5.

Shared infrastructure landed on this branch:

• New getActionLabel() helper in dokan/src/components/dataviews/getActionLabel.tsx — wraps icon + label JSX so @wordpress/dataviews MenuItemTrigger and bulk-action ActionTrigger keep rendering icons (the underlying components only render action.label, so icons must live inside the label callback).
• setLocaleData( getTranslatedStrings(), 'default' ) lifted once into the admin Dashboard Layout.tsx, so every migrated page picks up DataViews i18n without duplicating the call.
• Admin DataViews CSS overrides in dokan/src/components/dataviews/style.scss — restores the single white-card look (background, 10px radius, shadow), the 65px row rhythm, the bulk-action bar buttons with borders, and the pagination layout.
• Layout.tsx wraps children in a .dokan-admin-dashboard-layout div so plugin-ui's WordPress-scoped CSS (:is(#dokan-vendor-dashboard-root, .dokan-admin-dashboard-layout, …) .pui-root-dataviews { … }) applies to every admin route — not just the dashboard root.

Sub-PRs (one per page) target this branch and contain the per-page migration for each admin table.

Hard constraint that applied to every page: this is a wrapper-component swap, not a redesign. Every existing feature was preserved — status counts, filters, modals, custom buttons (Withdraw's Export, RFQ's split layout), polling, sorting, search, pagination, per-row icons.

Related Pull Request(s)

• dokan-pro counterpart parent: https://github.com/getdokan/dokan-pro/pull/5633

Closes

• Closes https://github.com/getdokan/plugin-internal-tasks/issues/1844

How to test the changes in this Pull Request:

1. Build assets: npm install && npm run build.
2. Open WP Admin → Dokan dashboard. Visit each migrated page in turn:
   • Withdraw, Reverse Withdrawal, Vendors (covered by sub-PRs in this batch).
3. On each page verify: tabs switch + counts update, status filter persists in view.status, search debounces, pagination works, every row action shows its icon + label, bulk actions appear with icons + borders, custom buttons (Export on Withdraw) still appear in the right spot.
4. Resize to mobile width — table collapses to list layout via Plugin UI's responsive default.
5. Confirm DataViews built-in UI strings (Search, No items, Showing X of Y, pagination labels) are translated.
6. Confirm the table, tabs, and filter all share the same white card with rounded corners and shadow on every admin page.

Changelog entry

Migrate admin dashboard list tables to Plugin UI DataViews

Replaces the legacy AdminDataViews wrapper with the unified DataViews component already used by the vendor dashboard. Adds shared infrastructure: a getActionLabel helper that preserves row + bulk action icons, a single setLocaleData call in the admin Dashboard layout, scoped CSS overrides that restore the admin table polish (65px row rhythm, single white-card look, bulk-action bar, pagination), and a .dokan-admin-dashboard-layout wrapper so plugin-ui's scoped WordPress styles apply on every admin route. Per-page migrations land via stacked sub-PRs.

Before Changes

Admin tables used the in-house AdminDataViews wrapper (dokan/src/components/dataviews/AdminDataViewTable.tsx), diverging from the vendor dashboard which already uses DataViews from @wedevs/plugin-ui. Tabs, filter, and table did not share a unified card. Action icons relied on a JSX-wrapped label.

After Changes

Admin tables now use the same DataViews component as the vendor dashboard. Tabs + filter + table render in a single white card on every admin page. Row + bulk action icons render via the dedicated icon prop wrapped through getActionLabel.

Feature Video (optional)

n/a

PR Self Review Checklist:

• Code style follows WPCS / project conventions.
• Naming matches existing components (getActionLabel, dokan-admin-dashboard-layout).
• KISS: helper is one short JSX wrapper; SCSS overrides scoped to .pui-root-dataviews under .dokan-admin-dashboard-datatable.
• DRY: shared helper + Layout wrapper avoid duplicating the locale-setup and icon-wrapping per page.

FOR PR REVIEWER ONLY:

• Correct — tabs, filter, search, pagination, status counts, modals, bulk actions, per-row actions all still work on every migrated page.
• Secure — no new escaping concerns; the migration is React-only and reuses existing REST endpoints.
• Readable — getActionLabel is a 7-line helper; SCSS overrides are commented.
• Elegant — sub-PRs land cleanly into this branch with their per-page diffs only.

[coderabbitai]

Warning

Rate limit exceeded

@MdAsifHossainNadim has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 47 minutes and 24 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9ea3422d-1e91-41e6-ae15-6808a4a71ca5

📥 Commits

Reviewing files that changed from the base of the PR and between e2ec507 and 1d2bfee.

📒 Files selected for processing (4)

• src/admin/dashboard/components/Layout.tsx
• src/components/dataviews/getActionLabel.tsx
• src/components/dataviews/style.scss
• src/components/index.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch enhance/update-admin-dashboard-list-tables-using-plugin-ui

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}