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

Fixed UI Managemember

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-15 17:34:02 +07:00
parent d78805dbce
commit b5b6019ce5
3 changed files with 104 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/members/manage-members/Columns.tsx
View File

@ -1,3 +1,4 @@
import { KeenIcon } from '@/components';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
DropdownMenu, DropdownMenu,
@ -18,7 +19,7 @@ export type Members = {
created_at: Date; created_at: Date;
}; };
export const columns: ColumnDef<Members>[] = [ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members>[] => [
{ {
accessorKey: 'no', accessorKey: 'no',
header: ({ column }) => { header: ({ column }) => {
@ -110,22 +111,12 @@ export const columns: ColumnDef<Members>[] = [
const dataMembers = row.original; const dataMembers = row.original;
return ( return (
<DropdownMenu> <button
{/* <DropdownMenuTrigger asChild> className="btn btn-sm btn-icon btn-clear btn-light"
<Button variant="ghost" className="h-8 w-8 p-0"> onClick={() => handleUpdate(dataMembers)}
<span className="sr-only">Open menu</span> >
<MoreHorizontal className="h-4 w-4" /> <KeenIcon icon="notepad-edit" />
</Button> </button>
</DropdownMenuTrigger> */}
{/* <DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => navigator.clipboard.writeText(dataMembers.id.toString())}
>
Copy account ID
</DropdownMenuItem>
</DropdownMenuContent> */}
</DropdownMenu>
); );
} }
} }

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

@ -1,18 +1,20 @@
import { DataTable } from '@/components/ui/DataTable'; import { DataTable } from '@/components/ui/DataTable';
import { apiConfig } from '@/config/api.config'; import { apiConfig } from '@/config/api.config';
import { columns, Members, initialMember } from './Columns'; import { getColumns, Members, initialMember } from './Columns';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
// import CustomerDialog from './CustomerDetailModal'; // import CustomerDialog from './CustomerDetailModal';
import DetailMember from './blocks/DetailMember'; import DetailMember from './blocks/DetailMember';
import ConfirmDialog from '@/components/confirm'; import ConfirmDialog from '@/components/confirm';
import { useAuthContext } from '@/auth'; import { useAuthContext } from '@/auth';
import { LoaderTransparant } from '@/components'; import { DataGridInner, LoaderTransparant } from '@/components';
import { DataGridProvider } from '@/components';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Breadcrumbs, Link } from '@mui/material'; import { Breadcrumbs, Link } from '@mui/material';
const BASE_URL_MASTER_DATA = apiConfig.service_master_data; const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const BASE_URL = apiConfig.service_customer; const BASE_URL = apiConfig.service_customer;
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import ListToolbar from './blocks/ListToolBar';
const ManageMembers = () => { const ManageMembers = () => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [members, setMembers] = useState([]); const [members, setMembers] = useState([]);
@ -23,8 +25,8 @@ const ManageMembers = () => {
const [dialogOpen, setDialogOpen] = useState(false); const [dialogOpen, setDialogOpen] = useState(false);
const [dialogType, setDialogType] = useState(''); const [dialogType, setDialogType] = useState('');
const closeDialog = () => { const closeDialog = () => {
setIsDialogOpen(false) setIsDialogOpen(false);
setMember(initialMember) setMember(initialMember);
}; };
const { getUser } = useAuthContext(); const { getUser } = useAuthContext();
@ -50,7 +52,7 @@ const ManageMembers = () => {
el.no = temp++; el.no = temp++;
if (el.date_birth) { if (el.date_birth) {
const d = new Date(el.date_birth); const d = new Date(el.date_birth);
el.date_birth = d.toLocaleString("sv-SE"); el.date_birth = d.toLocaleString('sv-SE');
} }
el.name = el.fullname; el.name = el.fullname;
return el; return el;
@ -58,14 +60,14 @@ const ManageMembers = () => {
setMembers(resMembers); setMembers(resMembers);
let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, { let getProfession: any = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
params: { params: {
limit: 50, limit: 50,
page: 1, page: 1,
with_deleted: false, with_deleted: false,
order_field: 'name', order_field: 'name',
order_direction: 'ASC', order_direction: 'ASC'
} }
}); });
setProfession(getProfession.data.data.list) setProfession(getProfession.data.data.list);
} catch (error: any) { } catch (error: any) {
toast.error(error.message); toast.error(error.message);
console.log(error); console.log(error);
@ -74,14 +76,14 @@ const ManageMembers = () => {
const handleUpdate = (data: any) => { const handleUpdate = (data: any) => {
setDialogType('update'); setDialogType('update');
setSelectedMember(data.id) setSelectedMember(data.id);
setMember(data); setMember(data);
setIsDialogOpen(true); setIsDialogOpen(true);
}; };
function createMember() { function createMember() {
setDialogType('create'); setDialogType('create');
setSelectedMember('') setSelectedMember('');
setMember(initialMember); setMember(initialMember);
setIsDialogOpen(true); setIsDialogOpen(true);
} }
@ -92,7 +94,7 @@ const ManageMembers = () => {
} }
const handleYes = async () => { const handleYes = async () => {
setLoading(true) setLoading(true);
const userLogin: any = await getUser(); const userLogin: any = await getUser();
const updateData: any = member; const updateData: any = member;
updateData.updated_by = userLogin.data ? userLogin.data.id : ''; updateData.updated_by = userLogin.data ? userLogin.data.id : '';
@ -135,7 +137,7 @@ const ManageMembers = () => {
for (const property in updateData) { for (const property in updateData) {
if (updateData[property]) form.append(property, updateData[property]); if (updateData[property]) form.append(property, updateData[property]);
} }
if (dialogType === 'update') { if (dialogType === 'update') {
await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, form, { await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, form, {
headers: { headers: {
@ -145,8 +147,8 @@ const ManageMembers = () => {
toast.success('Success Edit Member'); toast.success('Success Edit Member');
} }
if (dialogType === 'create') { if (dialogType === 'create') {
const createMember:any = member const createMember: any = member;
createMember.pin = "admin" createMember.pin = 'admin';
delete createMember.password; delete createMember.password;
delete createMember.try_pin; delete createMember.try_pin;
delete createMember.license_number; delete createMember.license_number;
@ -162,7 +164,7 @@ const ManageMembers = () => {
delete createMember.approval_description_premium; delete createMember.approval_description_premium;
delete createMember.approval_description_agent; delete createMember.approval_description_agent;
delete createMember.language; delete createMember.language;
await axios.post(`${BASE_URL}/customers/create`, member) await axios.post(`${BASE_URL}/customers/create`, member);
toast.success('Success Create Member. PIN sent to email'); toast.success('Success Create Member. PIN sent to email');
} }
} catch (error: any) { } catch (error: any) {
@ -171,12 +173,12 @@ const ManageMembers = () => {
setDialogOpen(false); setDialogOpen(false);
closeDialog(); closeDialog();
await fetchCustomers(); await fetchCustomers();
setLoading(false) setLoading(false);
} }
}; };
function setShowAddDialog(el: any) { function setShowAddDialog(el: any) {
setIsDialogOpen(el) setIsDialogOpen(el);
} }
if (loading) return <LoaderTransparant />; if (loading) return <LoaderTransparant />;
@ -196,7 +198,7 @@ const ManageMembers = () => {
onYes={handleYes} onYes={handleYes}
onNo={() => setDialogOpen(false)} onNo={() => setDialogOpen(false)}
/> />
{ (member.id!=='' || dialogType==='create') ? ( {member.id !== '' || dialogType === 'create' ? (
<DetailMember <DetailMember
showAddDialog={isDialogOpen} showAddDialog={isDialogOpen}
setShowAddDialog={setShowAddDialog} setShowAddDialog={setShowAddDialog}
@ -207,9 +209,13 @@ const ManageMembers = () => {
profession={profession} profession={profession}
dialogType={dialogType} dialogType={dialogType}
/> />
): ""} ) : (
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">Manage Members</h1> ''
<div className='grid gap-5 lg:gap-7.5 mx-8 w-auto'> )}
<h1 className="text-xl font-medium leading-none text-gray-900 mb-3 grid gap-5 lg:gap-7.5 mx-8 w-auto">
Manage Members
</h1>
<div className="grid gap-5 lg:gap-7.5 mx-8 w-auto">
<Breadcrumbs> <Breadcrumbs>
<Link underline="none" color="inherit" href="/"> <Link underline="none" color="inherit" href="/">
<span className="text-sm hover:underline">Dashboard</span> <span className="text-sm hover:underline">Dashboard</span>
@ -225,13 +231,20 @@ const ManageMembers = () => {
</div> </div>
<div className="w-full overflow-x-auto px-4"> <div className="w-full overflow-x-auto px-4">
<div className="min-w-[800px]"> <div className="min-w-[800px]">
<DataTable <DataGridProvider
data={members} data={members}
createData={createMember} columns={getColumns(handleUpdate)}
columns={columns} layout={{ card: true }}
onUpdate={handleUpdate} serverSide={false}
onDelete={null} toolbar={
/> <ListToolbar createMember={createMember} />
}
onRowSelectionChange={(selected, table: any) => {
const selectedRow = table.getSelectedRowModel().rows[0];
if (selectedRow) handleUpdate(selectedRow.original);
}}
>
</DataGridProvider>
</div> </div>
</div> </div>
</div> </div>

53
src/pages/members/manage-members/blocks/ListToolBar.tsx Normal file
View File

@ -0,0 +1,53 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
const ListToolbar = ({ createMember }: { createMember: () => void }) => {
const { table, reload } = useDataGrid();
const [ usernameFilter, setUsernameFilter] = useState('');
const [emailFilter, setEmailFilter] = useState('');
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setUsernameFilter(e.target.value);
table.getColumn('username')?.setFilterValue(e.target.value);
};
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEmailFilter(e.target.value);
table.getColumn('email')?.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 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">
<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" />
</Button>
</DefaultTooltip>
</div>
</div>
</div>
</div>
);
};
export default ListToolbar;