wahyuun
10 months ago
9 changed files with 1152 additions and 81 deletions
@ -0,0 +1,51 @@
|
||||
import SideProfile from "./components/SideProfile"; |
||||
import Index1 from "./components/Index1"; |
||||
import styles from "./Desktop.module.css"; |
||||
import React, { useState, useEffect } from 'react'; |
||||
import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'; |
||||
|
||||
const Desktop = () => { |
||||
const [activeTab, setActiveTab] = useState('tab1') |
||||
const [typeTab, setTypeTab] = useState('myprofile') |
||||
|
||||
return ( |
||||
<main className={styles.myProfile}> |
||||
<section className={styles.profile}> |
||||
<Nav tabs> |
||||
<NavItem> |
||||
<NavLink |
||||
onClick={() => { |
||||
setActiveTab("tab1"); |
||||
setTypeTab("myprofile"); |
||||
}} |
||||
active={activeTab === "tab1"} |
||||
> |
||||
My Profile |
||||
</NavLink> |
||||
</NavItem> |
||||
<NavItem> |
||||
<NavLink |
||||
onClick={() => { |
||||
setActiveTab("tab2"); |
||||
setTypeTab("plan"); |
||||
}} |
||||
active={activeTab === "tab2"} |
||||
> |
||||
Account |
||||
</NavLink> |
||||
</NavItem> |
||||
</Nav> |
||||
<TabContent activeTab={activeTab}> |
||||
<TabPane tabId="tab1"> |
||||
<Index1/> |
||||
</TabPane> |
||||
<TabPane tabId="tab2"> |
||||
Tab Kedua |
||||
</TabPane> |
||||
</TabContent> |
||||
</section> |
||||
</main> |
||||
); |
||||
}; |
||||
|
||||
export default Desktop; |
||||
@ -0,0 +1,23 @@
|
||||
.myProfile, |
||||
.profile { |
||||
max-width: 100%; |
||||
} |
||||
.profile { |
||||
align-self: stretch; |
||||
padding: 15px 30px 30px; |
||||
box-sizing: border-box; |
||||
gap: 15px 0; |
||||
|
||||
} |
||||
.myProfile { |
||||
width: 1300px; |
||||
border-radius: 30px; |
||||
background-color: #fff; |
||||
} |
||||
@media screen and (max-width: 1050px) { |
||||
.profile { |
||||
padding-top: 20px; |
||||
padding-bottom: 20px; |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
@ -0,0 +1,69 @@
|
||||
.obejct11 { |
||||
width: 55px; |
||||
height: 54px; |
||||
position: relative; |
||||
border-radius: 79.5px; |
||||
object-fit: cover; |
||||
} |
||||
.img { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 20px 0; |
||||
} |
||||
.ibnuHamdani { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.headTitle { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
} |
||||
.ibnu { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.headSubtitle { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
font-size: 16px; |
||||
color: #777; |
||||
} |
||||
.head, |
||||
.text { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
} |
||||
.text { |
||||
width: 1032px; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
padding: 20px 0; |
||||
gap: 5px 0; |
||||
} |
||||
.head { |
||||
align-self: stretch; |
||||
height: 98px; |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
flex-shrink: 0; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 0 16px 0 14px; |
||||
gap: 0 20px; |
||||
text-align: left; |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
@media screen and (max-width: 450px) { |
||||
.ibnuHamdani { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
@ -0,0 +1,342 @@
|
||||
import * as XLSX from 'xlsx'; |
||||
import React, { useState, useEffect, useMemo } from 'react'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import axios from "../../../../const/interceptorApi" |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { Pagination, Tooltip } from 'antd'; |
||||
import { USER_EDIT, REFFERAL_ADD, REFFERAL_EDIT, ROLE_SEARCH, USER_SEARCH } from '../../../../const/ApiConst'; |
||||
import DialogForm from '../DialogForm' |
||||
import styles from "./Index1.module.css"; |
||||
import stylesModule from "./Index1.module.css"; |
||||
import profile from '../../../../assets/img/profile.png' |
||||
import stylesHead from "./Head.module.css"; |
||||
import moment from 'moment'; |
||||
import { Form } from 'reactstrap'; |
||||
|
||||
const Index1 = () => { |
||||
const token = localStorage.getItem("token") |
||||
const id = localStorage.getItem("user_id") |
||||
|
||||
const config = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const [openDialog, setOpenDialog] = useState(false) |
||||
const [typeDialog, setTypeDialog] = useState('') |
||||
const [roleList, setRoleList] = useState([]) |
||||
const [refferal, setReferralCode] = useState(null) |
||||
const [isCopied, setIsCopied] = useState(false) |
||||
const [userProfile, setUserprofile] = useState(null) |
||||
|
||||
useEffect(() => { |
||||
getRoleList(); |
||||
getDataProfileUser(); |
||||
}, []) |
||||
|
||||
const getDataProfileUser = async () => { |
||||
const formData = { |
||||
"paging": {"start": 0, "length": -1}, |
||||
"columns": [ |
||||
{"name": "id", "logic_operator": "=", "value": parseInt(id), "operator": "AND"} |
||||
], |
||||
"joins": [ |
||||
{ |
||||
"name": "m_divisi", |
||||
"column_join": "divisi_id", |
||||
"column_results": [ |
||||
"name" |
||||
] |
||||
}, |
||||
{ |
||||
"name": "refferal_code", |
||||
"column_join": "discount_id", |
||||
"column_results": [ |
||||
"code" |
||||
] |
||||
} |
||||
] |
||||
} |
||||
const result = await axios |
||||
.post(USER_SEARCH, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response ); |
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data[0]; |
||||
setUserprofile(dataRes); |
||||
if(!dataRes.discount_id || dataRes.discount_id === null) { |
||||
saveRefferalCode(dataRes?.id, dataRes?.username, dataRes?.ktp_number); |
||||
} else { |
||||
setReferralCode(dataRes.join_second_code); |
||||
} |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
} |
||||
|
||||
const handleOpenDialog = (type) => { |
||||
setOpenDialog(true) |
||||
setTypeDialog(type) |
||||
} |
||||
|
||||
const handleCloseDialog = (type, data) => { |
||||
if (type === "profile") { |
||||
saveProfile(data); |
||||
} else if(type === "refferal_code") { |
||||
updateRefferal(data); |
||||
} |
||||
setOpenDialog(false) |
||||
} |
||||
|
||||
const saveProfile = async (data) => { |
||||
let urlEdit = USER_EDIT(userProfile?.id) |
||||
const formData = data |
||||
const result = await axios.put(urlEdit, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataProfileUser() |
||||
NotificationManager.success(`Data profile berhasil diedit`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data profile gagal di edit`, `Failed!!`); |
||||
} |
||||
} |
||||
|
||||
const updateRefferal = async (data) => { |
||||
let urlEdit = REFFERAL_EDIT(userProfile?.id) |
||||
const formData = data |
||||
const result = await axios.put(urlEdit, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataProfileUser(data.user_id, data.username, data.ktp_number); |
||||
NotificationManager.success(`Code refferal berhasil diedit`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Code refferal gagal di edit`, `Failed!!`); |
||||
} |
||||
} |
||||
|
||||
const toggleAddDialog = () => { |
||||
setOpenDialog(!openDialog) |
||||
} |
||||
|
||||
const getRoleList = async () => { |
||||
const formData = { |
||||
"paging": { "start": 0, "length": -1 }, |
||||
"orders": { "columns": ["id"], "ascending": false } |
||||
} |
||||
const result = await axios |
||||
.post(ROLE_SEARCH, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code == 200) { |
||||
setRoleList(result.data.data); |
||||
} |
||||
} |
||||
|
||||
const saveRefferalCode = async (user_id, username, ktp_number) => { |
||||
const formData = { |
||||
'code': username + ktp_number.substring(0, 4), |
||||
'amount': 0 |
||||
} |
||||
const result = await axios |
||||
.post(REFFERAL_ADD, formData, config) |
||||
.then((res) => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code == 200) { |
||||
await getDataProfileUser(user_id, username, ktp_number); |
||||
} |
||||
} |
||||
|
||||
function copyToClipboard(text) { |
||||
navigator.clipboard.writeText(text).then(() => { |
||||
setIsCopied(true); |
||||
setTimeout(() => setIsCopied(false), 2000); |
||||
}, (err) => { |
||||
console.error('Gagal menyalin teks ke clipboard: ', err); |
||||
}); |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<NotificationContainer /> |
||||
<DialogForm |
||||
openDialog={openDialog} |
||||
closeDialog={handleCloseDialog} |
||||
toggleDialog={() => toggleAddDialog} |
||||
typeDialogProp={typeDialog} |
||||
roleList={roleList} |
||||
nameProp={userProfile?.name} |
||||
noHpProp={userProfile?.phone_number} |
||||
idNumberProp={userProfile?.ktp_number} |
||||
genderProp={userProfile?.gender} |
||||
divisiProp={userProfile?.join_first_name} |
||||
birthdayPlaceProp={userProfile?.birth_place} |
||||
birthdayDateProp={userProfile?.birth_date} |
||||
addressProp={userProfile?.address} |
||||
emailProp={userProfile?.email} |
||||
userNameProp={userProfile?.username} |
||||
refferalCode={refferal} |
||||
userProfile={userProfile} |
||||
/> |
||||
<div className={stylesHead.head}> |
||||
<div className={stylesHead.img}> |
||||
<img className={stylesHead.obejct11} alt="" src={profile} /> |
||||
</div> |
||||
<div className={stylesHead.text}> |
||||
<div className={stylesHead.headTitle}> |
||||
<div className={stylesHead.ibnuHamdani}> |
||||
{userProfile && userProfile.name != null ? userProfile.name : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
<div className={stylesHead.headSubtitle}> |
||||
<div className={stylesHead.ibnu}> |
||||
{userProfile && userProfile.username != null ? userProfile.username : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={stylesModule.btnEdit1} style={{ color: '#969696' }} onClick={() => handleOpenDialog('Settings')}> |
||||
<div className={stylesModule.icon}> |
||||
<i className="fa fa-edit" style={{ fontSize:'16px' }}></i> |
||||
</div> |
||||
<div className={stylesModule.edit} style={{ fontSize:'16px' }}>Edit</div> |
||||
</div> |
||||
</div> |
||||
<footer className={styles.index1}> |
||||
<div className={styles.row}> |
||||
<div className={styles.column}> |
||||
<div className={styles.text}> |
||||
<div className={styles.headTitle}> |
||||
<div className={styles.codeReferal}>Refferal Code</div> |
||||
</div> |
||||
<div className={styles.headSubtitle}> |
||||
<div className={styles.ibnu212} style={{ color:'#20A8D8' }}>{refferal ? refferal : 'empty'}</div> |
||||
<Tooltip title= {!isCopied ? "Copy Refferal" : "Copied"}> |
||||
<span onClick={() => copyToClipboard(refferal ? refferal : 'empty')}> |
||||
{isCopied ? |
||||
<i className="fa fa-check" style={{ cursor:'pointer' }}></i> |
||||
: |
||||
<i className="fa fa-clipboard" style={{ cursor:'pointer' }}></i>} |
||||
</span> |
||||
</Tooltip> |
||||
</div> |
||||
</div> |
||||
<div className={styles.btnEdit1} onClick={() => handleOpenDialog('Refferal')}> |
||||
<div className={styles.icon}> |
||||
<i className="fa fa-edit"></i> |
||||
</div> |
||||
<div className={styles.edit}>Edit</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.row1}> |
||||
<div className={styles.column1}> |
||||
<div className={styles.accountInformation}>Account Information</div> |
||||
<div className={styles.btnEdit2} onClick={() => handleOpenDialog('Account')}> |
||||
<div className={styles.icon1}> |
||||
<i className="fa fa-edit"></i> |
||||
</div> |
||||
<div className={styles.edit1}>Edit</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.column2}> |
||||
<div className={styles.frameParent}> |
||||
<div className={styles.usernameParent}> |
||||
<div className={styles.username}>Username</div> |
||||
<div className={styles.ibnu}> |
||||
{userProfile && userProfile.username != null ? userProfile.username : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
<div className={styles.emailParent}> |
||||
<div className={styles.email}>Email</div> |
||||
<div className={styles.ibnuhamdaniintegrasiautamac}> |
||||
{userProfile && userProfile.email != null ? userProfile.email : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.row2}> |
||||
<div className={styles.row3}> |
||||
<div className={styles.personalInformation}>Personal Information</div> |
||||
<div className={styles.btnEdit3} onClick={() => handleOpenDialog('Personal')}> |
||||
<div className={styles.icon3}> |
||||
<i className="fa fa-edit"></i> |
||||
</div> |
||||
<div className={styles.edit2}>Edit</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.div}> |
||||
<div className={styles.row4}> |
||||
<div className={styles.column3}> |
||||
<div className={styles.name}>Name</div> |
||||
<div className={styles.ibnuHamdani}> |
||||
{userProfile && userProfile.name != null ? userProfile.name : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
<div className={styles.column4}> |
||||
<div className={styles.noHp}>Telephone</div> |
||||
<div className={styles.birthDetailsColumn}> |
||||
{userProfile && userProfile.phone_number != null ? userProfile.phone_number : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.row5}> |
||||
<div className={styles.column5}> |
||||
<div className={styles.idNumber}>Kode Number</div> |
||||
<div className={styles.div1}> |
||||
{userProfile && userProfile.ktp_number != null ? userProfile.ktp_number : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
<div className={styles.column6}> |
||||
<div className={styles.gender}>Gender</div> |
||||
<div className={styles.male}> |
||||
{userProfile && userProfile.gender != null ? userProfile.gender : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.row6}> |
||||
<div className={styles.column7}> |
||||
<div className={styles.division}>Division</div> |
||||
<div className={styles.div2}> |
||||
{userProfile && userProfile.join_first_name != null ? userProfile.join_first_name : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
<div className={styles.column8}> |
||||
<div className={styles.placeOfBirth}>Place of Birth</div> |
||||
<div className={styles.div3}> |
||||
{userProfile && userProfile.birth_place != null ? userProfile.birth_place : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.row7}> |
||||
<div className={styles.column9}> |
||||
<div className={styles.role}>Role</div> |
||||
<div className={styles.div4}> |
||||
{userProfile && userProfile.employee_type != null ? userProfile.employee_type : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
<div className={styles.column10}> |
||||
<div className={styles.dateOfBirth}>Date of Birth</div> |
||||
<div className={styles.div5}> |
||||
{userProfile && userProfile.birth_date != null ? userProfile.birth_date : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.row8}> |
||||
<div className={styles.column11}> |
||||
<div className={styles.address}>Address</div> |
||||
<div className={styles.div6}> |
||||
{userProfile && userProfile.address != null ? userProfile.address : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</footer> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Index1; |
||||
@ -0,0 +1,563 @@
|
||||
.codeReferal { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.headTitle { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
} |
||||
.copyIcon, |
||||
.ibnu212 { |
||||
position: relative; |
||||
} |
||||
.copyIcon { |
||||
height: 16px; |
||||
width: 16px; |
||||
overflow: hidden; |
||||
flex-shrink: 0; |
||||
} |
||||
.headSubtitle, |
||||
.text { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
gap: 0 10px; |
||||
color: #777; |
||||
} |
||||
.text { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
gap: 5px 0; |
||||
min-width: 640px; |
||||
max-width: 100%; |
||||
color: #333; |
||||
} |
||||
.copyIcon1 { |
||||
height: 24px; |
||||
width: 24px; |
||||
position: relative; |
||||
overflow: hidden; |
||||
flex-shrink: 0; |
||||
} |
||||
.copy { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.btnEdit { |
||||
border-radius: 20px; |
||||
border: 1px solid #969696; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 5px 11px 5px 9px; |
||||
gap: 0 11px; |
||||
} |
||||
.editTextIcon { |
||||
height: 20px; |
||||
width: 18px; |
||||
position: relative; |
||||
} |
||||
.icon { |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
padding: 5px 8px; |
||||
box-sizing: border-box; |
||||
width: 24px; |
||||
height: 24px; |
||||
} |
||||
.edit { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.btnEdit1, |
||||
.column { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
} |
||||
.btnEdit1 { |
||||
border-radius: 20px; |
||||
border: 1px solid #969696; |
||||
padding: 5px 11px 5px 9px; |
||||
gap: 0 11px; |
||||
cursor: pointer; |
||||
} |
||||
.column { |
||||
align-self: stretch; |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
box-sizing: border-box; |
||||
flex-wrap: wrap; |
||||
padding: 20px 21px 20px 19px; |
||||
gap: 0 20px; |
||||
max-width: 100%; |
||||
} |
||||
.accountInformation { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.icon2 { |
||||
height: 20px; |
||||
width: 18px; |
||||
position: relative; |
||||
} |
||||
.icon1 { |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
padding: 5px 8px; |
||||
box-sizing: border-box; |
||||
width: 24px; |
||||
height: 24px; |
||||
} |
||||
.edit1 { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.btnEdit2, |
||||
.column1 { |
||||
display: flex; |
||||
flex-direction: row; |
||||
} |
||||
.btnEdit2 { |
||||
border-radius: 20px; |
||||
border: 1px solid #969696; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 5px 11px 5px 9px; |
||||
gap: 0 11px; |
||||
color: #969696; |
||||
cursor: pointer; |
||||
} |
||||
.column1 { |
||||
align-self: stretch; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.ibnu, |
||||
.username { |
||||
position: relative; |
||||
} |
||||
.username { |
||||
font-weight: 500; |
||||
} |
||||
.ibnu { |
||||
color: #777; |
||||
} |
||||
.usernameParent { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.email { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.ibnuhamdaniintegrasiautamac { |
||||
position: relative; |
||||
color: #777; |
||||
white-space: nowrap; |
||||
} |
||||
.emailParent, |
||||
.frameParent { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.emailParent { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.frameParent { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.column2, |
||||
.row, |
||||
.row1 { |
||||
align-self: stretch; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.row1 { |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
box-sizing: border-box; |
||||
padding: 20px 21px 20px 19px; |
||||
gap: 10px 0; |
||||
color: #333; |
||||
} |
||||
.row { |
||||
gap: 15px 0; |
||||
} |
||||
.personalInformation { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.vectorIcon { |
||||
height: 20px; |
||||
width: 18px; |
||||
position: relative; |
||||
} |
||||
.icon3 { |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
padding: 5px 8px; |
||||
box-sizing: border-box; |
||||
width: 24px; |
||||
height: 24px; |
||||
} |
||||
.edit2 { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.btnEdit3, |
||||
.row3 { |
||||
display: flex; |
||||
flex-direction: row; |
||||
} |
||||
.btnEdit3 { |
||||
border-radius: 20px; |
||||
border: 1px solid #969696; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 5px 11px 5px 9px; |
||||
gap: 0 11px; |
||||
color: #969696; |
||||
cursor: pointer; |
||||
} |
||||
.row3 { |
||||
align-self: stretch; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.name { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.ibnuHamdani { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.column3 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.noHp { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.birthDetailsColumn { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.column4, |
||||
.row4 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column4 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.row4 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.div1, |
||||
.idNumber { |
||||
position: relative; |
||||
} |
||||
.idNumber { |
||||
font-weight: 500; |
||||
} |
||||
.div1 { |
||||
color: #777; |
||||
} |
||||
.column5 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.gender, |
||||
.male { |
||||
position: relative; |
||||
} |
||||
.gender { |
||||
font-weight: 500; |
||||
} |
||||
.male { |
||||
color: #777; |
||||
} |
||||
.column6, |
||||
.row5 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column6 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.row5 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.div2, |
||||
.division { |
||||
position: relative; |
||||
} |
||||
.division { |
||||
font-weight: 500; |
||||
} |
||||
.div2 { |
||||
color: #777; |
||||
} |
||||
.column7 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.placeOfBirth { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.div3 { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.column8, |
||||
.row6 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column8 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.row6 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.div4, |
||||
.role { |
||||
position: relative; |
||||
} |
||||
.role { |
||||
font-weight: 500; |
||||
} |
||||
.div4 { |
||||
color: #777; |
||||
} |
||||
.column9 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.dateOfBirth { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.div5 { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.column10, |
||||
.row7 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column10 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.row7 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.address { |
||||
font-weight: 500; |
||||
} |
||||
.address, |
||||
.div6 { |
||||
position: relative; |
||||
} |
||||
.div6 { |
||||
color: #777; |
||||
} |
||||
.column11, |
||||
.row8 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column11 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
} |
||||
.row8 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
} |
||||
.div { |
||||
gap: 20px 0; |
||||
} |
||||
.div, |
||||
.index1, |
||||
.row2 { |
||||
align-self: stretch; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.row2 { |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
box-sizing: border-box; |
||||
padding: 20px 21px 20px 19px; |
||||
gap: 10px 0; |
||||
color: #333; |
||||
} |
||||
.index1 { |
||||
gap: 15px 0; |
||||
text-align: left; |
||||
font-size: 16px; |
||||
color: #969696; |
||||
} |
||||
@media screen and (max-width: 1050px) { |
||||
.text { |
||||
min-width: 100%; |
||||
} |
||||
} |
||||
@media screen and (max-width: 750px) { |
||||
.emailParent, |
||||
.usernameParent { |
||||
min-width: 100%; |
||||
} |
||||
.frameParent { |
||||
gap: 0 37px; |
||||
} |
||||
.column3, |
||||
.column4 { |
||||
min-width: 100%; |
||||
} |
||||
.row4 { |
||||
gap: 0 37px; |
||||
} |
||||
.column5, |
||||
.column6 { |
||||
min-width: 100%; |
||||
} |
||||
.row5 { |
||||
gap: 0 37px; |
||||
} |
||||
.column7, |
||||
.column8 { |
||||
min-width: 100%; |
||||
} |
||||
.row6 { |
||||
gap: 0 37px; |
||||
} |
||||
.column10, |
||||
.column9 { |
||||
min-width: 100%; |
||||
} |
||||
.row7, |
||||
.row8 { |
||||
gap: 0 37px; |
||||
} |
||||
} |
||||
@media screen and (max-width: 450px) { |
||||
.column1, |
||||
.row3 { |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
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; |
||||
@ -0,0 +1,44 @@
|
||||
.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