profile

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 (
+    <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;

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;
+  }
+}

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,
+    Button, Form, FormGroup, Label, Input, Col, Row,TabContent, TabPane
-    Nav, NavItem, NavLink, 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,
+                email: email
-                password: newPassword,
+            }
+            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 = ({
                 <Row>
                     <Col md={6}>
                         <FormGroup>
-                            <Label className="capitalize">Nama</Label>
+                            <Label className="capitalize">Name</Label>
                             <Input type="text" value={name || nameProp} onChange={(e) => setName(e.target.value)} />
                         </FormGroup>
 
                         <FormGroup>
-                            <Label className="capitalize">ID Number</Label>
+                            <Label className="capitalize">ID</Label>
                             <Input type="text" value={idNumber || idNumberProp} onChange={(e) => setIdnumber(e.target.value)} />
                         </FormGroup>
 
                         <FormGroup>
-                            <Label className="capitalize">Alamat</Label>
+                            <Label className="capitalize">Address</Label>
                             <Input type="text" value={address || addressProp} onChange={(e) => setAddres(e.target.value)} />
                         </FormGroup>
 
                     </Col>
                     <Col md={6}>
                         <FormGroup>
-                            <Label className="capitalize">Nomor Handphone</Label>
+                            <Label className="capitalize">Telephone</Label>
                             <Input type="text" value={noHp || noHpProp} onChange={(e) => setNohp(e.target.value)} />
                         </FormGroup>
 
@@ -146,13 +145,13 @@ const DialogForm = ({
                         </FormGroup>
 
                         <FormGroup>
-                            <Label className="capitalize">Tempat Lahir</Label>
+                            <Label className="capitalize">Place of Birth</Label>
                             <Input type="text" value={birthdayPlace || birthdayPlaceProp} onChange={(e) => setBirthdayplace(e.target.value)} />
                         </FormGroup>
 
                         <FormGroup>
-                            <Label className="capitalize">Tanggal Lahir</Label>
+                            <Label className="capitalize">Date of Birth</Label>
-                            <DatePicker style={{ width: "100%" }} value={birthdayDate} defaultValue={birthdayDateProp} onChange={(date, dateString) => setBirthdaydate(date)} />
+                            <DatePicker style={{ width: "100%" }} value={birthdayDateProp && birthdayDateProp != null ? moment(birthdayDateProp) : birthdayDate} onChange={handleDatePickerEnd} />
                         </FormGroup>
 
                     </Col>
@@ -165,7 +164,7 @@ const DialogForm = ({
         return (
             <Form>
                 <Row>
-                    <Col md={6}>
+                    <Col md={12}>
                         <FormGroup>
                             <Label className="capitalize">Username</Label>
                             <Input type="text" value={userName || userNameProp} onChange={(e) => setUserName(e.target.value)} />
@@ -177,19 +176,19 @@ const DialogForm = ({
                             <Input type="text" value={email || emailProp} onChange={(e) => setEmail(e.target.value)} />
                         </FormGroup>
                     </Col>
-                    <Col md={6}>
+                    <Col md={12}>
                         <FormGroup>
-                            <Label className="capitalize">Old password</Label>
+                            <Label className="capitalize">Old Password</Label>
                             <Input type="text" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} />
                         </FormGroup>
 
                         <FormGroup>
-                            <Label className="capitalize">New password</Label>
+                            <Label className="capitalize">New Password</Label>
                             <Input type="text" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
                         </FormGroup>
 
                         <FormGroup>
-                            <Label className="capitalize">Confirm new password</Label>
+                            <Label className="capitalize">Confirm New Password</Label>
                             <Input type="text" value={newPasswordConfirm} onChange={(e) => setNewPasswordConfirm(e.target.value)} />
                         </FormGroup>
                     </Col>
@@ -207,10 +206,10 @@ const DialogForm = ({
                             <Label className="capitalize">Username</Label>
                             <Input type="text" value={userName || userNameProp} onChange={(e) => setUserName(e.target.value)} />
                         </FormGroup>
-
+                    </Col>
+                    <Col md={6}>
                       <FormGroup>
                           <Label className="capitalize">Email</Label>
-
                           <Input type="text" value={email || emailProp} onChange={(e) => setEmail(e.target.value)} />
                       </FormGroup>
                     </Col>
@@ -222,54 +221,19 @@ const DialogForm = ({
     return (
         <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
             <ModalHeader className="capitalize" toggle={closeDialog}>
-                Update {typeDialog == "Personal" ? `Personal` : "Account"} Data
+                Update {typeDialogProp} {typeDialogProp == 'Refferal' ? ' Code' : ' Data'}
             </ModalHeader>
             <ModalBody>
               {typeDialogProp !== 'Refferal' ? (
                   <>
-                    <Nav tabs>
+                    <TabContent activeTab={typeDialogProp}>
-                      <NavItem>
+                        <TabPane tabId="Personal">
-                          <NavLink
-                              onClick={() => {
-                                  setActiveTab("tab1");
-                                  setTypeDialog("Personal");
-                              }}
-                              active={activeTab === "tab1"}
-                          >
-                              Personal
-                          </NavLink>
-                      </NavItem>
-                      <NavItem>
-                          <NavLink
-                              onClick={() => {
-                                  setActiveTab("tab2");
-                                  setTypeDialog("Account");
-                              }}
-                              active={activeTab === "tab2"}
-                          >
-                              Account
-                          </NavLink>
-                      </NavItem>
-                      <NavItem>
-                          <NavLink
-                              onClick={() => {
-                                  setActiveTab("tab3");
-                                  setTypeDialog("Setting");
-                              }}
-                              active={activeTab === "tab3"}
-                          >
-                              Setting
-                          </NavLink>
-                        </NavItem>
-                    </Nav>
-                    <TabContent activeTab={activeTab}>
-                        <TabPane tabId="tab1">
                             {renderForm()}
                         </TabPane>
-                        <TabPane tabId="tab2">
+                        <TabPane tabId="Settings">
                             {renderFormAccount()}
                         </TabPane>
-                        <TabPane tabId="tab3">
+                        <TabPane tabId="Account">
                             {renderFormSetting()}
                         </TabPane>
                     </TabContent>
@@ -278,7 +242,7 @@ const DialogForm = ({
                 <Form>
                   <Row>
                     <Col md={12}>
-                      <span style={{ color: "red" }}>*</span> Wajib diisi.
+                      <span style={{ color: "red" }}>*</span> Is required
                     </Col>
                   </Row>
                   <Row>
@@ -300,14 +264,11 @@ const DialogForm = ({
               )}
             </ModalBody>
             <ModalFooter>
-                <Button color="primary" onClick={() => handleSave()}>{typeDialogProp !== 'Refferal' ? typeDialog == "Profile" ? `Profile` : "Save" : "Generate Code"}</Button> {' '}
+                <Button color="primary" onClick={() => handleSave()}>Save</Button> {' '}
                 <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>Batal</Button>
             </ModalFooter>
         </Modal>
     )
-
-
-
 }
 
 export default DialogForm;

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;
+  }
+}

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 (
+    <>
+      <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;

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;
+  }
+}

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 (
+    <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;

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;
+  }
+}

src/views/SimproV2/Settings/index.js

@@ -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 (
         <div>
             <NotificationContainer />