From 7f388aa0eed60cd68b412e2fda0c49acdacdbcff Mon Sep 17 00:00:00 2001 From: wahyuun Date: Tue, 27 Feb 2024 16:49:33 +0700 Subject: [PATCH] redesign profile --- src/views/SimproV2/Settings/Desktop.js | 18 +- src/views/SimproV2/Settings/DialogForm.js | 71 +++- .../{ => MyProfile}/Head.module.css | 6 +- .../{Index1.js => MyProfile/Index.js} | 152 ++++++-- .../Index.module.css} | 4 +- .../Settings/components/Plan/Column.js | 65 ++++ .../components/Plan/Column.module.css | 114 ++++++ .../Settings/components/Plan/Container.js | 69 ++++ .../components/Plan/Container.module.css | 229 +++++++++++ .../Settings/components/Plan/Container1.js | 226 +++++++++++ .../components/Plan/Container1.module.css | 356 ++++++++++++++++++ .../Settings/components/SideProfile.js | 19 - .../components/SideProfile.module.css | 44 --- 13 files changed, 1263 insertions(+), 110 deletions(-) rename src/views/SimproV2/Settings/components/{ => MyProfile}/Head.module.css (96%) rename src/views/SimproV2/Settings/components/{Index1.js => MyProfile/Index.js} (72%) rename src/views/SimproV2/Settings/components/{Index1.module.css => MyProfile/Index.module.css} (99%) create mode 100644 src/views/SimproV2/Settings/components/Plan/Column.js create mode 100644 src/views/SimproV2/Settings/components/Plan/Column.module.css create mode 100644 src/views/SimproV2/Settings/components/Plan/Container.js create mode 100644 src/views/SimproV2/Settings/components/Plan/Container.module.css create mode 100644 src/views/SimproV2/Settings/components/Plan/Container1.js create mode 100644 src/views/SimproV2/Settings/components/Plan/Container1.module.css delete mode 100644 src/views/SimproV2/Settings/components/SideProfile.js delete mode 100644 src/views/SimproV2/Settings/components/SideProfile.module.css diff --git a/src/views/SimproV2/Settings/Desktop.js b/src/views/SimproV2/Settings/Desktop.js index a534f35..d3feacb 100644 --- a/src/views/SimproV2/Settings/Desktop.js +++ b/src/views/SimproV2/Settings/Desktop.js @@ -1,6 +1,6 @@ -import SideProfile from "./components/SideProfile"; -import Index1 from "./components/Index1"; +import Index from "./components/MyProfile/Index"; import styles from "./Desktop.module.css"; +import Plan from "./components/Plan/Container1"; import React, { useState, useEffect } from 'react'; import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'; @@ -14,6 +14,7 @@ const Desktop = () => { - - - + + + - - Tab Kedua + + diff --git a/src/views/SimproV2/Settings/DialogForm.js b/src/views/SimproV2/Settings/DialogForm.js index d0c4015..d968fc7 100644 --- a/src/views/SimproV2/Settings/DialogForm.js +++ b/src/views/SimproV2/Settings/DialogForm.js @@ -5,6 +5,9 @@ import { } from 'reactstrap'; import { Select, DatePicker } from 'antd'; import moment from "moment"; +import { BASE_SIMPRO_LUMEN_IMAGE_COMPANY } from '../../../const/ApiConst'; +import profile from '../../../assets/img/profile.png' + const { Option } = Select const DialogForm = ({ @@ -23,7 +26,8 @@ const DialogForm = ({ emailProp, userNameProp, refferalCode, - userProfile + userProfile, + imageProfile }) => { const [userName, setUserName] = useState(userNameProp) const [name, setName] = useState(nameProp) @@ -38,6 +42,14 @@ const DialogForm = ({ const [oldPassword, setOldPassword] = useState('') const [newPassword, setNewPassword] = useState('') const [newPasswordConfirm, setNewPasswordConfirm] = useState('') + const [profileImage, setImageProfile] = useState(null) + const [modalOpen, setModalOpen] = useState(false) + + const role = window.localStorage.getItem('role_name'); + let configApp = ''; + if (role !== 'Super Admin') { + configApp = JSON.parse(window.localStorage.getItem('configApp')); + } const handleSave = () => { let data = ''; @@ -59,6 +71,7 @@ const DialogForm = ({ username: userName, email: email } + data.profilePicture = profileImage ? profileImage : null; if(typeDialogProp === "Settings" && newPassword && oldPassword && newPasswordConfirm) { data.password = newPassword; } @@ -108,6 +121,14 @@ const DialogForm = ({ setRefferalCode(newReferralCode); } + const toggleModal = () => { + setModalOpen(!modalOpen); + }; + + const handleImageClick = async () => { + toggleModal(); + }; + const renderForm = () => { return (
@@ -119,7 +140,7 @@ const DialogForm = ({ - + setIdnumber(e.target.value)} /> @@ -165,11 +186,29 @@ const DialogForm = ({ + + + setImageProfile(e.target.files[0])} + /> + handleImageClick() : ''} style={{ cursor: imageProfile ? "pointer" : "" }}> +

+ { + imageProfile ? ( + "View image" + ) : ( + "Not found image" + ) + } +

+ + setUserName(e.target.value)} /> - @@ -181,12 +220,10 @@ const DialogForm = ({ setOldPassword(e.target.value)} /> - setNewPassword(e.target.value)} /> - setNewPasswordConfirm(e.target.value)} /> @@ -219,6 +256,8 @@ const DialogForm = ({ } return ( + <> + {/* Form */} Update {typeDialogProp} {typeDialogProp == 'Refferal' ? ' Code' : ' Data'} @@ -268,6 +307,28 @@ const DialogForm = ({ + {/* Image Picture */} + + + { + imageProfile ? ( + Image Preview + ) : ('Image not found!') + } + + + + + + ) } diff --git a/src/views/SimproV2/Settings/components/Head.module.css b/src/views/SimproV2/Settings/components/MyProfile/Head.module.css similarity index 96% rename from src/views/SimproV2/Settings/components/Head.module.css rename to src/views/SimproV2/Settings/components/MyProfile/Head.module.css index aa70ca9..0a6548b 100644 --- a/src/views/SimproV2/Settings/components/Head.module.css +++ b/src/views/SimproV2/Settings/components/MyProfile/Head.module.css @@ -12,7 +12,7 @@ justify-content: flex-start; padding: 20px 0; } -.ibnuHamdani { +.headContent { position: relative; font-weight: 600; } @@ -22,7 +22,7 @@ align-items: flex-start; justify-content: center; } -.ibnu { +.content { position: relative; font-weight: 600; } @@ -63,7 +63,7 @@ color: #333; } @media screen and (max-width: 450px) { - .ibnuHamdani { + .headContent { font-size: 16px; } } diff --git a/src/views/SimproV2/Settings/components/Index1.js b/src/views/SimproV2/Settings/components/MyProfile/Index.js similarity index 72% rename from src/views/SimproV2/Settings/components/Index1.js rename to src/views/SimproV2/Settings/components/MyProfile/Index.js index 33eeab9..e6e51a4 100644 --- a/src/views/SimproV2/Settings/components/Index1.js +++ b/src/views/SimproV2/Settings/components/MyProfile/Index.js @@ -1,45 +1,57 @@ import * as XLSX from 'xlsx'; import React, { useState, useEffect, useMemo } from 'react'; -import SweetAlert from 'react-bootstrap-sweetalert'; -import axios from "../../../../const/interceptorApi" +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 { USER_EDIT, REFFERAL_ADD, REFFERAL_EDIT, ROLE_SEARCH, USER_SEARCH, IMAGE_UPLOAD, IMAGE_DELETE, IMAGE_GET_BY_ID, BASE_SIMPRO_LUMEN_IMAGE_COMPANY } from '../../../../../const/ApiConst'; +import DialogForm from '../../DialogForm' +import styles from "./Index.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") +import { Modal, ModalBody, ModalFooter, Button } from 'reactstrap'; +const Index = () => { + const token = localStorage.getItem("token") + const user_id = localStorage.getItem("user_id") + let company_id = '', configApp = ''; + const role = window.localStorage.getItem('role_name'); + if(role !== 'Super Admin') { + company_id = localStorage.getItem("company_id"); + configApp = JSON.parse(window.localStorage.getItem('configApp')); + } const config = { headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}` } } + const HEADER_MULTIPART = { + headers: { + "Content-Type": "multipart/form-data", + 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) + const [imageProfile, setImageProfile] = useState(null); + const [modalOpen, setModalOpen] = useState(false) useEffect(() => { + getImageProfle(parseInt(user_id)); getRoleList(); getDataProfileUser(); }, []) const getDataProfileUser = async () => { const formData = { - "paging": {"start": 0, "length": -1}, + "paging": {"start": 0, "length": 1}, "columns": [ - {"name": "id", "logic_operator": "=", "value": parseInt(id), "operator": "AND"} + {"name": "id", "logic_operator": "=", "value": parseInt(user_id), "operator": "AND"} ], "joins": [ { @@ -65,8 +77,8 @@ const Index1 = () => { 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); + if(!dataRes.discount_id || dataRes.discount_id === null || dataRes.discount_id === '') { + saveRefferalCode(dataRes?.username, dataRes?.ktp_number); } else { setReferralCode(dataRes.join_second_code); } @@ -90,19 +102,65 @@ const Index1 = () => { } const saveProfile = async (data) => { - let urlEdit = USER_EDIT(userProfile?.id) + let urlEdit = USER_EDIT(user_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) { + const profilePicture = data.profilePicture; + if (profilePicture && profilePicture != null) { + await deleteImageProfile( + parseInt(user_id), + ); + await saveImageProfile( + parseInt(user_id), + profilePicture + ); + } getDataProfileUser() + getImageProfle(user_id) NotificationManager.success(`Data profile berhasil diedit`, 'Success!!'); } else { NotificationManager.error(`Data profile gagal di edit`, `Failed!!`); } } + // Save Image Function + const saveImageProfile = async (id, data) => { + const formData = new FormData; + formData.append('ref_id', id); + formData.append('category', 'profile_picture'); + formData.append('files', data); + if(role !== 'Super Admin') { + formData.append('company_name', configApp.company_name); + } + await axios + .post(IMAGE_UPLOAD, formData, HEADER_MULTIPART) + .then(res => res) + .catch((error) => error.response); + }; + + // Delete Image Function + const deleteImageProfile = async (id) => { + const URL = IMAGE_DELETE(id, 'profile_picture', company_id != '' ? company_id : 'undifined'); + await axios + .delete(URL, config) + .then(res => res) + .catch((error) => error.response); + }; + + const getImageProfle = async (id) => { + const url = IMAGE_GET_BY_ID(id, "profile_picture"); + const result = await axios + .get(url, config) + .then((res) => res) + .catch((err) => err.response); + if (result && result.data && result.data.code === 200) { + setImageProfile(result.data.data); + } + } + const updateRefferal = async (data) => { let urlEdit = REFFERAL_EDIT(userProfile?.id) const formData = data @@ -121,6 +179,14 @@ const Index1 = () => { setOpenDialog(!openDialog) } + const toggleModal = () => { + setModalOpen(!modalOpen); + }; + + const handleImageClick = async () => { + toggleModal(); + }; + const getRoleList = async () => { const formData = { "paging": { "start": 0, "length": -1 }, @@ -135,7 +201,7 @@ const Index1 = () => { } } - const saveRefferalCode = async (user_id, username, ktp_number) => { + const saveRefferalCode = async (username, ktp_number) => { const formData = { 'code': username + ktp_number.substring(0, 4), 'amount': 0 @@ -145,7 +211,10 @@ const Index1 = () => { .then((res) => res) .catch((error) => error.response); if (result && result.data && result.data.code == 200) { - await getDataProfileUser(user_id, username, ktp_number); + const data = {'discount_id': result.data.data.id}; + await saveProfile(data); + } else { + NotificationManager.error('Kode refferal gagal ditambahkan!!', 'Failed'); } } @@ -179,28 +248,33 @@ const Index1 = () => { userNameProp={userProfile?.username} refferalCode={refferal} userProfile={userProfile} + imageProfile={imageProfile} />
-
- +
handleImageClick() : ''}> +
-
+
{userProfile && userProfile.name != null ? userProfile.name : empty}
-
+
{userProfile && userProfile.username != null ? userProfile.username : empty}
-
handleOpenDialog('Settings')}> -
+
handleOpenDialog('Settings')}> +
-
Edit
+
Edit
@@ -249,7 +323,7 @@ const Index1 = () => {
Email
-
+
{userProfile && userProfile.email != null ? userProfile.email : empty}
@@ -271,7 +345,7 @@ const Index1 = () => {
Name
-
+
{userProfile && userProfile.name != null ? userProfile.name : empty}
@@ -335,8 +409,28 @@ const Index1 = () => {
+ + + { + imageProfile ? ( + Image Preview + ) : ('Image not found!') + } + + + + + ); }; -export default Index1; +export default Index; diff --git a/src/views/SimproV2/Settings/components/Index1.module.css b/src/views/SimproV2/Settings/components/MyProfile/Index.module.css similarity index 99% rename from src/views/SimproV2/Settings/components/Index1.module.css rename to src/views/SimproV2/Settings/components/MyProfile/Index.module.css index d2d8ccb..769266a 100644 --- a/src/views/SimproV2/Settings/components/Index1.module.css +++ b/src/views/SimproV2/Settings/components/MyProfile/Index.module.css @@ -171,7 +171,7 @@ position: relative; font-weight: 500; } -.ibnuhamdaniintegrasiautamac { +.emailContent { position: relative; color: #777; white-space: nowrap; @@ -267,7 +267,7 @@ position: relative; font-weight: 500; } -.ibnuHamdani { +.content { position: relative; color: #777; } diff --git a/src/views/SimproV2/Settings/components/Plan/Column.js b/src/views/SimproV2/Settings/components/Plan/Column.js new file mode 100644 index 0000000..1b12b09 --- /dev/null +++ b/src/views/SimproV2/Settings/components/Plan/Column.js @@ -0,0 +1,65 @@ +import { useMemo } from "react"; +import styles from "./Column.module.css"; + +const Column = ({ + date, + currentPlanFrame, + textFrame, + currentPlanText, + text, + daysFrame, + propHeight, + propMinHeight, + propFlex, + propHeight1, + propFlex1, + propWidth, +}) => { + const columnStyle = useMemo(() => { + return { + height: propHeight, + }; + }, [propHeight]); + + const headStyle = useMemo(() => { + return { + minHeight: propMinHeight, + flex: propFlex, + }; + }, [propMinHeight, propFlex]); + + const dateStyle = useMemo(() => { + return { + height: propHeight1, + flex: propFlex1, + width: propWidth, + }; + }, [propHeight1, propFlex1, propWidth]); + + return ( +
+
+
+ {date} +
+
+
+
{currentPlanFrame}
+
+
+
{textFrame}
+
+
+
{currentPlanText}
+
+
+
{text}
+
+
+
{daysFrame}
+
+
+ ); +}; + +export default Column; diff --git a/src/views/SimproV2/Settings/components/Plan/Column.module.css b/src/views/SimproV2/Settings/components/Plan/Column.module.css new file mode 100644 index 0000000..b75cf60 --- /dev/null +++ b/src/views/SimproV2/Settings/components/Plan/Column.module.css @@ -0,0 +1,114 @@ +.date, +.head { + max-width: 100%; +} +.date { + height: 19px; + flex: 1; + position: relative; + line-height: 22px; + font-weight: 600; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; +} +.head { + align-self: stretch; + border-bottom: 1px solid #d8d8d8; + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 8px; + min-height: 59px; + color: #969696; +} +.currentPlanFrame { + position: relative; + line-height: 22px; +} +.head1 { + align-self: stretch; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 16px 8px; + white-space: nowrap; +} +.textFrame { + position: relative; + line-height: 22px; +} +.head2 { + align-self: stretch; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 16px 8px; + white-space: nowrap; +} +.currentPlanText { + position: relative; + line-height: 22px; +} +.head3 { + align-self: stretch; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 16px 8px; + white-space: nowrap; +} +.text { + position: relative; + line-height: 22px; +} +.head4 { + align-self: stretch; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 16px 8px; + white-space: nowrap; +} +.daysFrame { + position: relative; + line-height: 22px; +} +.column, +.head5 { + display: flex; + align-items: center; +} +.head5 { + align-self: stretch; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + flex-direction: row; + justify-content: center; + padding: 16px 8px; + white-space: nowrap; +} +.column { + width: 400px; + flex-shrink: 0; + flex-direction: column; + justify-content: flex-start; + text-align: center; + font-size: 18px; + color: #333; + font-family: Roboto; +} diff --git a/src/views/SimproV2/Settings/components/Plan/Container.js b/src/views/SimproV2/Settings/components/Plan/Container.js new file mode 100644 index 0000000..bb40141 --- /dev/null +++ b/src/views/SimproV2/Settings/components/Plan/Container.js @@ -0,0 +1,69 @@ +import Column from "./Column"; +import styles from "./Container.module.css"; +import React, { useState, useEffect } from 'react'; + +const Container = () => { + return ( +
+
+
Payment history
+
+
+ + +
+
+
Status
+
+
+
+
Successful
+
+
+
+
+
Successful
+
+
+
+
+
Successful
+
+
+
+
+
Successful
+
+
+
+
+
Successful
+
+
+
+
+
+ ); +}; + +export default Container; diff --git a/src/views/SimproV2/Settings/components/Plan/Container.module.css b/src/views/SimproV2/Settings/components/Plan/Container.module.css new file mode 100644 index 0000000..e067faf --- /dev/null +++ b/src/views/SimproV2/Settings/components/Plan/Container.module.css @@ -0,0 +1,229 @@ +.paymentHistory { + position: relative; + font-weight: 500; +} +.headText { + align-self: stretch; + height: 34px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +} +.status { + width: 53px; + position: relative; + line-height: 22px; + font-weight: 600; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.head { + align-self: stretch; + flex: 1; + border-bottom: 1px solid #d8d8d8; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 8px; + color: #969696; +} +.successful { + flex: 1; + position: relative; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.head1, +.successfulWrapper { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; +} +.successfulWrapper { + width: 109px; + border-radius: 20px; + background-color: #17c13e; + justify-content: flex-start; + padding: 3px 10px; +} +.head1 { + align-self: stretch; + height: 54.8px; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + justify-content: center; + padding: 16px 8px; +} +.successful1 { + flex: 1; + position: relative; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.head2, +.successfulContainer { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; +} +.successfulContainer { + width: 109px; + border-radius: 20px; + background-color: #17c13e; + justify-content: flex-start; + padding: 3px 10px; +} +.head2 { + align-self: stretch; + height: 54.8px; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + justify-content: center; + padding: 16px 8px; +} +.successful2 { + flex: 1; + position: relative; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.head3, +.successfulFrame { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; +} +.successfulFrame { + width: 109px; + border-radius: 20px; + background-color: #17c13e; + justify-content: flex-start; + padding: 3px 10px; +} +.head3 { + align-self: stretch; + height: 54.8px; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + justify-content: center; + padding: 16px 8px; +} +.successful3 { + flex: 1; + position: relative; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.frameDiv, +.head4 { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; +} +.frameDiv { + width: 109px; + border-radius: 20px; + background-color: #17c13e; + justify-content: flex-start; + padding: 3px 10px; +} +.head4 { + align-self: stretch; + height: 54.8px; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + justify-content: center; + padding: 16px 8px; +} +.successful4 { + flex: 1; + position: relative; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.head5, +.successfulWrapper1 { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; +} +.successfulWrapper1 { + width: 109px; + border-radius: 20px; + background-color: #17c13e; + justify-content: flex-start; + padding: 3px 10px; +} +.head5 { + align-self: stretch; + height: 54.8px; + background-color: #fdfdfd; + border-bottom: 1px solid #d8d8d8; + justify-content: center; + padding: 16px 8px; +} +.column, +.container, +.table { + display: flex; + justify-content: flex-start; +} +.column { + height: 333.4px; + width: 400px; + flex-shrink: 0; + flex-direction: column; + align-items: center; + color: #fdfdfd; +} +.container, +.table { + align-items: flex-start; + max-width: 100%; +} +.table { + width: 1200px; + border-radius: 4px; + background-color: #fdfdfd; + overflow-x: auto; + flex-direction: row; + text-align: center; + font-size: 18px; +} +.container { + width: 1240px; + background-color: #fff; + border: 1px solid #7eacd3; + box-sizing: border-box; + flex-direction: column; + padding: 20px 21px 20px 19px; + gap: 10px 0; + text-align: left; + font-size: 20px; + color: #333; + font-family: Roboto; +} +@media screen and (max-width: 450px) { + .paymentHistory { + font-size: 16px; + } +} diff --git a/src/views/SimproV2/Settings/components/Plan/Container1.js b/src/views/SimproV2/Settings/components/Plan/Container1.js new file mode 100644 index 0000000..85d06c3 --- /dev/null +++ b/src/views/SimproV2/Settings/components/Plan/Container1.js @@ -0,0 +1,226 @@ +import styles from "./Container1.module.css"; +import React, { useState, useEffect } from 'react'; +import axios from "../../../../../const/interceptorApi" +import { PROYEK_SEARCH, TRANSACTION_SEARCH, STORAGE_LIMIT_INFORMATION } from '../../../../../const/ApiConst'; +import { NotificationContainer, NotificationManager } from 'react-notifications'; +import moment from "moment"; + +const Container1 = () => { + const token = localStorage.getItem("token") + const user_id = localStorage.getItem("user_id") + let company_id = '', configApp = ''; + const role = window.localStorage.getItem('role_name'); + const [totalPage, setTotalPage] = useState(0); + const [transaction, setTransaction] = useState([]); + const [storage, setLimitInformation] = useState(0) + const currentDate = new Date(); + const givenDate = new Date(transaction.exp_ospro); + const createdDate = new Date(transaction.created_at) + const differenceInMillis = givenDate.getTime() - currentDate.getTime(); + + const differenceInDays = Math.floor(differenceInMillis / (1000 * 60 * 60 * 24)); + + if(role !== 'Super Admin') { + company_id = localStorage.getItem("company_id"); + configApp = JSON.parse(window.localStorage.getItem('configApp')); + } + const config = { + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${token}` + } + } + + useEffect(()=>{ + getDataProyek(); + getDataTransaction(); + getLimitInformation(); + },[]) + + const getDataProyek = async () => { + const payload = { + "columns": [ + {"name": "company_id", "logic_operator": "=", "value": parseInt(company_id), "operator": "AND"} + ], + "select": [ + "nama", + "mulai_proyek", + "akhir_proyek", + "company_id" + ], + }; + const result = await axios + .post(PROYEK_SEARCH, payload, config) + .then((res) => res) + .catch((error) => error.response); + if (result && result.data && result.data.code == 200) { + setTotalPage(result.data.totalRecord); + } else { + NotificationManager.error("Gagal Mengambil Data!!", "Failed"); + } + }; + + const getDataTransaction = async () => { + const formData = { + "paging": {"start": 0, "length": 1}, + "columns": [ + {"name": "company_id", "logic_operator": "=", "value": parseInt(company_id), "operator": "AND"} + ], + "select": [ + "company_id", + "type_paket", + "amount", + "exp_ospro", + "pay_date", + "created_at" + ] + } + const result = await axios + .post(TRANSACTION_SEARCH, formData, config) + .then(res => res) + .catch((error) => error.response ); + if (result && result.data && result.data.code == 200) { + let dataRes = result.data.data[0]; + setTransaction(dataRes); + } else { + NotificationManager.error("Gagal Mengambil Data!!", "Failed"); + } + } + + const getLimitInformation = async () => { + const url = STORAGE_LIMIT_INFORMATION(configApp.company_name); + const result = await axios + .get(url, config) + .then((res) => res) + .catch((error) => error.response); + if (result.data) { + setLimitInformation(result.data); + } else { + NotificationManager.error("Gagal Mengambil Data!!", "Failed"); + } + } + + + return ( +
+
+
Current Plan
+
+
+
+
+
+ Your Current Plan is {transaction.type_paket} +
+
+ A simple start for everyone +
+
+
+
+
+
+ Active until {moment(transaction.exp_ospro).format('DD MMMM, YYYY')} +
+
+ We will send you a notification upon Subscription expiration +
+
+
+
+
+
Payment of 250k
+
+ Payment is due 9 March, 2024 +
+
+
+
+
+ + +
+
+
+
+
+
+
Days
+
{30 - Math.abs(differenceInDays)} of 30 Days
+
+
+
+
= 0 && (30 - Math.abs(differenceInDays)) <= 10) ? '#59b4c3' : + ((30 - Math.abs(differenceInDays)) >= 11 && (30 - Math.abs(differenceInDays)) <= 20) ? '#ffa447' : + '#FF4747', + zIndex:'1', + padding:'5px', + borderRadius:'15px' + }}> +
+
+
+ {Math.abs(differenceInDays)} days remaining until your plan requires update +
+
+
+
+
Storage
+
{storage} of {transaction.type_paket === 'Basic' ? 500 : 50}MB
+
+
+
+
= 0 && storage <= (transaction.type_paket === 'Basic' ? 166.67 : 16.67)) ? '#59b4c3' : + (storage >= (transaction.type_paket === 'Basic' ? 166.68 : 16.68) && storage <= (transaction.type_paket === 'Basic' ? 333.33 : 33.33)) ? '#ffa447' : + '#FF4747', + zIndex:'1', + padding:'5px', + borderRadius:'15px' + }}> +
+
+
+ {((storage / (transaction.type_paket === 'Basic' ? 500 : 50)) * 100).toFixed(2)}% storage remaining until your plan requires update +
+
+
+
+
Project
+
{parseInt(totalPage)} of {transaction.type_paket === "Basic" ? "10" : "1"} Project
+
+
+
+
= 0 && parseInt(totalPage) <= 3) ? '#59b4c3' : + (parseInt(totalPage) >= 4 && parseInt(totalPage) <= 7) ? '#ffa447' : + '#FF4747' : '#FF4747', + zIndex:'1', + padding:'5px', + borderRadius:'15px' + }}> +
+
+
+ {parseInt(transaction.type_paket === "Basic" ? 10 : 1) - (parseInt(totalPage))} Project remaining until your plan requires update +
+
+
+
+ ); +}; + +export default Container1; diff --git a/src/views/SimproV2/Settings/components/Plan/Container1.module.css b/src/views/SimproV2/Settings/components/Plan/Container1.module.css new file mode 100644 index 0000000..4327bda --- /dev/null +++ b/src/views/SimproV2/Settings/components/Plan/Container1.module.css @@ -0,0 +1,356 @@ +.currentPlan, +.yourCurrentPlan { + position: relative; + font-weight: 500; +} +.aSimpleStart { + position: relative; + color: #777; +} +.payNowCancelFrame, +.text { + display: flex; + align-items: flex-start; + max-width: 100%; +} +.payNowCancelFrame { + flex: 1; + flex-direction: column; + justify-content: flex-start; + gap: 10px 0; +} +.text { + align-self: stretch; + flex-direction: row; + justify-content: center; +} +.activeUntilMarc { + position: relative; + font-weight: 500; +} +.weWillSend { + align-self: stretch; + position: relative; + color: #777; +} +.activeUntilMarc092024Parent, +.notificationText { + display: flex; + align-items: flex-start; + max-width: 100%; +} +.activeUntilMarc092024Parent { + flex: 1; + flex-direction: column; + justify-content: flex-start; + gap: 10px 0; +} +.notificationText { + align-self: stretch; + flex-direction: row; + justify-content: center; +} +.paymentIsDue, +.paymentOf250k { + position: relative; + font-weight: 500; +} +.paymentIsDue { + color: #777; +} +.div1, +.notificationText1, +.paymentOf250kParent { + display: flex; + align-items: flex-start; + max-width: 100%; +} +.paymentOf250kParent { + flex: 1; + flex-direction: column; + justify-content: flex-start; + gap: 10px 0; +} +.div1, +.notificationText1 { + align-self: stretch; + flex-direction: row; + justify-content: center; +} +.div1 { + flex-direction: column; + justify-content: flex-start; + gap: 20px 0; +} +.payNow { + position: relative; + font-size: 18px; + font-weight: 500; + color: #fdfdfd; + text-align: left; +} +.payNowCancelSubscribe { + cursor: pointer; + border: 0; + padding: 10px 15px; + background-color: #20a8d8; + border-radius: 15px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + white-space: nowrap; +} +.payNowCancelSubscribe:hover { + background-color: #058fbf; +} +.cancelSubscription { + position: relative; + font-size: 18px; + font-weight: 500; + color: #ea5455; + text-align: left; +} +.payNowCancelSubscribe1 { + cursor: pointer; + border: 0; + padding: 10px 15px; + background-color: #fce4e4; + border-radius: 15px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + white-space: nowrap; +} +.payNowCancelSubscribe1:hover { + background-color: #e3c9c9; +} +.containerFrame, +.div, +.projectFrame { + display: flex; + justify-content: flex-start; +} +.containerFrame { + flex-direction: row; + align-items: center; + gap: 0 20px; +} +.div, +.projectFrame { + flex-direction: column; + align-items: flex-start; + max-width: 100%; +} +.div { + align-self: stretch; + gap: 20px 0; + font-size: 16px; +} +.projectFrame { + flex: 1; + gap: 15px 0; + min-width: 390px; + flex-shrink: 0; +} +.days1, +.of30Days { + position: relative; +} +.frameYourCurrentPlan { + width: 400px; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 20px; +} +.rectangleFrameChild { + width: 600px; + position: relative; + background-color: #d9d9d9; + display: none; +} +.daysRemaining, +.rectangleFrame, +.rectangleFrameChild { + width: 400px; + border-radius: 5px; + max-width: 100%; +} +.rectangleFrame { + height: 10px; + background-color: #d9d9d9; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + padding: 0 1px; + box-sizing: border-box; +} +.daysRemainingUntil { + position: relative; + display: inline-block; + max-width: 100%; +} +.days { + width: 600px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + gap: 5px 0; +} +.of500mb, +.storage { + position: relative; +} +.storageParent { + width: 400px; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 20px; +} +.frameChild { + width: 600px; + position: relative; + background-color: #d9d9d9; + display: none; +} +.frameChild, +.frameItem, +.rectangleParent { + width: 400px; + border-radius: 5px; + max-width: 100%; +} +.frameItem { + width: 539.1px; + position: relative; + background-color: #ffa447; + z-index: 1; +} +.rectangleParent { + height: 10px; + background-color: #d9d9d9; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + padding: 0 1px; + box-sizing: border-box; +} +.storageRemainingUntil { + align-self: stretch; + position: relative; +} +.days2 { + width: 600px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + gap: 5px 0; +} +.of10Project, +.project { + position: relative; +} +.projectParent { + width: 400px; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 20px; +} +.frameInner { + width: 200px; + position: relative; + background-color: #d9d9d9; + display: none; +} +.frameInner, +.rectangleDiv, +.rectangleGroup { + width: 400px; + border-radius: 5px; + max-width: 100%; +} +.rectangleGroup { + height: 10px; + background-color: #d9d9d9; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +} +.projectRemainingUntil { + align-self: stretch; + position: relative; +} +.container, +.days3, +.daysOfDaysFrame { + display: flex; + justify-content: flex-start; +} +.days3 { + width: 600px; + flex-direction: column; + align-items: flex-start; + gap: 5px 0; +} +.container, +.daysOfDaysFrame { + box-sizing: border-box; + max-width: 100%; +} +.daysOfDaysFrame { + flex: 1; + flex-direction: column; + align-items: flex-start; + padding: 0 0 31px; + gap: 20px 0; + min-width: 490px; + flex-shrink: 0; + font-size: 16px; + color: #777; +} +.container { + width: 1240px; + background-color: #fff; + border: 1px solid #7eacd3; + overflow: hidden; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-end; + padding: 26px 21px 20px 19px; + row-gap: 20px; + text-align: left; + font-size: 20px; + color: #333; +} +@media screen and (max-width: 675px) { + .notificationText, + .notificationText1, + .text { + gap: 0 37px; + } + .daysOfDaysFrame, + .projectFrame { + min-width: 100%; + overflow-x: auto; + } +} +@media screen and (max-width: 450px) { + .currentPlan { + font-size: 16px; + } + .containerFrame { + flex-wrap: wrap; + } +} diff --git a/src/views/SimproV2/Settings/components/SideProfile.js b/src/views/SimproV2/Settings/components/SideProfile.js deleted file mode 100644 index 20ab653..0000000 --- a/src/views/SimproV2/Settings/components/SideProfile.js +++ /dev/null @@ -1,19 +0,0 @@ -import "antd/dist/antd.min.css"; -import { Button } from "antd"; -import styles from "./SideProfile.module.css"; -import React, { useState, useEffect, useMemo } from 'react'; - -const SideProfile = () => { - return ( -
-
-
-
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 deleted file mode 100644 index a7ca95a..0000000 --- a/src/views/SimproV2/Settings/components/SideProfile.module.css +++ /dev/null @@ -1,44 +0,0 @@ -.button { - white-space: nowrap; -} -.plan { - position: relative; - font-weight: 600; -} -.button1 { - flex: 1; - align-items: center; - padding: 15px; - box-sizing: border-box; -} -.button1, -.side, -.sideProfile { - display: flex; - flex-direction: row; - justify-content: flex-start; - max-width: 100%; -} -.side { - flex: 1; - background-color: #fff; - align-items: flex-start; - gap: 0 15px; -} -.sideProfile { - align-self: stretch; - align-items: center; - padding: 30px; - box-sizing: border-box; - top: 0; - z-index: 99; - position: sticky; - text-align: left; - font-size: 20px; - color: #777; -} -@media screen and (max-width: 1200px) { - .side { - display: none; - } -}