TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix detail member

Browse Source
This commit is contained in:
unknown
2025-04-17 17:40:17 +07:00
parent 58e60ebaae d550a9c5f1
commit f2ab346a74
31 changed files with 320 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/master/aldeias/blocks/AddDialog.tsx
View File

@ -27,8 +27,8 @@ import {
import { doSaveLogActivity } from '@/actions/GlobalActions';
interface SucosProps {
sucos_id: number;
sucos_name: string;
id: number;
name: string;
}
const API_URL = apiConfig.service_master_data;
@ -181,7 +181,7 @@ const AddDialog = () => {
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
{sucos.find((suco) => suco.id === formField.sucosId)?.name ||
'Select Sucos'}
</button>
</PopoverTrigger>
@ -196,17 +196,17 @@ const AddDialog = () => {
<CommandGroup>
{sucos.map((suco) => (
<CommandItem
key={suco.sucos_id}
value={suco.sucos_name}
key={suco.id}
value={suco.name}
onSelect={() => {
setFormField({
...formField,
sucosId: suco.sucos_id
sucosId: suco.id
});
setOpen(false);
}}
>
{suco.sucos_name}
{suco.name}
</CommandItem>
))}
</CommandGroup>

11
src/pages/master/aldeias/blocks/DeleteDialog.tsx
View File

@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks';
import { useCallback, useState } from 'react';
import { toast } from 'sonner';
import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions';
@ -52,6 +59,8 @@ const DeleteDialog = () => {
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0 block">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3>
<span className="text-sm">You will delete this data!</span>

11
src/pages/master/aldeias/blocks/EditDialog.tsx
View File

@ -98,7 +98,7 @@ const EditDialog = () => {
});
setSucos(response?.data.list);
console.log(sucos);
// console.log(sucos);
} catch (error) {
console.error('Error fetching Sucos', error);
setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' });
@ -107,7 +107,10 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
if (response?.status) {
setFormField((prev) => ({
@ -221,8 +224,8 @@ const EditDialog = () => {
className="input col-span-5 text-left"
style={{ color: 'inherit' }}
>
{sucos.find((suco) => suco.id === formField.sucosId)
?.name || 'Select Sucos'}
{sucos.find((suco) => suco.id === formField.sucosId)?.name ||
'Select Sucos'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">

8
src/pages/master/conversion/blocks/EditDialog.tsx
View File

@ -120,7 +120,10 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
console.log('Transaction Type: ', response?.data);
if (response?.status) {
setFormField((prev) => ({
@ -302,9 +305,6 @@ const EditDialog = () => {
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Save Changes</Button>
</div>
</div>

8
src/pages/master/currency/blocks/EditDialog.tsx
View File

@ -101,7 +101,10 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL}/dashboard/currency/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
// console.log('Transaction Type: ', response?.data);
if (response?.status) {
setFormField((prev) => ({
@ -232,9 +235,6 @@ const EditDialog = () => {
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Save Changes</Button>
</div>
</div>

4
src/pages/master/municipios/blocks/EditDialog.tsx
View File

@ -77,7 +77,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL}/municipios/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
if (response?.status) {
setFormField((prev) => ({

7
src/pages/master/postoadms/blocks/EditDialog.tsx
View File

@ -114,7 +114,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
if (response?.status) {
setFormField((prev) => ({
@ -259,9 +261,6 @@ const EditDialog = () => {
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div>

9
src/pages/master/products/blocks/EditDialog.tsx
View File

@ -125,7 +125,11 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 500));
const fetchData = GetData(`${API_URL}/product/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
// console.log(response);
if (response?.status) {
@ -445,9 +449,6 @@ const EditDialog = () => {
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Save Changes</Button>
</div>
</div>

4
src/pages/master/profession/blocks/EditDialog.tsx
View File

@ -74,7 +74,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL}/profession/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
if (response?.status) {
setFormField((prev) => ({

11
src/pages/master/provider/blocks/EditDialog.tsx
View File

@ -148,7 +148,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
// console.log(response);
if (response?.status) {
setFormField((prev) => ({
@ -157,7 +159,7 @@ const EditDialog = () => {
description: response?.data.description,
type: response?.data.type,
status: response?.data.status,
transaction_type: response?.data.transaction_type.id,
transaction_type: response?.data.transaction_type?.id || '',
agent: response?.data.agent?.id || null
}));
}
@ -172,7 +174,8 @@ const EditDialog = () => {
formField.description.trim() === '' ||
formField.type.trim() === '' ||
formField.status.trim() === '' ||
formField.transaction_type.trim() === ''
formField.transaction_type.trim() === '' ||
formField.agent === null
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
@ -324,7 +327,7 @@ const EditDialog = () => {
setFormField({ ...formField, transaction_type: value })
}
>
<SelectTrigger>
<SelectTrigger className="min-h-[40px] items-center">
<SelectValue placeholder="Select Transaction Type" />
</SelectTrigger>
<SelectContent>

8
src/pages/master/reward/blocks/EditDialog.tsx
View File

@ -95,8 +95,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
// console.log('Ini datanya:', id);
const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL}/reward/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
// console.log('API Response:', response);
if (response?.status) {
@ -260,9 +261,6 @@ const EditDialog = () => {
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Save Changes</Button>
</div>
</div>

7
src/pages/master/sucos/blocks/EditDialog.tsx
View File

@ -113,7 +113,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL}/sucos/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
// console.log('Data Sucos:', response?.data);
if (response?.status) {
@ -258,9 +260,6 @@ const EditDialog = () => {
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div>

1
src/pages/master/sucos/hooks/ManageSucosContext.tsx
View File

@ -163,7 +163,6 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
console.log('Sucos List Response:', response?.data);
setSucos(response?.data.list || []);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {

5
src/pages/master/wallet/blocks/EditDialog.tsx
View File

@ -117,11 +117,12 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const fetchData = GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
id
});
const [response] = await Promise.all([fetchData, minDelay]);
console.log(response);
if (response?.status) {
setFormField((prev) => ({
...prev,

3
src/pages/master/walletRule/blocks/EditDialog.tsx
View File

@ -402,9 +402,6 @@ const EditDialog = () => {
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Update</Button>
</div>
</div>

36
src/pages/members/kyc/Kyc.tsx
View File

@ -1,8 +1,13 @@
import { Container, DataGridInner, DataGridProvider, TDataGridProps } from '@/components';
import {
Container,
DataGridInner,
DataGridProvider,
TDataGridProps,
useDataGrid
} from '@/components';
import { DataTable } from '@/components/ui/DataTable';
import { Table } from '@tanstack/react-table';
import React, { createContext, useContext, useState, useEffect } from 'react';
import { ManageKycContextProvider } from './hooks';
import { getColumns, initialMember } from './Columns';
import { useAuthContext } from '@/auth';
import { LoaderTransparant } from '@/components';
@ -17,6 +22,7 @@ import DetailMember from '../manage-members/blocks/DetailMember';
import { Breadcrumbs, Link } from '@mui/material';
import { Helmet } from 'react-helmet';
import { ListToolBar } from './blocks/ListToolBar';
import { RefreshCw } from 'lucide-react';
const Kyc = () => {
const [loading, setLoading] = useState(false);
@ -26,6 +32,7 @@ const Kyc = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState('');
const [isReloading, setIsReloading] = useState(false);
const closeDialog = () => setIsDialogOpen(false);
const { getUser } = useAuthContext();
@ -65,6 +72,9 @@ const Kyc = () => {
} catch (error: any) {
toast.error(error.message);
console.log(error);
} finally {
setLoading(false);
setIsReloading(false);
}
}
@ -85,6 +95,15 @@ const Kyc = () => {
setDialogOpen(true);
}
const resetForm = () => {
setMember(initialMember);
};
const handleReload = () => {
setIsReloading(true);
fetchCustomers();
};
const handleYes = async () => {
setLoading(true);
const userLogin: any = await getUser();
@ -165,6 +184,7 @@ const Kyc = () => {
setIsDialogOpen(false);
await fetchCustomers();
setLoading(false);
setIsReloading(false);
}
};
@ -227,12 +247,20 @@ const Kyc = () => {
</Link>
</Breadcrumbs>
{/* <div className="w-full overflow-x-auto"> */}
<div className="grid gap-5 lg:gap-7.5 mt-5">
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && (
<div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
<div className="flex flex-col items-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
<span className="text-slate-500 font-medium">Refreshing data...</span>
</div>
</div>
)}
<DataGridProvider
data={members}
columns={getColumns(handleUpdate)}
pagination={{ size: 25 }}
toolbar={<ListToolBar />}
toolbar={<ListToolBar onReload={handleReload} isReloading={isReloading} />}
layout={{ card: true }}
sorting={[{ id: 'created_at', desc: true }]}
serverSide={false}

56
src/pages/members/kyc/blocks/ListToolBar.tsx
View File

@ -1,40 +1,44 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { useKycContext } from '../hooks';
import { useState } from 'react';
const ListToolBar = () => {
interface ListToolbarProps {
onReload: () => void;
isReloading: boolean;
}
const ListToolBar = ({ onReload, isReloading }: ListToolbarProps) => {
const { table, reload } = useDataGrid();
const [usernameFilter, setUsernameFilter] = useState('');
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUsernameFilter(e.target.value);
table.getColumn('username')?.setFilterValue(e.target.value);
};
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center">
<div className="flex w-[50%] gap-3 items-center">
<label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search users"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/>
</label>
<DefaultTooltip title={'Filter'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
// disabled={isLoading}
// onClick={handleFilterData}
>
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
<KeenIcon icon="filter" />
</Button>
</DefaultTooltip>
<div className="flex gap-3 items-center">
<input
type="text"
placeholder="Search Username"
value={usernameFilter}
onChange={handleUsernameChange}
className="input input-sm w-40"
/>
</div>
<div className="flex gap-3 items-center">
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
<KeenIcon icon="arrows-circle" />
<DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
{isReloading ? (
<div className="animate-spin">
<KeenIcon icon="arrows-circle" />
</div>
) : (
<KeenIcon icon="arrows-circle" />
)}
</Button>
</DefaultTooltip>
</div>

145
src/pages/members/kyc/hooks/ManageKycContext.tsx
View File

@ -1,145 +0,0 @@
import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
import { Toaster } from '@/components/ui/sonner';
import { apiConfig } from '@/config/api.config';
import { ColumnDef } from '@tanstack/react-table';
import { createContext, useCallback, useMemo, useState } from 'react';
import { ListToolBar } from '../blocks/ListToolBar';
interface SelectedUser {
id: string;
name: string;
email: string;
role: string;
description: string;
created_date: Date;
}
interface ContextProps {
showDetailDialog: boolean;
handleDetailDialog: (show: boolean, selected_user: SelectedUser | null) => void;
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
selectedUser: SelectedUser | null;
}
const initialProps: ContextProps = {
showDetailDialog: false,
handleDetailDialog: () => {},
showAddDialog: false,
handleAddDialog: () => {},
selectedUser: null
};
const ManageKycContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_dashboard;
const ManageKycContextProvider = ({ children }: { children: React.ReactNode }) => {
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showAddDialog, setShowAddDialog] = useState(false);
const [selectedUser, setSelectedUser] = useState<SelectedUser | null>(null);
const handleDetailDialog = useCallback((show: boolean, selected_user: SelectedUser | null) => {
setSelectedUser(show ? selected_user : null);
setShowDetailDialog(show);
}, []);
const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show);
}, []);
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
accessorFn: (row) => row.id,
id: 'id',
header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[100px]'
}
},
{
accessorFn: (row) => row.created_date,
id: 'created_date',
header: ({ column }) => <DataGridColumnHeader title="Created Date" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
}
},
{
accessorFn: (row) => row.name,
id: 'name',
header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
enableSorting: true,
enableHiding: false,
meta: {
headerClassName: 'w-[350px]'
}
},
{
accessorFn: (row) => row.description,
id: 'description',
header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
enableSorting: true,
meta: {
headerClassName: 'w-[350px]'
}
},
{
id: 'actions',
enableSorting: false,
header: ({ column }) => <DataGridColumnHeader title="Action" column={column} />,
cell: (data: any) => {
const row = data.row.original;
return (
<>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDetailDialog(true, row.id)}
>
<KeenIcon icon="notepad-edit" />
</button>
</>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center'
}
}
],
[handleDetailDialog]
);
return (
<ManageKycContext.Provider
value={{
showDetailDialog,
handleDetailDialog,
showAddDialog,
handleAddDialog,
selectedUser
}}
>
<Toaster expand visibleToasts={9} duration={3000} />
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}
toolbar={<ListToolBar />}
layout={{ card: true }}
sorting={[{ id: 'name', desc: false }]}
serverSide={true}
>
{children}
</DataGridProvider>
</ManageKycContext.Provider>
);
};
export { ManageKycContextProvider, ManageKycContext };
export type { SelectedUser };

2
src/pages/members/kyc/hooks/index.ts
View File

@ -1,2 +0,0 @@
export * from './ManageKycContext';
export * from './useKycContext';

12
src/pages/members/kyc/hooks/useKycContext.tsx
View File

@ -1,12 +0,0 @@
import { useContext } from 'react';
import { ManageKycContext } from './ManageKycContext';
const useKycContext = () => {
const context = useContext(ManageKycContext);
if (!context) throw new Error('useKycContext must be used within AuthProvider');
return context;
};
export { useKycContext };

33
src/pages/members/manage-members/ManageMembers.tsx
View File

@ -3,7 +3,6 @@ import { apiConfig } from '@/config/api.config';
import { getColumns, Members, initialMember } from './Columns';
import { useState, useEffect } from 'react';
import axios from 'axios';
// import CustomerDialog from './CustomerDetailModal';
import DetailMember from './blocks/DetailMember';
import ConfirmDialog from '@/components/confirm';
import { useAuthContext } from '@/auth';
@ -15,7 +14,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const BASE_URL = apiConfig.service_customer;
import { Helmet } from 'react-helmet';
import ListToolbar from './blocks/ListToolBar';
import { RefreshCw } from 'lucide-react';
const ManageMembers = () => {
const [loading, setLoading] = useState(false);
const [members, setMembers] = useState([]);
@ -25,6 +24,7 @@ const ManageMembers = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState('');
const [isReloading, setIsReloading] = useState(false);
const closeDialog = () => {
setIsDialogOpen(false);
setMember(initialMember);
@ -37,7 +37,7 @@ const ManageMembers = () => {
setLoading(false);
}, []);
async function fetchCustomers() {
async function fetchCustomers(): Promise<void> {
try {
let customers = await axios.get(`${BASE_URL}/customer/list`, {
params: {
@ -72,6 +72,9 @@ const ManageMembers = () => {
} catch (error: any) {
toast.error(error.message);
console.log(error);
} finally {
setLoading(false);
setIsReloading(false);
}
}
@ -93,7 +96,10 @@ const ManageMembers = () => {
setMember(data);
setDialogOpen(true);
}
const handleReload = () => {
setIsReloading(true);
fetchCustomers();
};
const handleYes = async () => {
setLoading(true);
const userLogin: any = await getUser();
@ -226,14 +232,29 @@ const ManageMembers = () => {
</Link>
</Breadcrumbs>
{/* <div className="w-full overflow-x-auto px-4"> */}
<div className="grid gap-5 lg:gap-7.5 mt-5">
<div className="grid gap-5 lg:gap-7.5 mt-5 relative">
{isReloading && (
<div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
<div className="flex flex-col items-center">
<RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
<span className="text-slate-500 font-medium">Refreshing data...</span>
</div>
</div>
)}
<DataGridProvider
data={members}
pagination={{ size: 25 }}
columns={getColumns(handleUpdate)}
layout={{ card: true }}
serverSide={false}
toolbar={<ListToolbar createMember={createMember} />}
toolbar={
<ListToolbar
createMember={createMember}
onReload={handleReload}
isReloading={isReloading}
/>
}
onRowSelectionChange={(selected, table: any) => {
const selectedRow = table.getSelectedRowModel().rows[0];
if (selectedRow) handleUpdate(selectedRow.original);

43
src/pages/members/manage-members/blocks/ListToolBar.tsx
View File

@ -1,12 +1,20 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { UserPlus } from 'lucide-react';
import { KeenIcon, useDataGrid } from '@/components';
import { DefaultTooltip } from '@/components';
import { useState } from 'react';
const ListToolbar = ({ createMember }: { createMember: () => void }) => {
const { table, reload } = useDataGrid();
const [ usernameFilter, setUsernameFilter] = useState('');
const [emailFilter, setEmailFilter] = useState('');
interface ListToolbarProps {
createMember: () => void;
onReload: () => void;
isReloading: boolean;
}
const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
const [emailFilter, setEmailFilter] = useState('');
const [usernameFilter, setUsernameFilter] = useState('');
const {table}=useDataGrid();
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUsernameFilter(e.target.value);
table.getColumn('username')?.setFilterValue(e.target.value);
@ -31,16 +39,23 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
/>
</div>
<div className="flex gap-3 items-center">
<Button
variant="outline"
className="h-7.5 text-[0.8rem]"
onClick={createMember}
>
<Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
Add Data
</Button>
<DefaultTooltip title={'Refresh'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
<KeenIcon icon="arrows-circle" />
<DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
<Button
variant="outline"
className="h-7.5"
onClick={onReload}
disabled={isReloading}
>
{isReloading ? (
<div className="animate-spin">
<KeenIcon icon="arrows-circle" />
</div>
) : (
<KeenIcon icon="arrows-circle" />
)}
</Button>
</DefaultTooltip>
</div>
@ -50,4 +65,4 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
);
};
export default ListToolbar;
export default ListToolbar;

115
src/pages/notification/blocks/AddDialog.tsx
View File

@ -32,14 +32,14 @@ const API_URL_CUSTOMER = apiConfig.service_customer;
const API_URL_NOTIFICATION = apiConfig.service_notification;
const AddDialog = () => {
const parentRef = useRef<any | null>(null);
const { handleAddDialog, showAddDialog } = useManageNotificationContext();
const { reload } = useDataGrid();
const { GetData, PostData } = useCallApi();
const [alert, setAlert] = useState({ show: false, message: '' });
const initialState = {
customers: [],
customers: [] as string[],
all_customer: '',
type: '',
via: '',
subject: '',
@ -56,12 +56,25 @@ const AddDialog = () => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormField({ ...formField, [e.target.name]: e.target.value });
if (e.target.name === 'all_customer' && e.target.value === 'true') {
setFormField((prev) => ({ ...prev, customers: [] }));
}
};
const doCreateNotification = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// const payload = {
// ...formField,
// subject:
// formField.subject.trim() === '' && formField.via === 'sms'
// ? 'SMS Notification'
// : formField.subject
// };
const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField);
console.log('API Response :', response);
// console.log('send response :', response);
if (response?.status) {
handleAddDialog(false);
@ -80,44 +93,53 @@ const AddDialog = () => {
}
};
// const getCustomerList = async (sorting: any) => {
// try {
// sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
// const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
// limit: 100,
// page: 1,
// with_deleted: false,
// order_field: sorting[0].id,
// order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
// });
const getCustomerList = async (sorting: any) => {
try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: sorting[0].id,
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
});
// setCustomers(response?.data.list);
// } catch (error) {
// console.error('Error fetching customer', error);
// }
// };
setCustomers(response?.data.list);
} catch (error) {
console.error('Error fetching customer', error);
}
};
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
formField.type.trim() === '' ||
formField.all_customer.trim() === '' ||
formField.via.trim() === '' ||
formField.subject.trim() === '' ||
formField.content.trim() === ''
) {
setAlert({ show: true, message: 'Please fill all required fields.' });
return;
}
if (formField.via === 'email' && formField.subject.trim() === '') {
setAlert({ show: true, message: 'Subject is required for E-Mail' });
return;
}
if (formField.via === 'fcm' && formField.subject.trim() === '') {
setAlert({ show: true, message: 'Subject is required form FCM' });
return;
}
doCreateNotification(e);
// console.log(formField);
setAlert({ show: false, message: '' });
};
// useEffect(() => {
// getCustomerList([{ id: 'id', desc: false }]);
// }, []);
useEffect(() => {
getCustomerList([{ id: 'id', desc: false }]);
}, []);
useEffect(() => {
if (showAddDialog === false) {
@ -140,7 +162,7 @@ const AddDialog = () => {
</Alert>
)}
{/* <div className="w-full">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Send To<span className="text-red-500">*</span>
@ -149,20 +171,20 @@ const AddDialog = () => {
<label className="flex items-center space-x-2">
<input
type="radio"
name="sendTo"
value="all"
checked={formField.sendTo === 'all'}
name="all_customer"
value="true"
checked={formField.all_customer === 'true'}
onChange={handleChange}
className="accent-blue-600"
/>
<span>All Users</span>
<span>All Customers</span>
</label>
<label className="flex items-center space-x-2">
<input
type="radio"
name="sendTo"
value="selected"
checked={formField.sendTo === 'selected'}
name="all_customer"
value="false"
checked={formField.all_customer === 'false'}
onChange={handleChange}
className="accent-blue-600"
/>
@ -170,9 +192,9 @@ const AddDialog = () => {
</label>
</div>
</div>
</div> */}
</div>
{/* <div className="w-full">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Customer</label>
<Popover open={open} onOpenChange={setOpen}>
@ -181,10 +203,12 @@ const AddDialog = () => {
type="button"
className="input col-span-5 text-left flex justify-between"
style={{ color: 'inherit' }}
disabled={formField.all_customer !== 'false'}
>
<span>
{customers.find((customer) => customer.id === formField.customers)
?.username || 'Select Customer'}
{formField.customers.length === 0
? 'Select Customers'
: `${formField.customers.length} Customers Selected`}
</span>
<ChevronDown className="w-4 h-4 opacity-70" />
</button>
@ -206,11 +230,16 @@ const AddDialog = () => {
key={customer.id}
value={customer.username}
onSelect={() => {
setFormField({
...formField,
customers: customer.id
const customerId = customer.id;
setFormField((prev) => {
const isSelected = prev.customers.includes(customerId);
return {
...prev,
customers: isSelected
? prev.customers.filter((id) => id !== customerId)
: [...prev.customers, customerId]
};
});
setOpen(false);
}}
>
{customer.username}
@ -222,13 +251,11 @@ const AddDialog = () => {
</PopoverContent>
</Popover>
</div>
</div> */}
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span>
</label>
<label className="form-label flex items-center gap-1 max-w-56">Type</label>
<div className="flex gap-6 items-center">
{['info', 'promo'].map((type) => (
<label key={type} className="flex items-center space-x-2">
@ -299,7 +326,7 @@ const AddDialog = () => {
placeholder="Enter Subject"
value={formField.subject}
onChange={handleChange}
disabled={formField.via !== 'email'}
disabled={formField.via !== 'email' && formField.via !== 'fcm'}
/>
</div>
</div>

25
src/pages/notification/blocks/ListToolbar.tsx
View File

@ -1,14 +1,16 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
import { Button } from '@/components/ui/button';
import React, { useState } from 'react';
import { useEffect, useState } from 'react';
const ListToolBar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageNotificationContext();
const [searchValue, setSearchValue] = useState('');
const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('content')?.getFilterValue() as string) ?? ''
);
const handleKeydown = (event: React.KeyboardEvent) => {
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
handleSearch();
}
@ -16,8 +18,18 @@ const ListToolBar = () => {
const handleSearch = () => {
table.getColumn('content')?.setFilterValue(searchValue);
table.setPageIndex(0);
};
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('content')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@ -27,13 +39,12 @@ const ListToolBar = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search users"
placeholder="Search notifications"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeydown}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
{/* <DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
@ -41,7 +52,7 @@ const ListToolBar = () => {
>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</DefaultTooltip> */}
</div>
<div className="flex gap-3 items-center">
<Button

30
src/pages/notification/hooks/ManageNotificationContext.tsx
View File

@ -101,34 +101,6 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
enableHiding: false,
cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
}
// {
// id: 'actions',
// header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
// meta: {
// headerClassName: 'w-[100px]',
// cellClassName: 'text-center'
// },
// cell: (data: any) => {
// const row = data.row.original;
// return (
// <>
// <button
// className="btn btn-sm btn-icon btn-clear btn-light"
// onClick={() => handleEditDialog(true, row.id)}
// >
// <KeenIcon icon="notepad-edit" />
// </button>
// <button
// className="btn btn-sm btn-icon btn-clear btn-light"
// onClick={() => handleDeleteDialog(true, row.id)}
// >
// <KeenIcon icon="trash" />
// </button>
// </>
// );
// }
// }
],
[handleEditDialog, handleDeleteDialog]
);
@ -146,7 +118,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter)
});
console.log('API Response notif: ', response);
// console.log('API Response notif: ', response);
return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) {
console.error('Error fetching notification', error);

28
src/pages/settings/user/manage-position/blocks/ListToolBar.tsx
View File

@ -1,16 +1,14 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManagePositionContext } from '../hooks';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
import { useEffect, useState } from 'react';
const ListToolBar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManagePositionContext();
const [searchValue, setSearchValue] = useState('');
const handleSearch = () => {
table.getColumn('name')?.setFilterValue(searchValue);
};
const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('name')?.getFilterValue() as string) ?? ''
);
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
@ -18,6 +16,19 @@ const ListToolBar = () => {
}
};
const handleSearch = () => {
table.getColumn('username')?.setFilterValue(searchValue);
table.setPageIndex(0);
};
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('username')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@ -30,10 +41,9 @@ const ListToolBar = () => {
placeholder="Search roles"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeyDown}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
{/* <DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
@ -41,7 +51,7 @@ const ListToolBar = () => {
>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</DefaultTooltip> */}
</div>
<div className="flex gap-3 items-center">

28
src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
View File

@ -1,16 +1,14 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useUserContext } from '../hooks';
import { Button } from '@/components/ui/button';
import React, { useState } from 'react';
import { useEffect, useState } from 'react';
const ListToolBar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useUserContext();
const [searchValue, setSearchValue] = useState('');
const handleSearch = () => {
table.getColumn('username')?.setFilterValue(searchValue);
};
const [searchValue, setSearchValue] = useState<string>(
(table.getColumn('username')?.getFilterValue() as string) ?? ''
);
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
@ -18,6 +16,19 @@ const ListToolBar = () => {
}
};
const handleSearch = () => {
table.getColumn('username')?.setFilterValue(searchValue);
table.setPageIndex(0);
};
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('username')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
@ -30,10 +41,9 @@ const ListToolBar = () => {
placeholder="Search Username"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeyDown}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
{/* <DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
@ -41,7 +51,7 @@ const ListToolBar = () => {
>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</DefaultTooltip> */}
</div>
<div className="flex gap-3 items-center">
<Button

3
src/pages/transfer/transfertype/blocks/AddDialog.tsx
View File

@ -470,7 +470,8 @@ const AddDialog = () => {
<SelectItem value="TE">Top Up Escrow </SelectItem>
<SelectItem value="TM">Top Up Master Agent </SelectItem>
<SelectItem value="TA">Top Up Agent </SelectItem>
<SelectItem value="PL">Purchase Loja</SelectItem>
</SelectContent>
</Select>
</div>

12
src/pages/transfer/transfertype/blocks/EditDialog.tsx
View File

@ -174,7 +174,7 @@ const EditDialog = () => {
updated_at: formattedTime
}));
}
}, [showEditDialog, parsedUser]);
}, [showEditDialog]);
const selectedPermissionNames = groups
.filter((g) => formField.permission.includes(g.id))
@ -238,7 +238,7 @@ const EditDialog = () => {
});
return false;
}
}, [formField, selectedTransferType, PutData]);
}, [formField, selectedTransferType]);
useEffect(() => {
if (!showEditDialog) return;
@ -263,7 +263,7 @@ const EditDialog = () => {
};
getCustomerList();
}, [showEditDialog, GetData]);
}, [showEditDialog]);
useEffect(() => {
if (!showEditDialog) return;
@ -287,7 +287,7 @@ const EditDialog = () => {
};
getGroupList();
}, [showEditDialog, GetData]);
}, [showEditDialog]);
useEffect(() => {
if (!showEditDialog) return;
@ -365,6 +365,7 @@ const EditDialog = () => {
return () => clearTimeout(timer);
}, [showEditDialog, selectedTransferType, GetData]);
useEffect(() => {
if (showEditDialog === false) {
resetForm();
@ -589,7 +590,7 @@ const EditDialog = () => {
<SelectValue placeholder="Select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="D">Disbursement </SelectItem>
<SelectItem value="D">Disbursement </SelectItem>
<SelectItem value="O">Other </SelectItem>
<SelectItem value="CA">Change Group Emoney Customer to Agent </SelectItem>
<SelectItem value="AC">Change Group Emoney Agent to Customer </SelectItem>
@ -603,6 +604,7 @@ const EditDialog = () => {
<SelectItem value="TE">Top Up Escrow </SelectItem>
<SelectItem value="TM">Top Up Master Agent </SelectItem>
<SelectItem value="TA">Top Up Agent </SelectItem>
<SelectItem value="PL">Purchase Loja</SelectItem>
</SelectContent>
</Select>
</div>

1
src/pages/transfer/transfertype/blocks/ListToolBar.tsx
View File

@ -12,6 +12,7 @@ const ListToolbar = () => {
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('name')?.setFilterValue(searchValue);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);

3
src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
View File

@ -185,7 +185,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
R: 'Reward Point',
TE:'Top Up Escrow',
TM:'Top Up Master Agent',
TA:'Top Up Agent'
TA:'Top Up Agent',
PL:'Purchase Loja'
};
return mapping[row.type] || 'Unknown';