enhance: change the withdraw exporter to woocommerce one and add the proper filtering

includes/Admin/Dashboard/Pages/Withdraw.php

@@ -2,6 +2,8 @@
 
 namespace WeDevs\Dokan\Admin\Dashboard\Pages;
 
+use WeDevs\Dokan\REST\WithdrawExportController;
+
 class Withdraw extends AbstractPage {
 
     /**
@@ -32,7 +34,9 @@ public function menu( string $capability, string $position ): array {
      * @inheritDoc
      */
     public function settings(): array {
-        return [];
+        return [
+            'columns' => ( new WithdrawExportController() )->get_export_columns(),
+        ];
     }
 
     /**

includes/REST/WithdrawExportController.php

@@ -88,19 +88,19 @@
         }
 
         if ( ! empty( $request['status'] ) ) {
-            $args['status'] = $request['status'];
+            $args['status'] = dokan()->withdraw->get_status_code( $request['status'] );
         }
 
         if ( ! empty( $request['payment_method'] ) ) {
             $args['method'] = $request['payment_method'];
         }
 
         if ( ! empty( $request['after'] ) ) {
-            $args['after'] = $request['after'];
+            $args['start_date'] = $request['after'];
         }
 
         if ( ! empty( $request['before'] ) ) {
-            $args['before'] = $request['before'];
+            $args['end_date'] = $request['before'];
         }
 
         // Set pagination
@@ -197,7 +197,7 @@
      * @return \WP_Error|boolean
      */
     public function get_items_permissions_check( $request ) {
         if ( ! current_user_can( 'manage_woocommerce' ) && ! current_user_can( 'dokan_view_reports' ) ) {
             return new \WP_Error( 'woocommerce_rest_cannot_view', __( 'Sorry, you cannot list resources.', 'dokan-lite' ), array( 'status' => rest_authorization_required_code() ) );
         }
 

src/admin/dashboard/pages/withdraw/index.tsx

@@ -11,6 +11,7 @@ import {
 import { DokanTooltip as Tooltip } from '@dokan/components';
 import * as LucideIcons from 'lucide-react';
 import { dateI18n, getSettings } from '@wordpress/date';
+import { useToast } from '@getdokan/dokan-ui';
 // Import Dokan components
 import {
     AdminDataViews as DataViews,
@@ -21,7 +22,16 @@ import {
     DokanModal,
 } from '@dokan/components';
 
-import { Trash, ArrowDown, Home, Calendar, CreditCard } from 'lucide-react';
+import { Trash, ArrowDown, Home, Calendar, CreditCard, Loader2 } from 'lucide-react';
+import { directDownloadCSV } from '@src/utils/download-csv';
+
+// Define withdraw CSV headers
+const WITHDRAW_CSV_HEADERS = Object.entries(
+    dokanAdminDashboardSettings.withdraw.columns
+).map( ( [ key, value ] ) => ( {
+    key,
+    label: value,
+} ) );
 
 // Define withdraw statuses for tab filtering
 const WITHDRAW_STATUSES = [
@@ -88,6 +98,7 @@ const WithdrawPage = () => {
         approved: 0,
         cancelled: 0,
     } );
+    const [ isExporting, setIsExporting ] = useState( false );
     const [ filterArgs, setFilterArgs ] = useState( {} );
     const [ activeStatus, setActiveStatus ] = useState( 'pending' );
     const [ vendorFilter, setVendorFilter ] = useState< VendorSelect | null >(
@@ -98,6 +109,7 @@ const WithdrawPage = () => {
     const [ before, setBefore ] = useState( '' );
     const [ beforeText, setBeforeText ] = useState( '' );
     const [ focusInput, setFocusInput ] = useState( 'startDate' );
+    const toast = useToast();
 
     const [ paymentMethod, setPaymentMethod ] = useState< {
         value: string | number;
@@ -512,16 +524,9 @@ const WithdrawPage = () => {
         titleField: 'vendor',
         status: 'pending',
         layout: { density: 'comfortable' },
-        fields: [
-            'amount',
-            'status',
-            'method',
-            'charge',
-            'payable',
-            'date',
-            'details',
-            'note',
-        ],
+        fields: fields.map( ( field ) =>
+            field.id !== 'vendor' ? field.id : ''
+        ),
     } );
 
     // Handle tab selection for status filtering
@@ -551,28 +556,72 @@ const WithdrawPage = () => {
     const tabsAdditionalContents = [
         <button
             type="button"
-            className="inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-[#575757] hover:bg-[#7047EB] hover:text-white"
+            disabled={ isExporting }
+            className="inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-[#575757] hover:bg-[#7047EB] hover:text-white disabled:opacity-50 disabled:cursor-not-allowed"
             onClick={ async () => {
+                setIsExporting(true);
+
                 try {
-                    // Minimal placeholder; backend export flow may vary.
-                    // Attempt to hit export endpoint via same query params.
-                    const path = addQueryArgs( 'dokan/v2/withdraw', {
+                    const shouldEmail = data && data.length < totalItems;
+
+                    // If all data is already loaded, download directly
+                    if ( ! shouldEmail && data && data.length > 0 ) {
+                        const csvData = data.map( ( item ) => ( {
+                            ...item,
+                            user_id: item.user?.id,
+                            vendor_name: item.user?.store_name,
+                            payment_method: item.method_title,
+                            payable: item.receivable,
+                            date: item.created,
+                        } ) );
+                        directDownloadCSV( 'withdraws', WITHDRAW_CSV_HEADERS, csvData, filterArgs );
+                        return;
+                    }
+
+                    if ( shouldEmail ) {
+                        toast( {
+                            type: 'info',
+                            title: __( 'Your withdraw Report will be emailed to you.', 'dokan-lite' ),
+                        } );
+                    }
+
+                    // Otherwise, use email delivery via API
+                    const reportArgs = {
                         ...view,
                         ...filterArgs,
-                        is_export: true,
-                    } );
-                    const res = await apiFetch( { path } );
-                    if ( res && res.url ) {
-                        window.location.assign( res.url as string );
+                    };
+
+                    const exportResponse = await apiFetch({
+                        path: '/dokan/v1/reports/withdraws/export',
+                        method: 'POST',
+                        data: {
+                            report_args: reportArgs,
+                            email: shouldEmail,
+                        },
+                    });
+
+                    if ( ! exportResponse.export_id ) {
+                        throw new Error(exportResponse.data.message);
                     }
-                } catch ( e ) {
-                    // eslint-disable-next-line no-console
-                    console.error( 'Export failed or not supported yet', e );
+
+                } catch (e) {
+                    throw new Error( __('Export failed. Please try again.', 'dokan-lite') );
+                } finally {
+                    setIsExporting(false);
                 }
-            } }
+            }}
         >
-            <ArrowDown size={ 16 } />
-            { __( 'Export', 'dokan-lite' ) }
+            { isExporting ? (
+                <>
+                    <Loader2 className="animate-spin" size={16} />
+                    { __( 'Exporting...', 'dokan-lite' ) }
+                </>
+            ) : (
+                <>
+                    <ArrowDown size={16} />
+                    { __( 'Export', 'dokan-lite' ) }
+                </>
+            ) }
         </button>,
     ];
 

src/utils/download-csv.ts

@@ -0,0 +1,69 @@
+/**
+ * Generic CSV Download Utility
+ *
+ * Provides a simple, reusable way to directly download data as a CSV file
+ * in the browser. Can be used by any component across dokan-lite or dokan-pro.
+ *
+ * @example
+ * import { directDownloadCSV } from '@utils/download-csv';
+ *
+ * const headers = [
+ *   { key: 'id', label: 'ID' },
+ *   { key: 'name', label: 'Name' },
+ * ];
+ * const data = [
+ *   { id: 1, name: 'John' },
+ *   { id: 2, name: 'Jane' },
+ * ];
+ * directDownloadCSV( 'users', headers, data );
+ */
+
+import {
+    downloadCSVFile,
+    generateCSVDataFromTable,
+    generateCSVFileName,
+} from '@woocommerce/csv-export';
+
+/**
+ * Convert an array of objects into CSV-compatible row arrays,
+ * based on the header keys.
+ *
+ * @param {Array<Object>} data    - Array of data objects.
+ * @param {Array<{key: string, label: string}>} headers - Header definitions (key + label).
+ * @return {Array<Array<{display: string, value: string | number}>>} Rows suitable for CSV generation.
+ */
+export const objectToCSVRows = ( data, headers ) => {
+    return data.map( ( item ) =>
+        headers.map( ( header ) => {
+            const value = item[ header.key ];
+
+            let stringValue = '';
+            if ( value !== null && value !== undefined ) {
+                stringValue =
+                    typeof value === 'object'
+                        ? JSON.stringify( value )
+                        : String( value );
+            }
+
+            return { display: stringValue, value: stringValue };
+        } )
+    );
+};
+
+/**
+ * Directly download data as a CSV file in the browser.
+ *
+ * @param {string} filename - Base name for the CSV file (without extension).
+ * @param {Array<{key: string, label: string}>} headers - Column header definitions.
+ * @param {Array<Object>} data - Array of data objects to export.
+ * @param {Object} [params={}] - Optional query params to include in the filename.
+ */
+export const directDownloadCSV = ( filename, headers, data, params = {} ) => {
+    const rows = objectToCSVRows( data, headers );
+
+    downloadCSVFile(
+        generateCSVFileName( filename, params ),
+        generateCSVDataFromTable( headers, rows )
+    );
+};
+

types/externals.d.ts

@@ -54,6 +54,18 @@ declare module '@woocommerce/blocks-checkout' {
   export = blocksCheckout;
 }
 
+declare module '@woocommerce/csv-export' {
+  export function downloadCSVFile( fileName: string, content: string ): void;
+  export function generateCSVDataFromTable(
+    headers: Array< { key: string; label: string } >,
+    rows: Array<Array<{ display: string; value: string | number }>>
+  ): string;
+  export function generateCSVFileName(
+    name: string,
+    params?: Record< string, string >
+  ): string;
+}
+
 // Dokan global packages - mapped to global dokan object
 declare module '@dokan/components' {
   export const DataViews: any;