30 changed files with 3881 additions and 467 deletions
@ -0,0 +1,190 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row |
||||
} from 'reactstrap'; |
||||
import { Select, DatePicker } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import "rc-color-picker/assets/index.css"; |
||||
import moment from 'moment'; |
||||
import { formatNumber } from "../../../const/CustomFunc"; |
||||
const { Option } = Select |
||||
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { |
||||
const [id, setId] = useState(0) |
||||
const [code, setCode] = useState('') |
||||
const [amount, setAmount] = useState(0) |
||||
const [description, setDescription] = useState('') |
||||
const [exp, setExp] = useState('') |
||||
const [type, setType] = useState('') |
||||
const [allocation, setAllocation] = useState(0) |
||||
const { t } = useTranslation() |
||||
|
||||
useEffect(() => { |
||||
console.log('dataEdit', dataEdit); |
||||
if (typeDialog === "Edit") { |
||||
setId(dataEdit.id) |
||||
setCode(dataEdit.code) |
||||
setAmount(dataEdit.amount) |
||||
setDescription(dataEdit.description) |
||||
setExp(dataEdit.exp) |
||||
setType(dataEdit.type) |
||||
} else { |
||||
handleClear() |
||||
} |
||||
}, [dataEdit, openDialog]) |
||||
|
||||
const validation = () => { |
||||
if (!code || code === "") { |
||||
alert("Code cannot be empty!"); |
||||
return true; |
||||
} |
||||
} |
||||
const handleSave = () => { |
||||
let data = ''; |
||||
const err = validation(); |
||||
|
||||
if (!err) { |
||||
if (typeDialog === "Save") { |
||||
data = { |
||||
code, |
||||
amount, |
||||
description, |
||||
exp, |
||||
type, |
||||
allocation |
||||
} |
||||
console.log('data', data); |
||||
closeDialog('save', data); |
||||
} else { |
||||
data = { |
||||
id, |
||||
code, |
||||
amount, |
||||
description, |
||||
exp, |
||||
type, |
||||
allocation |
||||
} |
||||
console.log('data', data); |
||||
closeDialog('edit', data); |
||||
} |
||||
handleClear() |
||||
|
||||
} |
||||
} |
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
handleClear() |
||||
} |
||||
const handleClear = () => { |
||||
setId(0) |
||||
setCode('') |
||||
setAmount('') |
||||
setDescription('') |
||||
setExp('') |
||||
} |
||||
|
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={12}> |
||||
<span style={{ color: "red" }}>*</span> Wajib diisi. |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('code')} {t('discount')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input |
||||
type="text" |
||||
value={code} |
||||
onChange={(e) => setCode(e.target.value)} |
||||
placeholder={t('inputCode')} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('amount')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input |
||||
type="text" |
||||
value={amount} |
||||
onChange={(e) => setAmount(e.target.value)} |
||||
placeholder={t('inputAmount')} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize" style={{ fontWeight: "bold" }}> |
||||
{t('exp')}<span style={{ color: "red" }}>*</span> |
||||
</Label> |
||||
<DatePicker |
||||
format={"DD-MM-YYYY HH:mm"} |
||||
style={{ width: "100%" }} |
||||
value={exp ? moment(exp) : exp} |
||||
onChange={(date, dateString) => setExp(date)} |
||||
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }} |
||||
/> |
||||
|
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('allocation')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input |
||||
type="number" |
||||
value={allocation} |
||||
onChange={(e) => setAllocation(e.target.value)} |
||||
placeholder={t('input')} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('type')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input |
||||
type="text" |
||||
value={type} |
||||
onChange={(e) => setType(e.target.value)} |
||||
placeholder={t('inputType')} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={12}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('description')}</Label> |
||||
<Input row="4" type="textarea" value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('inputDescription')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('Demo')}</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogForm; |
||||
@ -0,0 +1,372 @@
|
||||
import * as XLSX from 'xlsx'; |
||||
import DialogForm from './DialogForm'; |
||||
import React, { useState, useEffect } from 'react'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import axios from "../../../const/interceptorApi" |
||||
import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; |
||||
import { REFERRAL_CODE_EDIT, REFERRAL_CODE_SEARCH, REFERRAL_CODE_ADD, REFERRAL_CODE_DELETE } from '../../../const/ApiConst'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { Spin, Button, Tooltip } from 'antd'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import moment from 'moment'; |
||||
import toRupiah from '@develoka/angka-rupiah-js'; |
||||
|
||||
const ProjectType = ({ params, ...props }) => { |
||||
let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name = '', hierarchy = [], user_name = ''; |
||||
if (props && props.role_id && props.user_id) { |
||||
role_id = props.role_id; |
||||
user_id = props.user_id; |
||||
token = props.token; |
||||
isLogin = props.isLogin; |
||||
company_id = props.company_id; |
||||
all_project = props.all_project; |
||||
role_name = props.role_name; |
||||
isLogin = props.isLogin; |
||||
hierarchy = props.hierarchy; |
||||
user_name = props.user_name; |
||||
} |
||||
|
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const pageName = params.name; |
||||
|
||||
const [alertDelete, setAlertDelete] = useState(false) |
||||
const [allDataMenu, setAllDataMenu] = useState([]) |
||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||
const [currentPage, setCurrentPage] = useState(1) |
||||
const [dataEdit, setDataEdit] = useState([]) |
||||
const [dataExport, setDataExport] = useState([]) |
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [idDelete, setIdDelete] = useState(0) |
||||
const [openDialog, setOpenDialog] = useState(false) |
||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||
const [search, setSearch] = useState("") |
||||
const [totalPage, setTotalPage] = useState(0) |
||||
const [typeDialog, setTypeDialog] = useState('Save') |
||||
const [dataDemo, setDataDemo] = useState([]) |
||||
const [listCompany, setListCompany] = useState([]) |
||||
const [loading, setLoading] = useState(true); |
||||
const { t } = useTranslation() |
||||
const column = [ |
||||
{ name: t('code') }, |
||||
{ name: t('type') }, |
||||
{ name: t('amount') }, |
||||
{ name: t('exp') }, |
||||
{ name: t('allocation') }, |
||||
{ name: t('description') }, |
||||
].filter(column => column && column.name); |
||||
useEffect(() => { |
||||
getReferralCode(); |
||||
}, [currentPage, rowsPerPage, search]) |
||||
|
||||
useEffect(() => { |
||||
const cekData = dataExport || [] |
||||
if (cekData.length > 0) { |
||||
exportExcel() |
||||
} |
||||
}, [dataExport]) |
||||
|
||||
const getReferralCode = async () => { |
||||
let start = 0; |
||||
if (currentPage !== 1 && currentPage > 1) { |
||||
start = currentPage * rowsPerPage - rowsPerPage; |
||||
} |
||||
const payload = { |
||||
group_column: { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": search, |
||||
} |
||||
] |
||||
}, |
||||
columns: [], |
||||
"orders": { |
||||
"ascending": true, |
||||
"columns": [ |
||||
'id' |
||||
] |
||||
}, |
||||
"paging": { |
||||
"length": rowsPerPage, |
||||
"start": start |
||||
}, |
||||
'joins': [] |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(REFERRAL_CODE_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
setDatatable(result.data.data); |
||||
setTotalPage(result.data.totalRecord); |
||||
setLoading(false) |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
setLoading(false) |
||||
} |
||||
} |
||||
const handleExportExcel = async () => { |
||||
let start = 0; |
||||
|
||||
if (currentPage !== 1 && currentPage > 1) { |
||||
start = (currentPage * rowsPerPage) - rowsPerPage |
||||
} |
||||
|
||||
const payload = { |
||||
group_column: { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": search, |
||||
} |
||||
] |
||||
}, |
||||
"columns": [], |
||||
"orders": { |
||||
"ascending": true, |
||||
"columns": [ |
||||
'id' |
||||
] |
||||
}, |
||||
"paging": { |
||||
"length": rowsPerPage, |
||||
"start": start |
||||
}, |
||||
'joins': [] |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(REFERRAL_CODE_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code == 200) { |
||||
let resData = result.data.data; |
||||
const excelData = []; |
||||
resData.map((val, index) => { |
||||
let dataRow = {}; |
||||
dataRow["Kode"] = val.code; |
||||
dataRow["Jumlah"] = val.amount; |
||||
dataRow["Kuota"] = val.allocation; |
||||
dataRow["Kadaluarsa"] = val.exp; |
||||
dataRow["Deskripsi"] = val.deskription; |
||||
excelData.push(dataRow) |
||||
}) |
||||
await setDataExport(excelData) |
||||
} else { |
||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const exportExcel = () => { |
||||
const dataExcel = dataExport || []; |
||||
const fileName = `Data ${pageName}.xlsx`; |
||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||
const wb = XLSX.utils.book_new(); |
||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
||||
XLSX.writeFile(wb, fileName); |
||||
setDataExport([]) |
||||
} |
||||
|
||||
const handleSearch = e => { |
||||
const value = e.target.value |
||||
setSearch(value); |
||||
setCurrentPage(1) |
||||
}; |
||||
|
||||
const handleOpenDialog = (type) => { |
||||
setOpenDialog(true) |
||||
setTypeDialog(type) |
||||
} |
||||
|
||||
const handleEdit = (data) => { |
||||
setDataEdit(data) |
||||
handleOpenDialog('Edit'); |
||||
} |
||||
|
||||
const handleDelete = async (id) => { |
||||
await setAlertDelete(true) |
||||
await setIdDelete(id) |
||||
} |
||||
|
||||
const handleCloseDialog = (type, data) => { |
||||
if (type === "save") { |
||||
saveReferralCode(data); |
||||
} else if (type === "edit") { |
||||
editReferralCode(data); |
||||
} |
||||
setDataEdit([]) |
||||
setOpenDialog(false) |
||||
} |
||||
|
||||
const saveReferralCode = async (data) => { |
||||
const formData = data |
||||
const result = await axios.post(REFERRAL_CODE_ADD, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code === 200) { |
||||
getReferralCode() |
||||
NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const editReferralCode = async (data) => { |
||||
let urlEdit = REFERRAL_CODE_EDIT(data.id) |
||||
const formData = data |
||||
const result = await axios.put(urlEdit, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code === 200) { |
||||
getReferralCode(); |
||||
NotificationManager.success(`Data berhasil diubah`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data gagal diubah`, `Failed!!`); |
||||
} |
||||
} |
||||
|
||||
const toggleAddDialog = () => { |
||||
setOpenDialog(!openDialog) |
||||
} |
||||
|
||||
const onConfirmDelete = async () => { |
||||
let url = REFERRAL_CODE_DELETE(idDelete); |
||||
const result = await axios.delete(url, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getReferralCode() |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.success(`Data berhasil dihapus!`, 'Success!!'); |
||||
} else { |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const cancelDelete = () => { |
||||
setAlertDelete(false) |
||||
setIdDelete(0) |
||||
} |
||||
|
||||
const onShowSizeChange = (current, pageSize) => { |
||||
setRowsPerPage(pageSize) |
||||
} |
||||
|
||||
const onPagination = (current, pageSize) => { |
||||
setCurrentPage(current) |
||||
} |
||||
|
||||
const dataNotAvailable = () => { |
||||
if (dataTable.length === 0) { |
||||
return ( |
||||
<tr> |
||||
<td align="center" colSpan="7">{t('noData')}</td> |
||||
</tr> |
||||
) |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<SweetAlert |
||||
show={alertDelete} |
||||
warning |
||||
showCancel |
||||
confirmBtnText="Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title={t('deleteConfirm')} |
||||
onConfirm={onConfirmDelete} |
||||
onCancel={cancelDelete} |
||||
focusCancelBtn |
||||
> |
||||
{t('deleteMsg')} |
||||
</SweetAlert> |
||||
<DialogForm |
||||
openDialog={openDialog} |
||||
closeDialog={handleCloseDialog} |
||||
toggleDialog={() => toggleAddDialog} |
||||
typeDialog={typeDialog} |
||||
dataEdit={dataEdit} |
||||
clickOpenModal={clickOpenModal} |
||||
dataParent={allDataMenu} |
||||
/> |
||||
<Card> |
||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||
<h4 className="capitalize">{pageName}</h4> |
||||
<Row> |
||||
<Col> |
||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('search')} /> |
||||
</Col> |
||||
<Col> |
||||
<Tooltip title={t('demoAdd')}> |
||||
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||
</Tooltip> |
||||
<Tooltip title={t('exportExcel')}> |
||||
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||
</Tooltip> |
||||
</Col> |
||||
</Row> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<Spin tip="Loading..." spinning={loading}> |
||||
<Table responsive striped hover> |
||||
<thead> |
||||
<tr> |
||||
<th>Aksi</th> |
||||
{column.map((i, index) => { |
||||
return ( |
||||
<th key={index} scope="row">{i.name}</th> |
||||
) |
||||
})} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{dataNotAvailable()} |
||||
{dataTable.map((n, index) => { |
||||
return ( |
||||
<tr key={n.id}> |
||||
<td className='nowrap'> |
||||
<Tooltip title={t('delete')}> |
||||
<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i> |
||||
</Tooltip> |
||||
<Tooltip title={t('edit')}> |
||||
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i> |
||||
</Tooltip> |
||||
</td> |
||||
<td>{n.code}</td> |
||||
<td>{n.type}</td> |
||||
<td>{toRupiah(n.amount)}</td> |
||||
<td>{n?.exp ? moment(n.exp).format('DD-MM-YYYY HH:mm') : "-"}</td> |
||||
<td>{n.allocation ? n.allocation : "-"}</td> |
||||
<td>{n.description ? n.description : "-"}</td> |
||||
</tr> |
||||
) |
||||
})} |
||||
</tbody> |
||||
</Table> |
||||
</Spin> |
||||
</CardBody> |
||||
</Card> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default ProjectType; |
||||
@ -0,0 +1,201 @@
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { |
||||
Modal, ModalHeader, ModalBody, ModalFooter, |
||||
Button, Form, FormGroup, Label, Input, Col, Row |
||||
} from 'reactstrap'; |
||||
import { Select } from 'antd'; |
||||
import 'antd/dist/antd.css'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
import "rc-color-picker/assets/index.css"; |
||||
const { Option } = Select |
||||
const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit }) => { |
||||
const [id, setId] = useState(0) |
||||
const [name, setName] = useState('') |
||||
const [email, setEmail] = useState('') |
||||
const [message, setMessage] = useState('') |
||||
const [phoneNumber, setPhoneNumber] = useState('') |
||||
const [role, setRole] = useState(null) |
||||
const [status, setStatus] = useState('') |
||||
const { t } = useTranslation() |
||||
|
||||
useEffect(() => { |
||||
if (typeDialog === "Edit") { |
||||
setId(dataEdit.id) |
||||
setName(dataEdit.name) |
||||
setEmail(dataEdit.email) |
||||
setMessage(dataEdit.message) |
||||
setPhoneNumber(dataEdit.number_phone) |
||||
setStatus(dataEdit.status) |
||||
setRole(dataEdit.role) |
||||
} else { |
||||
setId(0) |
||||
setName('') |
||||
setEmail('') |
||||
setMessage('') |
||||
setStatus('') |
||||
setRole('') |
||||
setPhoneNumber('') |
||||
} |
||||
}, [dataEdit, openDialog]) |
||||
|
||||
const validation = () => { |
||||
if (!name || name === "") { |
||||
alert("Name cannot be empty!"); |
||||
return true; |
||||
} |
||||
} |
||||
const handleSave = () => { |
||||
let data = ''; |
||||
const err = validation(); |
||||
|
||||
if (!err) { |
||||
if (typeDialog === "Save") { |
||||
data = { |
||||
name, |
||||
email, |
||||
message, |
||||
number_phone: phoneNumber, |
||||
role, |
||||
status |
||||
} |
||||
closeDialog('save', data); |
||||
} else { |
||||
data = { |
||||
id, |
||||
name, |
||||
email, |
||||
message, |
||||
number_phone: phoneNumber, |
||||
role, |
||||
status |
||||
} |
||||
closeDialog('edit', data); |
||||
} |
||||
setId(0) |
||||
setName('') |
||||
} |
||||
} |
||||
const handleCancel = () => { |
||||
closeDialog('cancel', 'none') |
||||
setId(0) |
||||
setName('') |
||||
} |
||||
const onChangeStatus = (val) => { |
||||
setStatus(val) |
||||
} |
||||
|
||||
|
||||
const renderForm = () => { |
||||
return ( |
||||
<Form> |
||||
<Row> |
||||
<Col md={12}> |
||||
<span style={{ color: "red" }}>*</span> Wajib diisi. |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('name')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input |
||||
type="text" |
||||
value={name} |
||||
onChange={(e) => setName(e.target.value)} |
||||
placeholder={t('inputName')} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('email')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input |
||||
type="text" |
||||
value={email} |
||||
onChange={(e) => setEmail(e.target.value)} |
||||
placeholder={t('inputEmail')} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('phoneNumber')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input |
||||
type="text" |
||||
value={phoneNumber} |
||||
onChange={(e) => setName(e.target.value)} |
||||
placeholder={t('inputNoPhone')} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col md={6}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('role')}<span style={{ color: "red" }}>*</span></Label> |
||||
<Input |
||||
type="text" |
||||
value={role} |
||||
onChange={(e) => setRole(e.target.value)} |
||||
placeholder={t('inputRole')} |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={12}> |
||||
<FormGroup> |
||||
<Label className="capitalize"> |
||||
{t('status')}<span style={{ color: "red" }}>*</span> |
||||
</Label> |
||||
<Select |
||||
showSearch |
||||
filterOption={(inputValue, option) => |
||||
option.children.toLowerCase().includes(inputValue.toLowerCase()) |
||||
} |
||||
value={status} |
||||
defaultValue={status} |
||||
onChange={onChangeStatus} |
||||
style={{ width: "100%" }} |
||||
> |
||||
<Option value="New Contact">New Contact</Option> |
||||
<Option value="Presentation">Presentation</Option> |
||||
<Option value="Live Demo">Live Demo</Option> |
||||
<Option value="Trial">Trial</Option> |
||||
<Option value="Go-Live">Go-Live</Option> |
||||
<Option value="Postpone">Postpone</Option> |
||||
|
||||
</Select> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
<Row> |
||||
<Col md={12}> |
||||
<FormGroup> |
||||
<Label className="capitalize">{t('message')}</Label> |
||||
<Input row="4" type="textarea" value={message} onChange={(e) => setMessage(e.target.value)} placeholder={t('inputMessage')} /> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</Form> |
||||
) |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<> |
||||
<Modal size="lg" isOpen={openDialog} toggle={toggleDialog}> |
||||
<ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Add` : "Edit"} {t('Demo')}</ModalHeader> |
||||
<ModalBody> |
||||
{renderForm()} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '} |
||||
<Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default DialogForm; |
||||
@ -0,0 +1,374 @@
|
||||
import * as XLSX from 'xlsx'; |
||||
import DialogForm from './DialogForm'; |
||||
import React, { useState, useEffect } from 'react'; |
||||
import SweetAlert from 'react-bootstrap-sweetalert'; |
||||
import axios from "../../../const/interceptorApi" |
||||
import { Card, CardBody, CardHeader, Col, Row, Input, Table } from 'reactstrap'; |
||||
import { SALES_CONTACT_EDIT, SALES_CONTACT_SEARCH, SALES_CONTACT_LIST, SALES_CONTACT_GET_ID, SALES_CONTACT_ADD, SALES_CONTACT_DELETE } from '../../../const/ApiConst'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import { Spin, Button, Tooltip } from 'antd'; |
||||
import { useTranslation } from 'react-i18next'; |
||||
|
||||
|
||||
const ProjectType = ({ params, ...props }) => { |
||||
let role_id = 0, user_id = 0, isLogin = false, token = '', company_id = 0, all_project = null, role_name = '', hierarchy = [], user_name = ''; |
||||
if (props && props.role_id && props.user_id) { |
||||
role_id = props.role_id; |
||||
user_id = props.user_id; |
||||
token = props.token; |
||||
isLogin = props.isLogin; |
||||
company_id = props.company_id; |
||||
all_project = props.all_project; |
||||
role_name = props.role_name; |
||||
isLogin = props.isLogin; |
||||
hierarchy = props.hierarchy; |
||||
user_name = props.user_name; |
||||
} |
||||
|
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
const pageName = params.name; |
||||
|
||||
const [alertDelete, setAlertDelete] = useState(false) |
||||
const [allDataMenu, setAllDataMenu] = useState([]) |
||||
const [clickOpenModal, setClickOpenModal] = useState(false) |
||||
const [currentPage, setCurrentPage] = useState(1) |
||||
const [dataEdit, setDataEdit] = useState([]) |
||||
const [dataExport, setDataExport] = useState([]) |
||||
const [dataTable, setDatatable] = useState([]) |
||||
const [idDelete, setIdDelete] = useState(0) |
||||
const [openDialog, setOpenDialog] = useState(false) |
||||
const [rowsPerPage, setRowsPerPage] = useState(10) |
||||
const [search, setSearch] = useState("") |
||||
const [totalPage, setTotalPage] = useState(0) |
||||
const [typeDialog, setTypeDialog] = useState('Save') |
||||
const [dataDemo, setDataDemo] = useState([]) |
||||
const [listCompany, setListCompany] = useState([]) |
||||
const [loading, setLoading] = useState(true); |
||||
const { t } = useTranslation() |
||||
const column = [ |
||||
{ name: t('name') }, |
||||
{ name: t('company') }, |
||||
{ name: t('email') }, |
||||
{ name: t('roles') }, |
||||
{ name: t('phoneNumber') }, |
||||
{ name: t('status') }, |
||||
{ name: t('description') }, |
||||
].filter(column => column && column.name); |
||||
useEffect(() => { |
||||
getDataContactSales(); |
||||
}, [currentPage, rowsPerPage, search]) |
||||
|
||||
useEffect(() => { |
||||
const cekData = dataExport || [] |
||||
if (cekData.length > 0) { |
||||
exportExcel() |
||||
} |
||||
}, [dataExport]) |
||||
|
||||
const getDataContactSales = async () => { |
||||
let start = 0; |
||||
if (currentPage !== 1 && currentPage > 1) { |
||||
start = currentPage * rowsPerPage - rowsPerPage; |
||||
} |
||||
const payload = { |
||||
group_column: { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": search, |
||||
} |
||||
] |
||||
}, |
||||
columns: [], |
||||
"orders": { |
||||
"ascending": true, |
||||
"columns": [ |
||||
'id' |
||||
] |
||||
}, |
||||
"paging": { |
||||
"length": rowsPerPage, |
||||
"start": start |
||||
}, |
||||
'joins': [] |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(SALES_CONTACT_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code == 200) { |
||||
setDatatable(result.data.data); |
||||
setTotalPage(result.data.totalRecord); |
||||
setLoading(false) |
||||
} else { |
||||
NotificationManager.error('Gagal Mengambil Data!!', 'Failed'); |
||||
setLoading(false) |
||||
} |
||||
} |
||||
const handleExportExcel = async () => { |
||||
let start = 0; |
||||
|
||||
if (currentPage !== 1 && currentPage > 1) { |
||||
start = (currentPage * rowsPerPage) - rowsPerPage |
||||
} |
||||
|
||||
const payload = { |
||||
group_column: { |
||||
"operator": "AND", |
||||
"group_operator": "OR", |
||||
"where": [ |
||||
{ |
||||
"name": "name", |
||||
"logic_operator": "~*", |
||||
"value": search, |
||||
} |
||||
] |
||||
}, |
||||
"columns": [], |
||||
"orders": { |
||||
"ascending": true, |
||||
"columns": [ |
||||
'id' |
||||
] |
||||
}, |
||||
"paging": { |
||||
"length": rowsPerPage, |
||||
"start": start |
||||
}, |
||||
'joins': [] |
||||
} |
||||
|
||||
const result = await axios |
||||
.post(SALES_CONTACT_SEARCH, payload, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code == 200) { |
||||
let resData = result.data.data; |
||||
const excelData = []; |
||||
resData.map((val, index) => { |
||||
let dataRow = {}; |
||||
dataRow["Nama"] = val.name; |
||||
dataRow["Email"] = val.email; |
||||
dataRow["Role"] = val.role; |
||||
dataRow["No Telepon"] = val.number_phone; |
||||
dataRow["Status"] = val.message; |
||||
dataRow["Message"] = val.message; |
||||
excelData.push(dataRow) |
||||
}) |
||||
await setDataExport(excelData) |
||||
} else { |
||||
NotificationManager.error('Gagal Export Data!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
const exportExcel = () => { |
||||
const dataExcel = dataExport || []; |
||||
const fileName = `Data ${pageName}.xlsx`; |
||||
const ws = XLSX.utils.json_to_sheet(dataExcel); |
||||
const wb = XLSX.utils.book_new(); |
||||
XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`); |
||||
XLSX.writeFile(wb, fileName); |
||||
setDataExport([]) |
||||
} |
||||
|
||||
const handleSearch = e => { |
||||
const value = e.target.value |
||||
setSearch(value); |
||||
setCurrentPage(1) |
||||
}; |
||||
|
||||
const handleOpenDialog = (type) => { |
||||
setOpenDialog(true) |
||||
setTypeDialog(type) |
||||
} |
||||
|
||||
const handleEdit = (data) => { |
||||
setDataEdit(data) |
||||
handleOpenDialog('Edit'); |
||||
} |
||||
|
||||
const handleDelete = async (id) => { |
||||
await setAlertDelete(true) |
||||
await setIdDelete(id) |
||||
} |
||||
|
||||
const handleCloseDialog = (type, data) => { |
||||
if (type === "save") { |
||||
saveContactSales(data); |
||||
} else if (type === "edit") { |
||||
editContactSales(data); |
||||
} |
||||
setDataEdit([]) |
||||
setOpenDialog(false) |
||||
} |
||||
|
||||
const saveContactSales = async (data) => { |
||||
const formData = data |
||||
const result = await axios.post(SALES_CONTACT_ADD, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataContactSales() |
||||
NotificationManager.success(`Data berhasil ditambahkan`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data gagal ditambahkan`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const editContactSales = async (data) => { |
||||
let urlEdit = SALES_CONTACT_EDIT(data.id) |
||||
const formData = data |
||||
const result = await axios.put(urlEdit, formData, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataContactSales(); |
||||
NotificationManager.success(`Data berhasil diubah`, 'Success!!'); |
||||
} else { |
||||
NotificationManager.error(`Data gagal diubah`, `Failed!!`); |
||||
} |
||||
} |
||||
|
||||
const toggleAddDialog = () => { |
||||
setOpenDialog(!openDialog) |
||||
} |
||||
|
||||
const onConfirmDelete = async () => { |
||||
let url = SALES_CONTACT_DELETE(idDelete); |
||||
const result = await axios.delete(url, HEADER) |
||||
.then(res => res) |
||||
.catch((error) => error.response); |
||||
|
||||
if (result && result.data && result.data.code === 200) { |
||||
getDataContactSales() |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.success(`Data berhasil dihapus!`, 'Success!!'); |
||||
} else { |
||||
setIdDelete(0) |
||||
setAlertDelete(false) |
||||
NotificationManager.error(`Data gagal dihapus!}`, 'Failed!!'); |
||||
} |
||||
} |
||||
|
||||
const cancelDelete = () => { |
||||
setAlertDelete(false) |
||||
setIdDelete(0) |
||||
} |
||||
|
||||
const onShowSizeChange = (current, pageSize) => { |
||||
setRowsPerPage(pageSize) |
||||
} |
||||
|
||||
const onPagination = (current, pageSize) => { |
||||
setCurrentPage(current) |
||||
} |
||||
|
||||
const dataNotAvailable = () => { |
||||
if (dataTable.length === 0) { |
||||
return ( |
||||
<tr> |
||||
<td align="center" colSpan="8">{t('noData')}</td> |
||||
</tr> |
||||
) |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<NotificationContainer /> |
||||
<SweetAlert |
||||
show={alertDelete} |
||||
warning |
||||
showCancel |
||||
confirmBtnText="Delete" |
||||
confirmBtnBsStyle="danger" |
||||
title={t('deleteConfirm')} |
||||
onConfirm={onConfirmDelete} |
||||
onCancel={cancelDelete} |
||||
focusCancelBtn |
||||
> |
||||
{t('deleteMsg')} |
||||
</SweetAlert> |
||||
<DialogForm |
||||
openDialog={openDialog} |
||||
closeDialog={handleCloseDialog} |
||||
toggleDialog={() => toggleAddDialog} |
||||
typeDialog={typeDialog} |
||||
dataEdit={dataEdit} |
||||
clickOpenModal={clickOpenModal} |
||||
dataParent={allDataMenu} |
||||
/> |
||||
<Card> |
||||
<CardHeader style={{ display: "flex", justifyContent: "space-between" }}> |
||||
<h4 className="capitalize">{pageName}</h4> |
||||
<Row> |
||||
<Col> |
||||
<Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchDemo')} /> |
||||
</Col> |
||||
<Col> |
||||
<Tooltip title={t('demoAdd')}> |
||||
<Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button> |
||||
</Tooltip> |
||||
<Tooltip title={t('exportExcel')}> |
||||
<Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button> |
||||
</Tooltip> |
||||
</Col> |
||||
</Row> |
||||
</CardHeader> |
||||
<CardBody> |
||||
<Spin tip="Loading..." spinning={loading}> |
||||
<Table responsive striped hover> |
||||
<thead> |
||||
<tr> |
||||
<th>Aksi</th> |
||||
{column.map((i, index) => { |
||||
return ( |
||||
<th key={index} scope="row">{i.name}</th> |
||||
) |
||||
})} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{dataNotAvailable()} |
||||
{dataTable.map((n, index) => { |
||||
return ( |
||||
<tr key={n.id}> |
||||
<td className='nowrap'> |
||||
<Tooltip title={t('delete')}> |
||||
<i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => handleDelete(n.id)}></i> |
||||
</Tooltip> |
||||
<Tooltip title={t('edit')}> |
||||
<i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEdit(n)}></i> |
||||
</Tooltip> |
||||
</td> |
||||
<td>{n.name}</td> |
||||
<td>{n.company_name}</td> |
||||
<td>{n.email}</td> |
||||
<td>{n.role}</td> |
||||
<td>{n.number_phone}</td> |
||||
<td>{n.status}</td> |
||||
<td>{n.message}</td> |
||||
</tr> |
||||
) |
||||
})} |
||||
</tbody> |
||||
</Table> |
||||
</Spin> |
||||
</CardBody> |
||||
</Card> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default ProjectType; |
||||
@ -0,0 +1,53 @@
|
||||
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'; |
||||
|
||||
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 |
||||
style={{ borderRadius: typeTab === 'myprofile' ? '15px' : '', backgroundColor: typeTab === 'myprofile' ? '#E0ECF5' : '', color: typeTab === 'myprofile' ? '#48A4F0' : '', fontWeight:'600', border:'none' }} |
||||
onClick={() => { |
||||
setActiveTab("tab1"); |
||||
setTypeTab("myprofile"); |
||||
}} |
||||
active={activeTab === "tab1"} |
||||
> |
||||
My Profile |
||||
</NavLink> |
||||
</NavItem> |
||||
<NavItem> |
||||
<NavLink |
||||
style={{ borderRadius: typeTab === 'plan' ? '15px' : '', backgroundColor: typeTab === 'plan' ? '#E0ECF5' : '', color: typeTab === 'plan' ? '#48A4F0' : '', fontWeight:'600', border:'none' }} |
||||
onClick={() => { |
||||
setActiveTab("tab2"); |
||||
setTypeTab("plan"); |
||||
}} |
||||
active={activeTab === "tab2"} |
||||
> |
||||
Plan |
||||
</NavLink> |
||||
</NavItem> |
||||
</Nav> |
||||
<TabContent activeTab={activeTab} style={{ border:'none' }}> |
||||
<TabPane tabId="tab1" style={{ border:'none' }}> |
||||
<Index/> |
||||
</TabPane> |
||||
<TabPane tabId="tab2" style={{ border:'none' }}> |
||||
<Plan/> |
||||
</TabPane> |
||||
</TabContent> |
||||
</section> |
||||
</main> |
||||
); |
||||
}; |
||||
|
||||
export default Desktop; |
||||
@ -0,0 +1,23 @@
|
||||
.myProfile, |
||||
.profile { |
||||
max-width: 100%; |
||||
} |
||||
.profile { |
||||
align-self: stretch; |
||||
padding: 15px 30px 30px; |
||||
box-sizing: border-box; |
||||
gap: 15px 0; |
||||
|
||||
} |
||||
.myProfile { |
||||
width: 1300px; |
||||
border-radius: 30px; |
||||
background-color: #fff; |
||||
} |
||||
@media screen and (max-width: 1050px) { |
||||
.profile { |
||||
padding-top: 20px; |
||||
padding-bottom: 20px; |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
@ -0,0 +1,69 @@
|
||||
.obejct11 { |
||||
width: 55px; |
||||
height: 54px; |
||||
position: relative; |
||||
border-radius: 79.5px; |
||||
object-fit: cover; |
||||
} |
||||
.img { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 20px 0; |
||||
} |
||||
.headContent { |
||||
position: relative; |
||||
font-weight: 600; |
||||
} |
||||
.headTitle { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
} |
||||
.content { |
||||
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) { |
||||
.headContent { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
@ -0,0 +1,436 @@
|
||||
import * as XLSX from 'xlsx'; |
||||
import React, { useState, useEffect, useMemo } from 'react'; |
||||
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, 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 { 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}, |
||||
"columns": [ |
||||
{"name": "id", "logic_operator": "=", "value": parseInt(user_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 || dataRes.discount_id === '') { |
||||
saveRefferalCode(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(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 |
||||
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 toggleModal = () => { |
||||
setModalOpen(!modalOpen); |
||||
}; |
||||
|
||||
const handleImageClick = async () => { |
||||
toggleModal(); |
||||
}; |
||||
|
||||
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 (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) { |
||||
const data = {'discount_id': result.data.data.id}; |
||||
await saveProfile(data); |
||||
} else { |
||||
NotificationManager.error('Kode refferal gagal ditambahkan!!', 'Failed'); |
||||
} |
||||
} |
||||
|
||||
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} |
||||
imageProfile={imageProfile} |
||||
/> |
||||
<div className={stylesHead.head}> |
||||
<div className={stylesHead.img} style={{ cursor:imageProfile ? 'pointer' : '' }} onClick={imageProfile ? () => handleImageClick() : ''}> |
||||
<img className={stylesHead.obejct11} src={ |
||||
imageProfile ? ( |
||||
`${BASE_SIMPRO_LUMEN_IMAGE_COMPANY(imageProfile?.image, role != 'Super Admin' ? configApp.company_name : 'undifined')}` |
||||
) : profile |
||||
} /> |
||||
</div> |
||||
<div className={stylesHead.text}> |
||||
<div className={stylesHead.headTitle}> |
||||
<div className={stylesHead.headContent}> |
||||
{userProfile && userProfile.name != null ? userProfile.name : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
<div className={stylesHead.headSubtitle}> |
||||
<div className={stylesHead.content}> |
||||
{userProfile && userProfile.username != null ? userProfile.username : <small style={{ fontStyle: 'italic', color:'gray' }}>empty</small>} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.btnEdit1} style={{ color: '#969696' }} onClick={() => handleOpenDialog('Settings')}> |
||||
<div className={styles.icon}> |
||||
<i className="fa fa-edit" style={{ fontSize:'16px' }}></i> |
||||
</div> |
||||
<div className={styles.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.emailContent}> |
||||
{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.content}> |
||||
{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> |
||||
<Modal isOpen={modalOpen} toggle={toggleModal}> |
||||
<ModalBody style={{ textAlign:'center' }}> |
||||
{ |
||||
imageProfile ? ( |
||||
<img |
||||
src={ |
||||
imageProfile ? ( |
||||
`${BASE_SIMPRO_LUMEN_IMAGE_COMPANY(imageProfile?.image, role != 'Super Admin' ? configApp.company_name : 'undifined')}` |
||||
) : profile |
||||
} |
||||
style={{ maxWidth: "100%" }} |
||||
alt="Image Preview" |
||||
/> |
||||
) : ('Image not found!') |
||||
} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color="secondary" onClick={toggleModal}>Close</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
export default Index; |
||||
@ -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; |
||||
} |
||||
.emailContent { |
||||
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; |
||||
} |
||||
.content { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.column3 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.noHp { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.birthDetailsColumn { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.column4, |
||||
.row4 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column4 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.row4 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.div1, |
||||
.idNumber { |
||||
position: relative; |
||||
} |
||||
.idNumber { |
||||
font-weight: 500; |
||||
} |
||||
.div1 { |
||||
color: #777; |
||||
} |
||||
.column5 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.gender, |
||||
.male { |
||||
position: relative; |
||||
} |
||||
.gender { |
||||
font-weight: 500; |
||||
} |
||||
.male { |
||||
color: #777; |
||||
} |
||||
.column6, |
||||
.row5 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column6 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.row5 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.div2, |
||||
.division { |
||||
position: relative; |
||||
} |
||||
.division { |
||||
font-weight: 500; |
||||
} |
||||
.div2 { |
||||
color: #777; |
||||
} |
||||
.column7 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.placeOfBirth { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.div3 { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.column8, |
||||
.row6 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column8 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.row6 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.div4, |
||||
.role { |
||||
position: relative; |
||||
} |
||||
.role { |
||||
font-weight: 500; |
||||
} |
||||
.div4 { |
||||
color: #777; |
||||
} |
||||
.column9 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
max-width: 100%; |
||||
} |
||||
.dateOfBirth { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.div5 { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.column10, |
||||
.row7 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column10 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
min-width: 378px; |
||||
} |
||||
.row7 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 0 1px 0 0; |
||||
box-sizing: border-box; |
||||
gap: 0 37px; |
||||
} |
||||
.address { |
||||
font-weight: 500; |
||||
} |
||||
.address, |
||||
.div6 { |
||||
position: relative; |
||||
} |
||||
.div6 { |
||||
color: #777; |
||||
} |
||||
.column11, |
||||
.row8 { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.column11 { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
gap: 10px 0; |
||||
} |
||||
.row8 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
} |
||||
.div { |
||||
gap: 20px 0; |
||||
} |
||||
.div, |
||||
.index1, |
||||
.row2 { |
||||
align-self: stretch; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.row2 { |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
box-sizing: border-box; |
||||
padding: 20px 21px 20px 19px; |
||||
gap: 10px 0; |
||||
color: #333; |
||||
} |
||||
.index1 { |
||||
gap: 15px 0; |
||||
text-align: left; |
||||
font-size: 16px; |
||||
color: #969696; |
||||
} |
||||
@media screen and (max-width: 1050px) { |
||||
.text { |
||||
min-width: 100%; |
||||
} |
||||
} |
||||
@media screen and (max-width: 750px) { |
||||
.emailParent, |
||||
.usernameParent { |
||||
min-width: 100%; |
||||
} |
||||
.frameParent { |
||||
gap: 0 37px; |
||||
} |
||||
.column3, |
||||
.column4 { |
||||
min-width: 100%; |
||||
} |
||||
.row4 { |
||||
gap: 0 37px; |
||||
} |
||||
.column5, |
||||
.column6 { |
||||
min-width: 100%; |
||||
} |
||||
.row5 { |
||||
gap: 0 37px; |
||||
} |
||||
.column7, |
||||
.column8 { |
||||
min-width: 100%; |
||||
} |
||||
.row6 { |
||||
gap: 0 37px; |
||||
} |
||||
.column10, |
||||
.column9 { |
||||
min-width: 100%; |
||||
} |
||||
.row7, |
||||
.row8 { |
||||
gap: 0 37px; |
||||
} |
||||
} |
||||
@media screen and (max-width: 450px) { |
||||
.column1, |
||||
.row3 { |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
@ -0,0 +1,65 @@
|
||||
import { useMemo } from "react"; |
||||
import styles from "./Column.module.css"; |
||||
|
||||
const Column = ({ |
||||
date, |
||||
currentPlanFrame, |
||||
textFrame, |
||||
currentPlanText, |
||||
text, |
||||
daysFrame, |
||||
propHeight, |
||||
propMinHeight, |
||||
propFlex, |
||||
propHeight1, |
||||
propFlex1, |
||||
propWidth, |
||||
}) => { |
||||
const columnStyle = useMemo(() => { |
||||
return { |
||||
height: propHeight, |
||||
}; |
||||
}, [propHeight]); |
||||
|
||||
const headStyle = useMemo(() => { |
||||
return { |
||||
minHeight: propMinHeight, |
||||
flex: propFlex, |
||||
}; |
||||
}, [propMinHeight, propFlex]); |
||||
|
||||
const dateStyle = useMemo(() => { |
||||
return { |
||||
height: propHeight1, |
||||
flex: propFlex1, |
||||
width: propWidth, |
||||
}; |
||||
}, [propHeight1, propFlex1, propWidth]); |
||||
|
||||
return ( |
||||
<div className={styles.column} style={columnStyle}> |
||||
<div className={styles.head} style={headStyle}> |
||||
<div className={styles.date} style={dateStyle}> |
||||
{date} |
||||
</div> |
||||
</div> |
||||
<div className={styles.head1}> |
||||
<div className={styles.currentPlanFrame}>{currentPlanFrame}</div> |
||||
</div> |
||||
<div className={styles.head2}> |
||||
<div className={styles.textFrame}>{textFrame}</div> |
||||
</div> |
||||
<div className={styles.head3}> |
||||
<div className={styles.currentPlanText}>{currentPlanText}</div> |
||||
</div> |
||||
<div className={styles.head4}> |
||||
<div className={styles.text}>{text}</div> |
||||
</div> |
||||
<div className={styles.head5}> |
||||
<div className={styles.daysFrame}>{daysFrame}</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Column; |
||||
@ -0,0 +1,114 @@
|
||||
.date, |
||||
.head { |
||||
max-width: 100%; |
||||
} |
||||
.date { |
||||
height: 19px; |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
font-weight: 600; |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.head { |
||||
align-self: stretch; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 8px; |
||||
min-height: 59px; |
||||
color: #969696; |
||||
} |
||||
.currentPlanFrame { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.head1 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.textFrame { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.head2 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.currentPlanText { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.head3 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.text { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.head4 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.daysFrame { |
||||
position: relative; |
||||
line-height: 22px; |
||||
} |
||||
.column, |
||||
.head5 { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.head5 { |
||||
align-self: stretch; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
white-space: nowrap; |
||||
} |
||||
.column { |
||||
width: 400px; |
||||
flex-shrink: 0; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
text-align: center; |
||||
font-size: 18px; |
||||
color: #333; |
||||
font-family: Roboto; |
||||
} |
||||
@ -0,0 +1,69 @@
|
||||
import Column from "./Column"; |
||||
import styles from "./Container.module.css"; |
||||
import React, { useState, useEffect } from 'react'; |
||||
|
||||
const Container = () => { |
||||
return ( |
||||
<section className={styles.container}> |
||||
<div className={styles.headText}> |
||||
<div className={styles.paymentHistory}>Payment history</div> |
||||
</div> |
||||
<div className={styles.table}> |
||||
<Column |
||||
date="Date" |
||||
currentPlanFrame="9-02-2024 07:47:29" |
||||
textFrame="9-01-2024 07:47:29" |
||||
currentPlanText="9-12-2023 07:47:29" |
||||
text="9-11-2023 07:47:29" |
||||
daysFrame="9-10-2023 07:47:29" |
||||
/> |
||||
<Column |
||||
date="Amount" |
||||
currentPlanFrame="250k" |
||||
textFrame="250k" |
||||
currentPlanText="250k" |
||||
text="250k" |
||||
daysFrame="250k" |
||||
propHeight="333.4px" |
||||
propMinHeight="unset" |
||||
propFlex="1" |
||||
propHeight1="unset" |
||||
propFlex1="unset" |
||||
propWidth="64px" |
||||
/> |
||||
<div className={styles.column}> |
||||
<div className={styles.head}> |
||||
<div className={styles.status}>Status</div> |
||||
</div> |
||||
<div className={styles.head1}> |
||||
<div className={styles.successfulWrapper}> |
||||
<div className={styles.successful}>Successful</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.head2}> |
||||
<div className={styles.successfulContainer}> |
||||
<div className={styles.successful1}>Successful</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.head3}> |
||||
<div className={styles.successfulFrame}> |
||||
<div className={styles.successful2}>Successful</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.head4}> |
||||
<div className={styles.frameDiv}> |
||||
<div className={styles.successful3}>Successful</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.head5}> |
||||
<div className={styles.successfulWrapper1}> |
||||
<div className={styles.successful4}>Successful</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Container; |
||||
@ -0,0 +1,229 @@
|
||||
.paymentHistory { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.headText { |
||||
align-self: stretch; |
||||
height: 34px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
} |
||||
.status { |
||||
width: 53px; |
||||
position: relative; |
||||
line-height: 22px; |
||||
font-weight: 600; |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head { |
||||
align-self: stretch; |
||||
flex: 1; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 8px; |
||||
color: #969696; |
||||
} |
||||
.successful { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head1, |
||||
.successfulWrapper { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.successfulWrapper { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head1 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.successful1 { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head2, |
||||
.successfulContainer { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.successfulContainer { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head2 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.successful2 { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head3, |
||||
.successfulFrame { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.successfulFrame { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head3 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.successful3 { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.frameDiv, |
||||
.head4 { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.frameDiv { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head4 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.successful4 { |
||||
flex: 1; |
||||
position: relative; |
||||
line-height: 22px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.head5, |
||||
.successfulWrapper1 { |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
.successfulWrapper1 { |
||||
width: 109px; |
||||
border-radius: 20px; |
||||
background-color: #17c13e; |
||||
justify-content: flex-start; |
||||
padding: 3px 10px; |
||||
} |
||||
.head5 { |
||||
align-self: stretch; |
||||
height: 54.8px; |
||||
background-color: #fdfdfd; |
||||
border-bottom: 1px solid #d8d8d8; |
||||
justify-content: center; |
||||
padding: 16px 8px; |
||||
} |
||||
.column, |
||||
.container, |
||||
.table { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
} |
||||
.column { |
||||
height: 333.4px; |
||||
width: 400px; |
||||
flex-shrink: 0; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
color: #fdfdfd; |
||||
} |
||||
.container, |
||||
.table { |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.table { |
||||
width: 1200px; |
||||
border-radius: 4px; |
||||
background-color: #fdfdfd; |
||||
overflow-x: auto; |
||||
flex-direction: row; |
||||
text-align: center; |
||||
font-size: 18px; |
||||
} |
||||
.container { |
||||
width: 1240px; |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
box-sizing: border-box; |
||||
flex-direction: column; |
||||
padding: 20px 21px 20px 19px; |
||||
gap: 10px 0; |
||||
text-align: left; |
||||
font-size: 20px; |
||||
color: #333; |
||||
font-family: Roboto; |
||||
} |
||||
@media screen and (max-width: 450px) { |
||||
.paymentHistory { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
@ -0,0 +1,226 @@
|
||||
import styles from "./Container1.module.css"; |
||||
import React, { useState, useEffect } from 'react'; |
||||
import axios from "../../../../../const/interceptorApi" |
||||
import { PROYEK_SEARCH, TRANSACTION_SEARCH, STORAGE_LIMIT_INFORMATION } from '../../../../../const/ApiConst'; |
||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
||||
import moment from "moment"; |
||||
|
||||
const Container1 = () => { |
||||
const token = localStorage.getItem("token") |
||||
const user_id = localStorage.getItem("user_id") |
||||
let company_id = '', configApp = ''; |
||||
const role = window.localStorage.getItem('role_name'); |
||||
const [totalPage, setTotalPage] = useState(0); |
||||
const [transaction, setTransaction] = useState([]); |
||||
const [storage, setLimitInformation] = useState(0) |
||||
const currentDate = new Date(); |
||||
const givenDate = new Date(transaction.exp_ospro); |
||||
const createdDate = new Date(transaction.created_at) |
||||
const differenceInMillis = givenDate.getTime() - currentDate.getTime(); |
||||
|
||||
const differenceInDays = Math.floor(differenceInMillis / (1000 * 60 * 60 * 24)); |
||||
|
||||
if(role !== 'Super Admin') { |
||||
company_id = localStorage.getItem("company_id"); |
||||
configApp = JSON.parse(window.localStorage.getItem('configApp')); |
||||
} |
||||
const config = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
|
||||
useEffect(()=>{ |
||||
getDataProyek(); |
||||
getDataTransaction(); |
||||
getLimitInformation(); |
||||
},[]) |
||||
|
||||
const getDataProyek = async () => { |
||||
const payload = { |
||||
"columns": [ |
||||
{"name": "company_id", "logic_operator": "=", "value": parseInt(company_id), "operator": "AND"} |
||||
], |
||||
"select": [ |
||||
"nama", |
||||
"mulai_proyek", |
||||
"akhir_proyek", |
||||
"company_id" |
||||
], |
||||
}; |
||||
const result = await axios |
||||
.post(PROYEK_SEARCH, payload, config) |
||||
.then((res) => res) |
||||
.catch((error) => error.response); |
||||
if (result && result.data && result.data.code == 200) { |
||||
setTotalPage(result.data.totalRecord); |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
}; |
||||
|
||||
const getDataTransaction = async () => { |
||||
const formData = { |
||||
"paging": {"start": 0, "length": 1}, |
||||
"columns": [ |
||||
{"name": "company_id", "logic_operator": "=", "value": parseInt(company_id), "operator": "AND"} |
||||
], |
||||
"select": [ |
||||
"company_id", |
||||
"type_paket", |
||||
"amount", |
||||
"exp_ospro", |
||||
"pay_date", |
||||
"created_at" |
||||
] |
||||
} |
||||
const result = await axios |
||||
.post(TRANSACTION_SEARCH, formData, config) |
||||
.then(res => res) |
||||
.catch((error) => error.response ); |
||||
if (result && result.data && result.data.code == 200) { |
||||
let dataRes = result.data.data[0]; |
||||
setTransaction(dataRes); |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
} |
||||
|
||||
const getLimitInformation = async () => { |
||||
const url = STORAGE_LIMIT_INFORMATION(configApp.company_name); |
||||
const result = await axios |
||||
.get(url, config) |
||||
.then((res) => res) |
||||
.catch((error) => error.response); |
||||
if (result.data) { |
||||
setLimitInformation(result.data); |
||||
} else { |
||||
NotificationManager.error("Gagal Mengambil Data!!", "Failed"); |
||||
} |
||||
} |
||||
|
||||
|
||||
return ( |
||||
<section className={styles.container}> |
||||
<div className={styles.projectFrame}> |
||||
<div className={styles.currentPlan}>Current Plan</div> |
||||
<div className={styles.div}> |
||||
<div className={styles.div1}> |
||||
<div className={styles.text}> |
||||
<div className={styles.payNowCancelFrame}> |
||||
<div className={styles.yourCurrentPlan}> |
||||
Your Current Plan is <span style={{ color: "#59b4c3", fontWeight: '600' }}>{transaction.type_paket}</span> |
||||
</div> |
||||
<div className={styles.aSimpleStart}> |
||||
A simple start for everyone |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.notificationText}> |
||||
<div className={styles.activeUntilMarc092024Parent}> |
||||
<div className={styles.activeUntilMarc}> |
||||
Active until <span style={{ color: "#59b4c3", fontWeight: '600' }}>{moment(transaction.exp_ospro).format('DD MMMM, YYYY')}</span> |
||||
</div> |
||||
<div className={styles.weWillSend}> |
||||
We will send you a notification upon Subscription expiration |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.notificationText1}> |
||||
<div className={styles.paymentOf250kParent}> |
||||
<div className={styles.paymentOf250k}>Payment of 250k</div> |
||||
<div className={styles.paymentIsDue}> |
||||
Payment is due 9 March, 2024 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.containerFrame}> |
||||
<button className={styles.payNowCancelSubscribe}> |
||||
<div className={styles.payNow}>Pay Now</div> |
||||
</button> |
||||
<button className={styles.payNowCancelSubscribe1}> |
||||
<div className={styles.cancelSubscription}> |
||||
Cancel Subscription |
||||
</div> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.daysOfDaysFrame}> |
||||
<div className={styles.days}> |
||||
<div className={styles.frameYourCurrentPlan}> |
||||
<div className={styles.days1}>Days</div> |
||||
<div className={styles.of30Days}>{30 - Math.abs(differenceInDays)} of 30 Days</div> |
||||
</div> |
||||
<div className={styles.rectangleFrame}> |
||||
<div className={styles.rectangleFrameChild} /> |
||||
<div style={{ |
||||
width: `${(400 * (30 - Math.abs(differenceInDays))) / 30}px`, |
||||
position: 'relative', |
||||
backgroundColor: ((30 - Math.abs(differenceInDays)) >= 0 && (30 - Math.abs(differenceInDays)) <= 10) ? '#59b4c3' : |
||||
((30 - Math.abs(differenceInDays)) >= 11 && (30 - Math.abs(differenceInDays)) <= 20) ? '#ffa447' : |
||||
'#FF4747', |
||||
zIndex:'1', |
||||
padding:'5px', |
||||
borderRadius:'15px' |
||||
}}> |
||||
</div> |
||||
</div> |
||||
<div className={styles.daysRemainingUntil}> |
||||
{Math.abs(differenceInDays)} days remaining until your plan requires update |
||||
</div> |
||||
</div> |
||||
<div className={styles.days2}> |
||||
<div className={styles.storageParent}> |
||||
<div className={styles.storage}>Storage</div> |
||||
<div className={styles.of500mb}>{storage} of {transaction.type_paket === 'Basic' ? 500 : 50}MB</div> |
||||
</div> |
||||
<div className={styles.rectangleParent}> |
||||
<div className={styles.frameChild} /> |
||||
<div style={{ |
||||
width: `${(400 * storage) / (transaction.type_paket === 'Basic' ? 500 : 50)}px`, |
||||
position: 'relative', |
||||
backgroundColor: (storage >= 0 && storage <= (transaction.type_paket === 'Basic' ? 166.67 : 16.67)) ? '#59b4c3' : |
||||
(storage >= (transaction.type_paket === 'Basic' ? 166.68 : 16.68) && storage <= (transaction.type_paket === 'Basic' ? 333.33 : 33.33)) ? '#ffa447' : |
||||
'#FF4747', |
||||
zIndex:'1', |
||||
padding:'5px', |
||||
borderRadius:'15px' |
||||
}}> |
||||
</div> |
||||
</div> |
||||
<div className={styles.storageRemainingUntil}> |
||||
{((storage / (transaction.type_paket === 'Basic' ? 500 : 50)) * 100).toFixed(2)}% storage remaining until your plan requires update |
||||
</div> |
||||
</div> |
||||
<div className={styles.days3}> |
||||
<div className={styles.projectParent}> |
||||
<div className={styles.project}>Project</div> |
||||
<div className={styles.of10Project}>{parseInt(totalPage)} of {transaction.type_paket === "Basic" ? "10" : "1"} Project</div> |
||||
</div> |
||||
<div className={styles.rectangleGroup}> |
||||
<div className={styles.frameInner} /> |
||||
<div style={{ |
||||
width: `${(400 * parseInt(totalPage)) / (parseInt(transaction.type_paket === "Basic" ? 10 : 1))}px`, |
||||
position: 'relative', |
||||
backgroundColor: transaction.type_paket === "Basic" ? (parseInt(totalPage) >= 0 && parseInt(totalPage) <= 3) ? '#59b4c3' : |
||||
(parseInt(totalPage) >= 4 && parseInt(totalPage) <= 7) ? '#ffa447' : |
||||
'#FF4747' : '#FF4747', |
||||
zIndex:'1', |
||||
padding:'5px', |
||||
borderRadius:'15px' |
||||
}}> |
||||
</div> |
||||
</div> |
||||
<div className={styles.projectRemainingUntil}> |
||||
{parseInt(transaction.type_paket === "Basic" ? 10 : 1) - (parseInt(totalPage))} Project remaining until your plan requires update |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
export default Container1; |
||||
@ -0,0 +1,356 @@
|
||||
.currentPlan, |
||||
.yourCurrentPlan { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.aSimpleStart { |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.payNowCancelFrame, |
||||
.text { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.payNowCancelFrame { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
} |
||||
.text { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
} |
||||
.activeUntilMarc { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.weWillSend { |
||||
align-self: stretch; |
||||
position: relative; |
||||
color: #777; |
||||
} |
||||
.activeUntilMarc092024Parent, |
||||
.notificationText { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.activeUntilMarc092024Parent { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
} |
||||
.notificationText { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
} |
||||
.paymentIsDue, |
||||
.paymentOf250k { |
||||
position: relative; |
||||
font-weight: 500; |
||||
} |
||||
.paymentIsDue { |
||||
color: #777; |
||||
} |
||||
.div1, |
||||
.notificationText1, |
||||
.paymentOf250kParent { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.paymentOf250kParent { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
gap: 10px 0; |
||||
} |
||||
.div1, |
||||
.notificationText1 { |
||||
align-self: stretch; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
} |
||||
.div1 { |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
gap: 20px 0; |
||||
} |
||||
.payNow { |
||||
position: relative; |
||||
font-size: 18px; |
||||
font-weight: 500; |
||||
color: #fdfdfd; |
||||
text-align: left; |
||||
} |
||||
.payNowCancelSubscribe { |
||||
cursor: pointer; |
||||
border: 0; |
||||
padding: 10px 15px; |
||||
background-color: #20a8d8; |
||||
border-radius: 15px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
white-space: nowrap; |
||||
} |
||||
.payNowCancelSubscribe:hover { |
||||
background-color: #058fbf; |
||||
} |
||||
.cancelSubscription { |
||||
position: relative; |
||||
font-size: 18px; |
||||
font-weight: 500; |
||||
color: #ea5455; |
||||
text-align: left; |
||||
} |
||||
.payNowCancelSubscribe1 { |
||||
cursor: pointer; |
||||
border: 0; |
||||
padding: 10px 15px; |
||||
background-color: #fce4e4; |
||||
border-radius: 15px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: center; |
||||
white-space: nowrap; |
||||
} |
||||
.payNowCancelSubscribe1:hover { |
||||
background-color: #e3c9c9; |
||||
} |
||||
.containerFrame, |
||||
.div, |
||||
.projectFrame { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
} |
||||
.containerFrame { |
||||
flex-direction: row; |
||||
align-items: center; |
||||
gap: 0 20px; |
||||
} |
||||
.div, |
||||
.projectFrame { |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
max-width: 100%; |
||||
} |
||||
.div { |
||||
align-self: stretch; |
||||
gap: 20px 0; |
||||
font-size: 16px; |
||||
} |
||||
.projectFrame { |
||||
flex: 1; |
||||
gap: 15px 0; |
||||
min-width: 390px; |
||||
flex-shrink: 0; |
||||
} |
||||
.days1, |
||||
.of30Days { |
||||
position: relative; |
||||
} |
||||
.frameYourCurrentPlan { |
||||
width: 400px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.rectangleFrameChild { |
||||
width: 600px; |
||||
position: relative; |
||||
background-color: #d9d9d9; |
||||
display: none; |
||||
} |
||||
.daysRemaining, |
||||
.rectangleFrame, |
||||
.rectangleFrameChild { |
||||
width: 400px; |
||||
border-radius: 5px; |
||||
max-width: 100%; |
||||
} |
||||
.rectangleFrame { |
||||
height: 10px; |
||||
background-color: #d9d9d9; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 0 1px; |
||||
box-sizing: border-box; |
||||
} |
||||
.daysRemainingUntil { |
||||
position: relative; |
||||
display: inline-block; |
||||
max-width: 100%; |
||||
} |
||||
.days { |
||||
width: 600px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 5px 0; |
||||
} |
||||
.of500mb, |
||||
.storage { |
||||
position: relative; |
||||
} |
||||
.storageParent { |
||||
width: 400px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.frameChild { |
||||
width: 600px; |
||||
position: relative; |
||||
background-color: #d9d9d9; |
||||
display: none; |
||||
} |
||||
.frameChild, |
||||
.frameItem, |
||||
.rectangleParent { |
||||
width: 400px; |
||||
border-radius: 5px; |
||||
max-width: 100%; |
||||
} |
||||
.frameItem { |
||||
width: 539.1px; |
||||
position: relative; |
||||
background-color: #ffa447; |
||||
z-index: 1; |
||||
} |
||||
.rectangleParent { |
||||
height: 10px; |
||||
background-color: #d9d9d9; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
padding: 0 1px; |
||||
box-sizing: border-box; |
||||
} |
||||
.storageRemainingUntil { |
||||
align-self: stretch; |
||||
position: relative; |
||||
} |
||||
.days2 { |
||||
width: 600px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
gap: 5px 0; |
||||
} |
||||
.of10Project, |
||||
.project { |
||||
position: relative; |
||||
} |
||||
.projectParent { |
||||
width: 400px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
gap: 20px; |
||||
} |
||||
.frameInner { |
||||
width: 200px; |
||||
position: relative; |
||||
background-color: #d9d9d9; |
||||
display: none; |
||||
} |
||||
.frameInner, |
||||
.rectangleDiv, |
||||
.rectangleGroup { |
||||
width: 400px; |
||||
border-radius: 5px; |
||||
max-width: 100%; |
||||
} |
||||
.rectangleGroup { |
||||
height: 10px; |
||||
background-color: #d9d9d9; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
} |
||||
.projectRemainingUntil { |
||||
align-self: stretch; |
||||
position: relative; |
||||
} |
||||
.container, |
||||
.days3, |
||||
.daysOfDaysFrame { |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
} |
||||
.days3 { |
||||
width: 600px; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
gap: 5px 0; |
||||
} |
||||
.container, |
||||
.daysOfDaysFrame { |
||||
box-sizing: border-box; |
||||
max-width: 100%; |
||||
} |
||||
.daysOfDaysFrame { |
||||
flex: 1; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
padding: 0 0 31px; |
||||
gap: 20px 0; |
||||
min-width: 490px; |
||||
flex-shrink: 0; |
||||
font-size: 16px; |
||||
color: #777; |
||||
} |
||||
.container { |
||||
width: 1240px; |
||||
background-color: #fff; |
||||
border: 1px solid #7eacd3; |
||||
overflow: hidden; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items: flex-end; |
||||
padding: 26px 21px 20px 19px; |
||||
row-gap: 20px; |
||||
text-align: left; |
||||
font-size: 20px; |
||||
color: #333; |
||||
} |
||||
@media screen and (max-width: 675px) { |
||||
.notificationText, |
||||
.notificationText1, |
||||
.text { |
||||
gap: 0 37px; |
||||
} |
||||
.daysOfDaysFrame, |
||||
.projectFrame { |
||||
min-width: 100%; |
||||
overflow-x: auto; |
||||
} |
||||
} |
||||
@media screen and (max-width: 450px) { |
||||
.currentPlan { |
||||
font-size: 16px; |
||||
} |
||||
.containerFrame { |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue