Update tampilan

2025-04-08 11:53:25 +07:00
parent e012fadab1
commit 13da7fde9c
29 changed files with 1018 additions and 652 deletions
--- a/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
@ -0,0 +1,152 @@
+import { useTransactionContext } from '../hooks/useApprovalTransactionContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from '@/components/ui/select';
+import { Alert, KeenIcon, useDataGrid } from '@/components';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { toast } from 'sonner';
+import { Input } from '@/components/ui/input';
+
+const API_URL = apiConfig.transaction;
+
+const ApprovalDialog = () => {
+    const { GetData, PostData } = useCallApi();
+    // const { reload } = useDataGrid();
+    const {
+        showApprovalDialog,
+        setShowApprovalDialog,
+        selectedTransactionIdForApproval
+    } = useTransactionContext();
+
+    const [transactionDetails, setTransactionDetails] = useState<any>(null);
+
+    const [formField, setFormField] = useState({
+        transaction_code: '',
+        status: ''
+    });
+
+    const [alert, setAlert] = useState({
+        show: false,
+        message: ''
+    });
+
+    const doApproval = useCallback(
+        async (e: React.FormEvent<HTMLFormElement>) => {
+            e.preventDefault();
+
+            if (!transactionDetails || !transactionDetails.code) {
+                toast.error('Transaction data not loaded yet.');
+                return;
+            }
+
+            if (!formField.status) {
+                toast.error('Please select a status.');
+                return;
+            }
+
+            const response = await PostData(`${API_URL}/transaction/set-approval`, {
+                transaction_code: transactionDetails.code,
+                status: formField.status,
+            });
+
+            if (response?.status) {
+                setAlert((prev) => ({ ...prev, show: false, message: '' }));
+                toast.success('Success Update Position');
+                const createActivity = {
+                    module: 'Approval Transaction',
+                    description: `Change status approve for transaction => ${transactionDetails.code}`,
+                    action: 'U'
+                };
+                doSaveLogActivity(createActivity);
+                setShowApprovalDialog(false); // optionally close dialog
+            } else {
+                setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+            }
+        },
+        [formField, transactionDetails]
+    );
+
+    useEffect(() => {
+        const fetchTransactionDetails = async () => {
+            if (selectedTransactionIdForApproval) {
+                try {
+                    const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionIdForApproval}`, {
+                        id: selectedTransactionIdForApproval
+                    });
+                    // console.log(response?.data.code);
+                    // console.log(selectedTransactionIdForApproval);
+                    setTransactionDetails(response?.data);
+                } catch (error) {
+                    console.error('Error fetching transaction', error);
+                }
+            }
+        };
+
+        if (showApprovalDialog && selectedTransactionIdForApproval) {
+            fetchTransactionDetails();
+        }
+    }, [showApprovalDialog, selectedTransactionIdForApproval, GetData]);
+
+
+    return (
+        <Dialog open={showApprovalDialog} onOpenChange={setShowApprovalDialog}>
+            <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>Approval Transaction</DialogTitle>
+                </DialogHeader>
+                <DialogBody>
+                    <form action="" onSubmit={doApproval}>
+                        <div className="card-body grid gap-5 p-0">
+                            <div className="w-full">
+                                <div className="flex items-center flex-wrap gap-2.5">
+                                    <label className="form-label max-w-56">Status</label>
+
+                                    <div className="grow">
+                                        <Select
+                                        value={formField.status}
+                                        onValueChange={(status) => setFormField((prev) => ({ ...prev, status }))}
+                                        >
+                                            <SelectTrigger>
+                                                <SelectValue placeholder="Select" />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectItem value="Y">APPROVE</SelectItem>
+                                                <SelectItem value="N">REJECTED</SelectItem>
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                </div>
+                            </div>
+
+
+                            <hr />
+                            <div className="flex justify-end">
+                                <Button className="btn btn-primary" type="submit">
+                                    Save Changes
+                                </Button>
+                            </div>
+                        </div>
+                    </form>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ApprovalDialog;