diff --git a/src/views/SimproV2/Settings/Desktop.js b/src/views/SimproV2/Settings/Desktop.js new file mode 100644 index 0000000..a534f35 --- /dev/null +++ b/src/views/SimproV2/Settings/Desktop.js @@ -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 ( +
+
+ + + + + + + Tab Kedua + + +
+
+ ); +}; + +export default Desktop; diff --git a/src/views/SimproV2/Settings/Desktop.module.css b/src/views/SimproV2/Settings/Desktop.module.css new file mode 100644 index 0000000..bdb39c7 --- /dev/null +++ b/src/views/SimproV2/Settings/Desktop.module.css @@ -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; + } +} diff --git a/src/views/SimproV2/Settings/DialogForm.js b/src/views/SimproV2/Settings/DialogForm.js index 0f36cc1..d0c4015 100644 --- a/src/views/SimproV2/Settings/DialogForm.js +++ b/src/views/SimproV2/Settings/DialogForm.js @@ -1,16 +1,12 @@ import React, { useEffect, useState } from 'react' import { Modal, ModalHeader, ModalBody, ModalFooter, - Button, Form, FormGroup, Label, Input, Col, Row, - Nav, NavItem, NavLink, TabContent, TabPane + Button, Form, FormGroup, Label, Input, Col, Row,TabContent, TabPane } from 'reactstrap'; - import { Select, DatePicker } from 'antd'; - +import moment from "moment"; const { Option } = Select - - const DialogForm = ({ openDialog, closeDialog, @@ -29,26 +25,23 @@ const DialogForm = ({ refferalCode, userProfile }) => { - const token = window.localStorage.getItem('token'); - const [typeDialog, setTypeDialog] = useState(typeDialogProp) const [userName, setUserName] = useState(userNameProp) const [name, setName] = useState(nameProp) const [noHp, setNohp] = useState(noHpProp) const [gender, setGender] = useState(genderProp) const [address, setAddres] = useState(addressProp) const [birthdayPlace, setBirthdayplace] = useState(birthdayPlaceProp) - const [birthdayDate, setBirthdaydate] = useState(birthdayDateProp) + const [birthdayDate, setBirthdaydate] = useState(birthdayDateProp && birthdayDateProp != null ? moment(birthdayDateProp) : moment()) const [idNumber, setIdnumber] = useState(idNumberProp) const [email, setEmail] = useState(emailProp) const [refferal, setRefferalCode] = useState('') const [oldPassword, setOldPassword] = useState('') const [newPassword, setNewPassword] = useState('') const [newPasswordConfirm, setNewPasswordConfirm] = useState('') - const [activeTab, setActiveTab] = useState('tab1') - console.log('typeDialogProp',typeDialogProp) + const handleSave = () => { let data = ''; - if (typeDialog === "Personal" && typeDialogProp !== "Refferal") { + if (typeDialogProp === "Personal" && typeDialogProp !== "Refferal") { data = { name: name, phone_number: noHp, @@ -61,11 +54,13 @@ const DialogForm = ({ data.birth_date = birthdayDate; } closeDialog('profile', data) - } else if (typeDialog === "Account" && typeDialogProp !== "Refferal") { + } else if (typeDialogProp === "Account" || typeDialogProp === "Settings" && typeDialogProp !== "Refferal") { data = { username: userName, - email: email, - password: newPassword, + email: email + } + if(typeDialogProp === "Settings" && newPassword && oldPassword && newPasswordConfirm) { + data.password = newPassword; } closeDialog('profile', data) } else { @@ -95,6 +90,10 @@ const DialogForm = ({ ) } + const handleDatePickerEnd = (date, dateString) => { + setBirthdaydate(date); + }; + function generateRandomString(length) { const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; let result = ''; @@ -115,24 +114,24 @@ const DialogForm = ({ - + setName(e.target.value)} /> - + setIdnumber(e.target.value)} /> - + setAddres(e.target.value)} /> - + setNohp(e.target.value)} /> @@ -146,13 +145,13 @@ const DialogForm = ({ - + setBirthdayplace(e.target.value)} /> - - setBirthdaydate(date)} /> + + @@ -165,7 +164,7 @@ const DialogForm = ({ return (
- + setUserName(e.target.value)} /> @@ -177,19 +176,19 @@ const DialogForm = ({ setEmail(e.target.value)} /> - + - + setOldPassword(e.target.value)} /> - + setNewPassword(e.target.value)} /> - + setNewPasswordConfirm(e.target.value)} /> @@ -207,12 +206,12 @@ const DialogForm = ({ setUserName(e.target.value)} /> - - - - - setEmail(e.target.value)} /> - + + + + + setEmail(e.target.value)} /> +
@@ -222,54 +221,19 @@ const DialogForm = ({ return ( - Update {typeDialog == "Personal" ? `Personal` : "Account"} Data + Update {typeDialogProp} {typeDialogProp == 'Refferal' ? ' Code' : ' Data'} {typeDialogProp !== 'Refferal' ? ( <> - - - + + {renderForm()} - + {renderFormAccount()} - + {renderFormSetting()} @@ -278,7 +242,7 @@ const DialogForm = ({
- * Wajib diisi. + * Is required @@ -300,14 +264,11 @@ const DialogForm = ({ )} - {' '} + {' '} ) - - - } export default DialogForm; diff --git a/src/views/SimproV2/Settings/components/Head.module.css b/src/views/SimproV2/Settings/components/Head.module.css new file mode 100644 index 0000000..aa70ca9 --- /dev/null +++ b/src/views/SimproV2/Settings/components/Head.module.css @@ -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; + } +} diff --git a/src/views/SimproV2/Settings/components/Index1.js b/src/views/SimproV2/Settings/components/Index1.js new file mode 100644 index 0000000..33eeab9 --- /dev/null +++ b/src/views/SimproV2/Settings/components/Index1.js @@ -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 ( + <> + + 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} + /> +
+
+ +
+
+
+
+ {userProfile && userProfile.name != null ? userProfile.name : empty} +
+
+
+
+ {userProfile && userProfile.username != null ? userProfile.username : empty} +
+
+
+
handleOpenDialog('Settings')}> +
+ +
+
Edit
+
+
+
+
+
+
+
+
Refferal Code
+
+
+
{refferal ? refferal : 'empty'}
+ + copyToClipboard(refferal ? refferal : 'empty')}> + {isCopied ? + + : + } + + +
+
+
handleOpenDialog('Refferal')}> +
+ +
+
Edit
+
+
+
+
+
Account Information
+
handleOpenDialog('Account')}> +
+ +
+
Edit
+
+
+
+
+
+
Username
+
+ {userProfile && userProfile.username != null ? userProfile.username : empty} +
+
+
+
Email
+
+ {userProfile && userProfile.email != null ? userProfile.email : empty} +
+
+
+
+
+
+
+
+
Personal Information
+
handleOpenDialog('Personal')}> +
+ +
+
Edit
+
+
+
+
+
+
Name
+
+ {userProfile && userProfile.name != null ? userProfile.name : empty} +
+
+
+
Telephone
+
+ {userProfile && userProfile.phone_number != null ? userProfile.phone_number : empty} +
+
+
+
+
+
Kode Number
+
+ {userProfile && userProfile.ktp_number != null ? userProfile.ktp_number : empty} +
+
+
+
Gender
+
+ {userProfile && userProfile.gender != null ? userProfile.gender : empty} +
+
+
+
+
+
Division
+
+ {userProfile && userProfile.join_first_name != null ? userProfile.join_first_name : empty} +
+
+
+
Place of Birth
+
+ {userProfile && userProfile.birth_place != null ? userProfile.birth_place : empty} +
+
+
+
+
+
Role
+
+ {userProfile && userProfile.employee_type != null ? userProfile.employee_type : empty} +
+
+
+
Date of Birth
+
+ {userProfile && userProfile.birth_date != null ? userProfile.birth_date : empty} +
+
+
+
+
+
Address
+
+ {userProfile && userProfile.address != null ? userProfile.address : empty} +
+
+
+
+
+
+ + ); +}; + +export default Index1; diff --git a/src/views/SimproV2/Settings/components/Index1.module.css b/src/views/SimproV2/Settings/components/Index1.module.css new file mode 100644 index 0000000..d2d8ccb --- /dev/null +++ b/src/views/SimproV2/Settings/components/Index1.module.css @@ -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; + } +} diff --git a/src/views/SimproV2/Settings/components/SideProfile.js b/src/views/SimproV2/Settings/components/SideProfile.js new file mode 100644 index 0000000..20ab653 --- /dev/null +++ b/src/views/SimproV2/Settings/components/SideProfile.js @@ -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 ( +
+
+
+
My Profile
+
Plan
+
+
+
+ ); +}; + +export default SideProfile; diff --git a/src/views/SimproV2/Settings/components/SideProfile.module.css b/src/views/SimproV2/Settings/components/SideProfile.module.css new file mode 100644 index 0000000..a7ca95a --- /dev/null +++ b/src/views/SimproV2/Settings/components/SideProfile.module.css @@ -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; + } +} diff --git a/src/views/SimproV2/Settings/index.js b/src/views/SimproV2/Settings/index.js index 0476aed..f2ba9a8 100644 --- a/src/views/SimproV2/Settings/index.js +++ b/src/views/SimproV2/Settings/index.js @@ -105,7 +105,7 @@ const Setting = ({ params }) => { } else { NotificationManager.error(`Code refferal gagal di edit`, `Failed!!`); } - } + } const toggleAddDialog = () => { setOpenDialog(!openDialog) @@ -141,7 +141,7 @@ const Setting = ({ params }) => { } else { NotificationManager.error("Gagal Mengambil Data!!", "Failed"); } - }; + } const getDataRefferal = async (user_id, username, ktp_number) => { const url = REFFERAL_GET_ID(user_id); @@ -181,7 +181,6 @@ const Setting = ({ params }) => { }); } - return (