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

update page dashboard conditional for cards bank and transaction detail

Browse Source
This commit is contained in:
wayanrivan
2025-05-20 13:53:52 +07:00
parent faae04cea7
commit 189a545084
4 changed files with 152 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/auth/_models.ts
View File

@ -9,6 +9,7 @@ export interface AuthModel {
company: any;
user: any;
// api_token: string;
statusbalance: string;
}
export interface UserModel {

59
src/auth/providers/JWTProvider.tsx
View File

@ -43,24 +43,6 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
const [auth, setAuth] = useState<AuthModel | undefined>(authHelper.getAuth());
const [currentUser, setCurrentUser] = useState<UserModel | undefined>();
const verify = async () => {
if (auth) {
try {
const { data: user } = await getUser();
const createCacheUser = {
name: user.name,
email: user.email,
username: user.username,
role_name: auth.role_name
};
localStorage.setItem('user', JSON.stringify(createCacheUser));
} catch {
saveAuth(undefined);
setCurrentUser(undefined);
}
}
};
const saveAuth = (auth: AuthModel | undefined) => {
setAuth(auth);
if (auth) {
@ -73,11 +55,20 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
const login = async (username: string, password: string) => {
try {
const { data: auth } = await axios
.post(LOGIN_URL, { username, password }) // , { headers: { 'Access-Control-Allow-Origin': "*" }}
.post(LOGIN_URL, { username, password })
.then((response) => response.data);
saveAuth({ ...auth.token, id: auth.user.id, role_name: auth.role_name, user: auth.user });
const enhancedAuth: AuthModel = {
...auth.token,
id: auth.user.id,
role_name: auth.role_name,
user: auth.user,
statusbalance: auth.role.status_balance
};
saveAuth(enhancedAuth);
setCurrentUser(auth.user);
const createActivity = {
module: 'Login',
description: `Login`,
@ -108,6 +99,33 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
return { data: _axios };
};
const verify = async () => {
if (auth) {
try {
const { data: user } = await getUser();
// Perbarui auth yang sekarang dengan statusbalance
saveAuth({
...auth,
statusbalance: user.role.status_balance
});
const createCacheUser = {
name: user.name,
email: user.email,
username: user.username,
role_name: auth.role_name,
statusbalance: user.role.status_balance
};
localStorage.setItem('user', JSON.stringify(createCacheUser));
} catch {
saveAuth(undefined);
setCurrentUser(undefined);
}
}
};
const logout = async () => {
const createActivity = {
module: 'Logout',
@ -130,7 +148,6 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
currentUser,
setCurrentUser,
login,
// register,
requestPasswordResetLink,
changePassword,
getUser,

2
src/pages/dashboards/home/DashboardHomePage.tsx
View File

@ -268,7 +268,7 @@ const DashboardHomePage = () => {
) : null}
<div className="flex space-x-4 mt-5">
{bankaccount?.data && bankaccount?.data.length > 0 ? (
{bankaccount?.data && bankaccount?.data.length > 0 && getAuth()?.statusbalance=='Y' ? (
bankaccount?.data.map((bankaccountdatas: { amount: string, creditlimit: string, monthlylimit: string; wallet: string; }, index: number) => (
<BankSaldo
title={bankaccountdatas.wallet}

210
src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
View File

@ -175,6 +175,24 @@ const DetailTransaction = () => {
</button>
{/* )} */}
{transactionDetails?.kind == 'P' && (
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'purchase' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('purchase')}
>
Purchase Detail
</button>
)}
{transactionDetails?.kind == 'P' && (
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'productdetail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('productdetail')}
>
Product Detail
</button>
)}
<button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'origincustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('origincustomer')}
@ -229,15 +247,105 @@ const DetailTransaction = () => {
</div>
{/* Tab Content */}
{activeTab === 'purchase' && (
<>
<h3 className="font-semibold flex items-center mt-4">
Purchase
</h3>
<div className="grid grid-cols-2 gap-4 mt-4">
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.cashback ?? transactionDetails?.transfer?.cashback ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback Point</p>
<p className="font-medium">
{transactionDetails?.purchase?.cashback_point ?? transactionDetails?.transfer?.cashback_point ?? 0}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee Amount</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.fee_amount ?? transactionDetails?.transfer?.fee_amount ?? 0
)}
</p>
</div>
</div>
</>
)}
{activeTab === 'productdetail' && (
<>
<div className="space-y-4">
<h3 className="font-semibold flex items-center mt-4">
Product Information
</h3>
<div className="grid grid-cols-2 gap-4 mt-4">
<div>
<p className="text-sm text-gray-500">Product Name</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.name ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Cash</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_cash != null
? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash)
: "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Point</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_point ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.type ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Name</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.provider?.description ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Type</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.provider?.type === "h2h"
? "HOST TO HOST"
: transactionDetails?.purchase?.product?.provider?.type === "agent"
? "AGENT"
: "-"}
</p>
</div>
</div>
</div>
</>
)}
<div className="py-4 overflow-y-auto max-h-[400px]">
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Transaction Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
@ -363,100 +471,6 @@ const DetailTransaction = () => {
</div>
</div>
<h3 className="font-semibold flex items-center">
Purchase
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Purchase
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Amount</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.amount ?? transactionDetails?.transfer?.amount ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.cashback ?? transactionDetails?.transfer?.cashback ?? 0
)}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Cashback Point</p>
<p className="font-medium">
{transactionDetails?.purchase?.cashback_point ?? transactionDetails?.transfer?.cashback_point ?? 0}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Fee Amount</p>
<p className="font-medium">
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
transactionDetails?.purchase?.fee_amount ?? transactionDetails?.transfer?.fee_amount ?? 0
)}
</p>
</div>
</div>
</div>
)}
{activeTab === 'detail' && transactionDetails?.kind == 'P' && transactionDetails?.kind == 'P' && (
<div className="space-y-4">
<h3 className="font-semibold flex items-center">
Product Information
<span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
Product Info
</span>
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-gray-500">Product Name</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.name ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Cash</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_cash != null
? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(transactionDetails.purchase.product.price_cash)
: "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Price Point</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.price_point ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Product Type</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.type ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Name</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.provider?.description ?? "-"}
</p>
</div>
<div>
<p className="text-sm text-gray-500">Provider Type</p>
<p className="font-medium">
{transactionDetails?.purchase?.product?.provider?.type === "h2h"
? "HOST TO HOST"
: transactionDetails?.purchase?.product?.provider?.type === "agent"
? "AGENT"
: "-"}
</p>
</div>
</div>
</div>
)}