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

add loading in detail dialog

Browse Source
This commit is contained in:
wayanrivan
2025-06-02 14:11:28 +07:00
parent 90a2e28935
commit 3e4ef55408
2 changed files with 88 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx
View File

@ -53,12 +53,24 @@ const ManageApprovalTransactionContext = createContext<ContextProps>(initialProp
const API_URL = apiConfig.transaction;
const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [isLoadingDetail, setIsLoadingDetail] = useState(false);
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showApprovalDialog, setShowApprovalDialog] = useState(false);
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
const [selectedTransactionIdForApproval, setSelectedTransactionIdForApproval] = useState<number | null>(null);
const [transaction, setTransaction] = useState<ApprovalTransactionProps[]>([]);
const handleShowDetail = (transactionId: any) => {
setIsLoadingDetail(true);
setSelectedTransactionId(transactionId);
// Simulasi loading (bisa ganti dengan fetch detail data jika perlu)
setTimeout(() => {
setShowDetailDialog(true);
setIsLoadingDetail(false);
}, 1000); // 500ms loading
};
const { GetData } = useCallApi();
const navigate = useNavigate();
@ -236,11 +248,8 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
return (
<div key={`actions-${row.id}`} className="flex gap-2 justify-center">
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setSelectedTransactionId(row.id);
setShowDetailDialog(true);
}}
className={`btn btn-sm btn-icon btn-clear btn-light ${isLoadingDetail ? "cursor-not-allowed opacity-60" : ""}`}
onClick={() => !isLoadingDetail && handleShowDetail(row.id)}
>
<KeenIcon icon="eye" />
</button>
@ -367,6 +376,32 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
>
<Toaster expand visibleToasts={9} duration={3000} />
{isLoadingDetail && (
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-40">
<svg
className="w-8 h-8 animate-spin text-white mb-2"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
></path>
</svg>
<span className="text-white text-lg font-medium">Loading data...</span>
</div>
)}
<DataGridProvider
columns={columns}
pagination={{ size: 10 }}

58
src/pages/transaction/history-transaction/hooks/TransactionContext.tsx
View File

@ -47,6 +47,7 @@ const ManageTransactionContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.transaction;
const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [isLoadingDetail, setIsLoadingDetail] = useState(false);
const [showDetailDialog, setShowDetailDialog] = useState(false);
const [showRollbackDialog, setShowRollbackDialog] = useState(false);
const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
@ -58,6 +59,18 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
};
const handleShowDetail = (transactionId: any) => {
setIsLoadingDetail(true);
setSelectedTransactionId(transactionId);
// Simulasi loading (bisa ganti dengan fetch detail data jika perlu)
setTimeout(() => {
setShowDetailDialog(true);
setIsLoadingDetail(false);
}, 1000); // 500ms loading
};
const columns = useMemo<ColumnDef<any>[]>(
() => [
{
@ -261,18 +274,17 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableHiding: false,
cell: (data) => {
const row = data.row.original;
const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
// const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
return (
<div key={`actions-${row.id}`}>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setSelectedTransactionId(row.id);
setShowDetailDialog(true);
}}
>
<KeenIcon icon="eye" />
</button>
<div className="relative inline-block">
<button
className={`btn btn-sm btn-icon btn-clear btn-light ${isLoadingDetail ? "cursor-not-allowed opacity-60" : ""}`}
onClick={() => !isLoadingDetail && handleShowDetail(row.id)}
>
<KeenIcon icon="eye" />
</button>
</div>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
@ -409,6 +421,32 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
>
<Toaster expand visibleToasts={9} duration={3000} />
{isLoadingDetail && (
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-40">
<svg
className="w-8 h-8 animate-spin text-white mb-2"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
></path>
</svg>
<span className="text-white text-lg font-medium">Loading data...</span>
</div>
)}
<DataGridProvider
columns={columns}