update page dashboard conditional for cards bank and transaction detail
This commit is contained in:
wayanrivan
@ -9,6 +9,7 @@ export interface AuthModel {
|
|||||||
company: any;
|
company: any;
|
||||||
user: any;
|
user: any;
|
||||||
// api_token: string;
|
// api_token: string;
|
||||||
|
statusbalance: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UserModel {
|
export interface UserModel {
|
||||||
|
|||||||
@ -43,24 +43,6 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
|
|||||||
const [auth, setAuth] = useState<AuthModel | undefined>(authHelper.getAuth());
|
const [auth, setAuth] = useState<AuthModel | undefined>(authHelper.getAuth());
|
||||||
const [currentUser, setCurrentUser] = useState<UserModel | undefined>();
|
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) => {
|
const saveAuth = (auth: AuthModel | undefined) => {
|
||||||
setAuth(auth);
|
setAuth(auth);
|
||||||
if (auth) {
|
if (auth) {
|
||||||
@ -73,11 +55,20 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
|
|||||||
const login = async (username: string, password: string) => {
|
const login = async (username: string, password: string) => {
|
||||||
try {
|
try {
|
||||||
const { data: auth } = await axios
|
const { data: auth } = await axios
|
||||||
.post(LOGIN_URL, { username, password }) // , { headers: { 'Access-Control-Allow-Origin': "*" }}
|
.post(LOGIN_URL, { username, password })
|
||||||
.then((response) => response.data);
|
.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);
|
setCurrentUser(auth.user);
|
||||||
|
|
||||||
const createActivity = {
|
const createActivity = {
|
||||||
module: 'Login',
|
module: 'Login',
|
||||||
description: `Login`,
|
description: `Login`,
|
||||||
@ -108,6 +99,33 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
|
|||||||
return { data: _axios };
|
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 logout = async () => {
|
||||||
const createActivity = {
|
const createActivity = {
|
||||||
module: 'Logout',
|
module: 'Logout',
|
||||||
@ -130,7 +148,6 @@ const AuthProvider = ({ children }: PropsWithChildren) => {
|
|||||||
currentUser,
|
currentUser,
|
||||||
setCurrentUser,
|
setCurrentUser,
|
||||||
login,
|
login,
|
||||||
// register,
|
|
||||||
requestPasswordResetLink,
|
requestPasswordResetLink,
|
||||||
changePassword,
|
changePassword,
|
||||||
getUser,
|
getUser,
|
||||||
|
|||||||
@ -268,7 +268,7 @@ const DashboardHomePage = () => {
|
|||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<div className="flex space-x-4 mt-5">
|
<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) => (
|
bankaccount?.data.map((bankaccountdatas: { amount: string, creditlimit: string, monthlylimit: string; wallet: string; }, index: number) => (
|
||||||
<BankSaldo
|
<BankSaldo
|
||||||
title={bankaccountdatas.wallet}
|
title={bankaccountdatas.wallet}
|
||||||
|
|||||||
@ -175,6 +175,24 @@ const DetailTransaction = () => {
|
|||||||
</button>
|
</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
|
<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'}`}
|
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')}
|
onClick={() => setActiveTab('origincustomer')}
|
||||||
@ -229,15 +247,105 @@ const DetailTransaction = () => {
|
|||||||
|
|
||||||
</div>
|
</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]">
|
<div className="py-4 overflow-y-auto max-h-[400px]">
|
||||||
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
|
{activeTab === 'detail' && transactionDetails?.kind === 'P' && (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<h3 className="font-semibold flex items-center">
|
<h3 className="font-semibold flex items-center">
|
||||||
Transaction Information
|
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>
|
</h3>
|
||||||
<div className="grid grid-cols-2 gap-4">
|
<div className="grid grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
@ -363,100 +471,6 @@ const DetailTransaction = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user