wahyuun
7 months ago
13 changed files with 1263 additions and 110 deletions
@ -0,0 +1,65 @@
|
||||
import { useMemo } from "react"; |
||||
import styles from "./Column.module.css"; |
||||
|
||||
const Column = ({ |
||||
date, |
||||
currentPlanFrame, |
||||
textFrame, |
||||
currentPlanText, |
||||
text, |
||||
daysFrame, |
||||
propHeight, |
||||
propMinHeight, |
||||
propFlex, |
||||
propHeight1, |
||||
propFlex1, |
||||
propWidth, |
||||
}) => { |
||||
const columnStyle = useMemo(() => { |
||||
return { |
||||
height: propHeight, |
||||
}; |
||||
}, [propHeight]); |
||||
|
||||
const headStyle = useMemo(() => { |
||||
return { |
||||
minHeight: propMinHeight, |
||||
flex: propFlex, |
||||
}; |
||||
}, [propMinHeight, propFlex]); |
||||
|
||||
const dateStyle = useMemo(() => { |
||||
return { |
||||
height: propHeight1, |
||||
flex: propFlex1, |
||||
width: propWidth, |
||||
}; |
||||
}, [propHeight1, propFlex1, propWidth]); |
||||
|
||||
return ( |
||||
<div className={styles.column} style={columnStyle}> |
||||
<div className={styles.head} style={headStyle}> |
||||
<div className={styles.date} style={dateStyle}> |
||||
{date} |
||||
</div> |
||||
</div> |
||||
<div className={styles.head1}> |
||||
<div className={styles.currentPlanFrame}>{currentPlanFrame}</div> |
||||
</div> |
||||
<div className={styles.head2}> |
||||
<div className={styles.textFrame}>{textFrame}</div> |
||||
</div> |
||||
<div className={styles.head3}> |
||||
<div className={styles.currentPlanText}>{currentPlanText}</div> |
||||
</div> |
||||
<div className={styles.head4}> |
||||
<div className={styles.text}>{text}</div> |
||||
</div> |
||||
<div className={styles.head5}> |
||||
<div className={styles.daysFrame}>{daysFrame}</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Column; |
||||
@ -0,0 +1,114 @@
|
||||
.date, |
||||
.head { |
||||
max-width: 100%; |
||||
} |
||||
.date { |
||||
height: 19px; |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
font-weight: 600; |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.head { |
||||
align-self: stretch; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 8px; |
||||
min-height: 59px; |
||||
color: #969696; |
||||
} |
||||
.currentPlanFrame { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.head1 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.textFrame { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.head2 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.currentPlanText { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.head3 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.text { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.head4 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.daysFrame { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.column, |
||||
.head5 { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.head5 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.column { |
||||
width: 400px; |
||||
flex-shrink: 0; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
text-align: center; |
||||
font-size: 18px; |
||||
color: #333; |
||||
font-family: Roboto; |
||||
} |
||||
@ -0,0 +1,69 @@
|
||||
import Column from "./Column"; |
||||
import styles from "./Container.module.css"; |
||||
import React, { useState, useEffect } from 'react'; |
||||
|
||||
const Container = () => { |
||||
return ( |
||||
<section className={styles.container}> |
||||
<div className={styles.headText}> |
||||
<div className={styles.paymentHistory}>Payment history</div> |
||||
</div> |
||||
<div className={styles.table}> |
||||
<Column |
||||
date="Date" |
||||
currentPlanFrame="9-02-2024 07:47:29" |
||||
textFrame="9-01-2024 07:47:29" |
||||
currentPlanText="9-12-2023 07:47:29" |
||||
text="9-11-2023 07:47:29" |
||||
daysFrame="9-10-2023 07:47:29" |
||||
/> |
||||
<Column |
||||
date="Amount" |
||||
currentPlanFrame="250k" |
||||
textFrame="250k" |
||||
currentPlanText="250k" |
||||
text="250k" |
||||
daysFrame="250k" |
||||
propHeight="333.4px" |
||||
propMinHeight="unset" |
||||
propFlex="1" |
||||
propHeight1="unset" |
||||
propFlex1="unset" |
||||
propWidth="64px" |
||||
/> |
||||
<div className={styles.column}> |
||||
<div className={styles.head}> |
||||
<div className={styles.status}>Status</div> |
||||
</div> |
||||
<div className={styles.head1}> |
||||
<div className={styles.successfulWrapper}> |
||||
<div className={styles.successful}>Successful</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.head2}> |
||||
<div className={styles.successfulContainer}> |
||||
<div className={styles.successful1}>Successful</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.head3}> |
||||
<div className={styles.successfulFrame}> |
||||
<div className={styles.successful2}>Successful</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.head4}> |
||||
<div className={styles.frameDiv}> |
||||
<div className={styles.successful3}>Successful</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.head5}> |
||||
<div className={styles.successfulWrapper1}> |
||||
<div className={styles.successful4}>Successful</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Container; |
||||
@ -0,0 +1,229 @@
|
||||
.paymentHistory { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.headText { |
||||
align-self: stretch; |
||||
height: 34px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
} |
||||
.status { |
||||
width: 53px; |
||||
position: relative; |
||||
line-height: 22px; |
||||
font-weight: 600; |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head { |
||||
align-self: stretch; |
||||
flex: 1; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 8px; |
||||
color: #969696; |
||||
} |
||||
.successful { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head1, |
||||
.successfulWrapper { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.successfulWrapper { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head1 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.successful1 { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head2, |
||||
.successfulContainer { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.successfulContainer { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head2 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.successful2 { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head3, |
||||
.successfulFrame { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.successfulFrame { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head3 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.successful3 { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.frameDiv, |
||||
.head4 { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.frameDiv { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head4 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.successful4 { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head5, |
||||
.successfulWrapper1 { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.successfulWrapper1 { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head5 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.column, |
||||
.container, |
||||
.table { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
} |
||||
.column { |
||||
height: 333.4px; |
||||
width: 400px; |
||||
flex-shrink: 0; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
color: #fdfdfd; |
||||
} |
||||
.container, |
||||
.table { |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.table { |
||||
width: 1200px; |
||||
border-radius: 4px; |
||||
background-color: #fdfdfd; |
||||
overflow-x: auto; |
||||
flex-direction: row; |
||||
text-align: center; |
||||
font-size: 18px; |
||||
} |
||||
.container { |
||||
width: 1240px; |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
box-sizing: border-box; |
||||
flex-direction: column; |
||||
padding: 20px 21px 20px 19px; |
||||
gap: 10px 0; |
||||
text-align: left; |
||||
font-size: 20px; |
||||
color: #333; |
||||
font-family: Roboto; |
||||
} |
||||
@media screen and (max-width: 450px) { |
||||
.paymentHistory { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
@ -0,0 +1,226 @@
|
||||
import styles from "./Container1.module.css"; |
||||
import React, { useState, useEffect } from 'react'; |
||||
import axios from "../../../../../const/interceptorApi" |
||||
import { PROYEK_SEARCH, TRANSACTION_SEARCH, STORAGE_LIMIT_INFORMATION } from '../../../../../const/ApiConst'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import moment from "moment"; |
||||
|
||||
const Container1 = () => { |
||||
const token = localStorage.getItem("token") |
||||
const user_id = localStorage.getItem("user_id") |
||||
let company_id = '', configApp = ''; |
||||
const role = window.localStorage.getItem('role_name'); |
||||
const [totalPage, setTotalPage] = useState(0); |
||||
const [transaction, setTransaction] = useState([]); |
||||
const [storage, setLimitInformation] = useState(0) |
||||
const currentDate = new Date(); |
||||
const givenDate = new Date(transaction.exp_ospro); |
||||
const createdDate = new Date(transaction.created_at) |
||||
const differenceInMillis = givenDate.getTime() - currentDate.getTime(); |
||||
|
||||
const differenceInDays = Math.floor(differenceInMillis / (1000 * 60 * 60 * 24)); |
||||
|
||||
if(role !== 'Super Admin') { |
||||
company_id = localStorage.getItem("company_id"); |
||||
configApp = JSON.parse(window.localStorage.getItem('configApp')); |
||||
} |
||||
const config = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
|
||||
useEffect(()=>{ |
||||
getDataProyek(); |
||||
getDataTransaction(); |
||||
getLimitInformation(); |
||||
},[]) |
||||
|
||||
const getDataProyek = async () => { |
||||
const payload = { |
||||
"columns": [ |
||||
{"name": "company_id", "logic_operator": "=", "value": parseInt(company_id), "operator": "AND"} |
||||
], |
||||
"select": [ |
||||
"nama", |
||||
"mulai_proyek", |
||||
"akhir_proyek", |
||||
"company_id" |
||||
], |
||||
}; |
||||
const result = await axios |
||||
.post(PROYEK_SEARCH, payload, config) |
||||
.then((res) => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code == 200) { |
||||
setTotalPage(result.data.totalRecord); |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
}; |
||||
|
||||
const getDataTransaction = async () => { |
||||
const formData = { |
||||
"paging": {"start": 0, "length": 1}, |
||||
"columns": [ |
||||
{"name": "company_id", "logic_operator": "=", "value": parseInt(company_id), "operator": "AND"} |
||||
], |
||||
"select": [ |
||||
"company_id", |
||||
"type_paket", |
||||
"amount", |
||||
"exp_ospro", |
||||
"pay_date", |
||||
"created_at" |
||||
] |
||||
} |
||||
const result = await axios |
||||
.post(TRANSACTION_SEARCH, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response ); |
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data[0]; |
||||
setTransaction(dataRes); |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
} |
||||
|
||||
const getLimitInformation = async () => { |
||||
const url = STORAGE_LIMIT_INFORMATION(configApp.company_name); |
||||
const result = await axios |
||||
.get(url, config) |
||||
.then((res) => res) |
||||
.catch((error) => error.response); |
||||
if (result.data) { |
||||
setLimitInformation(result.data); |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<section className={styles.container}> |
||||
<div className={styles.projectFrame}> |
||||
<div className={styles.currentPlan}>Current Plan</div> |
||||
<div className={styles.div}> |
||||
<div className={styles.div1}> |
||||
<div className={styles.text}> |
||||
<div className={styles.payNowCancelFrame}> |
||||
<div className={styles.yourCurrentPlan}> |
||||
Your Current Plan is <span style={{ color: "#59b4c3", fontWeight: '600' }}>{transaction.type_paket}</span> |
||||
</div> |
||||
<div className={styles.aSimpleStart}> |
||||
A simple start for everyone |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.notificationText}> |
||||
<div className={styles.activeUntilMarc092024Parent}> |
||||
<div className={styles.activeUntilMarc}> |
||||
Active until <span style={{ color: "#59b4c3", fontWeight: '600' }}>{moment(transaction.exp_ospro).format('DD MMMM, YYYY')}</span> |
||||
</div> |
||||
<div className={styles.weWillSend}> |
||||
We will send you a notification upon Subscription expiration |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.notificationText1}> |
||||
<div className={styles.paymentOf250kParent}> |
||||
<div className={styles.paymentOf250k}>Payment of 250k</div> |
||||
<div className={styles.paymentIsDue}> |
||||
Payment is due 9 March, 2024 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.containerFrame}> |
||||
<button className={styles.payNowCancelSubscribe}> |
||||
<div className={styles.payNow}>Pay Now</div> |
||||
</button> |
||||
<button className={styles.payNowCancelSubscribe1}> |
||||
<div className={styles.cancelSubscription}> |
||||
Cancel Subscription |
||||
</div> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.daysOfDaysFrame}> |
||||
<div className={styles.days}> |
||||
<div className={styles.frameYourCurrentPlan}> |
||||
<div className={styles.days1}>Days</div> |
||||
<div className={styles.of30Days}>{30 - Math.abs(differenceInDays)} of 30 Days</div> |
||||
</div> |
||||
<div className={styles.rectangleFrame}> |
||||
<div className={styles.rectangleFrameChild} /> |
||||
<div style={{ |
||||
width: `${(400 * (30 - Math.abs(differenceInDays))) / 30}px`, |
||||
position: 'relative', |
||||
backgroundColor: ((30 - Math.abs(differenceInDays)) >= 0 && (30 - Math.abs(differenceInDays)) <= 10) ? '#59b4c3' : |
||||
((30 - Math.abs(differenceInDays)) >= 11 && (30 - Math.abs(differenceInDays)) <= 20) ? '#ffa447' : |
||||
'#FF4747', |
||||
zIndex:'1', |
||||
padding:'5px', |
||||
borderRadius:'15px' |
||||
}}> |
||||
</div> |
||||
</div> |
||||
<div className={styles.daysRemainingUntil}> |
||||
{Math.abs(differenceInDays)} days remaining until your plan requires update |
||||
</div> |
||||
</div> |
||||
<div className={styles.days2}> |
||||
<div className={styles.storageParent}> |
||||
<div className={styles.storage}>Storage</div> |
||||
<div className={styles.of500mb}>{storage} of {transaction.type_paket === 'Basic' ? 500 : 50}MB</div> |
||||
</div> |
||||
<div className={styles.rectangleParent}> |
||||
<div className={styles.frameChild} /> |
||||
<div style={{ |
||||
width: `${(400 * storage) / (transaction.type_paket === 'Basic' ? 500 : 50)}px`, |
||||
position: 'relative', |
||||
backgroundColor: (storage >= 0 && storage <= (transaction.type_paket === 'Basic' ? 166.67 : 16.67)) ? '#59b4c3' : |
||||
(storage >= (transaction.type_paket === 'Basic' ? 166.68 : 16.68) && storage <= (transaction.type_paket === 'Basic' ? 333.33 : 33.33)) ? '#ffa447' : |
||||
'#FF4747', |
||||
zIndex:'1', |
||||
padding:'5px', |
||||
borderRadius:'15px' |
||||
}}> |
||||
</div> |
||||
</div> |
||||
<div className={styles.storageRemainingUntil}> |
||||
{((storage / (transaction.type_paket === 'Basic' ? 500 : 50)) * 100).toFixed(2)}% storage remaining until your plan requires update |
||||
</div> |
||||
</div> |
||||
<div className={styles.days3}> |
||||
<div className={styles.projectParent}> |
||||
<div className={styles.project}>Project</div> |
||||
<div className={styles.of10Project}>{parseInt(totalPage)} of {transaction.type_paket === "Basic" ? "10" : "1"} Project</div> |
||||
</div> |
||||
<div className={styles.rectangleGroup}> |
||||
<div className={styles.frameInner} /> |
||||
<div style={{ |
||||
width: `${(400 * parseInt(totalPage)) / (parseInt(transaction.type_paket === "Basic" ? 10 : 1))}px`, |
||||
position: 'relative', |
||||
backgroundColor: transaction.type_paket === "Basic" ? (parseInt(totalPage) >= 0 && parseInt(totalPage) <= 3) ? '#59b4c3' : |
||||
(parseInt(totalPage) >= 4 && parseInt(totalPage) <= 7) ? '#ffa447' : |
||||
'#FF4747' : '#FF4747', |
||||
zIndex:'1', |
||||
padding:'5px', |
||||
borderRadius:'15px' |
||||
}}> |
||||
</div> |
||||
</div> |
||||
<div className={styles.projectRemainingUntil}> |
||||
{parseInt(transaction.type_paket === "Basic" ? 10 : 1) - (parseInt(totalPage))} Project remaining until your plan requires update |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Container1; |
||||
@ -0,0 +1,356 @@
|
||||
.currentPlan, |
||||
.yourCurrentPlan { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.aSimpleStart { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.payNowCancelFrame, |
||||
.text { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.payNowCancelFrame { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
} |
||||
.text { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
} |
||||
.activeUntilMarc { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.weWillSend { |
||||
align-self: stretch; |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.activeUntilMarc092024Parent, |
||||
.notificationText { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.activeUntilMarc092024Parent { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
} |
||||
.notificationText { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
} |
||||
.paymentIsDue, |
||||
.paymentOf250k { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.paymentIsDue { |
||||
color: #777; |
||||
} |
||||
.div1, |
||||
.notificationText1, |
||||
.paymentOf250kParent { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.paymentOf250kParent { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
} |
||||
.div1, |
||||
.notificationText1 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
} |
||||
.div1 { |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
gap: 20px 0; |
||||
} |
||||
.payNow { |
||||
position: relative; |
||||
font-size: 18px; |
||||
font-weight: 500; |
||||
color: #fdfdfd; |
||||
text-align: left; |
||||
} |
||||
.payNowCancelSubscribe { |
||||
cursor: pointer; |
||||
border: 0; |
||||
padding: 10px 15px; |
||||
background-color: #20a8d8; |
||||
border-radius: 15px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
white-space: nowrap; |
||||
} |
||||
.payNowCancelSubscribe:hover { |
||||
background-color: #058fbf; |
||||
} |
||||
.cancelSubscription { |
||||
position: relative; |
||||
font-size: 18px; |
||||
font-weight: 500; |
||||
color: #ea5455; |
||||
text-align: left; |
||||
} |
||||
.payNowCancelSubscribe1 { |
||||
cursor: pointer; |
||||
border: 0; |
||||
padding: 10px 15px; |
||||
background-color: #fce4e4; |
||||
border-radius: 15px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
white-space: nowrap; |
||||
} |
||||
.payNowCancelSubscribe1:hover { |
||||
background-color: #e3c9c9; |
||||
} |
||||
.containerFrame, |
||||
.div, |
||||
.projectFrame { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
} |
||||
.containerFrame { |
||||
flex-direction: row; |
||||
align-items: center; |
||||
gap: 0 20px; |
||||
} |
||||
.div, |
||||
.projectFrame { |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.div { |
||||
align-self: stretch; |
||||
gap: 20px 0; |
||||
font-size: 16px; |
||||
} |
||||
.projectFrame { |
||||
flex: 1; |
||||
gap: 15px 0; |
||||
min-width: 390px; |
||||
flex-shrink: 0; |
||||
} |
||||
.days1, |
||||
.of30Days { |
||||
position: relative; |
||||
} |
||||
.frameYourCurrentPlan { |
||||
width: 400px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.rectangleFrameChild { |
||||
width: 600px; |
||||
position: relative; |
||||
background-color: #d9d9d9; |
||||
display: none; |
||||
} |
||||
.daysRemaining, |
||||
.rectangleFrame, |
||||
.rectangleFrameChild { |
||||
width: 400px; |
||||
border-radius: 5px; |
||||
max-width: 100%; |
||||
} |
||||
.rectangleFrame { |
||||
height: 10px; |
||||
background-color: #d9d9d9; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 0 1px; |
||||
box-sizing: border-box; |
||||
} |
||||
.daysRemainingUntil { |
||||
position: relative; |
||||
display: inline-block; |
||||
max-width: 100%; |
||||
} |
||||
.days { |
||||
width: 600px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 5px 0; |
||||
} |
||||
.of500mb, |
||||
.storage { |
||||
position: relative; |
||||
} |
||||
.storageParent { |
||||
width: 400px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.frameChild { |
||||
width: 600px; |
||||
position: relative; |
||||
background-color: #d9d9d9; |
||||
display: none; |
||||
} |
||||
.frameChild, |
||||
.frameItem, |
||||
.rectangleParent { |
||||
width: 400px; |
||||
border-radius: 5px; |
||||
max-width: 100%; |
||||
} |
||||
.frameItem { |
||||
width: 539.1px; |
||||
position: relative; |
||||
background-color: #ffa447; |
||||
z-index: 1; |
||||
} |
||||
.rectangleParent { |
||||
height: 10px; |
||||
background-color: #d9d9d9; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 0 1px; |
||||
box-sizing: border-box; |
||||
} |
||||
.storageRemainingUntil { |
||||
align-self: stretch; |
||||
position: relative; |
||||
} |
||||
.days2 { |
||||
width: 600px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 5px 0; |
||||
} |
||||
.of10Project, |
||||
.project { |
||||
position: relative; |
||||
} |
||||
.projectParent { |
||||
width: 400px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.frameInner { |
||||
width: 200px; |
||||
position: relative; |
||||
background-color: #d9d9d9; |
||||
display: none; |
||||
} |
||||
.frameInner, |
||||
.rectangleDiv, |
||||
.rectangleGroup { |
||||
width: 400px; |
||||
border-radius: 5px; |
||||
max-width: 100%; |
||||
} |
||||
.rectangleGroup { |
||||
height: 10px; |
||||
background-color: #d9d9d9; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
} |
||||
.projectRemainingUntil { |
||||
align-self: stretch; |
||||
position: relative; |
||||
} |
||||
.container, |
||||
.days3, |
||||
.daysOfDaysFrame { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
} |
||||
.days3 { |
||||
width: 600px; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
gap: 5px 0; |
||||
} |
||||
.container, |
||||
.daysOfDaysFrame { |
||||
box-sizing: border-box; |
||||
max-width: 100%; |
||||
} |
||||
.daysOfDaysFrame { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
padding: 0 0 31px; |
||||
gap: 20px 0; |
||||
min-width: 490px; |
||||
flex-shrink: 0; |
||||
font-size: 16px; |
||||
color: #777; |
||||
} |
||||
.container { |
||||
width: 1240px; |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
overflow: hidden; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items: flex-end; |
||||
padding: 26px 21px 20px 19px; |
||||
row-gap: 20px; |
||||
text-align: left; |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
@media screen and (max-width: 675px) { |
||||
.notificationText, |
||||
.notificationText1, |
||||
.text { |
||||
gap: 0 37px; |
||||
} |
||||
.daysOfDaysFrame, |
||||
.projectFrame { |
||||
min-width: 100%; |
||||
overflow-x: auto; |
||||
} |
||||
} |
||||
@media screen and (max-width: 450px) { |
||||
.currentPlan { |
||||
font-size: 16px; |
||||
} |
||||
.containerFrame { |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
@ -1,19 +0,0 @@
|
||||
import "antd/dist/antd.min.css"; |
||||
import { Button } from "antd"; |
||||
import styles from "./SideProfile.module.css"; |
||||
import React, { useState, useEffect, useMemo } from 'react'; |
||||
|
||||
const SideProfile = () => { |
||||
return ( |
||||
<header className={styles.sideProfile}> |
||||
<div className={styles.side}> |
||||
<div className={styles.button1}> |
||||
<div className={styles.plan}>My Profile</div> |
||||
<div className={styles.plan}>Plan</div> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
); |
||||
}; |
||||
|
||||
export default SideProfile; |
||||
@ -1,44 +0,0 @@
|
||||
.button { |
||||
white-space: nowrap; |
||||
} |
||||
.plan { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.button1 { |
||||
flex: 1; |
||||
align-items: center; |
||||
padding: 15px; |
||||
box-sizing: border-box; |
||||
} |
||||
.button1, |
||||
.side, |
||||
.sideProfile { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.side { |
||||
flex: 1; |
||||
background-color: #fff; |
||||
align-items: flex-start; |
||||
gap: 0 15px; |
||||
} |
||||
.sideProfile { |
||||
align-self: stretch; |
||||
align-items: center; |
||||
padding: 30px; |
||||
box-sizing: border-box; |
||||
top: 0; |
||||
z-index: 99; |
||||
position: sticky; |
||||
text-align: left; |
||||
font-size: 20px; |
||||
color: #777; |
||||
} |
||||
@media screen and (max-width: 1200px) { |
||||
.side { |
||||
display: none; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue