(\n access_token ?\n \n \n \n : (\n \n )\n )}\n />\n );\n};\n\nRouteWithLayout.propTypes = {\n component: PropTypes.any.isRequired,\n layout: PropTypes.any.isRequired,\n path: PropTypes.string\n};\n\nexport default RouteWithLayout;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { makeStyles } from '@material-ui/styles';\nimport { Typography, Link } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n }\n}));\n\nconst Footer = props => {\n const { className, ...rest } = props;\n\n const classes = useStyles();\n\n return (\n \n \n ©{' '}\n \n PT Jari Solusi Internasional\n \n . 2020\n \n
\n );\n};\n\nFooter.propTypes = {\n className: PropTypes.string\n};\n\nexport default Footer;\n","import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/styles';\n\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport IconButton from '@material-ui/core/IconButton';\nimport Badge from '@material-ui/core/Badge';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Menu from '@material-ui/core/Menu';\nimport MenuIcon from '@material-ui/icons/Menu';\n// import SearchIcon from '@material-ui/icons/Search';\nimport AccountCircle from '@material-ui/icons/AccountCircle';\nimport MailIcon from '@material-ui/icons/Mail';\nimport ExpandMore from '@material-ui/icons/ExpandMore';\nimport NotificationsIcon from '@material-ui/icons/Notifications';\nimport MoreIcon from '@material-ui/icons/MoreVert';\nimport { Link } from 'react-router-dom';\nimport {\n Divider,\n Typography,\n Avatar,\n Hidden\n} from '@material-ui/core'\n\n\nconst drawerWidth = 240;\n// const appDrawerBlue = '#FFFFFF';\n// const appDrawerDefault = '#FFFFFF';\n\n// const iconBlack = '#000000';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n \n display: 'flex',\n },\n content: {\n flexGrow: 1,\n paddingTop: 56,\n height: '100%',\n [theme.breakpoints.up('sm')]: {\n paddingTop: 64\n },\n },\n name_logo : {\n fontFamily : 'Montserrat',\n color: '#000000',\n },\n logo : {\n width: 'auto',\n height: 50,\n display: 'none',\n [theme.breakpoints.up('sm')]: {\n display: 'block',\n },\n },\n logo_min : {\n width: 'auto',\n height: 30,\n },\n appBar: {\n zIndex: theme.zIndex.drawer + 1,\n boxShadow: 'none',\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n // backgroundColor: 'transparent',\n backgroundColor: '#f4f6f8'\n },\n appBarShift: {\n marginLeft: drawerWidth,\n boxShadow: 'none',\n width: `calc(100% - ${drawerWidth}px)`,\n transition: theme.transitions.create(['width', 'margin'], {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen,\n }),\n },\n menuButton: {\n marginRight: 36,\n },\n hide: {\n display: 'none',\n },\n flexGrow: {\n flexGrow: 1\n },\n sectionDesktop: {\n display: 'none',\n [theme.breakpoints.up('md')]: {\n display: 'flex',\n },\n },\n sectionMobile: {\n display: 'flex',\n [theme.breakpoints.up('md')]: {\n display: 'none',\n },\n },\n profileMenu: {\n marginTop : theme.spacing(2)\n },\n divider: {\n height: 28,\n marginTop: theme.spacing(1),\n marginLeft: theme.spacing(1),\n color: '#000',\n width: 'fit-content',\n border: `1px solid ${theme.palette.divider}`,\n borderRadius: theme.shape.borderRadius,\n },\n avatar: {\n width: 30,\n height: 30,\n marginRight: theme.spacing(1)\n },\n flag: {\n width: '40px'\n }\n}));\n\nconst Appbar = (props) => {\n const { handleDrawerToggle } = props;\n\n const classes = useStyles();\n // const theme = useTheme();\n const [anchorEl, setAnchorEl] = useState(null);\n // const [ openLanguage, setOpenLanguage ] = useState(null);\n const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState(null);\n\n const isMenuOpen = Boolean(anchorEl);\n // const isMenuLanguage = Boolean(openLanguage)\n const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);\n\n const handleProfileMenuOpen = (event) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleMobileMenuClose = () => {\n setMobileMoreAnchorEl(null);\n };\n\n const handleMenuClose = () => {\n setAnchorEl(null);\n };\n\n const handleMobileMenuOpen = (event) => {\n setMobileMoreAnchorEl(event.currentTarget);\n };\n\n // const handleOpenLanguage = (event) => {\n // setOpenLanguage(event.currentTarget)\n // }\n\n // const handleCloseLanguage = () => {\n // setOpenLanguage(null)\n // }\n\n // useEffect(() => {\n // getProfile()\n // }, [loadingGetProfile, getProfile])\n\n const menuId = 'primary-search-account-menu';\n const renderMenu = (\n \n );\n\n const mobileMenuId = 'primary-search-account-menu-mobile';\n const renderMobileMenu = (\n \n );\n\n const data2 = JSON.parse(sessionStorage.getItem('data'))\n\n return (\n // \n
\n \n \n \n \n \n \n \n
\n \n
\n
\n \n \n {data2.name}\n \n \n \n \n
\n \n \n \n \n
\n \n {renderMobileMenu}\n {renderMenu}\n {/* {renderLanguage} */}\n \n //
\n );\n};\n\n\nexport default Appbar\n","import React from 'react';\nimport { Link as RouterLink } from 'react-router-dom';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { \n Avatar,\n Typography,\n} from '@material-ui/core';\nimport { connect } from 'react-redux'\nimport { getProfile } from '../../../../actions/profile'\n\nconst nameColorWhite = '#000000';\n// const nameColorBlack = '#000000';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n minHeight: 'fit-content',\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n logo: {\n width: '100%',\n top: 0,\n paddingRight: theme.spacing(2),\n paddingLeft: theme.spacing(2)\n },\n avatar: {\n width: 60,\n height: 60\n },\n name: {\n marginTop: theme.spacing(1),\n textAlign: 'center',\n color: nameColorWhite,\n fontFamily: 'Montserrat'\n },\n teamName: {\n // margin: theme.spacing(3, 0, 2),\n marginTop: theme.spacing(3),\n paddingRight: theme.spacing(2),\n paddingLeft: theme.spacing(2),\n border: '0.5px solid rgba(224, 224, 224, 0.5)',\n boxSizing: 'border-box',\n color: '#000000',\n width: '100%',\n fontFamily: 'Montserrat',\n borderRadius: theme.spacing(1)\n },\n text: {\n width: '100%'\n }\n}));\n\nconst Profile = props => {\n const { className, ...rest } = props\n\n const classes = useStyles();\n\n const profile = JSON.parse(sessionStorage.getItem('data'))\n \n return (\n \n {/*
\n
\n \n {sessionStorage.getItem('team')}\n
\n */}\n
\n
\n {profile.name}\n \n
{profile.bagian.nama} \n
{profile.email} \n
\n );\n};\n\nProfile.propTypes = {\n className: PropTypes.string\n};\n\nconst mapStateToProps = state => ({\n profile: state.profile\n})\n\nexport default connect(mapStateToProps, {getProfile})(Profile)\n","import React, { forwardRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport clsx from 'clsx'\nimport { makeStyles, useTheme } from '@material-ui/styles'\nimport { useMediaQuery, Button, colors, Divider } from '@material-ui/core'\nimport { Link as RouterLink, Redirect } from 'react-router-dom'\n\nimport SwipeableDrawer from '@material-ui/core/SwipeableDrawer'\nimport List from '@material-ui/core/List'\nimport ExpandLess from '@material-ui/icons/ExpandLess';\nimport ExpandMore from '@material-ui/icons/ExpandMore';\nimport Collapse from '@material-ui/core/Collapse';\nimport ListItem from '@material-ui/core/ListItem'\n\nimport Dialog from '@material-ui/core/Dialog'\nimport DialogActions from '@material-ui/core/DialogActions'\nimport DialogContent from '@material-ui/core/DialogContent'\nimport DialogContentText from '@material-ui/core/DialogContentText'\nimport DialogTitle from '@material-ui/core/DialogTitle'\n\nimport Hidden from '@material-ui/core/Hidden'\n\nimport { AppBar, AccountName } from './components'\n\nconst drawerWidth = 240\nconst drawerColorBlue = '#FFFFFF'\n\n// const textMenuWhite = '#FFFFFF'\nconst textMenuBlack = '#000000'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n display: 'flex',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n appBar: {\n [theme.breakpoints.up('sm')]: {\n width: `calc(100% - ${drawerWidth}px)`,\n marginLeft: drawerWidth,\n },\n },\n menuButton: {\n marginRight: theme.spacing(2),\n [theme.breakpoints.up('sm')]: {\n display: 'none',\n },\n },\n button: {\n color: colors.blueGrey[800],\n padding: '10px 8px',\n justifyContent: 'flex-start',\n textTransform: 'none',\n letterSpacing: 0,\n width: '100%',\n fontWeight: theme.typography.fontWeightMedium\n },\n content: {\n flexGrow: 1,\n paddingTop: 56,\n marginLeft: 0,\n width: '100%',\n },\n drawer: {\n [theme.breakpoints.up('sm')]: {\n width: drawerWidth,\n flexShrink: 0,\n },\n zIndex: 1400\n },\n drawerOpen: {\n width: drawerWidth,\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.enteringScreen,\n }),\n backgroundColor: drawerColorBlue,\n borderRadius: theme.spacing(2)\n },\n drawerClose: {\n transition: theme.transitions.create('width', {\n easing: theme.transitions.easing.sharp,\n duration: theme.transitions.duration.leavingScreen,\n }),\n overflowX: 'hidden',\n width: theme.spacing(7) + 1,\n [theme.breakpoints.up('sm')]: {\n width: theme.spacing(9) + 1,\n },\n backgroundColor: drawerColorBlue,\n paddingTop: theme.spacing(5)\n },\n drawerPaper: {\n width: drawerWidth,\n backgroundColor: drawerColorBlue,\n [theme.breakpoints.up('sm')]: {\n paddingTop: 0,\n }\n },\n \n toolbar: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n padding: theme.spacing(0, 1),\n // necessary for content to be below app bar\n ...theme.mixins.toolbar,\n // backgroundColor: '#51CDFB'\n },\n menus: {\n paddingTop: theme.spacing(3)\n },\n active: {\n color: theme.palette.primary.main,\n fontWeight: theme.typography.fontWeightMedium,\n '& $icon': {\n color: theme.palette.primary.main\n }\n },\n flexGrow: {\n flexGrow: 1\n },\n bottomPush: {\n position: \"fixed\",\n bottom: 0,\n textAlign: \"center\",\n paddingBottom: 10,\n width: 'auto'\n },\n textMenu: {\n color: textMenuBlack,\n fontFamily: 'Montserrat',\n paddingLeft: theme.spacing(2)\n },\n textMenuNested: {\n color: textMenuBlack,\n fontFamily: 'Montserrat',\n fontSize: '14px',\n paddingLeft: theme.spacing(2)\n },\n item: {\n display: 'flex',\n paddingTop: 0,\n paddingBottom: 0,\n },\n nested: {\n paddingLeft: theme.spacing(6),\n paddingTop: 0,\n paddingBottom: 0,\n // fontSize: '14px'\n },\n icon: {\n color: theme.palette.icon,\n width: 24,\n height: 24,\n display: 'flex',\n alignItems: 'center',\n marginRight: theme.spacing(1)\n },\n}))\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst Main = props => {\n const { children, window } = props\n\n const classes = useStyles()\n const theme = useTheme()\n const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {\n defaultMatches: true\n })\n \n const [open, setOpen] = useState(true)\n const [mobileOpen, setMobileOpen] = React.useState(false)\n\n const handleDrawerToggle = () => {\n setMobileOpen(!mobileOpen)\n }\n\n const handleDrawerClose = () => {\n setMobileOpen(false)\n }\n\n // Dialog Box\n const [dialogOpen, setDialogOpen] = useState(false)\n // Collapsable Menus\n const [reportOpen, setReportOpen] = useState(false);\n\n const handleDialogClose = () => {\n setDialogOpen(false)\n }\n\n const handleDoLogout = () => {\n sessionStorage.removeItem('access_token')\n sessionStorage.removeItem('bagian')\n sessionStorage.removeItem('role')\n sessionStorage.removeItem('data')\n sessionStorage.clear()\n setRedirect({values: true})\n }\n\n const [redirect, setRedirect] = useState({\n values : false\n })\n\n const handlingSignout = event => {\n event.persist()\n setDialogOpen(true)\n }\n\n const idBagian = JSON.parse(sessionStorage.getItem('data'))\n\n const handleClick = (event) => {\n if (event === 'report') {\n setReportOpen(!reportOpen);\n }\n };\n\n if (redirect.values) {\n return \n }\n\n const drawer = (\n \n
\n
\n \n \n \n
\n
\n \n Dashboard\n
\n \n \n {idBagian.bagian.bagian_id === 1 || idBagian.bagian.seq === 3 || idBagian.bagian.seq === 2 ? (\n <>\n \n \n \n
\n
\n \n Surat Masuk\n
\n \n \n >\n ):(\n
\n )}\n {idBagian.bagian.seq === 5 || idBagian.bagian.seq === 2 ? (\n \n \n \n
\n
\n \n Surat Keluar\n
\n \n \n ):(\n
\n )}\n \n {idBagian.bagian.seq === 3 && (\n <>\n \n \n \n
\n
\n \n Manajemen User Staff\n
\n \n \n \n >\n )}\n {idBagian.bagian.seq === 3 || idBagian.bagian.seq === 4 ? (\n <>\n \n \n \n
\n
\n \n Memo Surat Masuk\n
\n \n \n \n \n \n
\n
\n \n Memo Surat Keluar\n
\n \n \n >\n ):(\n <>\n >\n )}\n handleClick('report')}\n >\n \n \n
\n
\n \n Report\n
\n \n {reportOpen ? : }\n \n \n \n \n \n \n Surat Masuk\n
\n \n \n \n \n \n Surat keluar\n
\n \n \n
\n \n \n \n \n \n
\n
\n Sign Out
\n \n \n
\n
\n )\n \n const container = window !== undefined ? () => window().document.body : undefined\n\n return (\n \n
\n
\n \n \n { }\n {drawer}\n \n \n \n \n {open && }\n {drawer}\n\n \n \n \n
\n {children}\n {/* \n \n */}\n \n
\n {\"Logout Confirmation\"} \n \n \n Apakah anda ingin keluar?\n \n \n \n \n Tidak\n \n \n Ya\n \n \n \n
\n )\n}\n\nMain.propTypes = {\n children: PropTypes.node\n}\n\nexport default Main\n","import * as actionTypes from '../actions/actionTypes'\nimport { v4 as uuid } from 'uuid'\n\nexport const setAlert = (msg, alertType) => {\n const id = uuid()\n return {\n type: actionTypes.SET_ALERT,\n payload: { msg, alertType, id }\n }\n}\n\nexport const removeAlert = (timeout = 5000) => {\n const id = uuid()\n return {\n type: actionTypes.REMOVE_ALERT,\n payload: { id, timeout }\n }\n}\n\nexport const setDialogBox = (header, message, uniqCode, action) => {\n const id = uuid()\n return {\n type: actionTypes.SET_DIALOG_BOX,\n payload: { header, message, uniqCode, action, id }\n }\n}\n\nexport const removeDialogBox = (timeout = 5000) => {\n const id = uuid()\n return {\n type: actionTypes.REMOVE_DIALOG_BOX,\n payload: { id, timeout }\n }\n}\n","export const AUTH_START = 'AUTH_START';\nexport const AUTH_SUCCESS = 'AUTH_SUCCESS';\nexport const AUTH_FAIL = 'AUTH_FAIL';\nexport const AUTH_LOGOUT = 'AUTH_LOGOUT';\n\nexport const SET_ALERT = 'SET_ALERT';\nexport const REMOVE_ALERT = 'REMOVE_ALERT';\n\nexport const SET_DIALOG_BOX = 'SET_DIALOG_BOX';\nexport const REMOVE_DIALOG_BOX = 'REMOVE_DIALOG_BOX';\n\n// Dashboard\nexport const GET_DASHBOARD = \"GET_DASHBOARD\"\n\n// Surat Masuk\nexport const GET_INBOX_MAIL = \"GET_INBOX_MAIL\"\nexport const POST_INBOX_MAIL_START = \"POST_INBOX_MAIL_START\"\nexport const POST_INBOX_MAIL_SUCCESS = \"POST_INBOX_MAIL_SUCCESS\"\nexport const POST_INBOX_MAIL_FAIL = \"POST_INBOX_MAIL_FAIL\"\n\nexport const UPDATE_INBOX_MAIL_START = \"UPDATE_INBOX_MAIL_START\"\nexport const UPDATE_INBOX_MAIL_SUCCESS = \"UPDATE_INBOX_MAIL_SUCCESS\"\nexport const UPDATE_INBOX_MAIL_FAIL = \"UPDATE_INBOX_MAIL_FAIL\"\n\nexport const DOWNLOAD_BUKTI_TERIMA_START = \"DOWNLOAD_BUKTI_TERIMA_START\"\nexport const DOWNLOAD_BUKTI_TERIMA_END = \"DOWNLOAD_BUKTI_TERIMA_END\"\n\nexport const DOWNLOAD_DETAIL_SURAT_START = \"DOWNLOAD_DETAIL_SURAT_START\"\nexport const DOWNLOAD_DETAIL_SURAT_END = \"DOWNLOAD_DETAIL_SURAT_END\"\n\nexport const GET_DISPOSITION_CHOICE = \"GET_DISPOSITION_CHOICE\"\n\nexport const DISPOSITION_INBOX_MAIL_START = \"DISPOSITION_INBOX_MAIL_START\"\nexport const DISPOSITION_INBOX_MAIL_SUCCESS = \"DISPOSITION_INBOX_MAIL_SUCCESS\"\nexport const DISPOSITION_INBOX_MAIL_FAIL = \"DISPOSITION_INBOX_MAIL_FAIL\"\n\n// Surat Masuk yang sudah selesai\nexport const GET_INBOX_MAIL_DONE = \"GET_INBOX_MAIL_DONE\"\n\n// Surat Keluar\nexport const GET_OUTBOX_MAIL = \"GET_OUTBOX_MAIL\"\nexport const POST_OUTBOX_MAIL_START = \"POST_OUTBOX_MAIL_START\"\nexport const POST_OUTBOX_MAIL_SUCCESS = \"POST_OUTBOX_MAIL_SUCCESS\"\nexport const POST_OUTBOX_MAIL_FAIL = \"POST_OUTBOX_MAIL_FAIL\"\n\nexport const UPDATE_OUTBOX_MAIL_START = \"UPDATE_OUTBOX_MAIL_START\"\nexport const UPDATE_OUTBOX_MAIL_SUCCESS = \"UPDATE_OUTBOX_MAIL_SUCCESS\"\nexport const UPDATE_OUTBOX_MAIL_FAIL = \"UPDATE_OUTBOX_MAIL_FAIL\"\n\nexport const ACC_OUTBOX_MAIL_START = \"ACC_OUTBOX_MAIL_START\"\nexport const ACC_OUTBOX_MAIL_SUCCESS = \"ACC_OUTBOX_MAIL_SUCCESS\"\nexport const ACC_OUTBOX_MAIL_FAIL = \"ACC_OUTBOX_MAIL_FAIL\"\n\nexport const GET_REPORT_OUTBOXMAIL = \"GET_REPORT_OUTBOXMAIL\"\n\n// Bagian\nexport const GET_BAGIAN = \"GET_BAGIAN\"\n\n// Memo\nexport const GET_MEMO = \"GET_MEMO\"\n\nexport const DOWNLOAD_DOCUMENT_DISPOSITION_START = \"DOWNLOAD_DOCUMENT_DISPOSITION_START\"\nexport const DOWNLOAD_DOCUMENT_DISPOSITION_SUCCESS = \"DOWNLOAD_DOCUMENT_DISPOSITION_SUCCESS\"\nexport const DOWNLOAD_DOCUMENT_DISPOSITION_END = \"DOWNLOAD_DOCUMENT_DISPOSITION_END\"\n\nexport const DISPOSITION_MEMO_START = \"DISPOSITION_MEMO_START\"\nexport const DISPOSITION_MEMO_SUCCESS = \"DISPOSITION_MEMO_SUCCESS\"\nexport const DISPOSITION_MEMO_FAIL = \"DISPOSITION_MEMO_FAIL\"\n\n// Paur\nexport const GET_STAFF_MIN = \"GET_STAFF_MIN\"\n\nexport const ADD_STAFF_MIN_START = \"ADD_STAFF_MIN_START\"\nexport const ADD_STAFF_MIN_SUCCESS = \"ADD_STAFF_MIN_SUCCESS\"\nexport const ADD_STAFF_MIN_FAIL = \"ADD_STAFF_MIN_FAIL\"\n\nexport const UPDATE_STAFF_MIN_START = \"UPDATE_STAFF_MIN_START\"\nexport const UPDATE_STAFF_MIN_SUCCESS = \"UPDATE_STAFF_MIN_SUCCESS\"\nexport const UPDATE_STAFF_MIN_FAIL = \"UPDATE_STAFF_MIN_FAIL\"\n\nexport const GET_DETAIL_STAFF_MIN = \"GET_DETAIL_STAFF_MIN\"\n\n// Staff Min\nexport const UPLOAD_TASK_START = \"UPLOAD_TASK_START\"\nexport const UPLOAD_TASK_SUCCESS = \"UPLOAD_TASK_SUCCESS\"\nexport const UPLOAD_TASK_FAIL = \"UPLOAD_TASK_FAIL\"\n\n// History\nexport const GET_HISTORY = \"GET_HISTORY\"\nexport const GET_HISTORY_OUTBOX_MAIL = \"GET_HISTORY_OUTBOX_MAIL\"","import axios from 'axios'\n\nconst instance = axios.create({\n baseURL: `${process.env.REACT_APP_BASE_URL}`\n // headers: {'X-Custom-Header': 'foobar'}\n})\n\nexport default instance\n","import React from \"react\";\nimport { Grid, Typography, Button, TextField } from \"@material-ui/core\";\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport {\n Hidden\n} from \"@material-ui/core\";\nimport { useHistory } from 'react-router-dom';\nimport CssBaseline from '@material-ui/core/CssBaseline'\n\n// import { addLogin } from '../../actions/login'\nimport { connect } from 'react-redux';\nimport * as actions from '../../store/actions';\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers\";\nimport * as yup from \"yup\";\n\n// import AppBar from './AppBar'\n\nconst useStyles = makeStyles((theme) => ({\n\troot: {\n\t height: '100vh'\n\t},\n\tpaper: {\n\t margin: theme.spacing(10, 4),\n\t\t// marginTop: theme.spacing(20),\n\t\tdisplay: 'flex',\n\t\tflexDirection: 'column',\n\t\talignItems: 'center',\n\t\tpadding: '30px 50px',\n\t\tfontSize: 16,\n\t\ttextAlign: 'center',\n\n\t},\n\tpaper2: {\n\t\tmargin: theme.spacing(0, 4),\n\t\tdisplay: 'flex',\n\t\tflexDirection: 'column',\n\t\talignItems: 'center',\n\t\t[theme.breakpoints.up('sm')]: {\n\t\t\tpadding: '30px 50px',\n\t\t},\n\t\tfontSize: 16,\n\t\ttextAlign: 'center',\n\t },\n\tavatar: {\n\t marginTop: theme.spacing(8),\n\t},\n\tform: {\n\t width: '100%', // Fix IE 11 issue.\n\t // marginTop: 20,\n\t paddingTop: 25\n\t},\n\ttextField: {\n\t [`& fieldset`]: {\n\t\tborderRadius: 100,\n\t },\n\t},\n\tsubmit: {\n\t \tmargin: theme.spacing(3, 0, 2),\n\t\tborder: '0.5px solid rgba(224, 224, 224, 0.5)',\n\t\tboxSizing: 'border-box',\n\t\tcolor: '#FFFFFF',\n\t\twidth: '100%',\n\t\tfontFamily: 'Montserrat',\n\t\tborderRadius: theme.spacing(1)\n\t},\n\tgoogleLogo : {\n\t\tleft: 0,\n\t\tmarginRight: '10px'\n\t},\n\tcontentName: {\n\t // padding: '200px 20px 0px',\n\t padding: theme.spacing(25, 6)\n\t},\n\timage: {\n\t\twidth: '100%',\n\t\theight: 'auto'\n\t},\n\tcenter: {\n\t color: '#FFFFFF',\n\t fontSize: 50,\n\t paddingBottom: 15\n\t},\n\twelcome: {\n\t\tfontSize: 20,\n\t\tfontWeight: 'bold',\n\t\tpaddingBottom: 10,\n\t},\n\tlogoClub: {\n\t\twidth: \"100%\"\n\t},\n\tbtnForget: {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'flex-end',\n\t\twidth: '100%',\n\t\t// marginTop: theme.spacing(5),\n\t},\n\tfooter: {\n\t\tfontSize: 14\n\t},\n\tloginContent: {\n\t\tmarginTop: theme.spacing(5)\n\t},\n\tbottomPush: {\n\t\tposition: \"fixed\",\n\t\tbottom: 0,\n\t\ttextAlign: \"center\",\n\t\tmarginBottom: 20,\n\t\twidth: '100%',\n\t\tmarginLeft: '50px',\n\t\t// marginRight: 'auto'\n\t},\n\ttext: {\n\t\tfontFamily: 'Montserrat'\n\t}\n}))\n\nconst SignInSchema = yup.object().shape({\n\tusername: yup.string().required(\"Username harus diisi\"),\n\tpassword: yup.string().required(\"Password harus diisi\"),\n});\n\nconst Login = props => {\n\tconst classes = useStyles();\n\tconst history = useHistory();\n\n\tconst tokenFCM = sessionStorage.getItem('tokenFCM')\n\n\tconst { register, handleSubmit, errors } = useForm({\n\t\tresolver: yupResolver(SignInSchema)\n\t});\n\t\n\tconst onSubmit = event => {\n\t\t// console.log(event);\n\t\t// addLogin(event, history)\n\t\tprops.onAuth(event.username, event.password, tokenFCM, history)\n\t\t// console.log(event);\n\t}\n\n\treturn (\n\t\t\n\t\t\t{/*
*/}\n\t\t\t
\n\t\t\t\t \n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t\t\n\t\t\t\t\t{/* */}\n\t\t\t\t\t\t{/* */}\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t{/*
*/}\n\t\t\t\t\t\t\t\t\t\t\t{/* © EOA Tech Team. 2020 */}\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tPowered by \n\t\t\t\t\t\t\t\t\t\t\t\t\t\tPT Ngampooz Pintar Sejahtera\n\t\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t{/*
*/}\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t{/* */}\n\t\t\t\t\t{/* */}\n\t\t\t\t \n\t\t\t \n\t\t
\n\t);\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n onAuth: (username, password, tokenFCM, history) => dispatch(actions.auth(username, password, tokenFCM, history)),\n // onAlert: (message, alertType) => dispatch(actions.setAlert(message, alertType))\n }\n}\n\nexport default connect(null, mapDispatchToProps)(Login);","import * as actions from './actionTypes'\nimport axios from '../../axios-orders'\nimport { setAlert } from './alert'\n\nexport const authStart = () => {\n return {\n type: actions.AUTH_START\n }\n}\n\nexport const authSuccess = (token) => {\n return {\n type: actions.AUTH_SUCCESS,\n tokenId: token\n }\n}\n\nexport const authFail = (error) => {\n return {\n type: actions.AUTH_FAIL,\n error: error\n }\n}\n\nexport const auth = (username, password, token, history) => {\n return dispatch => {\n dispatch(authStart())\n const authData = {\n username: username,\n password: password,\n device_token: token\n }\n\n axios.post('api/login', authData, {\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json',\n }\n })\n .then(response => {\n // if(response.data.code === \"200\"){\n sessionStorage.setItem('access_token', response.data.original.access_token)\n sessionStorage.setItem('data', JSON.stringify(response.data.original.user_data))\n sessionStorage.setItem('role', response.data.original.user_data.role.role_name)\n sessionStorage.setItem('bagian', response.data.original.bagian)\n\n history.push(`/dashboard`);\n dispatch(authSuccess(response.data.token))\n // }else{\n // dispatch(setAlert(response.data.message, \"error\"))\n // }\n })\n .catch(err => {\n // dispatch(authFail(err.response.data.msg_str))\n // dispatch(setAlert(err.response.data.msg_str, 'error'))\n dispatch(setAlert(err.response.data.message, \"error\"))\n console.log(err)\n })\n }\n}","import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Toolbar from '@material-ui/core/Toolbar';\n// import Typography from '@material-ui/core/Typography';\nimport Button from '@material-ui/core/Button';\nimport { \n Grid,\n Dialog,\n DialogTitle,\n DialogContent,\n DialogContentText,\n DialogActions\n} from '@material-ui/core';\nimport { Redirect } from 'react-router-dom'\nimport ButtonSignOut from '@material-ui/icons/Input'\n// import IconButton from '@material-ui/core/IconButton';\n// import MenuIcon from '@material-ui/icons/Menu';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n flexGrow: 1,\n },\n appBar: {\n background: 'transparent',\n boxShadow: 'none'\n },\n menuButton: {\n marginRight: theme.spacing(2),\n },\n signOut: {\n color: '#000'\n },\n buttonSignOut: {\n backgroundColor: '#F45B5B',\n color: '#ffffff'\n }\n}));\n\nconst Home = props => {\n const { children } = props;\n const classes = useStyles();\n\n const [dialogOpen, setDialogOpen] = useState(false);\n\n const handleDialogClose = () => {\n setDialogOpen(false);\n };\n\n const handleDoLogout = () => {\n sessionStorage.removeItem('access_token');\n sessionStorage.removeItem('expires_in');\n sessionStorage.removeItem('role');\n sessionStorage.removeItem('data');\n sessionStorage.clear();\n setRedirect({values: true});\n }\n\n const handlingSignout = event => {\n event.persist();\n setDialogOpen(true)\n \n };\n\n const [redirect, setRedirect] = useState({\n values : false\n });\n\n if (redirect.values) {\n return ;\n };\n\n return (\n \n
\n \n \n\n \n \n \n }\n onClick={handlingSignout}\n >\n Sign Out\n \n \n \n \n \n
\n {children}\n \n
\n {\"Logout Confirmation\"} \n \n \n Apakah anda ingin keluar?\n \n \n \n \n Tidak\n \n \n Ya\n \n \n \n
\n );\n}\n\nexport default Home\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { \n Card, \n CardContent, \n Grid, \n Typography, \n} from '@material-ui/core';\nimport NumberFormat from 'react-number-format';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n\t\theight: '100%',\n\t\tbackgroundColor: '#FFFFFF',\n },\n content: {\n alignItems: 'center',\n display: 'flex'\n },\n title: {\n fontFamily: 'Montserrat',\n color: '#A1A0AE',\n fontSize: 16\n\t},\n\tnumbers: {\n\t\tcolor: '#000000',\n fontFamily: 'Montserrat'\n\t},\n\tcaption: {\n\t\tfontWeight: 700,\n\t\tcolor: '#000000',\n\t\tfontFamily: 'Montserrat',\n\t},\n avatar: {\n backgroundColor: '#fff',\n height: 56,\n width: 56\n },\n icon: {\n height: 32,\n width: 32,\n color: '#00E676'\n },\n difference: {\n marginTop: theme.spacing(2),\n display: 'flex',\n alignItems: 'center'\n },\n differenceIcon: {\n color: theme.palette.error.dark\n },\n differenceValue: {\n color: theme.palette.error.dark,\n marginRight: theme.spacing(1)\n }\n}));\n\nconst TotalTransaction = props => {\n const { className, inboxMailOnProcess, ...rest } = props;\n\n const classes = useStyles();\n\n return (\n \n \n \n \n \n Surat Masuk On Process\n \n \n \n \n \n \n \n \n );\n};\n\nTotalTransaction.propTypes = {\n className: PropTypes.string\n};\n\nexport default TotalTransaction;\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { Card, CardContent, Grid, Typography } from '@material-ui/core';\nimport NumberFormat from 'react-number-format';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n\t\theight: '100%',\n\t\tbackgroundColor: '#FFFFFF',\n },\n content: {\n alignItems: 'center',\n display: 'flex'\n },\n title: {\n\t\tfontFamily: 'Montserrat',\n color: '#A1A0AE',\n fontSize: 16\n\t},\n\tnumbers: {\n color: '#000000',\n fontFamily: 'Montserrat'\n\t},\n\tcaption: {\n\t\tfontWeight: 700,\n\t\tcolor: '#000000',\n\t\tfontFamily: 'Montserrat',\n\t},\n avatar: {\n backgroundColor: '#fff',\n height: 56,\n width: 56\n },\n icon: {\n height: 32,\n width: 32,\n color: '#FFC400'\n },\n difference: {\n marginTop: theme.spacing(2),\n display: 'flex',\n alignItems: 'center'\n },\n differenceIcon: {\n color: theme.palette.error.dark\n },\n differenceValue: {\n color: theme.palette.error.dark,\n marginRight: theme.spacing(1)\n }\n}));\n\nconst InboxMailDone = props => {\n const { className, inboxMailDone, ...rest } = props;\n\n const classes = useStyles();\n\n return (\n \n \n \n \n \n Surat Masuk Selesai\n \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t \n \n \n \n \n );\n};\n\nInboxMailDone.propTypes = {\n className: PropTypes.string\n};\n\nexport default InboxMailDone;\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { Card, CardContent, Grid, Typography } from '@material-ui/core';\nimport NumberFormat from 'react-number-format';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n\t\theight: '100%',\n\t\tbackgroundColor: '#FFFFFF',\n },\n content: {\n alignItems: 'center',\n display: 'flex'\n },\n title: {\n\t\tfontFamily: 'Montserrat',\n color: '#A1A0AE',\n fontSize: 16\n\t},\n\tnumbers: {\n\t\tcolor: '#000000',\n fontFamily: 'Montserrat'\n\t},\n\tcaption: {\n\t\tfontWeight: 700,\n\t\tcolor: '#000000',\n\t\tfontFamily: 'Montserrat',\n\t},\n avatar: {\n backgroundColor: '#fff',\n height: 56,\n width: 56\n },\n icon: {\n height: 32,\n width: 32,\n color: '#6200EE'\n },\n difference: {\n marginTop: theme.spacing(2),\n display: 'flex',\n alignItems: 'center'\n },\n differenceIcon: {\n color: theme.palette.error.dark\n },\n differenceValue: {\n color: theme.palette.error.dark,\n marginRight: theme.spacing(1)\n }\n}));\n\nconst TotalInvestasiRP = props => {\n const { className, outboxMailOnProcess, ...rest } = props;\n\n const classes = useStyles();\n\n return (\n \n \n \n \n \n Surat Keluar Dalam Proses\n \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t \n \n \n \n \n );\n};\n\nTotalInvestasiRP.propTypes = {\n className: PropTypes.string\n};\n\nexport default TotalInvestasiRP;\n","import React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { makeStyles } from '@material-ui/styles';\nimport { Card, CardContent, Grid, Typography } from '@material-ui/core';\nimport NumberFormat from 'react-number-format';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n\t\theight: '100%',\n\t\tbackgroundColor: '#FFFFFF',\n },\n content: {\n alignItems: 'center',\n display: 'flex'\n },\n title: {\n\t\tfontFamily: 'Montserrat',\n color: '#A1A0AE',\n fontSize: 16\n\t},\n\tnumbers: {\n\t\tcolor: '#000000',\n fontFamily: 'Montserrat'\n\t},\n\tcaption: {\n\t\tfontWeight: 700,\n\t\tcolor: '#000000',\n\t\tfontFamily: 'Montserrat',\n\t},\n avatar: {\n backgroundColor: '#fff',\n height: 56,\n width: 56\n },\n icon: {\n height: 32,\n width: 32,\n color: '#FF1744'\n },\n difference: {\n marginTop: theme.spacing(2),\n display: 'flex',\n alignItems: 'center'\n },\n differenceIcon: {\n color: theme.palette.error.dark\n },\n differenceValue: {\n color: theme.palette.error.dark,\n marginRight: theme.spacing(1)\n }\n}));\n\nconst Investor = props => {\n const { className, outboxMailDone, ...rest } = props;\n\n const classes = useStyles();\n\n return (\n \n \n \n \n \n Surat Keluar Selesai\n \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t \n\t\t\t\t\t\t \n \n \n \n \n );\n};\n\nInvestor.propTypes = {\n className: PropTypes.string\n};\n\nexport default Investor;\n","import palette from '../../../../theme/palette';\nimport numeral from 'numeral'\n\nexport const options = {\n responsive: true,\n maintainAspectRatio: true,\n animation: false,\n legend: { display: false },\n cornerRadius: 20,\n tooltips: {\n callbacks: {\n label: function(tooltipItem, data) {\n return numeral(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).format('0,0');\n }\n },\n enabled: true,\n mode: 'index',\n intersect: false,\n borderWidth: 1,\n borderColor: palette.divider,\n backgroundColor: palette.white,\n titleFontColor: palette.text.primary,\n bodyFontColor: palette.text.secondary,\n footerFontColor: palette.text.secondary\n },\n layout: { padding: 0 },\n scales: {\n xAxes: [\n {\n barThickness: 50,\n maxBarThickness: 100,\n barPercentage: 0,\n categoryPercentage: 0,\n ticks: {\n fontColor: palette.text.secondary,\n },\n gridLines: {\n display: false,\n drawBorder: false\n }\n }\n ],\n yAxes: [\n {\n ticks: {\n fontColor: palette.text.secondary,\n beginAtZero: false,\n // min: 0,\n callback(value) {\n // you can add your own method here (just an example)\n return Number(value).toLocaleString('en')\n }\n },\n gridLines: {\n borderDash: [2],\n borderDashOffset: [2],\n color: palette.divider,\n drawBorder: false,\n zeroLineBorderDash: [2],\n zeroLineBorderDashOffset: [2],\n zeroLineColor: palette.divider\n }\n }\n ]\n }\n};\n","//Custom rewrite for radius border on bar draw\n//Code from https://github.com/jedtrow/Chart.js-Rounded-Bar-Charts with a few adjustments\n\nimport { Chart as ChartJS } from 'react-chartjs-2'\n\nChartJS.elements.Rectangle.prototype.draw = function() {\n const ctx = this._chart.ctx\n const vm = this._view\n let left, right, top, bottom, signX, signY, borderSkipped\n let borderWidth = vm.borderWidth\n \n // If radius is less than 0 or is large enough to cause drawing errors a max\n // radius is imposed. If cornerRadius is not defined set it to 0.\n let cornerRadius = this._chart.config.options.cornerRadius\n if(cornerRadius < 0){ cornerRadius = 0 }\n if(typeof cornerRadius == 'undefined'){ cornerRadius = 0 }\n \n if (!vm.horizontal) {\n left = vm.x - vm.width / 2\n right = vm.x + vm.width / 2\n top = vm.y\n bottom = vm.base\n signX = 1\n signY = bottom > top? 1: -1\n borderSkipped = vm.borderSkipped || 'bottom'\n } \n \n // Canvas doesn't allow us to stroke inside the width so we can\n // adjust the sizes to fit if we're setting a stroke on the line\n if (borderWidth) {\n // borderWidth shold be less than bar width and bar height.\n const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))\n borderWidth = borderWidth > barSize? barSize: borderWidth\n const halfStroke = borderWidth / 2\n // Adjust borderWidth when bar top position is near vm.base(zero).\n const borderLeft = left + (borderSkipped !== 'left'? halfStroke * signX: 0)\n const borderRight = right + (borderSkipped !== 'right'? -halfStroke * signX: 0)\n const borderTop = top + (borderSkipped !== 'top'? halfStroke * signY: 0)\n const borderBottom = bottom + (borderSkipped !== 'bottom'? -halfStroke * signY: 0)\n // not become a vertical line?\n if (borderLeft !== borderRight) {\n top = borderTop\n bottom = borderBottom\n }\n // not become a horizontal line?\n if (borderTop !== borderBottom) {\n left = borderLeft\n right = borderRight\n }\n }\n \n ctx.beginPath()\n ctx.fillStyle = vm.backgroundColor\n ctx.strokeStyle = vm.borderColor\n ctx.lineWidth = borderWidth\n \n // Corner points, from bottom-left to bottom-right clockwise\n // | 1 2 |\n // | 0 3 |\n const corners = [\n [left, bottom],\n [left, top],\n [right, top],\n [right, bottom],\n ]\n \n // Find first (starting) corner with fallback to 'bottom'\n const borders = ['bottom', 'left', 'top', 'right']\n let startCorner = borders.indexOf(borderSkipped, 0)\n if (startCorner === -1) {\n startCorner = 0\n }\n \n function cornerAt(index) {\n return corners[(startCorner + index) % 4]\n }\n \n // Draw rectangle from 'startCorner'\n let corner = cornerAt(0)\n ctx.moveTo(corner[0], corner[1])\n \n for (let i = 1; i < 4; i++) {\n corner = cornerAt(i)\n let nextCornerId = i+1\n if(nextCornerId === 4){\n nextCornerId = 0\n }\n \n const width = corners[2][0] - corners[1][0]\n const height = corners[0][1] - corners[1][1]\n const x = corners[1][0]\n const y = corners[1][1]\n \n let radius = cornerRadius\n \n // Fix radius being too large\n if(radius > Math.abs(height)/1.5){\n radius = Math.floor(Math.abs(height)/1.5)\n }\n if(radius > Math.abs(width)/1.5){\n radius = Math.floor(Math.abs(width)/1.5)\n }\n \n if(height < 0){\n // Negative values in a standard bar chart\n const x_tl = x; const x_tr = x+width\n const y_tl = y+height; const y_tr = y+height\n \n const x_bl = x; const x_br = x+width\n const y_bl = y; const y_br = y\n \n // Draw\n ctx.moveTo(x_bl+radius, y_bl)\n ctx.lineTo(x_br-radius, y_br)\n ctx.quadraticCurveTo(x_br, y_br, x_br, y_br-radius)\n ctx.lineTo(x_tr, y_tr+radius)\n ctx.quadraticCurveTo(x_tr, y_tr, x_tr-radius, y_tr)\n ctx.lineTo(x_tl+radius, y_tl)\n ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl+radius)\n ctx.lineTo(x_bl, y_bl-radius)\n ctx.quadraticCurveTo(x_bl, y_bl, x_bl+radius, y_bl)\n } else {\n ctx.moveTo(x + radius, y)\n ctx.lineTo(x + width - radius, y)\n ctx.quadraticCurveTo(x + width, y, x + width, y + radius)\n ctx.lineTo(x + width, y + height - radius)\n ctx.quadraticCurveTo(x + width, y + height, x + width, y + height)\n ctx.lineTo(x + radius, y + height)\n ctx.quadraticCurveTo(x, y + height, x, y + height)\n ctx.lineTo(x, y + radius)\n ctx.quadraticCurveTo(x, y, x + radius, y)\n }\n }\n \n ctx.fill()\n if (borderWidth) {\n ctx.stroke()\n }\n }","import React from 'react'\nimport { Bar } from 'react-chartjs-2';\nimport {\n Card,\n CardContent,\n CardHeader,\n makeStyles,\n} from '@material-ui/core'\nimport {options} from './chart'\nimport './roundedBar'\nimport moment from 'moment'\n\nconst useStyles = makeStyles(theme => ({\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n }\n}))\n\nconst GrafikInboxMail = props => {\n const classes = useStyles()\n const {\n grafikInboxMail\n } = props\n\n var data = {}\n var value=[]\n var bulan=[];\n\n // if(!loadingTransactionSales || grafikTransactionSales !== null){\n for (var i = 0; i < grafikInboxMail.length; i++) {\n // bulan.push(grafikInboxMail[i].date);\n // var date = new Date(grafikInboxMail[i].date)\n bulan.push(moment(grafikInboxMail[i].date).format('DD/MM'));\n value.push(grafikInboxMail[i].value);\n }\n \n data = {\n labels: bulan,\n datasets: [\n {\n label : 'Jumlah Pekerjaan',\n data: value,\n backgroundColor: '#2285DF',\n borderColor: [\n 'rgba(255,99,132,1)',\n 'rgba(54, 162, 235, 1)',\n 'rgba(255, 206, 86, 1)',\n 'rgba(75, 192, 192, 1)',\n 'rgba(153, 102, 255, 1)',\n 'rgba(255, 159, 64, 1)'\n ],\n borderRadius: 10\n }\n ]\n };\n // }\n \n return(\n \n \n \n \n \n \n \n\n
\n )\n}\n\nexport default GrafikInboxMail","import palette from '../../../../theme/palette';\nimport numeral from 'numeral'\n\nexport const options = {\n responsive: true,\n maintainAspectRatio: true,\n animation: false,\n legend: { display: false },\n cornerRadius: 20,\n tooltips: {\n callbacks: {\n label: function(tooltipItem, data) {\n return numeral(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]).format('0,0');\n }\n },\n enabled: true,\n mode: 'index',\n intersect: false,\n borderWidth: 1,\n borderColor: palette.divider,\n backgroundColor: palette.white,\n titleFontColor: palette.text.primary,\n bodyFontColor: palette.text.secondary,\n footerFontColor: palette.text.secondary\n },\n layout: { padding: 0 },\n scales: {\n xAxes: [\n {\n barThickness: 50,\n maxBarThickness: 100,\n barPercentage: 0,\n categoryPercentage: 0,\n ticks: {\n fontColor: palette.text.secondary,\n },\n gridLines: {\n display: false,\n drawBorder: false\n }\n }\n ],\n yAxes: [\n {\n ticks: {\n fontColor: palette.text.secondary,\n beginAtZero: false,\n // min: 0,\n callback(value) {\n // you can add your own method here (just an example)\n return Number(value).toLocaleString('en')\n }\n },\n gridLines: {\n borderDash: [2],\n borderDashOffset: [2],\n color: palette.divider,\n drawBorder: false,\n zeroLineBorderDash: [2],\n zeroLineBorderDashOffset: [2],\n zeroLineColor: palette.divider\n }\n }\n ]\n }\n};\n","//Custom rewrite for radius border on bar draw\n//Code from https://github.com/jedtrow/Chart.js-Rounded-Bar-Charts with a few adjustments\n\nimport { Chart as ChartJS } from 'react-chartjs-2'\n\nChartJS.elements.Rectangle.prototype.draw = function() {\n const ctx = this._chart.ctx\n const vm = this._view\n let left, right, top, bottom, signX, signY, borderSkipped\n let borderWidth = vm.borderWidth\n \n // If radius is less than 0 or is large enough to cause drawing errors a max\n // radius is imposed. If cornerRadius is not defined set it to 0.\n let cornerRadius = this._chart.config.options.cornerRadius\n if(cornerRadius < 0){ cornerRadius = 0 }\n if(typeof cornerRadius == 'undefined'){ cornerRadius = 0 }\n \n if (!vm.horizontal) {\n left = vm.x - vm.width / 2\n right = vm.x + vm.width / 2\n top = vm.y\n bottom = vm.base\n signX = 1\n signY = bottom > top? 1: -1\n borderSkipped = vm.borderSkipped || 'bottom'\n } \n \n // Canvas doesn't allow us to stroke inside the width so we can\n // adjust the sizes to fit if we're setting a stroke on the line\n if (borderWidth) {\n // borderWidth shold be less than bar width and bar height.\n const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))\n borderWidth = borderWidth > barSize? barSize: borderWidth\n const halfStroke = borderWidth / 2\n // Adjust borderWidth when bar top position is near vm.base(zero).\n const borderLeft = left + (borderSkipped !== 'left'? halfStroke * signX: 0)\n const borderRight = right + (borderSkipped !== 'right'? -halfStroke * signX: 0)\n const borderTop = top + (borderSkipped !== 'top'? halfStroke * signY: 0)\n const borderBottom = bottom + (borderSkipped !== 'bottom'? -halfStroke * signY: 0)\n // not become a vertical line?\n if (borderLeft !== borderRight) {\n top = borderTop\n bottom = borderBottom\n }\n // not become a horizontal line?\n if (borderTop !== borderBottom) {\n left = borderLeft\n right = borderRight\n }\n }\n \n ctx.beginPath()\n ctx.fillStyle = vm.backgroundColor\n ctx.strokeStyle = vm.borderColor\n ctx.lineWidth = borderWidth\n \n // Corner points, from bottom-left to bottom-right clockwise\n // | 1 2 |\n // | 0 3 |\n const corners = [\n [left, bottom],\n [left, top],\n [right, top],\n [right, bottom],\n ]\n \n // Find first (starting) corner with fallback to 'bottom'\n const borders = ['bottom', 'left', 'top', 'right']\n let startCorner = borders.indexOf(borderSkipped, 0)\n if (startCorner === -1) {\n startCorner = 0\n }\n \n function cornerAt(index) {\n return corners[(startCorner + index) % 4]\n }\n \n // Draw rectangle from 'startCorner'\n let corner = cornerAt(0)\n ctx.moveTo(corner[0], corner[1])\n \n for (let i = 1; i < 4; i++) {\n corner = cornerAt(i)\n let nextCornerId = i+1\n if(nextCornerId === 4){\n nextCornerId = 0\n }\n \n const width = corners[2][0] - corners[1][0]\n const height = corners[0][1] - corners[1][1]\n const x = corners[1][0]\n const y = corners[1][1]\n \n let radius = cornerRadius\n \n // Fix radius being too large\n if(radius > Math.abs(height)/1.5){\n radius = Math.floor(Math.abs(height)/1.5)\n }\n if(radius > Math.abs(width)/1.5){\n radius = Math.floor(Math.abs(width)/1.5)\n }\n \n if(height < 0){\n // Negative values in a standard bar chart\n const x_tl = x; const x_tr = x+width\n const y_tl = y+height; const y_tr = y+height\n \n const x_bl = x; const x_br = x+width\n const y_bl = y; const y_br = y\n \n // Draw\n ctx.moveTo(x_bl+radius, y_bl)\n ctx.lineTo(x_br-radius, y_br)\n ctx.quadraticCurveTo(x_br, y_br, x_br, y_br-radius)\n ctx.lineTo(x_tr, y_tr+radius)\n ctx.quadraticCurveTo(x_tr, y_tr, x_tr-radius, y_tr)\n ctx.lineTo(x_tl+radius, y_tl)\n ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl+radius)\n ctx.lineTo(x_bl, y_bl-radius)\n ctx.quadraticCurveTo(x_bl, y_bl, x_bl+radius, y_bl)\n } else {\n ctx.moveTo(x + radius, y)\n ctx.lineTo(x + width - radius, y)\n ctx.quadraticCurveTo(x + width, y, x + width, y + radius)\n ctx.lineTo(x + width, y + height - radius)\n ctx.quadraticCurveTo(x + width, y + height, x + width, y + height)\n ctx.lineTo(x + radius, y + height)\n ctx.quadraticCurveTo(x, y + height, x, y + height)\n ctx.lineTo(x, y + radius)\n ctx.quadraticCurveTo(x, y, x + radius, y)\n }\n }\n \n ctx.fill()\n if (borderWidth) {\n ctx.stroke()\n }\n }","import React from 'react'\nimport { Bar } from 'react-chartjs-2';\nimport {\n Card,\n CardContent,\n CardHeader,\n makeStyles,\n} from '@material-ui/core'\nimport {options} from './chart'\nimport './roundedBar'\nimport moment from 'moment'\n\nconst useStyles = makeStyles(theme => ({\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n }\n}))\n\nconst GrafikOutboxMail = props => {\n const classes = useStyles()\n const {\n grafikOutboxMail\n } = props\n\n var data = {}\n var value=[]\n var bulan=[];\n\n // if(!loadingTransactionSales || grafikTransactionSales !== null){\n for (var i = 0; i < grafikOutboxMail.length; i++) {\n // bulan.push(grafikOutboxMail[i].date);\n // var date = new Date(grafikOutboxMail[i].date)\n bulan.push(moment(grafikOutboxMail[i].date).format('DD/MM'));\n value.push(grafikOutboxMail[i].value);\n }\n \n data = {\n labels: bulan,\n datasets: [\n {\n label : 'Jumlah Pekerjaan',\n data: value,\n backgroundColor: '#2285DF',\n borderColor: [\n 'rgba(255,99,132,1)',\n 'rgba(54, 162, 235, 1)',\n 'rgba(255, 206, 86, 1)',\n 'rgba(75, 192, 192, 1)',\n 'rgba(153, 102, 255, 1)',\n 'rgba(255, 159, 64, 1)'\n ],\n borderRadius: 10\n }\n ]\n };\n // }\n \n return(\n \n \n \n \n \n \n \n\n
\n )\n}\n\nexport default GrafikOutboxMail","import React, { useEffect, useState } from 'react';\nimport { makeStyles } from '@material-ui/styles';\nimport { \n Grid, \n Typography,\n} from '@material-ui/core';\n// import { Link as RouterLink } from 'react-router-dom';\nimport DateFnsUtils from '@date-io/date-fns'; // choose your lib\nimport {\n DatePicker,\n MuiPickersUtilsProvider,\n} from '@material-ui/pickers';\nimport moment from 'moment';\n// import '../../../public/index.css'\n\nimport {\n InboxMailOnProcess,\n InboxMailDone,\n OutboxMailOnProcess,\n GrafikInboxMail,\n GrafikOutboxMail,\n OutboxMailDone\n} from './components'\n\nimport { connect } from 'react-redux'\nimport { getDashboard } from '../../store/actions/dashboard'\nimport { Skeleton } from '@material-ui/lab';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4),\n },\n bgColor: {\n backgroundColor: '#BCE0FD',\n height: '312px',\n position: 'absolute',\n // zIndex: 0\n },\n cardMobile: {\n paddingLeft: theme.spacing(1),\n paddingRight: theme.spacing(1),\n paddingTop: theme.spacing(2),\n width: '100%'\n },\n extendedIcon: {\n marginRight: theme.spacing(1),\n },\n executiveSummary: {\n marginBottom: theme.spacing(2)\n },\n btn: {\n backgroundColor: '#FF9300',\n color: '#FFFFFF',\n '&:hover': {\n backgroundColor: '#FFA938',\n opacity: 1,\n },\n },\n title: {\n fontFamily: 'Montserrat'\n }\n}));\n\n// const CustomRouterLink = forwardRef((props, ref) => (\n// \n// \n//
\n// ));\n\nconst Dashboard = props => {\n const classes = useStyles();\n const {\n getDashboard,\n dashboard:{\n dashboardList,\n loadingDashboardList\n }\n } = props\n\n const [selectedDate ] = useState(new Date());\n\n const submitDefault = moment().subtract(7, 'd').format('YYYY-MM-DD');\n const submitDefaultEndDate = moment({}).format('YYYY-MM-DD');\n const [ startDate, setStartDate ] = useState({\n submit: {\n submit: submitDefault\n },\n view: {\n view: moment().subtract(7, 'd').format('YYYY-MM-DD')\n }\n });\n const handleStartDate = (date) => {\n const changeDate = moment(date).format('YYYY-MM-DD');\n setStartDate(startDate => ({\n ...startDate,\n submit: {\n submit: changeDate\n },\n view: {\n view: date\n }\n }));\n };\n\n const [ endDate, setEndDate ] = useState({\n submit: {\n submit: submitDefaultEndDate\n },\n view: {selectedDate}\n });\n const handleEndDate = (date) => {\n const all = moment(date).format('YYYY-MM-DD');\n setEndDate(endDate => ({\n ...endDate,\n submit: {\n submit: all\n },\n view: {\n view: date\n }\n }));\n };\n\n useEffect(() => {\n getDashboard(startDate.submit.submit, endDate.submit.submit)\n }, [getDashboard, startDate, endDate])\n\n console.log(dashboardList)\n\n return (\n \n
\n
\n \n Dashboard \n \n \n
\n \n {!loadingDashboardList ? (\n \n ):(\n \n )}\n \n \n {!loadingDashboardList ? (\n \n ):(\n \n )}\n \n \n {!loadingDashboardList ? (\n \n ):(\n \n )}\n \n \n {!loadingDashboardList ? (\n \n ):(\n \n )}\n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n {!loadingDashboardList ? (\n \n ):(\n \n )}\n \n \n {!loadingDashboardList ? (\n \n ):(\n \n )}\n \n \n
\n );\n};\n\nconst mapStateToProps = state => ({\n dashboard : state.dashboard\n})\n\nexport default connect(mapStateToProps, { getDashboard })(Dashboard)\n","import * as actions from './actionTypes'\nimport axios from 'axios'\nimport { setAlert } from './alert'\n\nexport const getDashboard = (startDate, endDate) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/dashboard`\n const myData = {\n start_date: startDate,\n end_date: endDate\n }\n\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n data: myData,\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_DASHBOARD,\n payload: res.data\n })\n\n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_DASHBOARD,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}","import React, {useEffect, useState, useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {useDropzone} from 'react-dropzone';\nimport Button from '@material-ui/core/Button';\nimport AddIcon from '@material-ui/icons/Add';\n// import { Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n content: {\n // margin: theme.spacing(3)\n },\n thumbsContainer : {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n marginTop: 16\n },\n \n thumb : {\n display: 'inline-flex',\n borderRadius: 2,\n border: '1px solid #eaeaea',\n marginBottom: 8,\n marginRight: 8,\n width: 'auto',\n height: 'auto',\n padding: 4,\n boxSizing: 'border-box'\n },\n \n thumbInner : {\n display: 'flex',\n minWidth: 0,\n overflow: 'hidden'\n },\n \n img : {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n appBar: {\n position: 'relative',\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n },\n paragraph: {\n margin: theme.spacing(2)\n }\n}));\n\nconst baseStyle = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n\tpadding: '20px',\n borderWidth: 2,\n borderRadius: 2,\n borderColor: '#eeeeee',\n borderStyle: 'dashed',\n backgroundColor: '#fafafa',\n color: '#bdbdbd',\n outline: 'none',\n\ttransition: 'border .24s ease-in-out',\n};\n\nconst activeStyle = {\n borderColor: '#2196f3'\n};\n\nconst acceptStyle = {\n borderColor: '#00e676'\n};\n\nconst rejectStyle = {\n borderColor: '#ff1744'\n};\n\nexport default function UploadImage(props) {\n const classes = useStyles();\n\tconst { handleChangeBanner } = props;\n\n const [files, setFiles] = useState([]);\n\n\tconst {\n getRootProps,\n getInputProps,\n isDragActive,\n isDragAccept,\n isDragReject,\n } = useDropzone({\n accept: 'image/*',\n onDrop: acceptedFiles => {\n setFiles(acceptedFiles.map(file => Object.assign(file, {\n preview: URL.createObjectURL(file)\n })));\n },\n onDropAccepted: handleChangeBanner,\n });\n // console.log(files)\n\n const style = useMemo(() => ({\n ...baseStyle,\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {})\n }), [\n isDragActive,\n isDragReject,\n isDragAccept\n ]);\n \n const thumbs = files.map(file => (\n \n\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t));\n\n useEffect(() => () => {\n // Make sure to revoke the data uris to avoid memory leaks\n files.forEach(file => URL.revokeObjectURL(file.preview));\n }, [files]);\n\n return (\n \n
\n
\n
Drag 'n' drop some files here, or click to select files
\n\t\t\t\t
}\n\t\t\t\t>\n\t\t\t\t\tUpload Image\n\t\t\t\t\n
\n
\n\t\t
\n );\n}","import React, { useState, useEffect, Fragment } from 'react'\nimport axios from 'axios'\nimport { makeStyles } from '@material-ui/styles'\nimport { useForm } from \"react-hook-form\"\nimport { \n Card, \n CardActions,\n CardContent, \n TextField, \n Grid, \n Button,\n} from '@material-ui/core'\nimport Backdrop from '@material-ui/core/Backdrop'\nimport CircularProgress from '@material-ui/core/CircularProgress'\n// import { useHistory } from 'react-router-dom'\nimport { AccountImage } from './components'\nimport Skeleton from '@material-ui/lab/Skeleton'\n\nconst useStyles = makeStyles(theme => ({\n root : {\n padding : theme.spacing(4)\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n\t},\n}))\n\nconst Profile = () => {\n const classes = useStyles()\n const { register, handleSubmit } = useForm()\n // const history = useHistory()\n const [ setBanner] = useState([])\n const [ setB64] = useState()\n const [ url ] = useState(`${process.env.REACT_APP_BASE_URL}/user/profile`)\n\n const handleChangeBanner = event => {\n setBanner(event[0])\n let reader = new FileReader()\n reader.readAsDataURL(event[0])\n reader.onload = function(){\n setB64(reader.result)\n // console.log(reader.result)\n }\n };\n\n const [ setFormState ] = useState({\n values: {}\n })\n const [ isLoading, setIsLoading ] = useState(false)\n const [ detailProfile, setDetailProfile ] = useState({})\n\n const handleChange = event => {\n event.persist();\n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: event.target.value\n }\n }))\n }\n\n useEffect(() => {\n const fetchData = async () => {\n setIsLoading(true);\n try {\n const token = sessionStorage.getItem('access_token');\n // console.log(`token = ${token}`);\n const result = await axios({\n url: url,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${token}` \n }\n });\n setDetailProfile(result.data)\n // console.log(result.data.name)\n } catch (error) {\n console.log(error)\n }\n setIsLoading(false);\n };\n fetchData()\n }, [url])\n\n const onSubmit = e => {\n // editProfile(formState.values, history)\n // console.log(formState.values)\n }\n\n return isLoading ? \n \n \n \n :\n \n \n \n}\n\nexport default Profile","import * as actions from './actionTypes'\nimport axios from 'axios'\nimport { setAlert } from './alert'\nimport fileDownload from 'js-file-download'\n\nexport const getInboxMail = (keyword) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk?keyword=${keyword}`\n\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_INBOX_MAIL,\n payload: res.data.data\n })\n\n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_INBOX_MAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const getInboxMailDone = (keyword, startDate, endDate) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/report/surat-masuk?keyword=${keyword}&start_date=${startDate}&end_date=${endDate}`\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_INBOX_MAIL_DONE,\n payload: res.data.data\n })\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_INBOX_MAIL_DONE,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const postInboxMail = (formData, file, mailDate, accDate, history) => async dispatch => {\n dispatch({\n type: actions.POST_INBOX_MAIL_START,\n })\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk`\n const myData = new FormData()\n myData.set('klasifikasi', formData.klasifikasi)\n myData.set('no_agenda', formData.no_agenda)\n myData.set('tanggal_surat', mailDate)\n myData.set('tanggal_terima', accDate)\n myData.set('status_type', formData.status_type)\n myData.set('perihal', formData.perihal)\n myData.set('file', file)\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n data: myData,\n headers: { \n 'Content-Type': 'multipart/form-data', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.POST_INBOX_MAIL_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n history.push('/surat-masuk')\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.POST_INBOX_MAIL_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const updateInboxMail = (formData, file, mailDate, accDate, history, id) => async dispatch => {\n dispatch({\n type: actions.UPDATE_INBOX_MAIL_START,\n })\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/${id}`\n const myData = new FormData()\n myData.set('_method', 'put')\n myData.set('no_agenda', formData.no_agenda)\n // myData.set('no_surat', formData.no_surat)\n myData.set('tanggal_surat', mailDate)\n myData.set('tanggal_terima', accDate)\n myData.set('status_type', formData.status_type)\n // myData.set('sumber_surat', formData.sumber_surat)\n myData.set('perihal', formData.perihal)\n // myData.set('keterangan', formData.keterangan)\n if(file.length > 0){\n myData.set('file', file)\n }\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n data: myData,\n headers: { \n 'Content-Type': 'multipart/form-data', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.UPDATE_INBOX_MAIL_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n history.push('/surat-masuk')\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.UPDATE_INBOX_MAIL_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const downloadBuktiTerima = (id, no_surat) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/${id}/tanda-terima/download`\n console.log(endpoint)\n dispatch({\n type: actions.DOWNLOAD_BUKTI_TERIMA_START,\n })\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n loading: true,\n headers: { \n 'Content-Type': 'application/pdf', \n 'Accept' : 'application/json', \n 'Authorization' : `Bearer ${sessionStorage.getItem('access_token')}`\n },\n responseType: 'blob'\n });\n fileDownload(res.data, `bukti_terima_${no_surat}.pdf`)\n dispatch({\n type: actions.DOWNLOAD_BUKTI_TERIMA_END,\n payload: res.data\n })\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.DOWNLOAD_BUKTI_TERIMA_END,\n payload: error\n })\n }\n \n}\n\nexport const downloadDetailSurat = (id, no_surat) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/${id}/detail-surat/download`\n console.log(endpoint)\n dispatch({\n type: actions.DOWNLOAD_DETAIL_SURAT_START,\n })\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n loading: true,\n headers: { \n 'Content-Type': 'application/pdf', \n 'Accept' : 'application/json', \n 'Authorization' : `Bearer ${sessionStorage.getItem('access_token')}`\n },\n responseType: 'blob'\n });\n fileDownload(res.data, `Detail Surat ${no_surat}.pdf`)\n dispatch({\n type: actions.DOWNLOAD_DETAIL_SURAT_END,\n payload: res.data\n })\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.DOWNLOAD_DETAIL_SURAT_END,\n payload: error\n })\n }\n \n}\n\nexport const getDispositionChoice = () => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/disposisi/users`\n\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_DISPOSITION_CHOICE,\n payload: res.data.data\n })\n\n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_DISPOSITION_CHOICE,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const dispositionInboxMail = (id, formData, isiDisposisi, history, setKeyword, noSurat) => async dispatch => {\n dispatch({\n type: actions.DISPOSITION_INBOX_MAIL_START,\n })\n\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/${id}/disposisi`\n const myData = {\n kepada: formData.kepada,\n // catatan: formData.catatan,\n isi_disposisi: isiDisposisi\n }\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n data: myData,\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.DISPOSITION_INBOX_MAIL_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n dispatch(getInboxMail(''))\n history.push('/surat-masuk')\n // setKeyword(noSurat)\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.DISPOSITION_INBOX_MAIL_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const getHistory = (id) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/history/${id}`\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_HISTORY,\n payload: res.data.data\n })\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_HISTORY,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}","import * as actions from './actionTypes'\nimport axios from 'axios'\nimport { setAlert } from './alert'\n\nexport const getBagian = () => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/bagian`\n\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_BAGIAN,\n payload: res.data.data\n })\n\n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_BAGIAN,\n payload: error\n })\n }\n \n}","import React, { Fragment, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n Button,\n Backdrop,\n CircularProgress,\n TextField,\n MenuItem,\n FormControl,\n\tFormLabel,\n\tFormGroup,\n\tFormControlLabel,\n\tCheckbox\n} from '@material-ui/core'\nimport { useForm } from \"react-hook-form\";\n// import { yupResolver } from \"@hookform/resolvers\";\n// import * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n// redux\nimport { connect } from 'react-redux'\nimport { dispositionInboxMail } from '../../../../store/actions/suratMasuk'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n width: '100%',\n },\n chips: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n chip: {\n margin: 2,\n },\n}))\n\n// const DispositionInboxMail = yup.object().shape({\n// \tkepada: yup.string().required(\"Ditujukan harus diisi\"),\n// });\n\nconst Disposisi = props => {\n const classes = useStyles()\n const history = useHistory()\n const { \n inboxData,\n dispositionInboxMail,\n dispositionChoiceList,\n handleCloseDetailSurat,\n handleCloseDialogDisposisi,\n setKeyword,\n suratMasuk: {\n loadingDispositionInboxMail\n }\n } = props\n const { handleSubmit } = useForm();\n\n const [ formState, setFormState ] = useState({\n values: {\n catatan: 'Lainnya'\n }\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const onSubmit = e => {\n // console.log(inboxData.id, formState.values)\n const word = stateDisposisi.filter((value) => \n value.isChecked === true\n )\n .map((e) => e.value)\n .reduce((value,element) => value + \",\" + element)\n dispositionInboxMail(inboxData.id, formState.values, word, history, setKeyword, inboxData.no_surat)\n handleCloseDialogDisposisi()\n handleCloseDetailSurat(inboxData)\n }\n\n const [stateDisposisi, setStateDisposisi] = useState([\n {\n title: 'Cek kelengkapan',\n value: 'Cek kelengkapan',\n isChecked: false,\n name: 'kelengkapan'\n },\n {\n title: 'Proses sesuai ketentuan dan procedure',\n value: 'Proses sesuai ketentuan dan procedure',\n isChecked: false,\n name: 'prosedur'\n },\n {\n title: 'Laporkan hasilnya',\n value: 'Laporkan hasilnya',\n isChecked: false,\n name: 'laporkan'\n },\n {\n title: 'Datakan/ Filekan',\n value: 'Datakan/ Filekan',\n isChecked: false,\n name: 'datakan'\n },\n {\n title: 'Tindaklanjuti',\n value: 'Tindaklanjuti',\n isChecked: false,\n name: 'tindaklanjut'\n },\n {\n title: 'Wakili',\n value: 'Wakili',\n isChecked: false,\n name: 'wakili'\n },\n {\n title: 'Lainnya',\n value: '',\n isChecked: false,\n name: 'lainnya'\n }\n ])\n\n\tconst handleChangeWord = (event) => {\n let index = 0\n stateDisposisi.forEach((res) => {\n if(res.name === event.target.name){\n let data = [...stateDisposisi]\n let items = {...data[index]}\n items = {\n title: event.target.value, \n value: event.target.value,\n isChecked : event.target.checked,\n name: event.target.name\n }\n data[index] = items\n setStateDisposisi(data)\n if(res.name === 'lainnya'){\n let data = [...stateDisposisi]\n let items = {...data[index]}\n items = {\n title: formState.values.catatan, \n isChecked : event.target.checked,\n name: event.target.name\n }\n data[index] = items\n setStateDisposisi(data)\n }\n }\n index++\n });\n\t};\n\n const handleChangeMoreDisposition = event => {\n let data = [...stateDisposisi]\n let items = {...data[data.length - 1]}\n items = {\n ...items,\n value: event.target.value\n }\n data[data.length - 1] = items\n setStateDisposisi(data)\n }\n\n return loadingDispositionInboxMail ?\n \n \n \n :\n \n \n\n \n \n \n \n {dispositionChoiceList\n .filter(e => e.nama !== 'kanit stnk' && e.nama !== 'pamin tu')\n .map(item => (\n {item.nama} \n ))}\n \n \n \n \n Isi Disposisi \n \n {stateDisposisi.map((item) => (\n }\n label={item.title}\n />\n ))}\n \n \n {stateDisposisi[stateDisposisi.length - 1].isChecked && (\n \n )}\n \n \n \n \n \n \n \n \n Submit\n
\n \n \n \n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { dispositionInboxMail })(Disposisi)","import React, { Fragment, useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n InputLabel, \n Typography,\n Button,\n Divider,\n Backdrop,\n CircularProgress,\n Dialog,\n DialogContent,\n DialogTitle,\n\tDialogActions\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getDispositionChoice } from '../../../store/actions/suratMasuk'\nimport { getBagian } from '../../../store/actions/bagian'\nimport Disposisi from './Disposisi'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst DetailSuratMasuk = props => {\n const classes = useStyles()\n const {\n inboxData,\n getDispositionChoice,\n getBagian,\n handleCloseDetailSurat,\n setKeyword,\n suratMasuk: {\n loadingDownloadBuktiTerima,\n loadingDownloadDetailSurat,\n loadingDispositionChoiceList,\n dispositionChoiceList\n },\n bagian: {\n listBagian\n }\n } = props\n\n const idBagian = JSON.parse(sessionStorage.getItem('data'))\n\n const [ openDialogDisposisi, setOpenDialogDisposisi ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDialogDisposisi = e => {\n setOpenDialogDisposisi({\n open : true,\n item: e\n })\n }\n\n const handleCloseDialogDisposisi = e => {\n setOpenDialogDisposisi({\n open : false,\n item: e\n })\n }\n\n useEffect(() => {\n getBagian()\n getDispositionChoice()\n }, [getBagian, getDispositionChoice])\n\n return loadingDownloadBuktiTerima || loadingDownloadDetailSurat || loadingDispositionChoiceList ? \n \n \n \n :\n \n \n \n \n \n Tgl Terima/No Agenda: \n \n {moment(inboxData.tanggal_terima).format('DD MMMM yyyy')} | {inboxData.no_agenda}\n \n \n \n Dari: \n \n {inboxData.sumber_surat}\n \n \n \n Tgl/No Surat: \n \n {moment(inboxData.tanggal_surat).format('DD MMMM yyyy')} | {inboxData.no_surat}\n \n \n \n Perihal: \n \n {inboxData.perihal}\n \n \n \n \n Lampiran Dokumen: \n \n \n Download\n
\n \n \n \n \n \n \n \n {/* handleDownloadDetailSurat(inboxData)}>\n \n Download Surat\n
\n */}\n \n {sessionStorage.getItem('role') === 'staff' && (\n <>\n {inboxData.status_surat.id === 1 && idBagian.bagian.seq === 2 && (\n \n handleOpenDialogDisposisi(inboxData)}>\n \n Disposisi\n
\n \n \n )}\n >\n )}\n \n \n \n handleCloseDialogDisposisi(openDialogDisposisi.item)}\n >\n \n \n Disposisi surat dengan nomor surat ({inboxData.no_surat})\n \n \n \n \n \n\t\t\t\n\t\t\t\t handleCloseDialogDisposisi(openDialogDisposisi.item)} color=\"primary\">\n\t\t\t\t\tTutup\n\t\t\t\t \n\t\t\t \n \n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk,\n bagian: state.bagian\n})\n\nexport default connect(mapStateToProps, { getBagian, getDispositionChoice })(DetailSuratMasuk)","import React, { useState, forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { lighten, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Card from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { CardHeader, CardContent, Dialog, DialogTitle, DialogContent, Paper, Divider, InputBase, Chip, DialogActions, Button } from '@material-ui/core';\nimport DetailSuratMasuk from '../DetailSuratMasuk'\nimport { Link as RouterLink } from 'react-router-dom'\nimport SearchIcon from '@material-ui/icons/Search'\nimport moment from 'moment'\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('123/123/123', 305, '20 November 2020', 67, 4.3),\n createData('123/123/124', 452, '20 November 2020', 51, 4.9),\n createData('123/123/125', 262, '20 November 2020', 24, 6.0),\n createData('123/123/126', 159, '20 November 2020', 24, 4.0),\n createData('123/123/127', 356, '20 November 2020', 49, 3.9),\n createData('123/123/128', 408, '20 November 2020', 87, 6.5),\n createData('123/123/129', 237, '20 November 2020', 37, 4.3),\n createData('123/123/130', 375, '20 November 2020', 94, 0.0),\n createData('123/123/131', 518, '20 November 2020', 65, 7.0),\n createData('123/123/132', 392, '20 November 2020', 98, 0.0),\n createData('123/123/133', 318, '20 November 2020', 81, 2.0),\n createData('123/123/134', 360, '20 November 2020', 9, 37.0),\n createData('123/123/135', 437, '20 November 2020', 63, 4.0),\n];\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === 'desc'\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst headCells = [\n { id: 'no_agenda', numeric: false, disablePadding: false, label: 'Nomor Agenda' },\n { id: 'no_surat', numeric: false, disablePadding: false, label: 'Nomor Surat' },\n { id: 'tgl_surat', numeric: false, disablePadding: false, label: 'Tanggal Surat' },\n { id: 'perihal', numeric: false, disablePadding: false, label: 'Perihal' },\n { id: 'history', numeric: false, disablePadding: false, label: 'History Surat' },\n { id: 'status', numeric: false, disablePadding: false, label: 'Status Surat' },\n { id: 'action', numeric: false, disablePadding: false, label: 'Aksi' },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, order, orderBy, onRequestSort } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n \n \n {headCells.map((headCell) => (\n \n \n {headCell.label}\n {orderBy === headCell.id ? (\n \n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n \n ) : null}\n \n \n ))}\n \n \n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\n\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === 'light'\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: '1 1 100%',\n },\n}));\n\nconst EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const { numSelected } = props;\n\n return (\n 0,\n })}\n >\n {numSelected > 0 ? (\n \n {numSelected} selected\n \n ) : (\n \n Nutrition\n \n )}\n\n {numSelected > 0 ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n )}\n \n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: '400px',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n width: '100%'\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n}));\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst TableSuratMasuk = props => {\n const classes = useStyles();\n const {\n inboxMail,\n handleOpenDialogEdit,\n page,\n setPage,\n handleChangeSearch,\n setKeyword\n } = props\n const [order, setOrder] = React.useState('asc');\n const [orderBy, setOrderBy] = React.useState('calories');\n const [selected, setSelected] = React.useState([]);\n \n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === 'asc';\n setOrder(isAsc ? 'desc' : 'asc');\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = rows.map((n) => n.name);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n // Dialog Detail Surat\n const [ openDialogDetailSurat, setOpenDialogDetailSurat ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: true,\n item: e\n })\n }\n\n const handleCloseDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: false,\n item: e\n })\n }\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);\n\n return (\n \n
\n \n \n \n \n \n \n \n }\n />\n \n \n \n \n \n {stableSort(inboxMail, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .filter(e => e.status !== 6)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n \n \n {row.no_agenda}\n \n {row.no_surat} \n \n {moment(row.tanggal_surat).format('D MMMM YYYY')}\n \n {row.perihal} \n {row.status_surat.status} \n \n \n \n \n \n handleOpenDialogEdit(row)}>\n \n \n \n \n \n \n \n \n \n handleOpenDetailSurat(row)}>\n \n \n \n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n \n )}\n \n
\n \n \n \n \n
handleCloseDetailSurat(openDialogDetailSurat.item)}\n >\n \n {openDialogDetailSurat.item !== null && (\n \n {openDialogDetailSurat.item.perihal}\n \n )}\n \n \n \n \n \n handleCloseDetailSurat(openDialogDetailSurat.item)} color=\"primary\">\n Tutup\n \n \n \n
\n );\n}\n\nexport default TableSuratMasuk\n","import React, {useEffect, useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {useDropzone} from 'react-dropzone';\n// import Button from '@material-ui/core/Button';\n// import AddIcon from '@material-ui/icons/Add';\n// import { Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n content: {\n // margin: theme.spacing(3)\n },\n thumbsContainer : {\n // display: 'flex',\n // flexDirection: 'row',\n // flexWrap: 'wrap',\n margin: theme.spacing(2)\n },\n \n thumb : {\n display: 'inline-flex',\n borderRadius: 2,\n border: '1px solid #eaeaea',\n marginBottom: 8,\n marginRight: 8,\n width: 'auto',\n height: 'auto',\n padding: 4,\n boxSizing: 'border-box'\n },\n \n thumbInner : {\n display: 'flex',\n minWidth: 0,\n overflow: 'hidden'\n },\n \n img : {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n appBar: {\n position: 'relative',\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n },\n paragraph: {\n margin: theme.spacing(2)\n }\n}));\n\nconst baseStyle = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n\tpadding: '20px',\n borderWidth: 2,\n borderRadius: 2,\n borderColor: '#eeeeee',\n borderStyle: 'dashed',\n backgroundColor: '#fafafa',\n color: '#bdbdbd',\n outline: 'none',\n\ttransition: 'border .24s ease-in-out',\n};\n\nconst activeStyle = {\n borderColor: '#2196f3'\n};\n\nconst acceptStyle = {\n borderColor: '#00e676'\n};\n\nconst rejectStyle = {\n borderColor: '#ff1744'\n};\n\nexport default function Dropzone(props) {\n const classes = useStyles();\n\tconst { handleChangeFile } = props;\n\n // const [files, setFiles] = useState([]);\n\n\tconst {\n getRootProps,\n getInputProps,\n acceptedFiles,\n isDragActive,\n isDragAccept,\n isDragReject,\n } = useDropzone({\n accept: 'application/pdf',\n maxFiles: 1,\n multiple: false,\n onDropAccepted: handleChangeFile\n });\n // console.log(files)\n\n const style = useMemo(() => ({\n ...baseStyle,\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {})\n }), [\n isDragActive,\n isDragReject,\n isDragAccept\n ]);\n \n const files = acceptedFiles.map(file => (\n \n {file.path} - {file.size} bytes\n \n ));\n\n useEffect(() => () => {\n // Make sure to revoke the data uris to avoid memory leaks\n files.forEach(file => URL.revokeObjectURL(file.preview));\n }, [files]);\n\n return (\n \n
\n
\n
Drag 'n' drop some files here, or click to select files
\n
\n
\n\t\t
\n );\n}","import React, { useState, Fragment } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardContent, \n TextField, \n Grid, \n Typography, \n InputLabel, \n CardHeader, \n Button,\n Backdrop,\n CircularProgress,\n MenuItem\n} from '@material-ui/core'\nimport DateFnsUtils from '@date-io/date-fns'; // choose your lib\nimport {\n DatePicker,\n MuiPickersUtilsProvider,\n} from '@material-ui/pickers';\nimport moment from 'moment'\n// import Breadcrumbs from '@material-ui/core/Breadcrumbs';\n// import {Link} from 'react-router-dom';\nimport { Info as InfoIcon } from '@material-ui/icons'\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers\";\nimport * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n\nimport UploadFile from './UploadFile'\nimport { connect } from 'react-redux'\nimport { updateInboxMail } from '../../../store/actions/suratMasuk'\n\nimport '../../../App.css'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(0)\n },\n breadcumbs: {\n padding: theme.spacing(4)\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst InboxMailSchema = yup.object().shape({\n\tno_agenda: yup.string().required(\"Nomor Agenda harus diisi\"),\n\t// no_surat: yup.string().required(\"Nomor Surat harus diisi\"),\n\t// tujuan_surat: yup.string().required(\"Tujuan Surat harus diisi\"),\n\t// sumber_surat: yup.string().required(\"Sumber Surat harus diisi\"),\n\tperihal: yup.string().required(\"Perihal harus diisi\"),\n});\n\nconst EditSuratMasuk = props => {\n const classes = useStyles()\n const {\n updateInboxMail,\n suratMasuk: {\n loadingUpdateInboxMail\n },\n openDialogEdit,\n getInboxMail,\n handleCloseDialogEdit\n } = props\n const history = useHistory()\n const { register, handleSubmit, errors } = useForm({\n\t\tresolver: yupResolver(InboxMailSchema)\n });\n\n const [ formState, setFormState ] = useState({\n values: {\n no_agenda: openDialogEdit.no_agenda,\n no_surat: openDialogEdit.no_surat,\n tujuan_surat: openDialogEdit.tujuan_surat,\n sumber_surat: openDialogEdit.sumber_surat,\n perihal: openDialogEdit.perihal,\n status_type : openDialogEdit.status_type,\n }\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const mailDateDefault = openDialogEdit.tanggal_surat\n const mailDateDefaultView = new Date(mailDateDefault)\n\tconst [ mailDate, setMailDate ] = useState({\n submit: mailDateDefault,\n view: mailDateDefaultView\n \n\t});\n const handleMailDate = (date) => {\n const changeDate = moment(date).format('YYYY/MM/DD');\n setMailDate(mailDate => ({\n ...mailDate,\n submit: changeDate,\n view: date\n }));\n };\n\n const accDateDefault = openDialogEdit.tanggal_terima\n const accDateDefaultView = new Date(accDateDefault)\n const [ accDate, setAccDate ] = useState({\n submit: accDateDefault,\n view: accDateDefaultView\n \n\t});\n const handleAccDate = (date) => {\n const changeDate = moment(date).format('YYYY/MM/DD');\n setAccDate(accDate => ({\n ...accDate,\n submit: changeDate,\n view: date\n }));\n };\n\n const [banner, setBanner] = useState([]);\n const handleChangeFile = event => {\n setBanner(event[0]);\n // let reader = new FileReader();\n // reader.readAsDataURL(event[0]);\n // reader.onload = function(){\n // setB64(reader.result);\n // }\n };\n \n \n const onSubmit = (event) => {\n console.log(formState.values, banner, mailDate.submit, accDate.submit);\n updateInboxMail(formState.values, banner, mailDate.submit, accDate.submit, history, openDialogEdit.id)\n handleCloseDialogEdit(openDialogEdit)\n getInboxMail()\n\t}\n \n return loadingUpdateInboxMail ? \n \n \n \n :\n \n \n
\n \n Form Edit Surat Masuk \n \n \n
\n
\n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { updateInboxMail })(EditSuratMasuk)","import React, { forwardRef, useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { Typography, Grid, Button, DialogContent, Dialog } from '@material-ui/core'\nimport { Link as RouterLink } from 'react-router-dom'\n\nimport TableSuratMasuk from './TableSuratMasuk'\nimport EditSuratMasuk from './EditSuratMasuk'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getInboxMail } from '../../store/actions/suratMasuk'\nimport { Skeleton } from '@material-ui/lab'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n title: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n textButton: {\n fontFamily: 'Montserrat',\n color: '#FFFFFF'\n }\n}))\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst SuratMasuk = props => {\n const classes = useStyles()\n const {\n getInboxMail,\n suratMasuk: {\n inboxMail,\n loadingInboxMail\n }\n } = props\n\n const idBagian = JSON.parse(sessionStorage.getItem('data'))\n\n const [ openDialogEdit, setOpenDialogEdit ] = useState({\n open: false,\n object: null\n })\n \n const handleOpenDialogEdit = e => {\n setOpenDialogEdit({\n open: true,\n object : e\n })\n }\n\n const handleCloseDialogEdit = e => {\n setOpenDialogEdit({\n open: false,\n object : e\n })\n }\n\n const [ keyword, setKeyword ] = useState('')\n const [page, setPage] = useState(0);\n\n const handleChangeSearch = event => {\n setKeyword(event.target.value)\n setPage(0)\n }\n\n useEffect(() => {\n getInboxMail(keyword)\n }, [getInboxMail, keyword])\n\n return(\n \n
\n \n Surat Masuk \n \n \n {idBagian.bagian.seq !== 2 && idBagian.bagian.seq !== 1 && (\n \n \n + Buat Surat Masuk\n
\n \n )}\n \n \n
\n \n {!loadingInboxMail && inboxMail !== null ? (\n \n ):(\n \n )}\n \n \n
handleCloseDialogEdit(openDialogEdit.object)}\n > \n \n \n \n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n suratMasuk : state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { getInboxMail })(SuratMasuk)","import * as actions from './actionTypes'\nimport axios from 'axios'\nimport { setAlert } from './alert'\n\nexport const getOutboxMail = (keyword) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-keluar?keyword=${keyword}`\n\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_OUTBOX_MAIL,\n payload: res.data.data\n })\n\n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_OUTBOX_MAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const postOutboxMail = (formData, file, mailDate, history) => async dispatch => {\n dispatch({\n type: actions.POST_OUTBOX_MAIL_START,\n })\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-keluar`\n const myData = new FormData()\n myData.set('no_surat', formData.no_surat)\n myData.set('tanggal_surat', mailDate)\n myData.set('tujuan_surat', formData.tujuan_surat)\n myData.set('pengolah', formData.pengolah)\n myData.set('perihal', formData.perihal)\n myData.set('status_type', formData.status_type)\n myData.set('file', file)\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n data: myData,\n headers: { \n 'Content-Type': 'multipart/form-data', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.POST_OUTBOX_MAIL_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n history.push('/surat-keluar')\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.POST_OUTBOX_MAIL_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const updateOutboxMail = (formData, file, mailDate, history, id) => async dispatch => {\n dispatch({\n type: actions.UPDATE_OUTBOX_MAIL_START,\n })\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-keluar/${id}`\n const myData = new FormData()\n myData.set('_method', 'put')\n myData.set('no_surat', formData.no_surat)\n myData.set('tanggal_surat', mailDate)\n myData.set('tujuan_surat', formData.tujuan_surat)\n myData.set('pengolah', formData.pengolah)\n myData.set('perihal', formData.perihal)\n myData.set('status_type', formData.status_type)\n if(file.length > 0){\n myData.set('file', file)\n }\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n data: myData,\n headers: { \n 'Content-Type': 'multipart/form-data', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.UPDATE_OUTBOX_MAIL_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n history.push('/surat-keluar')\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.UPDATE_OUTBOX_MAIL_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const accOutboxMail = (id, setKeyword, noSurat, history) => async dispatch => {\n dispatch({\n type: actions.ACC_OUTBOX_MAIL_START,\n })\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-keluar/confirm/${id}`\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.ACC_OUTBOX_MAIL_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n history.push('/memo-surat-keluar')\n setKeyword(noSurat)\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.ACC_OUTBOX_MAIL_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const getHistory = (id) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-keluar/history/${id}`\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_HISTORY_OUTBOX_MAIL,\n payload: res.data.data\n })\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_HISTORY_OUTBOX_MAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const getReportOutboxMail = (keyword, startDate, endDate) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/report/surat-keluar?keyword=${keyword}&start_date=${startDate}&end_date=${endDate}`\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_REPORT_OUTBOXMAIL,\n payload: res.data.data\n })\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_REPORT_OUTBOXMAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { lighten, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Card from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport SearchIcon from '@material-ui/icons/Search'\nimport { CardHeader, CardContent, Paper, Divider, InputBase } from '@material-ui/core';\nimport { Link as RouterLink } from 'react-router-dom'\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === 'desc'\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst headCells = [\n { id: 'no_surat', disablePadding: false, label: 'Nomor Surat' },\n { id: 'tgl_surat', disablePadding: false, label: 'Tanggal Surat' },\n { id: 'perihal', disablePadding: false, label: 'Perihal' },\n { id: 'tujuan_surat', disablePadding: false, label: 'Tujuan Surat' },\n { id: 'pengolah', disablePadding: false, label: 'Pengolah' },\n { id: 'status', disablePadding: false, label: 'Status' },\n { id: 'action', disablePadding: false, label: 'Aksi' },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, order, orderBy, onRequestSort } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n \n \n {headCells.map((headCell) => (\n \n \n {headCell.label}\n {orderBy === headCell.id ? (\n \n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n \n ) : null}\n \n \n ))}\n \n \n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\n\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === 'light'\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: '1 1 100%',\n },\n}));\n\nconst EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const { numSelected } = props;\n\n return (\n 0,\n })}\n >\n {numSelected > 0 ? (\n \n {numSelected} selected\n \n ) : (\n \n Nutrition\n \n )}\n\n {numSelected > 0 ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n )}\n \n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: '400px',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n width: '100%'\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n}));\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst TableSuratKeluar = props => {\n const classes = useStyles();\n const [order, setOrder] = React.useState('asc');\n const [orderBy, setOrderBy] = React.useState('calories');\n const [selected, setSelected] = React.useState([]);\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const {\n outboxMail,\n handleOpenDialogEdit,\n page,\n setPage,\n handleChangeSearch,\n } = props\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === 'asc';\n setOrder(isAsc ? 'desc' : 'asc');\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = outboxMail.map((n) => n.name);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, outboxMail.length - page * rowsPerPage);\n\n return (\n \n
\n \n \n \n \n \n \n \n }\n />\n \n \n \n \n \n {stableSort(outboxMail, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.name}\n selected={isItemSelected}\n >\n \n {row.no_surat}\n \n {row.tanggal_surat} \n {row.perihal} \n {row.tujuan_surat} \n {row.pengolah} \n {row.status_surat.status} \n \n \n \n \n \n \n \n handleOpenDialogEdit(row)}>\n \n \n \n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n \n )}\n \n
\n \n \n \n \n
\n );\n}\n\nexport default TableSuratKeluar","import React, {useEffect, useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {useDropzone} from 'react-dropzone';\n// import Button from '@material-ui/core/Button';\n// import AddIcon from '@material-ui/icons/Add';\n// import { Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n content: {\n // margin: theme.spacing(3)\n },\n thumbsContainer : {\n // display: 'flex',\n // flexDirection: 'row',\n // flexWrap: 'wrap',\n margin: theme.spacing(2)\n },\n \n thumb : {\n display: 'inline-flex',\n borderRadius: 2,\n border: '1px solid #eaeaea',\n marginBottom: 8,\n marginRight: 8,\n width: 'auto',\n height: 'auto',\n padding: 4,\n boxSizing: 'border-box'\n },\n \n thumbInner : {\n display: 'flex',\n minWidth: 0,\n overflow: 'hidden'\n },\n \n img : {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n appBar: {\n position: 'relative',\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n },\n paragraph: {\n margin: theme.spacing(2)\n }\n}));\n\nconst baseStyle = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n\tpadding: '20px',\n borderWidth: 2,\n borderRadius: 2,\n borderColor: '#eeeeee',\n borderStyle: 'dashed',\n backgroundColor: '#fafafa',\n color: '#bdbdbd',\n outline: 'none',\n\ttransition: 'border .24s ease-in-out',\n};\n\nconst activeStyle = {\n borderColor: '#2196f3'\n};\n\nconst acceptStyle = {\n borderColor: '#00e676'\n};\n\nconst rejectStyle = {\n borderColor: '#ff1744'\n};\n\nexport default function Dropzone(props) {\n const classes = useStyles();\n\tconst { handleChangeFile } = props;\n\n // const [files, setFiles] = useState([]);\n\n\tconst {\n getRootProps,\n getInputProps,\n acceptedFiles,\n isDragActive,\n isDragAccept,\n isDragReject,\n } = useDropzone({\n accept: 'application/pdf',\n maxFiles: 1,\n multiple: false,\n onDropAccepted: handleChangeFile\n });\n // console.log(files)\n\n const style = useMemo(() => ({\n ...baseStyle,\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {})\n }), [\n isDragActive,\n isDragReject,\n isDragAccept\n ]);\n \n const files = acceptedFiles.map(file => (\n \n {file.path} - {file.size} bytes\n \n ));\n\n useEffect(() => () => {\n // Make sure to revoke the data uris to avoid memory leaks\n files.forEach(file => URL.revokeObjectURL(file.preview));\n }, [files]);\n\n return (\n \n
\n
\n
Drag 'n' drop some files here, or click to select files
\n
\n
\n\t\t
\n );\n}","import React, { useState, Fragment } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardContent, \n TextField, \n Grid, \n Typography, \n InputLabel, \n CardHeader, \n Button,\n Backdrop,\n CircularProgress,\n MenuItem\n} from '@material-ui/core'\nimport DateFnsUtils from '@date-io/date-fns'; // choose your lib\nimport {\n DatePicker,\n MuiPickersUtilsProvider,\n} from '@material-ui/pickers';\nimport moment from 'moment'\n// import Breadcrumbs from '@material-ui/core/Breadcrumbs';\n// import {Link} from 'react-router-dom';\nimport { Info as InfoIcon } from '@material-ui/icons'\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers\";\nimport * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n\nimport UploadFile from './UploadFile'\nimport { connect } from 'react-redux'\nimport { updateOutboxMail } from '../../../store/actions/suratKeluar'\n\nimport '../../../App.css'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(0)\n },\n breadcumbs: {\n padding: theme.spacing(4)\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst InboxMailSchema = yup.object().shape({\n\tno_surat: yup.string().required(\"Nomor Surat harus diisi\"),\n\ttujuan_surat: yup.string().required(\"Tujuan Surat harus diisi\"),\n\tpengolah: yup.string().required(\"Pengolah harus diisi\"),\n\tperihal: yup.string().required(\"Perihal harus diisi\"),\n\t// keterangan: yup.string().required(\"Keterangan harus diisi\"),\n});\n\nconst EditSuratMasuk = props => {\n const classes = useStyles()\n const {\n updateOutboxMail,\n suratMasuk: {\n loadingUpdateOutboxMail\n },\n openDialogEdit,\n handleCloseDialogEdit\n } = props\n const history = useHistory()\n const { register, handleSubmit, errors } = useForm({\n\t\tresolver: yupResolver(InboxMailSchema)\n });\n\n const [ formState, setFormState ] = useState({\n values: {\n no_surat: openDialogEdit.no_surat,\n tujuan_surat: openDialogEdit.tujuan_surat,\n pengolah: openDialogEdit.pengolah,\n perihal: openDialogEdit.perihal,\n keterangan : openDialogEdit.keterangan,\n }\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const mailDateDefault = openDialogEdit.tanggal_surat\n const mailDateDefaultView = new Date(mailDateDefault)\n\tconst [ mailDate, setMailDate ] = useState({\n submit: mailDateDefault,\n view: mailDateDefaultView\n \n\t});\n const handleMailDate = (date) => {\n const changeDate = moment(date).format('YYYY/MM/DD');\n setMailDate(mailDate => ({\n ...mailDate,\n submit: changeDate,\n view: date\n }));\n };\n\n const [banner, setBanner] = useState([]);\n const handleChangeFile = event => {\n setBanner(event[0]);\n // let reader = new FileReader();\n // reader.readAsDataURL(event[0]);\n // reader.onload = function(){\n // setB64(reader.result);\n // }\n };\n \n \n const onSubmit = (event) => {\n console.log(formState.values, banner, mailDate.submit);\n updateOutboxMail(formState.values, banner, mailDate.submit, history, openDialogEdit.id)\n handleCloseDialogEdit(openDialogEdit)\n\t}\n \n return loadingUpdateOutboxMail ? \n \n \n \n :\n \n \n
\n \n Form Edit Surat Keluar \n \n \n
\n
\n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { updateOutboxMail })(EditSuratMasuk)","import React, { forwardRef, useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { Typography, Grid, Button, Dialog, DialogContent } from '@material-ui/core'\nimport { Link as RouterLink } from 'react-router-dom'\n\nimport { connect } from 'react-redux'\nimport { getOutboxMail } from '../../store/actions/suratKeluar'\n\nimport TableSuratKeluar from './TableSuratKeluar'\nimport EditSuratKeluar from './EditSuratKeluar'\nimport { Skeleton } from '@material-ui/lab'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n title: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n textButton: {\n fontFamily: 'Montserrat',\n color: '#FFFFFF'\n }\n}))\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst SuratKeluar = props => {\n const classes = useStyles()\n const {\n getOutboxMail,\n suratKeluar: {\n outboxMail,\n loadingOutboxMail\n }\n } = props\n\n const [ openDialogEdit, setOpenDialogEdit ] = useState({\n open: false,\n object: null\n })\n \n const handleOpenDialogEdit = e => {\n setOpenDialogEdit({\n open: true,\n object : e\n })\n }\n\n const handleCloseDialogEdit = e => {\n setOpenDialogEdit({\n open: false,\n object : e\n })\n }\n\n const [ keyword, setKeyword ] = useState('')\n const [page, setPage] = useState(0);\n\n const handleChangeSearch = event => {\n setKeyword(event.target.value)\n setPage(0)\n }\n\n useEffect(() => {\n getOutboxMail(keyword)\n }, [ getOutboxMail, keyword])\n\n return(\n \n
\n \n Surat Keluar \n \n \n \n \n + Buat Surat Keluar\n
\n \n \n \n
\n \n {!loadingOutboxMail && outboxMail !== null ?(\n \n ):(\n \n )}\n \n \n
handleCloseDialogEdit(openDialogEdit.object)}\n > \n \n \n \n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n suratKeluar: state.suratKeluar\n})\n\nexport default connect(mapStateToProps, { getOutboxMail })(SuratKeluar)","import React, {useEffect, useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {useDropzone} from 'react-dropzone';\n// import Button from '@material-ui/core/Button';\n// import AddIcon from '@material-ui/icons/Add';\n// import { Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n content: {\n // margin: theme.spacing(3)\n },\n thumbsContainer : {\n // display: 'flex',\n // flexDirection: 'row',\n // flexWrap: 'wrap',\n margin: theme.spacing(2)\n },\n \n thumb : {\n display: 'inline-flex',\n borderRadius: 2,\n border: '1px solid #eaeaea',\n marginBottom: 8,\n marginRight: 8,\n width: 'auto',\n height: 'auto',\n padding: 4,\n boxSizing: 'border-box'\n },\n \n thumbInner : {\n display: 'flex',\n minWidth: 0,\n overflow: 'hidden'\n },\n \n img : {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n appBar: {\n position: 'relative',\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n },\n paragraph: {\n margin: theme.spacing(2)\n }\n}));\n\nconst baseStyle = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n\tpadding: '20px',\n borderWidth: 2,\n borderRadius: 2,\n borderColor: '#eeeeee',\n borderStyle: 'dashed',\n backgroundColor: '#fafafa',\n color: '#bdbdbd',\n outline: 'none',\n\ttransition: 'border .24s ease-in-out',\n};\n\nconst activeStyle = {\n borderColor: '#2196f3'\n};\n\nconst acceptStyle = {\n borderColor: '#00e676'\n};\n\nconst rejectStyle = {\n borderColor: '#ff1744'\n};\n\nexport default function Dropzone(props) {\n const classes = useStyles();\n\tconst { handleChangeFile } = props;\n\n // const [files, setFiles] = useState([]);\n\n\tconst {\n getRootProps,\n getInputProps,\n acceptedFiles,\n isDragActive,\n isDragAccept,\n isDragReject,\n } = useDropzone({\n accept: 'application/pdf',\n maxFiles: 1,\n multiple: false,\n onDropAccepted: handleChangeFile\n });\n // console.log(files)\n\n const style = useMemo(() => ({\n ...baseStyle,\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {})\n }), [\n isDragActive,\n isDragReject,\n isDragAccept\n ]);\n \n const files = acceptedFiles.map(file => (\n \n {file.path} - {file.size} bytes\n \n ));\n\n useEffect(() => () => {\n // Make sure to revoke the data uris to avoid memory leaks\n files.forEach(file => URL.revokeObjectURL(file.preview));\n }, [files]);\n\n return (\n \n
\n
\n
Drag 'n' drop some files here, or click to select files
\n
\n
\n\t\t
\n );\n}","import React, { useState, Fragment } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardContent, \n TextField, \n Grid, \n Typography, \n InputLabel, \n CardHeader, \n Button,\n Backdrop,\n CircularProgress,\n MenuItem\n} from '@material-ui/core'\nimport DateFnsUtils from '@date-io/date-fns'; // choose your lib\nimport {\n DatePicker,\n MuiPickersUtilsProvider,\n} from '@material-ui/pickers';\nimport moment from 'moment'\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\nimport {Link} from 'react-router-dom';\nimport { Info as InfoIcon } from '@material-ui/icons'\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers\";\nimport * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n\nimport UploadFile from './UploadFile'\nimport { connect } from 'react-redux'\nimport { postInboxMail } from '../../../store/actions/suratMasuk'\n\nimport '../../../App.css'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n breadcumbs: {\n padding: theme.spacing(4)\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst InboxMailSchema = yup.object().shape({\n\tno_agenda: yup.string().required(\"Nomor Agenda harus diisi\"),\n\t// sumber_surat: yup.string().required(\"Sumber Surat harus diisi\"),\n\tperihal: yup.string().required(\"Perihal harus diisi\"),\n});\n\nconst FormSuratMasuk = props => {\n const classes = useStyles()\n const {\n postInboxMail,\n suratMasuk: {\n loadingPostInboxMail\n }\n } = props\n const history = useHistory()\n const { register, handleSubmit, errors } = useForm({\n\t\tresolver: yupResolver(InboxMailSchema)\n });\n\n const [ formState, setFormState ] = useState({\n values: {}\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const submitDefault = moment().format('YYYY/MM/DD')\n\tconst [ mailDate, setMailDate ] = useState({\n submit: submitDefault,\n view: new Date()\n \n\t});\n const handleMailDate = (date) => {\n const changeDate = moment(date).format('YYYY/MM/DD');\n setMailDate(mailDate => ({\n ...mailDate,\n submit: changeDate,\n view: date\n }));\n };\n\n const [ accDate, setAccDate ] = useState({\n submit: submitDefault,\n view: new Date()\n \n\t});\n const handleAccDate = (date) => {\n const changeDate = moment(date).format('YYYY/MM/DD');\n setAccDate(accDate => ({\n ...accDate,\n submit: changeDate,\n view: date\n }));\n };\n\n const [banner, setBanner] = useState([]);\n const handleChangeFile = event => {\n setBanner(event[0]);\n // let reader = new FileReader();\n // reader.readAsDataURL(event[0]);\n // reader.onload = function(){\n // setB64(reader.result);\n // }\n };\n \n \n const onSubmit = (event) => {\n // console.log(formState.values, banner, mailDate.submit, accDate.submit);\n postInboxMail(formState.values, banner, mailDate.submit, accDate.submit, history)\n\t}\n \n return loadingPostInboxMail ? \n \n \n \n :\n \n \n \n \n Surat Masuk\n \n \n Form Surat Masuk\n \n \n
\n \n
\n \n Form Entri Surat Masuk \n \n \n
\n
\n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { postInboxMail })(FormSuratMasuk)","import React, {useEffect, useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {useDropzone} from 'react-dropzone';\n// import Button from '@material-ui/core/Button';\n// import AddIcon from '@material-ui/icons/Add';\n// import { Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n content: {\n // margin: theme.spacing(3)\n },\n thumbsContainer : {\n // display: 'flex',\n // flexDirection: 'row',\n // flexWrap: 'wrap',\n margin: theme.spacing(2)\n },\n \n thumb : {\n display: 'inline-flex',\n borderRadius: 2,\n border: '1px solid #eaeaea',\n marginBottom: 8,\n marginRight: 8,\n width: 'auto',\n height: 'auto',\n padding: 4,\n boxSizing: 'border-box'\n },\n \n thumbInner : {\n display: 'flex',\n minWidth: 0,\n overflow: 'hidden'\n },\n \n img : {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n appBar: {\n position: 'relative',\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n },\n paragraph: {\n margin: theme.spacing(2)\n }\n}));\n\nconst baseStyle = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n\tpadding: '20px',\n borderWidth: 2,\n borderRadius: 2,\n borderColor: '#eeeeee',\n borderStyle: 'dashed',\n backgroundColor: '#fafafa',\n color: '#bdbdbd',\n outline: 'none',\n\ttransition: 'border .24s ease-in-out',\n};\n\nconst activeStyle = {\n borderColor: '#2196f3'\n};\n\nconst acceptStyle = {\n borderColor: '#00e676'\n};\n\nconst rejectStyle = {\n borderColor: '#ff1744'\n};\n\nexport default function Dropzone(props) {\n const classes = useStyles();\n\tconst { handleChangeFile } = props;\n\n // const [files, setFiles] = useState([]);\n\n\tconst {\n getRootProps,\n getInputProps,\n acceptedFiles,\n isDragActive,\n isDragAccept,\n isDragReject,\n } = useDropzone({\n accept: 'application/pdf',\n maxFiles: 1,\n multiple: false,\n onDropAccepted: handleChangeFile\n });\n // console.log(files)\n\n const style = useMemo(() => ({\n ...baseStyle,\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {})\n }), [\n isDragActive,\n isDragReject,\n isDragAccept\n ]);\n \n const files = acceptedFiles.map(file => (\n \n {file.path} - {file.size} bytes\n \n ));\n\n useEffect(() => () => {\n // Make sure to revoke the data uris to avoid memory leaks\n files.forEach(file => URL.revokeObjectURL(file.preview));\n }, [files]);\n\n return (\n \n
\n
\n
Drag 'n' drop some files here, or click to select files
\n
\n
\n\t\t
\n );\n}","import React, { useState, Fragment } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardContent, \n TextField, \n Grid, \n Typography, \n InputLabel, \n CardHeader, \n Button,\n Backdrop,\n CircularProgress,\n MenuItem\n} from '@material-ui/core'\nimport DateFnsUtils from '@date-io/date-fns'; // choose your lib\nimport {\n DatePicker,\n MuiPickersUtilsProvider,\n} from '@material-ui/pickers';\n// import moment from 'moment'\nimport { useForm } from \"react-hook-form\";\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\nimport { Link, useHistory } from 'react-router-dom';\nimport { Info as InfoIcon } from '@material-ui/icons'\nimport moment from 'moment'\nimport { yupResolver } from \"@hookform/resolvers\";\nimport * as yup from \"yup\";\nimport UploadFile from './UploadFile'\n\nimport '../../../App.css'\nimport { connect } from 'react-redux'\nimport { postOutboxMail } from '../../../store/actions/suratKeluar'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n breadcumbs: {\n padding: theme.spacing(4)\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst OutboxMailSchema = yup.object().shape({\n\tno_surat: yup.string().required(\"Nomor Surat harus diisi\"),\n\ttujuan_surat: yup.string().required(\"Tujuan Surat harus diisi\"),\n\tpengolah: yup.string().required(\"Pengolah harus diisi\"),\n\tperihal: yup.string().required(\"Perihal harus diisi\"),\n\t// keterangan: yup.string().required(\"Keterangan harus diisi\"),\n});\n\nconst FormSuratMasuk = props => {\n const classes = useStyles()\n const history = useHistory()\n const {\n postOutboxMail,\n suratKeluar: {\n loadingPostOutboxMail\n }\n } = props\n const { handleSubmit, register, errors } = useForm({\n\t\tresolver: yupResolver(OutboxMailSchema)\n });\n\n const [ formState, setFormState ] = useState({\n values: {}\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const [banner, setBanner] = useState([]);\n const handleChangeFile = event => {\n setBanner(event[0]);\n // let reader = new FileReader();\n // reader.readAsDataURL(event[0]);\n // reader.onload = function(){\n // setB64(reader.result);\n // }\n };\n \n \n const onSubmit = (event) => {\n console.log(formState.values, banner, mailDate.submit);\n postOutboxMail(formState.values, banner, mailDate.submit, history)\n\t}\n\n const submitDefault = moment().format('YYYY-MM-DD')\n\tconst [ mailDate, setMailDate ] = useState({\n submit: submitDefault,\n view: new Date()\n \n\t});\n const handleMailDate = (date) => {\n const changeDate = moment(date).format('YYYY-MM-DD');\n setMailDate(mailDate => ({\n ...mailDate,\n submit: changeDate,\n view: date\n }));\n };\n \n return loadingPostOutboxMail ? \n \n \n \n :\n \n \n \n \n Surat Keluar\n \n \n Form Surat Keluar\n \n \n
\n \n
\n \n Form Entri Surat Keluar \n \n \n
\n
\n \n}\n\nconst mapStateToProps = state => ({\n suratKeluar: state.suratKeluar\n})\n\nexport default connect(mapStateToProps, { postOutboxMail })(FormSuratMasuk)","import * as actions from './actionTypes'\nimport axios from 'axios'\nimport { setAlert } from './alert'\nimport fileDownload from 'js-file-download'\n\nexport const getMemoList = (keyword) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/disposisi?keyword=${keyword}`\n\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_MEMO,\n payload: res.data.data\n })\n\n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_MEMO,\n payload: error\n })\n }\n \n}\n\nexport const downloadDocumentDisposition = (id, no_surat) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/disposisi/${id}/download`\n dispatch({\n type: actions.DOWNLOAD_DOCUMENT_DISPOSITION_START,\n })\n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n loading: true,\n headers: { \n 'Content-Type': 'application/pdf', \n 'Accept' : 'application/json', \n 'Authorization' : `Bearer ${sessionStorage.getItem('access_token')}`\n },\n responseType: 'blob'\n });\n fileDownload(res.data, `dokumen disposisi ${no_surat}.pdf`)\n dispatch({\n type: actions.DOWNLOAD_DOCUMENT_DISPOSITION_SUCCESS,\n payload: res.data\n })\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.DOWNLOAD_DOCUMENT_DISPOSITION_END,\n payload: error\n })\n }\n \n}\n\nexport const dispositionMemo = (id, formData, history, setKeyword, noSurat) => async dispatch => {\n dispatch({\n type: actions.DISPOSITION_MEMO_START,\n })\n\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/surat-masuk/${id}/disposisi`\n const myData = {\n kepada: formData.kepada,\n catatan: formData.catatan,\n isi_disposisi: formData.isi_disposisi \n }\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n data: myData,\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.DISPOSITION_MEMO_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n // setKeyword(noSurat)\n dispatch(getMemoList(''))\n history.push('/memo')\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.DISPOSITION_MEMO_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}","import * as actions from './actionTypes'\nimport axios from 'axios'\nimport { setAlert } from './alert'\n\nexport const getStaffMin = (keyword) => async dispatch => {\n let endpoint = null\n if(keyword){\n endpoint = `${process.env.REACT_APP_BASE_URL}api/paur/user?keyword=${keyword}`\n }else{\n endpoint = `${process.env.REACT_APP_BASE_URL}api/paur/user`\n }\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_STAFF_MIN,\n payload: res.data.data\n })\n\n } catch (error) {\n // dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_STAFF_MIN,\n payload: error\n })\n }\n \n}\n\nexport const getDetailStaffMin = (id, setFormState) => async dispatch => {\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/paur/user/${id}`\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"GET\",\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.GET_DETAIL_STAFF_MIN,\n payload: res.data.data\n })\n setFormState(formState => ({\n ...formState,\n values: {\n name: res.data.data.name,\n email: res.data.data.email,\n username: res.data.data.username,\n }\n }));\n\n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.GET_DETAIL_STAFF_MIN,\n payload: error\n })\n }\n \n}\n\nexport const addStaffMin = (formData, history) => async dispatch => {\n dispatch({\n type: actions.ADD_STAFF_MIN_START,\n })\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/paur/user`\n const myData = new FormData()\n myData.set('name', formData.name)\n myData.set('username', formData.username)\n myData.set('email', formData.email)\n myData.set('password', formData.password)\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n data: myData,\n headers: { \n 'Content-Type': 'multipart/form-data', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.ADD_STAFF_MIN_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n history.push('/manajemen/staff-min')\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.ADD_STAFF_MIN_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}\n\nexport const updateStaffMin = (id, formData, history) => async dispatch => {\n dispatch({\n type: actions.UPDATE_STAFF_MIN_START,\n })\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/paur/user/${id}`\n const myData = new FormData()\n myData.set('name', formData.name)\n myData.set('username', formData.username)\n myData.set('email', formData.email)\n if(formData.password){\n myData.set('password', formData.password)\n }\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"PUT\",\n data: myData,\n headers: { \n 'Content-Type': 'application/x-www-form-urlencoded', \n 'Accept' : 'application/x-www-form-urlencoded', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.UPDATE_STAFF_MIN_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n history.push('/manajemen/staff-min')\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.UPDATE_STAFF_MIN_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}","import React, { Fragment, useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n Button,\n Backdrop,\n CircularProgress,\n TextField,\n MenuItem,\n\tFormControl,\n\tFormLabel,\n\tFormGroup,\n\tFormControlLabel,\n\tCheckbox\n} from '@material-ui/core'\nimport { useForm } from \"react-hook-form\";\n// import { yupResolver } from \"@hookform/resolvers\";\n// import * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n// redux\nimport { connect } from 'react-redux'\nimport { dispositionMemo } from '../../../../store/actions/memo'\nimport { getStaffMin } from '../../../../store/actions/staffMin'\nimport { Skeleton } from '@material-ui/lab';\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n width: '100%',\n },\n chips: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n chip: {\n margin: 2,\n },\n}))\n\n// const DispositionMemo = yup.object().shape({\n// \tkepada: yup.string().required(\"Ditujukan harus diisi\"),\n// });\n\nconst Disposisi = props => {\n const classes = useStyles()\n const history = useHistory()\n const { \n inboxData,\n handleCloseDialogDisposisi,\n handleCloseDetailSurat,\n dispositionMemo,\n dispositionChoiceList,\n getStaffMin,\n setKeyword,\n staffMin: {\n staffMin,\n loadingStaffMin\n },\n memo: {\n loadingDispositionMemo,\n }\n } = props\n const { handleSubmit } = useForm();\n\n const [ formState, setFormState ] = useState({\n values: {}\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const onSubmit = e => {\n console.log(inboxData.disposable_id, formState.values)\n dispositionMemo(inboxData.disposable_id, formState.values, history, setKeyword, inboxData.disposable.no_surat)\n handleCloseDialogDisposisi()\n handleCloseDetailSurat(inboxData)\n }\n\n const bagian = JSON.parse(sessionStorage.getItem('data'))\n\n useEffect(() => {\n // if(bagian.bagian.status_bagian === 'paur'){\n getStaffMin()\n // }\n }, [getStaffMin])\n\n\tconst [ stateWord, setStateWord ] = useState({\n\t\tkelengkapan: false,\n\t\tprosedur: false,\n\t\tlaporkan: false,\n\t\tdatakan: false,\n\t\ttindaklanjut: false,\n\t\twakili: false,\n\t\tlainnya: false\n\t})\n\n\tconst handleChangeWord = (event) => {\n\t\tsetStateWord({ ...stateWord, [event.target.name]: event.target.checked });\n\t};\n\n\tconst { kelengkapan, prosedur, laporkan, datakan, tindaklanjut, wakili, lainnya } = stateWord\n\n return loadingDispositionMemo ?\n \n \n \n :\n \n \n\n \n \n {bagian.bagian.status_bagian === 'karo' || bagian.bagian.status_bagian === 'kabag' ? (\n \n \n {dispositionChoiceList.map(item => (\n {item.nama} \n ))}\n \n \n ):(\n
\n )}\n {/* {bagian.bagian.status_bagian === 'karo' || bagian.bagian.status_bagian === 'kabag' || bagian.bagian.status_bagian === 'paur' ? (\n \n \n \n ):(\n
\n )} */}\n {bagian.bagian.seq === 1 || bagian.bagian.seq === 2 || bagian.bagian.seq === 3 || bagian.bagian.seq === 4 ? (\n \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tAssign responsibility \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\tlabel=\"Cek kelengkapan\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\tlabel=\"Proses sesuai ketentuan dan procedure\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\tlabel=\"Laporkan hasilnya\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\tlabel=\"Datakan/ Filekan\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\tlabel=\"Tindaklanjuti\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\tlabel=\"Wakili\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\tlabel=\"Lainnya\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t{lainnya && (\n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t)}\n \n ):(\n
\n )}\n {bagian.bagian.seq === 3 && (\n <>\n {staffMin !== null && !loadingStaffMin ? (\n \n \n {staffMin.map(item => (\n {item.name} \n ))}\n \n \n ):(\n \n )}\n >\n )}\n \n \n \n \n \n \n \n Submit\n
\n \n \n \n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n memo: state.memo,\n staffMin: state.staffMin\n})\n\nexport default connect(mapStateToProps, { dispositionMemo, getStaffMin })(Disposisi)","import React, {useEffect, useMemo } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {useDropzone} from 'react-dropzone';\n// import Button from '@material-ui/core/Button';\n// import AddIcon from '@material-ui/icons/Add';\n// import { Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n content: {\n // margin: theme.spacing(3)\n },\n thumbsContainer : {\n // display: 'flex',\n // flexDirection: 'row',\n // flexWrap: 'wrap',\n margin: theme.spacing(2)\n },\n \n thumb : {\n display: 'inline-flex',\n borderRadius: 2,\n border: '1px solid #eaeaea',\n marginBottom: 8,\n marginRight: 8,\n width: 'auto',\n height: 'auto',\n padding: 4,\n boxSizing: 'border-box'\n },\n \n thumbInner : {\n display: 'flex',\n minWidth: 0,\n overflow: 'hidden'\n },\n \n img : {\n display: 'block',\n width: '100%',\n height: '100%'\n },\n appBar: {\n position: 'relative',\n },\n title: {\n marginLeft: theme.spacing(2),\n flex: 1,\n },\n paragraph: {\n margin: theme.spacing(2)\n }\n}));\n\nconst baseStyle = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n\tpadding: '20px',\n borderWidth: 2,\n borderRadius: 2,\n borderColor: '#eeeeee',\n borderStyle: 'dashed',\n backgroundColor: '#fafafa',\n color: '#bdbdbd',\n outline: 'none',\n\ttransition: 'border .24s ease-in-out',\n};\n\nconst activeStyle = {\n borderColor: '#2196f3'\n};\n\nconst acceptStyle = {\n borderColor: '#00e676'\n};\n\nconst rejectStyle = {\n borderColor: '#ff1744'\n};\n\nexport default function Dropzone(props) {\n const classes = useStyles();\n\tconst { handleChangeFile } = props;\n\n // const [files, setFiles] = useState([]);\n\n\tconst {\n getRootProps,\n getInputProps,\n acceptedFiles,\n isDragActive,\n isDragAccept,\n isDragReject,\n } = useDropzone({\n accept: 'application/pdf',\n maxFiles: 1,\n multiple: false,\n onDropAccepted: handleChangeFile\n });\n // console.log(files)\n\n const style = useMemo(() => ({\n ...baseStyle,\n ...(isDragActive ? activeStyle : {}),\n ...(isDragAccept ? acceptStyle : {}),\n ...(isDragReject ? rejectStyle : {})\n }), [\n isDragActive,\n isDragReject,\n isDragAccept\n ]);\n \n const files = acceptedFiles.map(file => (\n \n {file.path} - {file.size} bytes\n \n ));\n\n useEffect(() => () => {\n // Make sure to revoke the data uris to avoid memory leaks\n files.forEach(file => URL.revokeObjectURL(file.preview));\n }, [files]);\n\n return (\n \n
\n
\n
Drag 'n' drop some files here, or click to select files
\n
\n
\n\t\t
\n );\n}","import React, { Fragment, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n Button,\n Backdrop,\n CircularProgress,\n TextField,\n InputLabel\n} from '@material-ui/core'\nimport { useForm } from \"react-hook-form\";\n// import { yupResolver } from \"@hookform/resolvers\";\n// import * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n// redux\nimport { connect } from 'react-redux'\nimport { uploadTask } from '../../../../store/actions/uploadTask'\nimport UploadFile from './UploadFile'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n width: '100%',\n },\n chips: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n chip: {\n margin: 2,\n },\n}))\n\nconst UploadTask = props => {\n const classes = useStyles()\n const history = useHistory()\n const { \n inboxData,\n handleCloseDetailSurat,\n uploadTask,\n uploadTask: {\n loadingUploadTask\n }\n } = props\n const { handleSubmit } = useForm();\n\n const [ formState, setFormState ] = useState({\n values: {}\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const [fileTask, setFileTask] = useState([]);\n const handleChangeFile = event => {\n setFileTask(event[0]);\n // let reader = new FileReader();\n // reader.readAsDataURL(event[0]);\n // reader.onload = function(){\n // setB64(reader.result);\n // }\n };\n\n const onSubmit = e => {\n console.log(inboxData.disposable.id, formState.values)\n uploadTask(inboxData.disposable.id, formState.values, fileTask, history)\n handleCloseDetailSurat(inboxData)\n }\n\n // const bagian = JSON.parse(sessionStorage.getItem('data'))\n\n return loadingUploadTask ?\n \n \n \n :\n \n \n \n \n \n \n \n \n Upload File \n \n \n \n \n \n \n \n \n \n Submit\n
\n \n \n \n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n uploadTask: state.uploadTask\n})\n\nexport default connect(mapStateToProps, { uploadTask })(UploadTask)","import * as actions from './actionTypes'\nimport axios from 'axios'\nimport { setAlert } from './alert'\n\nexport const uploadTask = (id, formData, file, history) => async dispatch => {\n dispatch({\n type: actions.UPLOAD_TASK_START,\n })\n\n const endpoint = `${process.env.REACT_APP_BASE_URL}api/staffmin/upload-file/${id}`\n const myData = new FormData()\n myData.set('catatan', formData.catatan)\n myData.set('file', file)\n \n try {\n const res = await axios({\n url: endpoint,\n method: \"POST\",\n data: myData,\n headers: { \n 'Content-Type': 'application/json', \n 'Accept' : 'application/json', \n 'Authorization' : `bearer ${sessionStorage.getItem('access_token')}`\n }\n });\n dispatch({\n type: actions.UPLOAD_TASK_SUCCESS,\n payload: res.data\n })\n dispatch(setAlert(res.data.message, \"success\"))\n history.push('/memo')\n \n } catch (error) {\n dispatch(setAlert(\"Something went wrong\", \"error\"))\n console.log(error)\n dispatch({\n type: actions.UPLOAD_TASK_FAIL,\n payload: error\n })\n // dispatch({\n // payload: { msg: error.response.statusText, status: error.response.status },\n // type: STAGE_ERROR\n // })\n }\n \n}","import React, { Fragment, useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n InputLabel, \n Typography,\n Button,\n Divider,\n Backdrop,\n CircularProgress,\n Dialog,\n DialogContent,\n DialogTitle,\n CardHeader,\n DialogActions\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getDispositionChoice } from '../../../store/actions/suratMasuk'\nimport { downloadDocumentDisposition } from '../../../store/actions/memo'\nimport { getBagian } from '../../../store/actions/bagian'\nimport Disposisi from './Disposisi'\nimport UploadTask from './UploadTask'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n marginTop: theme.spacing(2)\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst DetailSuratMasuk = props => {\n const classes = useStyles()\n const {\n inboxData,\n handleCloseDetailSurat,\n getDispositionChoice,\n getBagian,\n downloadDocumentDisposition,\n setKeyword,\n suratMasuk: {\n loadingDownloadBuktiTerima,\n loadingDispositionChoiceList,\n dispositionChoiceList\n },\n bagian: {\n listBagian\n },\n memo: {\n loadingDownloadDocumentDisposition\n }\n } = props\n\n const handleDownloadDocumentDisposition = e => {\n downloadDocumentDisposition(e.id, e.disposable.no_surat)\n }\n\n // Popup Disposisi\n const [ openDialogDisposisi, setOpenDialogDisposisi ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDialogDisposisi = e => {\n setOpenDialogDisposisi({\n open : true,\n item: e\n })\n }\n\n const handleCloseDialogDisposisi = e => {\n setOpenDialogDisposisi({\n open : false,\n item: e\n })\n }\n // End popup disposisi\n\n useEffect(() => {\n getBagian()\n getDispositionChoice()\n }, [getBagian, getDispositionChoice])\n\n const profileData = JSON.parse(sessionStorage.getItem('data'))\n\n return loadingDownloadBuktiTerima || loadingDownloadDocumentDisposition || loadingDispositionChoiceList ? \n \n \n \n :\n \n \n \n \n \n Tgl Terima/No Agenda: \n \n {moment(inboxData.tanggal_terima).format('DD MMMM yyyy')} | {inboxData.no_agenda}\n \n \n \n Dari: \n \n {inboxData.disposable.sumber_surat}\n \n \n \n Tgl/No Surat: \n \n {moment(inboxData.disposable.tanggal_surat).format('DD MMMM yyyy')} | {inboxData.disposable.no_surat}\n \n \n \n Perihal: \n \n {inboxData.disposable.perihal}\n \n \n \n \n Lampiran Dokumen: \n \n \n Download\n
\n \n \n \n Dokumen Disposisi: \n handleDownloadDocumentDisposition(inboxData)}>\n \n Download\n
\n \n \n \n \n \n \n \n {/* handleDownloadDetailSurat(inboxData)}>\n \n Download Surat\n
\n */}\n \n {sessionStorage.getItem('role') === 'staff' && (\n <>\n {profileData.bagian.seq === 2 && inboxData.disposable.status_surat.id === 1 ? (\n \n handleOpenDialogDisposisi(inboxData)}>\n \n Disposisi\n
\n \n \n ):(\n <>\n {profileData.bagian.seq === 3 && inboxData.disposable.status_surat.id === 2 && (\n \n handleOpenDialogDisposisi(inboxData)}>\n \n Disposisi\n
\n \n \n )}\n {/* :(\n <>\n {profileData.bagian.seq === 4 && inboxData.disposable.status_surat.id === 3 ? (\n \n handleOpenDialogDisposisi(inboxData)}>\n \n Disposisi\n
\n \n \n ):(\n
\n )}\n >\n )} */}\n >\n )}\n >\n )}\n \n \n \n {profileData.bagian.seq === 4 && inboxData.disposable.status === 3 && (\n \n \n \n \n \n \n )}\n handleCloseDialogDisposisi(openDialogDisposisi.item)}\n >\n \n \n Disposisi surat dengan nomor surat ({inboxData.disposable.no_surat})\n \n \n \n \n \n \n handleCloseDialogDisposisi(openDialogDisposisi.item)} color=\"primary\">\n Tutup\n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk,\n bagian: state.bagian,\n memo: state.memo\n})\n\nexport default connect(\n mapStateToProps, \n { \n getBagian, \n getDispositionChoice, \n downloadDocumentDisposition \n }\n)(DetailSuratMasuk)","import React, { useState, forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { lighten, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Card from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { CardContent, Dialog, DialogTitle, DialogContent, CardHeader, Paper, Divider, InputBase, DialogActions, Button } from '@material-ui/core';\nimport DetailMemo from '../DetailMemo'\nimport { Link as RouterLink } from 'react-router-dom'\nimport SearchIcon from '@material-ui/icons/Search'\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('123/123/123', 305, '20 November 2020', 67, 4.3),\n createData('123/123/124', 452, '20 November 2020', 51, 4.9),\n createData('123/123/125', 262, '20 November 2020', 24, 6.0),\n createData('123/123/126', 159, '20 November 2020', 24, 4.0),\n createData('123/123/127', 356, '20 November 2020', 49, 3.9),\n createData('123/123/128', 408, '20 November 2020', 87, 6.5),\n createData('123/123/129', 237, '20 November 2020', 37, 4.3),\n createData('123/123/130', 375, '20 November 2020', 94, 0.0),\n createData('123/123/131', 518, '20 November 2020', 65, 7.0),\n createData('123/123/132', 392, '20 November 2020', 98, 0.0),\n createData('123/123/133', 318, '20 November 2020', 81, 2.0),\n createData('123/123/134', 360, '20 November 2020', 9, 37.0),\n createData('123/123/135', 437, '20 November 2020', 63, 4.0),\n];\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === 'desc'\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst headCells = [\n { id: 'no_agenda', numeric: false, disablePadding: true, label: 'Nomor Agenda' },\n { id: 'no_surat', numeric: true, disablePadding: false, label: 'Nomor Surat' },\n { id: 'tgl_surat', numeric: true, disablePadding: false, label: 'Tanggal Surat' },\n { id: 'status', numeric: true, disablePadding: false, label: 'Status Surat' },\n { id: 'perihal', numeric: true, disablePadding: false, label: 'Perihal' },\n { id: 'actions', numeric: true, disablePadding: false, label: 'Aksi' },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, order, orderBy, onRequestSort } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n \n \n {headCells.map((headCell) => (\n \n \n {headCell.label}\n {orderBy === headCell.id ? (\n \n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n \n ) : null}\n \n \n ))}\n \n \n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\n\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === 'light'\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: '1 1 100%',\n },\n}));\n\nconst EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const { numSelected } = props;\n\n return (\n 0,\n })}\n >\n {numSelected > 0 ? (\n \n {numSelected} selected\n \n ) : (\n \n Nutrition\n \n )}\n\n {numSelected > 0 ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n )}\n \n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: '400px',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n width: '100%'\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n}));\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst TableSuratMasuk = props => {\n const classes = useStyles();\n const {\n memoList,\n page,\n setPage,\n handleChangeSearch,\n setKeyword\n } = props\n const [order, setOrder] = React.useState('asc');\n const [orderBy, setOrderBy] = React.useState('calories');\n const [selected, setSelected] = React.useState([]);\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === 'asc';\n setOrder(isAsc ? 'desc' : 'asc');\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = rows.map((n) => n.name);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n // Dialog Detail Surat\n const [ openDialogDetailSurat, setOpenDialogDetailSurat ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: true,\n item: e\n })\n }\n\n const handleCloseDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: false,\n item: e\n })\n }\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);\n\n return (\n \n
\n \n \n \n \n \n \n \n }\n />\n \n \n \n \n \n {stableSort(memoList, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .filter(e => e.disposable.status !== 6)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleOpenDetailSurat(row)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.id}\n selected={isItemSelected}\n >\n \n {row.disposable.no_agenda}\n \n {row.disposable.no_surat} \n {row.disposable.tanggal_surat} \n {row.disposable.status_surat.status} \n {row.disposable.perihal} \n \n \n \n \n \n \n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n \n )}\n \n
\n \n \n \n \n
handleCloseDetailSurat(openDialogDetailSurat.item)}\n >\n \n {openDialogDetailSurat.item !== null && (\n \n {openDialogDetailSurat.item.perihal}\n \n )}\n \n \n \n \n \n handleCloseDetailSurat(openDialogDetailSurat.item)} color=\"primary\">\n Tutup\n \n \n \n
\n );\n}\n\nexport default TableSuratMasuk\n","import React, { useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { Typography, Grid } from '@material-ui/core'\n\nimport TableMemo from './TableMemo'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getMemoList } from '../../store/actions/memo'\nimport { Skeleton } from '@material-ui/lab'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n title: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n textButton: {\n fontFamily: 'Montserrat',\n color: '#FFFFFF'\n }\n}))\n\nconst Memo = props => {\n const classes = useStyles()\n const {\n getMemoList,\n memo: {\n memoList,\n loadingMemoList\n }\n } = props\n\n const [ keyword, setKeyword ] = useState('')\n const [page, setPage] = useState(0);\n\n const handleChangeSearch = event => {\n setKeyword(event.target.value)\n setPage(0)\n }\n\n useEffect(() => {\n getMemoList(keyword)\n }, [getMemoList, keyword])\n\n return(\n \n
\n \n Memo Surat Masuk \n \n \n
\n \n {!loadingMemoList && memoList !== null ? (\n \n ):(\n \n )}\n \n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n memo : state.memo\n})\n\nexport default connect(mapStateToProps, { getMemoList })(Memo)","import React, { useEffect, Fragment } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { useParams } from 'react-router-dom'\nimport {\n\tBackdrop,\n\tCircularProgress,\n\tGrid,\n\tLink\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getHistory } from '../../../store/actions/suratMasuk'\n\nconst useStyles = makeStyles((theme) => ({\n\troot: {\n\t\tpadding: theme.spacing(4)\n\t},\n\tpaper: {\n\t\tpadding: '6px 16px',\n\t},\n\tsecondaryTail: {\n\t\tbackgroundColor: theme.palette.secondary.main,\n\t},\n\tbackdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n\t},\n\tfontTitle: {\n\t\tfontFamily: 'Montserrat',\n\t\tfontWeight: 700\n\t},\n\tfontText: {\n\t\tfontFamily: 'Montserrat'\n\t}\n}));\n\nconst History = props => {\n\tconst classes = useStyles();\n\tconst params = useParams()\n\tconst {\n\t\tgetHistory,\n\t\tsuratMasuk: {\n\t\t\thistory,\n\t\t\tloadingHistory\n\t\t}\n\t} = props\n\n\tuseEffect(() => {\n\t\tgetHistory(params.id)\n\t}, [ getHistory, params ])\n\n return loadingHistory ? \n\t\n\t\t\t \n\t \n\t:\n\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tHistory Perjalanan Surat\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{history.map(item => (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{moment(item.updated_at).format('DD MMMM YYYY HH:mm')}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.status}\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t{item.historable.perihal && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tPerihal : {item.historable.perihal}\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{item.historable.isi_disposisi && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tIsi Disposisi : {item.historable.isi_disposisi}\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{item.url !== null && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tDownload Hasil Pekerjaan : Download\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t))}\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t
\n\t \n}\n\nconst mapStateToProps = state => ({\n\tsuratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { getHistory })(History)","import React, { useEffect, Fragment } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { useParams } from 'react-router-dom'\nimport {\n\tBackdrop,\n\tCircularProgress,\n\tGrid,\n\tLink\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getHistory } from '../../../store/actions/suratMasuk'\n\nconst useStyles = makeStyles((theme) => ({\n\troot: {\n\t\tpadding: theme.spacing(4)\n\t},\n\tpaper: {\n\t\tpadding: '6px 16px',\n\t},\n\tsecondaryTail: {\n\t\tbackgroundColor: theme.palette.secondary.main,\n\t},\n\tbackdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n\t},\n\tfontTitle: {\n\t\tfontFamily: 'Montserrat',\n\t\tfontWeight: 700\n\t},\n\tfontText: {\n\t\tfontFamily: 'Montserrat'\n\t}\n}));\n\nconst History = props => {\n\tconst classes = useStyles();\n\tconst params = useParams()\n\tconst {\n\t\tgetHistory,\n\t\tsuratMasuk: {\n\t\t\thistory,\n\t\t\tloadingHistory\n\t\t}\n\t} = props\n\n\tuseEffect(() => {\n\t\tgetHistory(params.id)\n\t}, [ getHistory, params ])\n\n\tconsole.log(history)\n\n return loadingHistory ? \n\t\n\t\t\t \n\t \n\t:\n\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tHistory Perjalanan Surat\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{history.map(item => (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{moment(item.updated_at).format('DD MMMM YYYY HH:mm')}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.status}\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t{item.historable.perihal && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tPerihal : {item.historable.perihal}\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{item.historable.isi_disposisi && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tIsi Disposisi : {item.historable.isi_disposisi}\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{item.url !== null && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tDownload Hasil Pekerjaan : Download\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t))}\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t
\n\t \n}\n\nconst mapStateToProps = state => ({\n\tsuratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { getHistory })(History)","import React, { Fragment, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n Button,\n Backdrop,\n CircularProgress,\n TextField,\n MenuItem,\n} from '@material-ui/core'\nimport { useForm } from \"react-hook-form\";\n// import { yupResolver } from \"@hookform/resolvers\";\n// import * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n// redux\nimport { connect } from 'react-redux'\nimport { dispositionInboxMail } from '../../../../store/actions/suratMasuk'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n width: '100%',\n },\n chips: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n chip: {\n margin: 2,\n },\n}))\n\n// const DispositionInboxMail = yup.object().shape({\n// \tkepada: yup.string().required(\"Ditujukan harus diisi\"),\n// });\n\nconst Disposisi = props => {\n const classes = useStyles()\n const history = useHistory()\n const { \n inboxData,\n dispositionInboxMail,\n dispositionChoiceList,\n handleCloseDetailSurat,\n handleCloseDialogDisposisi,\n suratMasuk: {\n loadingDispositionInboxMail\n }\n } = props\n const { handleSubmit } = useForm();\n\n const [ formState, setFormState ] = useState({\n values: {}\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const onSubmit = e => {\n console.log(inboxData.id, formState.values)\n dispositionInboxMail(inboxData.id, formState.values, history)\n handleCloseDialogDisposisi()\n handleCloseDetailSurat(inboxData)\n }\n\n return loadingDispositionInboxMail ?\n \n \n \n :\n \n \n\n \n \n \n \n {dispositionChoiceList.map(item => (\n {item.nama} \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n
\n \n \n \n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { dispositionInboxMail })(Disposisi)","import React, { Fragment, useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n InputLabel, \n Typography,\n Button,\n Divider,\n Backdrop,\n CircularProgress,\n Dialog,\n DialogContent,\n DialogTitle\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getDispositionChoice } from '../../../store/actions/suratMasuk'\nimport { getBagian } from '../../../store/actions/bagian'\nimport Disposisi from './Disposisi'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst DetailSuratMasuk = props => {\n const classes = useStyles()\n const {\n inboxData,\n getDispositionChoice,\n getBagian,\n handleCloseDetailSurat,\n suratMasuk: {\n loadingDownloadBuktiTerima,\n loadingDownloadDetailSurat,\n loadingDispositionChoiceList,\n dispositionChoiceList\n },\n bagian: {\n listBagian\n }\n } = props\n\n const [ openDialogDisposisi, setOpenDialogDisposisi ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDialogDisposisi = e => {\n setOpenDialogDisposisi({\n open : true,\n item: e\n })\n }\n\n const handleCloseDialogDisposisi = e => {\n setOpenDialogDisposisi({\n open : false,\n item: e\n })\n }\n\n useEffect(() => {\n getBagian()\n getDispositionChoice()\n }, [getBagian, getDispositionChoice])\n\n return loadingDownloadBuktiTerima || loadingDownloadDetailSurat || loadingDispositionChoiceList ? \n \n \n \n :\n \n \n \n \n \n Tgl Terima/No Agenda: \n \n {moment(inboxData.tanggal_terima).format('DD MMMM yyyy')} | {inboxData.no_agenda}\n \n \n \n Dari: \n \n {inboxData.sumber_surat}\n \n \n \n Tgl/No Surat: \n \n {moment(inboxData.tanggal_surat).format('DD MMMM yyyy')} | {inboxData.no_surat}\n \n \n \n Perihal: \n \n {inboxData.perihal}\n \n \n \n \n Lampiran Dokumen: \n \n \n Download\n
\n \n \n \n \n \n \n \n {/* handleDownloadDetailSurat(inboxData)}>\n \n Download Surat\n
\n */}\n \n {sessionStorage.getItem('role') === 'manager' && (\n <>\n {inboxData.status_surat.id === 1 && (\n \n handleOpenDialogDisposisi(inboxData)}>\n \n Disposisi\n
\n \n \n )}\n >\n )}\n \n \n \n handleCloseDialogDisposisi(openDialogDisposisi.item)}\n >\n \n \n Disposisi surat dengan nomor surat ({inboxData.no_surat})\n \n \n \n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk,\n bagian: state.bagian\n})\n\nexport default connect(mapStateToProps, { getBagian, getDispositionChoice })(DetailSuratMasuk)","import React, { useState, forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { lighten, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Card from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { CardHeader, CardContent, Dialog, DialogTitle, DialogContent, Paper, Divider, InputBase, Link } from '@material-ui/core';\nimport DetailSuratMasuk from '../DetailSuratMasuk'\nimport SearchIcon from '@material-ui/icons/Search'\nimport { Link as RouterLink } from 'react-router-dom'\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('123/123/123', 305, '20 November 2020', 67, 4.3),\n createData('123/123/124', 452, '20 November 2020', 51, 4.9),\n createData('123/123/125', 262, '20 November 2020', 24, 6.0),\n createData('123/123/126', 159, '20 November 2020', 24, 4.0),\n createData('123/123/127', 356, '20 November 2020', 49, 3.9),\n createData('123/123/128', 408, '20 November 2020', 87, 6.5),\n createData('123/123/129', 237, '20 November 2020', 37, 4.3),\n createData('123/123/130', 375, '20 November 2020', 94, 0.0),\n createData('123/123/131', 518, '20 November 2020', 65, 7.0),\n createData('123/123/132', 392, '20 November 2020', 98, 0.0),\n createData('123/123/133', 318, '20 November 2020', 81, 2.0),\n createData('123/123/134', 360, '20 November 2020', 9, 37.0),\n createData('123/123/135', 437, '20 November 2020', 63, 4.0),\n];\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === 'desc'\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst headCells = [\n { id: 'no_agenda', numeric: false, disablePadding: true, label: 'Nomor Agenda' },\n { id: 'no_surat', numeric: true, disablePadding: false, label: 'Nomor Surat' },\n { id: 'tgl_surat', numeric: true, disablePadding: false, label: 'Tanggal Surat' },\n { id: 'perihal', numeric: true, disablePadding: false, label: 'Perihal' },\n { id: 'status', numeric: true, disablePadding: false, label: 'Status Surat' },\n { id: 'file', numeric: true, disablePadding: false, label: 'File' },\n { id: 'action', numeric: true, disablePadding: false, label: 'Aksi' },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, order, orderBy, onRequestSort } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n \n \n {headCells.map((headCell) => (\n \n \n {headCell.label}\n {orderBy === headCell.id ? (\n \n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n \n ) : null}\n \n \n ))}\n \n \n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\n\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === 'light'\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: '1 1 100%',\n },\n}));\n\nconst EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const { numSelected } = props;\n\n return (\n 0,\n })}\n >\n {numSelected > 0 ? (\n \n {numSelected} selected\n \n ) : (\n \n Nutrition\n \n )}\n\n {numSelected > 0 ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n )}\n \n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: '400px',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n width: '100%'\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n}));\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst TableSuratMasuk = props => {\n const classes = useStyles();\n const {\n inboxMailDone,\n page,\n setPage,\n handleChangeSearch\n } = props\n const [order, setOrder] = React.useState('asc');\n const [orderBy, setOrderBy] = React.useState('calories');\n const [selected, setSelected] = React.useState([]);\n \n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === 'asc';\n setOrder(isAsc ? 'desc' : 'asc');\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = rows.map((n) => n.name);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n // Dialog Detail Surat\n const [ openDialogDetailSurat, setOpenDialogDetailSurat ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: true,\n item: e\n })\n }\n\n const handleCloseDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: false,\n item: e\n })\n }\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);\n\n return (\n \n
\n \n \n \n \n \n \n \n }\n />\n \n \n \n \n \n {stableSort(inboxMailDone, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleOpenDetailSurat(row)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.name}\n selected={isItemSelected}\n >\n \n {row.no_agenda}\n \n {row.no_surat} \n {row.tanggal_surat} \n {row.perihal} \n {row.status_surat.status} \n \n Download File\n \n \n \n \n \n \n \n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n \n )}\n \n
\n \n \n \n \n
handleCloseDetailSurat(openDialogDetailSurat.item)}\n >\n \n {openDialogDetailSurat.item !== null && (\n \n {openDialogDetailSurat.item.perihal}\n \n )}\n \n \n \n \n \n
\n );\n}\n\nexport default TableSuratMasuk\n","import React, { useState, useEffect } from 'react'\nimport 'date-fns'\nimport { makeStyles } from '@material-ui/styles'\nimport {\n Typography,\n Grid,\n Paper,\n} from '@material-ui/core'\nimport DateFnsUtils from '@date-io/date-fns'; // choose your lib\nimport {\n DatePicker,\n MuiPickersUtilsProvider,\n} from '@material-ui/pickers';\nimport moment from 'moment';\nimport Skeleton from '@material-ui/lab/Skeleton'\n\nimport TableSuratMasuk from './TableSuratMasuk'\n\nimport { connect } from 'react-redux'\nimport { getInboxMailDone } from '../../store/actions/suratMasuk'\n\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n row: {\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n btnSearch: {\n backgroundColor: '#FF9300',\n '&:hover' : {\n backgroundColor: '#FFA938'\n },\n color: '#FFFFFF',\n height: 'auto'\n },\n extendedIcon: {\n marginRight: theme.spacing(1),\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: 'auto',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n fab: {\n position: 'fixed',\n bottom: theme.spacing(4),\n right: theme.spacing(2),\n },\n text: {\n fontFamily: 'Montserrat'\n }\n}))\n\nconst Report = props => {\n const classes = useStyles()\n const [selectedDate ] = useState(new Date());\n const {\n getInboxMailDone,\n suratMasuk: {\n inboxMailDone,\n loadingInboxMailDone\n }\n } = props\n\n const submitDefault = moment().subtract(7, 'd').format('YYYY-MM-DD');\n const submitDefaultEndDate = moment({}).format('YYYY-MM-DD');\n const [ startDate, setStartDate ] = useState({\n submit: {\n submit: submitDefault\n },\n view: {\n view: moment().subtract(7, 'd').format('YYYY-MM-DD')\n }\n });\n const handleStartDate = (date) => {\n const changeDate = moment(date).format('YYYY-MM-DD');\n setStartDate(startDate => ({\n ...startDate,\n submit: {\n submit: changeDate\n },\n view: {\n view: date\n }\n }));\n };\n\n const [ endDate, setEndDate ] = useState({\n submit: {\n submit: submitDefaultEndDate\n },\n view: {selectedDate}\n });\n const handleEndDate = (date) => {\n const all = moment(date).format('YYYY-MM-DD');\n setEndDate(endDate => ({\n ...endDate,\n submit: {\n submit: all\n },\n view: {\n view: date\n }\n }));\n };\n\n const [ keyword, setKeyword ] = useState('')\n const [page, setPage] = useState(0);\n\n const handleChangeSearch = event => {\n setKeyword(event.target.value)\n setPage(0)\n }\n\n useEffect(() => {\n getInboxMailDone(keyword, startDate.submit.submit, endDate.submit.submit)\n }, [getInboxMailDone, keyword, startDate, endDate])\n\n return(\n \n
\n \n \n Laporan Surat Masuk \n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n \n {!loadingInboxMailDone && inboxMailDone !== null ? (\n \n ):(\n \n )}\n \n \n
\n
\n )\n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { getInboxMailDone })(Report)","import React, { useEffect, Fragment } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { useParams } from 'react-router-dom'\nimport {\n\tBackdrop,\n\tCircularProgress,\n\tGrid,\n\tLink\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getHistory } from '../../../store/actions/suratMasuk'\n\nconst useStyles = makeStyles((theme) => ({\n\troot: {\n\t\tpadding: theme.spacing(4)\n\t},\n\tpaper: {\n\t\tpadding: '6px 16px',\n\t},\n\tsecondaryTail: {\n\t\tbackgroundColor: theme.palette.secondary.main,\n\t},\n\tbackdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n\t},\n\tfontTitle: {\n\t\tfontFamily: 'Montserrat',\n\t\tfontWeight: 700\n\t},\n\tfontText: {\n\t\tfontFamily: 'Montserrat'\n\t}\n}));\n\nconst History = props => {\n\tconst classes = useStyles();\n\tconst params = useParams()\n\tconst {\n\t\tgetHistory,\n\t\tsuratMasuk: {\n\t\t\thistory,\n\t\t\tloadingHistory\n\t\t}\n\t} = props\n\n\tuseEffect(() => {\n\t\tgetHistory(params.id)\n\t}, [ getHistory, params ])\n\n\tconsole.log(history)\n\n return loadingHistory ? \n\t\n\t\t\t \n\t \n\t:\n\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tHistory Perjalanan Surat\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{history.map(item => (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{moment(item.updated_at).format('DD MMMM YYYY HH:mm')}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.status}\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t{item.historable.perihal && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tPerihal : {item.historable.perihal}\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{item.historable.isi_disposisi && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tIsi Disposisi : {item.historable.isi_disposisi}\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{item.url && (\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\tDownload Hasil Pekerjaan : Download\n\t\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t))}\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t
\n\t \n}\n\nconst mapStateToProps = state => ({\n\tsuratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { getHistory })(History)","import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { lighten, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Card from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { CardHeader, CardContent, Paper, Divider, InputBase } from '@material-ui/core';\nimport { Link as RouterLink } from 'react-router-dom'\nimport SearchIcon from '@material-ui/icons/Search'\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === 'desc'\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst headCells = [\n { id: 'name', numeric: false, disablePadding: false, label: 'Name' },\n { id: 'email', numeric: false, disablePadding: false, label: 'Email' },\n { id: 'username', numeric: false, disablePadding: false, label: 'Username' },\n { id: 'action', numeric: false, disablePadding: false, label: 'Aksi' },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, order, orderBy, onRequestSort } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n \n \n {headCells.map((headCell) => (\n \n \n {headCell.label}\n {orderBy === headCell.id ? (\n \n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n \n ) : null}\n \n \n ))}\n \n \n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\n\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === 'light'\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: '1 1 100%',\n },\n}));\n\nconst EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const { numSelected } = props;\n\n return (\n 0,\n })}\n >\n {numSelected > 0 ? (\n \n {numSelected} selected\n \n ) : (\n \n Nutrition\n \n )}\n\n {numSelected > 0 ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n )}\n \n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: '400px',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n width: '100%'\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n}));\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst TableStaffMin = props => {\n const classes = useStyles();\n const {\n staffMin,\n page,\n setPage,\n handleChangeSearch,\n } = props\n const [order, setOrder] = React.useState('asc');\n const [orderBy, setOrderBy] = React.useState('calories');\n const [selected, setSelected] = React.useState([]);\n \n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === 'asc';\n setOrder(isAsc ? 'desc' : 'asc');\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = staffMin.map((n) => n.name);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, staffMin.length - page * rowsPerPage);\n\n return (\n \n
\n \n \n \n \n \n \n \n }\n />\n \n \n \n \n \n {stableSort(staffMin, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .filter(e => e.status !== 6)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n \n \n {row.name}\n \n \n {row.email}\n \n {row.username} \n \n \n \n \n \n \n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n \n )}\n \n
\n \n \n \n \n {/*
handleCloseDetailSurat(openDialogDetailSurat.item)}\n >\n \n {openDialogDetailSurat.item !== null && (\n \n {openDialogDetailSurat.item.perihal}\n \n )}\n \n \n \n \n */}\n
\n );\n}\n\nexport default TableStaffMin\n","import React, { forwardRef, useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { Typography, Grid, Button, DialogContent, Dialog } from '@material-ui/core'\nimport { Link as RouterLink } from 'react-router-dom'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getStaffMin } from '../../store/actions/staffMin'\nimport { Skeleton } from '@material-ui/lab'\n\n// Component\nimport TableStaffMin from './TableStaffMin'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n title: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n textButton: {\n fontFamily: 'Montserrat',\n color: '#FFFFFF'\n }\n}))\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst StaffMin = props => {\n const classes = useStyles()\n const {\n getStaffMin,\n staffMin: {\n staffMin,\n loadingStaffMin\n }\n } = props\n\n const [ openDialogEdit, setOpenDialogEdit ] = useState({\n open: false,\n object: null\n })\n \n const handleOpenDialogEdit = e => {\n setOpenDialogEdit({\n open: true,\n object : e\n })\n }\n\n const handleCloseDialogEdit = e => {\n setOpenDialogEdit({\n open: false,\n object : e\n })\n }\n\n const [ keyword, setKeyword ] = useState('')\n const [page, setPage] = useState(0);\n\n const handleChangeSearch = event => {\n setKeyword(event.target.value)\n setPage(0)\n }\n\n useEffect(() => {\n getStaffMin(keyword)\n }, [getStaffMin, keyword])\n\n return(\n \n
\n \n Staff Min \n \n \n \n \n + Buat Staff Baru\n
\n \n \n \n
\n \n {!loadingStaffMin && staffMin !== null ? (\n \n ):(\n \n )}\n \n \n
handleCloseDialogEdit(openDialogEdit.object)}\n > \n \n {/* */}\n \n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n staffMin : state.staffMin\n})\n\nexport default connect(mapStateToProps, { getStaffMin })(StaffMin)","import React, { useState, Fragment } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardContent, \n TextField, \n Grid, \n Typography, \n Button,\n Backdrop,\n CircularProgress,\n} from '@material-ui/core'\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\nimport {Link} from 'react-router-dom';\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers\";\nimport * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n\nimport { connect } from 'react-redux'\nimport { addStaffMin } from '../../../store/actions/staffMin'\n\nimport '../../../App.css'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n breadcumbs: {\n marginTop: theme.spacing(2),\n paddingLeft: theme.spacing(4)\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst StaffMinSchema = yup.object().shape({\n\tusername: yup.string().required(\"Username harus diisi\"),\n\temail: yup.string().required(\"Email harus diisi\"),\n\tpassword: yup.string().required(\"Password harus diisi\"),\n});\n\nconst CreateStaffMin = props => {\n const classes = useStyles()\n const {\n addStaffMin,\n staffMin: {\n loadingCreateStaffMin\n }\n } = props\n const history = useHistory()\n const { register, handleSubmit, errors } = useForm({\n\t\tresolver: yupResolver(StaffMinSchema)\n });\n\n const [ formState, setFormState ] = useState({\n values: {}\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n \n \n const onSubmit = (event) => {\n // console.log(formState.values, banner, mailDate.submit, accDate.submit);\n addStaffMin(formState.values, history)\n\t}\n \n return loadingCreateStaffMin ? \n \n \n \n :\n \n \n \n \n Staff Min\n \n \n Form Staff Min\n \n \n
\n \n \n \n Form Staff Min \n \n \n \n
\n \n}\n\nconst mapStateToProps = state => ({\n staffMin: state.staffMin\n})\n\nexport default connect(mapStateToProps, { addStaffMin })(CreateStaffMin)","import React, { useState, Fragment, useEffect } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardContent, \n TextField, \n Grid, \n Typography, \n Button,\n Backdrop,\n CircularProgress,\n} from '@material-ui/core'\nimport Breadcrumbs from '@material-ui/core/Breadcrumbs';\nimport { Link, useParams } from 'react-router-dom';\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers\";\nimport * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n\nimport { connect } from 'react-redux'\nimport { updateStaffMin, getDetailStaffMin } from '../../../store/actions/staffMin'\n\nimport '../../../App.css'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n breadcumbs: {\n marginTop: theme.spacing(2),\n paddingLeft: theme.spacing(4)\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst StaffMinSchema = yup.object().shape({\n\tusername: yup.string().required(\"Username harus diisi\"),\n\temail: yup.string().required(\"Email harus diisi\"),\n});\n\nconst EditStaffMin = props => {\n const classes = useStyles()\n const params = useParams()\n const {\n updateStaffMin,\n getDetailStaffMin,\n staffMin: {\n loadingDetailStaffMin,\n loadingEditStaffMin\n }\n } = props\n const history = useHistory()\n const { register, handleSubmit, errors } = useForm({\n\t\tresolver: yupResolver(StaffMinSchema)\n });\n\n const [ formState, setFormState ] = useState({\n values: {}\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n \n \n const onSubmit = () => {\n // console.log(formState.values, banner, mailDate.submit, accDate.submit);\n updateStaffMin(params.id, formState.values, history)\n }\n \n useEffect(() => {\n getDetailStaffMin(params.id, setFormState)\n }, [getDetailStaffMin, params, setFormState])\n\n console.log(formState.values)\n\n return loadingEditStaffMin || loadingDetailStaffMin ? \n \n \n \n :\n \n \n \n \n Staff Min\n \n \n Form Staff Min\n \n \n
\n \n \n \n Form Staff Min \n \n \n \n
\n \n}\n\nconst mapStateToProps = state => ({\n staffMin: state.staffMin\n})\n\nexport default connect(mapStateToProps, { updateStaffMin, getDetailStaffMin })(EditStaffMin)","import React, { Fragment, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n InputLabel, \n Typography,\n Button,\n Divider,\n Backdrop,\n CircularProgress,\n Dialog,\n DialogContent,\n DialogTitle,\n DialogActions\n} from '@material-ui/core'\nimport moment from 'moment'\nimport { useHistory } from 'react-router-dom'\n\n// redux\nimport { connect } from 'react-redux'\nimport { accOutboxMail } from '../../../store/actions/suratKeluar'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst DetailSuratKeluar = props => {\n const classes = useStyles()\n const history = useHistory()\n const {\n outboxMail,\n accOutboxMail,\n handleCloseDetailSurat,\n setKeyword,\n suratKeluar: {\n loadingOutboxAcc,\n },\n } = props\n\n const [ openDialogConfirmation, setOpenDialogConfirmation ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDialogConfirmation = e => {\n setOpenDialogConfirmation({\n open : true,\n item: e\n })\n }\n\n const handleCloseDialogConfirmation = e => {\n setOpenDialogConfirmation({\n open : false,\n item: e\n })\n }\n\n const onSubmit = event => {\n accOutboxMail(event.id, setKeyword, outboxMail.no_surat, history)\n handleCloseDetailSurat(outboxMail)\n handleCloseDialogConfirmation()\n }\n\n return loadingOutboxAcc ? \n \n \n \n :\n \n \n \n \n \n Tgl Terima \n \n {moment(outboxMail.tanggal_terima).format('DD MMMM yyyy')}\n \n \n \n Tgl/No Surat: \n \n {moment(outboxMail.tanggal_surat).format('DD MMMM yyyy')} | {outboxMail.no_surat}\n \n \n \n Perihal: \n \n {outboxMail.perihal}\n \n \n \n Pengolah: \n \n {outboxMail.pengolah}\n \n \n \n \n Lampiran Dokumen: \n \n \n Download\n
\n \n \n \n \n \n \n {sessionStorage.getItem('role') === 'manager' && (\n <>\n \n handleOpenDialogConfirmation(outboxMail)}>\n \n Konfirmasi Surat\n
\n \n \n >\n )}\n \n \n \n handleCloseDialogConfirmation(openDialogConfirmation.item)}\n >\n \n \n Konfirmasi Surat Keluar\n \n \n \n \n Apakah anda yakin untuk mengkonfirmasi surat ini?\n \n \n \n handleCloseDialogConfirmation(openDialogConfirmation.item)}>\n Tidak\n \n onSubmit(openDialogConfirmation.item)}>\n Ya\n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n suratKeluar: state.suratKeluar,\n})\n\nexport default connect(mapStateToProps, { accOutboxMail })(DetailSuratKeluar)","import React, { useState, forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { lighten, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Card from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport SearchIcon from '@material-ui/icons/Search'\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { CardHeader, CardContent, Dialog, DialogTitle, DialogContent, Paper, Divider, InputBase } from '@material-ui/core';\nimport DetailSuratKeluar from '../DetailSuratKeluar'\nimport { Link as RouterLink } from 'react-router-dom'\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === 'desc'\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst headCells = [\n { id: 'no_surat', disablePadding: false, label: 'Nomor Surat' },\n { id: 'tgl_surat', disablePadding: false, label: 'Tanggal Surat' },\n { id: 'perihal', disablePadding: false, label: 'Perihal' },\n { id: 'tujuan_surat', disablePadding: false, label: 'Tujuan Surat' },\n { id: 'pengolah', disablePadding: false, label: 'Pengolah' },\n { id: 'status', disablePadding: false, label: 'Status' },\n { id: 'action', disablePadding: false, label: 'Aksi' },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, order, orderBy, onRequestSort } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n \n \n {headCells.map((headCell) => (\n \n \n {headCell.label}\n {orderBy === headCell.id ? (\n \n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n \n ) : null}\n \n \n ))}\n \n \n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\n\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === 'light'\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: '1 1 100%',\n },\n}));\n\nconst EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const { numSelected } = props;\n\n return (\n 0,\n })}\n >\n {numSelected > 0 ? (\n \n {numSelected} selected\n \n ) : (\n \n Nutrition\n \n )}\n\n {numSelected > 0 ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n )}\n \n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: '400px',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n width: '100%'\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n}));\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst TableSuratKeluar = props => {\n const classes = useStyles();\n const [order, setOrder] = React.useState('asc');\n const [orderBy, setOrderBy] = React.useState('calories');\n const [selected, setSelected] = React.useState([]);\n // const [page, setPage] = React.useState(0);\n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const {\n outboxMail,\n setKeyword,\n keyword,\n page,\n setPage,\n handleChangeSearch,\n } = props\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === 'asc';\n setOrder(isAsc ? 'desc' : 'asc');\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = outboxMail.map((n) => n.name);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n // Dialog Detail Surat\n const [ openDialogDetailSurat, setOpenDialogDetailSurat ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: true,\n item: e\n })\n }\n\n const handleCloseDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: false,\n item: e\n })\n }\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, outboxMail.length - page * rowsPerPage);\n\n return (\n \n
\n \n \n \n \n \n \n \n }\n />\n \n \n \n \n \n {stableSort(outboxMail, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.name}\n selected={isItemSelected}\n >\n \n {row.no_surat}\n \n {row.tanggal_surat} \n {row.perihal} \n {row.tujuan_surat} \n {row.pengolah} \n {row.status_surat.status} \n \n \n \n \n \n \n \n handleOpenDetailSurat(row)}>\n \n \n \n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n \n )}\n \n
\n \n \n \n \n
handleCloseDetailSurat(openDialogDetailSurat.item)}\n >\n \n {openDialogDetailSurat.item !== null && (\n \n {openDialogDetailSurat.item.perihal}\n \n )}\n \n \n \n \n \n
\n );\n}\n\nexport default TableSuratKeluar","import React, { useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { Typography, Grid } from '@material-ui/core'\n\nimport { connect } from 'react-redux'\nimport { getOutboxMail } from '../../store/actions/suratKeluar'\n\nimport TableSuratKeluar from './TableSuratKeluar'\nimport { Skeleton } from '@material-ui/lab'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n title: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n textButton: {\n fontFamily: 'Montserrat',\n color: '#FFFFFF'\n }\n}))\n\nconst SuratKeluar = props => {\n const classes = useStyles()\n const {\n getOutboxMail,\n suratKeluar: {\n outboxMail,\n loadingOutboxMail\n }\n } = props\n\n const [ keyword, setKeyword ] = useState('')\n const [page, setPage] = useState(0);\n\n const handleChangeSearch = event => {\n setKeyword(event.target.value)\n setPage(0)\n }\n\n useEffect(() => {\n getOutboxMail(keyword)\n }, [ getOutboxMail, keyword ])\n\n return(\n \n
\n \n Memo Surat Keluar \n \n \n
\n \n {!loadingOutboxMail && outboxMail !== null ?(\n \n ):(\n \n )}\n \n \n
\n )\n}\n\nconst mapStateToProps = state => ({\n suratKeluar: state.suratKeluar\n})\n\nexport default connect(mapStateToProps, { getOutboxMail })(SuratKeluar)","import React, { useEffect, Fragment } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { useParams } from 'react-router-dom'\nimport {\n\tBackdrop,\n\tCircularProgress,\n\tGrid,\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getHistory } from '../../../store/actions/suratKeluar'\n\nconst useStyles = makeStyles((theme) => ({\n\troot: {\n\t\tpadding: theme.spacing(4)\n\t},\n\tpaper: {\n\t\tpadding: '6px 16px',\n\t},\n\tsecondaryTail: {\n\t\tbackgroundColor: theme.palette.secondary.main,\n\t},\n\tbackdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n\t},\n\tfontTitle: {\n\t\tfontFamily: 'Montserrat',\n\t\tfontWeight: 700\n\t},\n\tfontText: {\n\t\tfontFamily: 'Montserrat'\n\t}\n}));\n\nconst History = props => {\n\tconst classes = useStyles();\n\tconst params = useParams()\n\tconst {\n\t\tgetHistory,\n\t\tsuratKeluar: {\n\t\t\thistoryOutboxMail,\n\t\t\tloadingHistoryOutboxMail\n\t\t}\n\t} = props\n\n\tuseEffect(() => {\n\t\tgetHistory(params.id)\n\t}, [ getHistory, params ])\n\n return loadingHistoryOutboxMail ? \n\t\n\t\t\t \n\t \n\t:\n\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tHistory Perjalanan Surat\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{historyOutboxMail.map(item => (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{moment(item.updated_at).format('DD MMMM YYYY HH:mm')}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.status}\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t))}\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t
\n\t \n}\n\nconst mapStateToProps = state => ({\n\tsuratKeluar: state.suratKeluar\n})\n\nexport default connect(mapStateToProps, { getHistory })(History)","import React, { useEffect, Fragment } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { useParams } from 'react-router-dom'\nimport {\n\tBackdrop,\n\tCircularProgress,\n\tGrid,\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getHistory } from '../../../store/actions/suratKeluar'\n\nconst useStyles = makeStyles((theme) => ({\n\troot: {\n\t\tpadding: theme.spacing(4)\n\t},\n\tpaper: {\n\t\tpadding: '6px 16px',\n\t},\n\tsecondaryTail: {\n\t\tbackgroundColor: theme.palette.secondary.main,\n\t},\n\tbackdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n\t},\n\tfontTitle: {\n\t\tfontFamily: 'Montserrat',\n\t\tfontWeight: 700\n\t},\n\tfontText: {\n\t\tfontFamily: 'Montserrat'\n\t}\n}));\n\nconst History = props => {\n\tconst classes = useStyles();\n\tconst params = useParams()\n\tconst {\n\t\tgetHistory,\n\t\tsuratKeluar: {\n\t\t\thistoryOutboxMail,\n\t\t\tloadingHistoryOutboxMail\n\t\t}\n\t} = props\n\n\tuseEffect(() => {\n\t\tgetHistory(params.id)\n\t}, [ getHistory, params ])\n\n return loadingHistoryOutboxMail ? \n\t\n\t\t\t \n\t \n\t:\n\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tHistory Perjalanan Surat\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{historyOutboxMail.map(item => (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{moment(item.updated_at).format('DD MMMM YYYY HH:mm')}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.status}\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t))}\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t
\n\t \n}\n\nconst mapStateToProps = state => ({\n\tsuratKeluar: state.suratKeluar\n})\n\nexport default connect(mapStateToProps, { getHistory })(History)","import React, { Fragment, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n Button,\n Backdrop,\n CircularProgress,\n TextField,\n MenuItem,\n} from '@material-ui/core'\nimport { useForm } from \"react-hook-form\";\n// import { yupResolver } from \"@hookform/resolvers\";\n// import * as yup from \"yup\";\nimport { useHistory } from 'react-router-dom'\n// redux\nimport { connect } from 'react-redux'\nimport { dispositionInboxMail } from '../../../../store/actions/suratMasuk'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n width: '100%',\n },\n chips: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n chip: {\n margin: 2,\n },\n}))\n\n// const DispositionInboxMail = yup.object().shape({\n// \tkepada: yup.string().required(\"Ditujukan harus diisi\"),\n// });\n\nconst Disposisi = props => {\n const classes = useStyles()\n const history = useHistory()\n const { \n inboxData,\n dispositionInboxMail,\n dispositionChoiceList,\n handleCloseDetailSurat,\n handleCloseDialogDisposisi,\n suratMasuk: {\n loadingDispositionInboxMail\n }\n } = props\n const { handleSubmit } = useForm();\n\n const [ formState, setFormState ] = useState({\n values: {}\n })\n\n const handleChange = event => {\n event.persist();\n \n setFormState(formState => ({\n ...formState,\n values: {\n ...formState.values,\n [event.target.name]: \n event.target.type === 'checkbox'\n ? event.target.checked\n : event.target.value\n }\n }));\n };\n\n const onSubmit = e => {\n console.log(inboxData.id, formState.values)\n dispositionInboxMail(inboxData.id, formState.values, history)\n handleCloseDialogDisposisi()\n handleCloseDetailSurat(inboxData)\n }\n\n return loadingDispositionInboxMail ?\n \n \n \n :\n \n \n\n \n \n \n \n {dispositionChoiceList.map(item => (\n {item.nama} \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n
\n \n \n \n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk\n})\n\nexport default connect(mapStateToProps, { dispositionInboxMail })(Disposisi)","import React, { Fragment, useEffect, useState } from 'react'\nimport { makeStyles } from '@material-ui/styles'\nimport { \n Card, \n CardActions, \n CardContent, \n Grid, \n InputLabel, \n Typography,\n Button,\n Divider,\n Backdrop,\n CircularProgress,\n Dialog,\n DialogContent,\n DialogTitle\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getDispositionChoice } from '../../../store/actions/suratMasuk'\nimport { getBagian } from '../../../store/actions/bagian'\nimport Disposisi from './Disposisi'\n\nconst useStyles = makeStyles(theme => ({\n root: {\n width: '100%',\n [theme.breakpoints.down('sm')]: {\n width: '100%'\n },\n },\n text: {\n color: '#000000',\n fontFamily: 'Montserrat'\n },\n textWhite: {\n color: '#FFFFFF',\n fontFamily: 'Montserrat'\n },\n button: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n color: '#FFFFFF',\n width: '100%',\n height: '40px',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginRight: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n buttonSmall: {\n textTransform: 'none',\n backgroundColor: '#2285DF',\n '&:hover': {\n backgroundColor: '#0277BD'\n },\n marginTop: theme.spacing(1)\n },\n divider: {\n color: '#000000',\n },\n backdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n },\n}))\n\nconst DetailSuratMasuk = props => {\n const classes = useStyles()\n const {\n inboxData,\n getDispositionChoice,\n getBagian,\n handleCloseDetailSurat,\n suratMasuk: {\n loadingDownloadBuktiTerima,\n loadingDownloadDetailSurat,\n loadingDispositionChoiceList,\n dispositionChoiceList\n },\n bagian: {\n listBagian\n }\n } = props\n\n const [ openDialogDisposisi, setOpenDialogDisposisi ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDialogDisposisi = e => {\n setOpenDialogDisposisi({\n open : true,\n item: e\n })\n }\n\n const handleCloseDialogDisposisi = e => {\n setOpenDialogDisposisi({\n open : false,\n item: e\n })\n }\n\n useEffect(() => {\n getBagian()\n getDispositionChoice()\n }, [getBagian, getDispositionChoice])\n\n return loadingDownloadBuktiTerima || loadingDownloadDetailSurat || loadingDispositionChoiceList ? \n \n \n \n :\n \n \n \n \n \n Tgl Terima: \n \n {moment(inboxData.tanggal_terima).format('DD MMMM yyyy')}\n \n \n \n Tgl/No Surat: \n \n {moment(inboxData.tanggal_surat).format('DD MMMM yyyy')} | {inboxData.no_surat}\n \n \n \n Perihal: \n \n {inboxData.perihal}\n \n \n \n \n Lampiran Dokumen: \n \n \n Download\n
\n \n \n \n \n \n \n \n {/* handleDownloadDetailSurat(inboxData)}>\n \n Download Surat\n
\n */}\n \n {sessionStorage.getItem('role') === 'manager' && (\n <>\n {inboxData.status_surat.id === 1 && (\n \n handleOpenDialogDisposisi(inboxData)}>\n \n Disposisi\n
\n \n \n )}\n >\n )}\n \n \n \n handleCloseDialogDisposisi(openDialogDisposisi.item)}\n >\n \n \n Disposisi surat dengan nomor surat ({inboxData.no_surat})\n \n \n \n \n \n \n \n}\n\nconst mapStateToProps = state => ({\n suratMasuk: state.suratMasuk,\n bagian: state.bagian\n})\n\nexport default connect(mapStateToProps, { getBagian, getDispositionChoice })(DetailSuratMasuk)","import React, { useState, forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { lighten, makeStyles } from '@material-ui/core/styles';\nimport Table from '@material-ui/core/Table';\nimport TableBody from '@material-ui/core/TableBody';\nimport TableCell from '@material-ui/core/TableCell';\nimport TableContainer from '@material-ui/core/TableContainer';\nimport TableHead from '@material-ui/core/TableHead';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport TableRow from '@material-ui/core/TableRow';\nimport TableSortLabel from '@material-ui/core/TableSortLabel';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Typography from '@material-ui/core/Typography';\nimport Card from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport FilterListIcon from '@material-ui/icons/FilterList';\nimport { CardHeader, CardContent, Dialog, DialogTitle, DialogContent, Paper, Divider, InputBase, Link } from '@material-ui/core';\nimport DetailSuratMasuk from '../DetailSuratMasuk'\nimport SearchIcon from '@material-ui/icons/Search'\nimport { Link as RouterLink } from 'react-router-dom'\n\nfunction createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n}\n\nconst rows = [\n createData('123/123/123', 305, '20 November 2020', 67, 4.3),\n createData('123/123/124', 452, '20 November 2020', 51, 4.9),\n createData('123/123/125', 262, '20 November 2020', 24, 6.0),\n createData('123/123/126', 159, '20 November 2020', 24, 4.0),\n createData('123/123/127', 356, '20 November 2020', 49, 3.9),\n createData('123/123/128', 408, '20 November 2020', 87, 6.5),\n createData('123/123/129', 237, '20 November 2020', 37, 4.3),\n createData('123/123/130', 375, '20 November 2020', 94, 0.0),\n createData('123/123/131', 518, '20 November 2020', 65, 7.0),\n createData('123/123/132', 392, '20 November 2020', 98, 0.0),\n createData('123/123/133', 318, '20 November 2020', 81, 2.0),\n createData('123/123/134', 360, '20 November 2020', 9, 37.0),\n createData('123/123/135', 437, '20 November 2020', 63, 4.0),\n];\n\nfunction descendingComparator(a, b, orderBy) {\n if (b[orderBy] < a[orderBy]) {\n return -1;\n }\n if (b[orderBy] > a[orderBy]) {\n return 1;\n }\n return 0;\n}\n\nfunction getComparator(order, orderBy) {\n return order === 'desc'\n ? (a, b) => descendingComparator(a, b, orderBy)\n : (a, b) => -descendingComparator(a, b, orderBy);\n}\n\nfunction stableSort(array, comparator) {\n const stabilizedThis = array.map((el, index) => [el, index]);\n stabilizedThis.sort((a, b) => {\n const order = comparator(a[0], b[0]);\n if (order !== 0) return order;\n return a[1] - b[1];\n });\n return stabilizedThis.map((el) => el[0]);\n}\n\nconst headCells = [\n { id: 'no_surat', numeric: true, disablePadding: false, label: 'Nomor Surat' },\n { id: 'tgl_surat', numeric: true, disablePadding: false, label: 'Tanggal Surat' },\n { id: 'perihal', numeric: true, disablePadding: false, label: 'Perihal' },\n { id: 'status', numeric: true, disablePadding: false, label: 'Status Surat' },\n { id: 'file', numeric: true, disablePadding: false, label: 'File' },\n { id: 'action', numeric: true, disablePadding: false, label: 'Aksi' },\n];\n\nfunction EnhancedTableHead(props) {\n const { classes, order, orderBy, onRequestSort } = props;\n const createSortHandler = (property) => (event) => {\n onRequestSort(event, property);\n };\n\n return (\n \n \n {headCells.map((headCell) => (\n \n \n {headCell.label}\n {orderBy === headCell.id ? (\n \n {order === 'desc' ? 'sorted descending' : 'sorted ascending'}\n \n ) : null}\n \n \n ))}\n \n \n );\n}\n\nEnhancedTableHead.propTypes = {\n classes: PropTypes.object.isRequired,\n numSelected: PropTypes.number.isRequired,\n onRequestSort: PropTypes.func.isRequired,\n onSelectAllClick: PropTypes.func.isRequired,\n order: PropTypes.oneOf(['asc', 'desc']).isRequired,\n orderBy: PropTypes.string.isRequired,\n rowCount: PropTypes.number.isRequired,\n};\n\nconst useToolbarStyles = makeStyles((theme) => ({\n root: {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(1),\n },\n highlight:\n theme.palette.type === 'light'\n ? {\n color: theme.palette.secondary.main,\n backgroundColor: lighten(theme.palette.secondary.light, 0.85),\n }\n : {\n color: theme.palette.text.primary,\n backgroundColor: theme.palette.secondary.dark,\n },\n title: {\n flex: '1 1 100%',\n },\n}));\n\nconst EnhancedTableToolbar = (props) => {\n const classes = useToolbarStyles();\n const { numSelected } = props;\n\n return (\n 0,\n })}\n >\n {numSelected > 0 ? (\n \n {numSelected} selected\n \n ) : (\n \n Nutrition\n \n )}\n\n {numSelected > 0 ? (\n \n \n \n \n \n ) : (\n \n \n \n \n \n )}\n \n );\n};\n\nEnhancedTableToolbar.propTypes = {\n numSelected: PropTypes.number.isRequired,\n};\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n width: '100%',\n },\n paper: {\n width: '100%',\n marginBottom: theme.spacing(2),\n },\n table: {\n minWidth: 750,\n },\n visuallyHidden: {\n border: 0,\n clip: 'rect(0 0 0 0)',\n height: 1,\n margin: -1,\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n top: 20,\n width: 1,\n },\n text: {\n fontFamily: 'Montserrat',\n color: '#000000'\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: '400px',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n width: '100%'\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n}));\n\nconst CustomRouterLink = forwardRef((props, ref) => (\n \n \n
\n))\n\nconst TableSuratMasuk = props => {\n const classes = useStyles();\n const {\n reportList,\n page,\n setPage,\n handleChangeSearch\n } = props\n const [order, setOrder] = React.useState('asc');\n const [orderBy, setOrderBy] = React.useState('calories');\n const [selected, setSelected] = React.useState([]);\n \n const [rowsPerPage, setRowsPerPage] = React.useState(10);\n\n const handleRequestSort = (event, property) => {\n const isAsc = orderBy === property && order === 'asc';\n setOrder(isAsc ? 'desc' : 'asc');\n setOrderBy(property);\n };\n\n const handleSelectAllClick = (event) => {\n if (event.target.checked) {\n const newSelecteds = rows.map((n) => n.name);\n setSelected(newSelecteds);\n return;\n }\n setSelected([]);\n };\n\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n\n const handleChangeRowsPerPage = (event) => {\n setRowsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n\n // Dialog Detail Surat\n const [ openDialogDetailSurat, setOpenDialogDetailSurat ] = useState({\n open: false,\n item: null\n })\n\n const handleOpenDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: true,\n item: e\n })\n }\n\n const handleCloseDetailSurat = e => {\n setOpenDialogDetailSurat({\n open: false,\n item: e\n })\n }\n\n const isSelected = (name) => selected.indexOf(name) !== -1;\n\n const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);\n\n return (\n \n
\n \n \n \n \n \n \n \n }\n />\n \n \n \n \n \n {stableSort(reportList, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n // const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleOpenDetailSurat(row)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.name}\n selected={isItemSelected}\n >\n {row.no_surat} \n {row.tanggal_surat} \n {row.perihal} \n {row.status_surat.status} \n \n Download File\n \n \n \n \n \n \n \n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n \n )}\n \n
\n \n \n \n \n
handleCloseDetailSurat(openDialogDetailSurat.item)}\n >\n \n {openDialogDetailSurat.item !== null && (\n \n {openDialogDetailSurat.item.perihal}\n \n )}\n \n \n \n \n \n
\n );\n}\n\nexport default TableSuratMasuk\n","import * as firebase from \"firebase/app\";\nimport \"firebase/messaging\";\nconst initializedFirebaseApp = firebase.initializeApp({\n\t// Project Settings => Add Firebase to your web app\n apiKey: \"AIzaSyBeoS91vtP-DYGoMoTVZZrHEpdb2pJVJu8\",\n authDomain: \"simantap-146e0.firebaseapp.com\",\n projectId: \"simantap-146e0\",\n storageBucket: \"simantap-146e0.appspot.com\",\n messagingSenderId: \"718058254689\",\n appId: \"1:718058254689:web:0cd06fb8a33bfb2c5a9520\",\n measurementId: \"G-1NEG9M8P01\"\n});\n\nlet messaging;\nif (firebase.messaging.isSupported()) {\n messaging = initializedFirebaseApp.messaging();\n messaging.usePublicVapidKey(\n \"BOxVztHiPYPOwY7adO7XKx-jfpZoPV6mW5LI3WV7JETwub7rvpiLSDTGmjFruYVyxBOXjUzfWA-V53jigPlWY60\"\n );\n}\n\nexport { messaging };\n","import React, { useState, useEffect } from 'react'\nimport 'date-fns'\nimport { makeStyles } from '@material-ui/styles'\nimport {\n Typography,\n Grid,\n Paper,\n} from '@material-ui/core'\nimport DateFnsUtils from '@date-io/date-fns'; // choose your lib\nimport {\n DatePicker,\n MuiPickersUtilsProvider,\n} from '@material-ui/pickers';\nimport moment from 'moment';\nimport Skeleton from '@material-ui/lab/Skeleton'\n\nimport TableSuratMasuk from './TableSuratMasuk'\n\nimport { connect } from 'react-redux'\nimport { getReportOutboxMail } from '../../store/actions/suratKeluar'\n\n\nconst useStyles = makeStyles(theme => ({\n root: {\n padding: theme.spacing(4)\n },\n row: {\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2)\n },\n btnSearch: {\n backgroundColor: '#FF9300',\n '&:hover' : {\n backgroundColor: '#FFA938'\n },\n color: '#FFFFFF',\n height: 'auto'\n },\n extendedIcon: {\n marginRight: theme.spacing(1),\n },\n searchRoot: {\n\t\tpadding: '2px 4px',\n display: 'flex',\n alignItems: 'center',\n\t\twidth: 'auto',\n\t\t// marginTop: theme.spacing(2)\n\t},\n\tinput: {\n marginLeft: theme.spacing(1),\n flex: 1,\n },\n iconButton: {\n padding: 10,\n },\n divider: {\n height: 28,\n margin: 4,\n },\n fab: {\n position: 'fixed',\n bottom: theme.spacing(4),\n right: theme.spacing(2),\n },\n text: {\n fontFamily: 'Montserrat'\n }\n}))\n\nconst Report = props => {\n const classes = useStyles()\n const [selectedDate ] = useState(new Date());\n const {\n getReportOutboxMail,\n suratKeluar: {\n reportList,\n loadingReportList\n }\n } = props\n\n const submitDefault = moment().subtract(7, 'd').format('YYYY-MM-DD');\n const submitDefaultEndDate = moment({}).format('YYYY-MM-DD');\n const [ startDate, setStartDate ] = useState({\n submit: {\n submit: submitDefault\n },\n view: {\n view: moment().subtract(7, 'd').format('YYYY-MM-DD')\n }\n });\n const handleStartDate = (date) => {\n const changeDate = moment(date).format('YYYY-MM-DD');\n setStartDate(startDate => ({\n ...startDate,\n submit: {\n submit: changeDate\n },\n view: {\n view: date\n }\n }));\n };\n\n const [ endDate, setEndDate ] = useState({\n submit: {\n submit: submitDefaultEndDate\n },\n view: {selectedDate}\n });\n const handleEndDate = (date) => {\n const all = moment(date).format('YYYY-MM-DD');\n setEndDate(endDate => ({\n ...endDate,\n submit: {\n submit: all\n },\n view: {\n view: date\n }\n }));\n };\n\n const [ keyword, setKeyword ] = useState('')\n const [page, setPage] = useState(0);\n\n const handleChangeSearch = event => {\n setKeyword(event.target.value)\n setPage(0)\n }\n\n useEffect(() => {\n getReportOutboxMail(keyword, startDate.submit.submit, endDate.submit.submit)\n }, [getReportOutboxMail, keyword, startDate, endDate])\n\n return(\n \n
\n \n \n Laporan Surat Keluar \n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n \n {!loadingReportList && reportList !== null ? (\n \n ):(\n \n )}\n \n \n
\n
\n )\n}\n\nconst mapStateToProps = state => ({\n suratKeluar: state.suratKeluar\n})\n\nexport default connect(mapStateToProps, { getReportOutboxMail })(Report)","import React, { useEffect, Fragment } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Timeline from '@material-ui/lab/Timeline';\nimport TimelineItem from '@material-ui/lab/TimelineItem';\nimport TimelineSeparator from '@material-ui/lab/TimelineSeparator';\nimport TimelineConnector from '@material-ui/lab/TimelineConnector';\nimport TimelineContent from '@material-ui/lab/TimelineContent';\nimport TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';\nimport TimelineDot from '@material-ui/lab/TimelineDot';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { useParams } from 'react-router-dom'\nimport {\n\tBackdrop,\n\tCircularProgress,\n\tGrid,\n} from '@material-ui/core'\nimport moment from 'moment'\n\n// redux\nimport { connect } from 'react-redux'\nimport { getHistory } from '../../../store/actions/suratKeluar'\n\nconst useStyles = makeStyles((theme) => ({\n\troot: {\n\t\tpadding: theme.spacing(4)\n\t},\n\tpaper: {\n\t\tpadding: '6px 16px',\n\t},\n\tsecondaryTail: {\n\t\tbackgroundColor: theme.palette.secondary.main,\n\t},\n\tbackdrop: {\n\t\tzIndex: theme.zIndex.drawer + 1,\n\t\tcolor: '#fff',\n\t},\n\tfontTitle: {\n\t\tfontFamily: 'Montserrat',\n\t\tfontWeight: 700\n\t},\n\tfontText: {\n\t\tfontFamily: 'Montserrat'\n\t}\n}));\n\nconst History = props => {\n\tconst classes = useStyles();\n\tconst params = useParams()\n\tconst {\n\t\tgetHistory,\n\t\tsuratKeluar: {\n\t\t\thistoryOutboxMail,\n\t\t\tloadingHistoryOutboxMail\n\t\t}\n\t} = props\n\n\tuseEffect(() => {\n\t\tgetHistory(params.id)\n\t}, [ getHistory, params ])\n\n return loadingHistoryOutboxMail ? \n\t\n\t\t\t \n\t \n\t:\n\t\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\tHistory Perjalanan Surat\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t{historyOutboxMail.map(item => (\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t{moment(item.updated_at).format('DD MMMM YYYY HH:mm')}\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t{item.status}\n\t\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t \n\t\t\t\t\t\t))}\n\t\t\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t
\n\t \n}\n\nconst mapStateToProps = state => ({\n\tsuratKeluar: state.suratKeluar\n})\n\nexport default connect(mapStateToProps, { getHistory })(History)","import React from 'react';\nimport { Switch, Redirect, Route } from 'react-router-dom';\n\nimport { RouteWithLayout } from './components';\nimport { Main as MainLayout, Login } from './layouts';\n\nimport {\n Dashboard as DashboardView,\n Profile as ProfileView,\n SuratMasuk as SuratMasukView,\n FormSuratMasuk as FormSuratMasukView,\n SuratKeluar as SuratKeluarView,\n FormSuratKeluar as FormSuratKeluarView,\n Memo as MemoView,\n HistorySuratMasuk as HistorySuratMasukView,\n HistoryMemo as HistoryMemoView,\n Report as ReportView,\n ReportHistory as ReportHistoryView,\n StaffMin as StaffMinView,\n CreateStaffMin as CreateStaffMinView,\n EditStaffMin as EditStaffMinView,\n MemoSuratKeluar as MemoSuratKeluarView,\n HistoryOutboxMail as HistoryOutboxMailView,\n HistoryOutboxMailMemo as HistoryOutboxMailMemoView,\n ReportOutboxMail as ReportOutboxMailView,\n ReportOutboxMailHistory as ReportOutboxMailHistoryView\n} from './views';\n\nconst Routes = () => {\n \n return (\n \n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n {/* \n \n */}\n\n \n \n );\n};\n\nexport default Routes;\n","export const updateObject = (oldObject, updateProperties) => {\n return {\n ...oldObject,\n ...updateProperties\n }\n}\n","import * as actionTypes from '../actions/actionTypes'\nimport { updateObject } from '../../shared/utility'\n\nconst initialState = {\n open: false,\n openDialogBox: false,\n payload: null\n}\n\nconst setAlert = (state, action) => {\n return updateObject(state, { open: true, payload: action.payload })\n}\n\nconst removeAlert = (state, action) => {\n return updateObject(state, { open: false, payload: null })\n}\n\nconst setDialogBox = (state, action) => {\n return updateObject(state, { openDialogBox: true, payload: action.payload })\n}\n\nconst removeDialogBox = (state, action) => {\n return updateObject(state, { openDialogBox: false, payload: null })\n}\n\nconst reducer = (state = initialState, action) => {\n switch (action.type) {\n case actionTypes.SET_ALERT: return setAlert(state, action)\n case actionTypes.REMOVE_ALERT: return removeAlert(state, action)\n case actionTypes.SET_DIALOG_BOX: return setDialogBox(state, action)\n case actionTypes.REMOVE_DIALOG_BOX: return removeDialogBox(state, action)\n default: return state\n }\n}\n\nexport default reducer\n","import * as actionTypes from '../actions/actionTypes'\nimport { updateObject } from '../../shared/utility'\n\nconst initialState = {\n token: null,\n user: {},\n userData: {},\n uploadUrl: null,\n changing: 0,\n error: {},\n loading: false,\n // authRedirectPath: '/dashboard'\n}\n\nconst authStart = (state, action) => {\n return updateObject(state, { error: null, loading: true })\n}\n\nconst authSuccess = (state, action) => {\n return updateObject(state, {\n token: action.tokenId,\n error: null,\n loading: false\n })\n}\n\nconst authFail = (state, action) => {\n return updateObject(state, { error: action.error, loading: false })\n}\n\nconst reducer = (state = initialState, action) => {\n switch (action.type) {\n case actionTypes.AUTH_START: return authStart(state, action)\n case actionTypes.AUTH_SUCCESS: return authSuccess(state, action)\n case actionTypes.AUTH_FAIL: return authFail(state, action)\n // case actionTypes.AUTH_LOGOUT: return authLogout(state, action)\n\n default: return state\n }\n}\n\nexport default reducer\n","import * as actions from '../actions/actionTypes'\n\nconst initialState = {\n inboxMail: null,\n inboxMailData: null,\n inboxMailUpdate: null,\n downloadBuktiTerima: null,\n downloadDetailSurat: null,\n dispositionChoiceList: null,\n dispositionInboxMail: null,\n history: null,\n inboxMailDone: null,\n loadingInboxMailDone: true,\n loadingHistory: true,\n loadingDispositionInboxMail: false,\n loadingDownloadDetailSurat: false,\n loadingDownloadBuktiTerima: false,\n loadingUpdateInboxMail: false,\n loadingPostInboxMail: false,\n loadingInboxMail: true,\n loadingDispositionChoiceList: true,\n error: {}\n}\n\nexport default function (state = initialState, action) {\n const { type, payload } = action\n switch (type) {\n case actions.GET_INBOX_MAIL:\n return {\n ...state,\n inboxMail: payload,\n loadingInboxMail: false\n }\n case actions.GET_INBOX_MAIL_DONE:\n return {\n ...state,\n inboxMailDone: payload,\n loadingInboxMailDone: false\n }\n case actions.POST_INBOX_MAIL_START:\n return {\n ...state,\n loadingPostInboxMail: true\n }\n case actions.POST_INBOX_MAIL_SUCCESS:\n return {\n ...state,\n inboxMailData: payload,\n loadingPostInboxMail: false\n }\n case actions.POST_INBOX_MAIL_FAIL:\n return {\n ...state,\n inboxMailData: payload,\n loadingPostInboxMail: false\n }\n case actions.UPDATE_INBOX_MAIL_START:\n return {\n ...state,\n loadingUpdateInboxMail: true\n }\n case actions.UPDATE_INBOX_MAIL_SUCCESS:\n return {\n ...state,\n inboxMailUpdate: payload,\n loadingUpdateInboxMail: false\n }\n case actions.UPDATE_INBOX_MAIL_FAIL:\n return {\n ...state,\n inboxMailUpdate: payload,\n loadingUpdateInboxMail: false\n }\n case actions.DOWNLOAD_BUKTI_TERIMA_START:\n return {\n ...state,\n loadingDownloadBuktiTerima: true\n }\n case actions.DOWNLOAD_BUKTI_TERIMA_END:\n return {\n ...state,\n downloadBuktiTerima: payload,\n loadingDownloadBuktiTerima: false\n }\n case actions.DOWNLOAD_DETAIL_SURAT_START:\n return {\n ...state,\n loadingDownloadDetailSurat: true\n }\n case actions.DOWNLOAD_DETAIL_SURAT_END:\n return {\n ...state,\n downloadDetailSurat: payload,\n loadingDownloadDetailSurat: false\n }\n case actions.DISPOSITION_INBOX_MAIL_START:\n return {\n ...state,\n loadingDispositionInboxMail: true\n }\n case actions.DISPOSITION_INBOX_MAIL_SUCCESS:\n return {\n ...state,\n dispositionInboxMail: payload,\n loadingDispositionInboxMail: false\n }\n case actions.DISPOSITION_INBOX_MAIL_FAIL:\n return {\n ...state,\n error: payload,\n loadingDispositionInboxMail: false\n }\n case actions.GET_DISPOSITION_CHOICE:\n return {\n ...state,\n dispositionChoiceList: payload,\n loadingDispositionChoiceList: false\n }\n case actions.GET_HISTORY:\n return {\n ...state,\n history: payload,\n loadingHistory: false\n }\n default:\n return state\n }\n}","import * as actions from '../actions/actionTypes'\n\nconst initialState = {\n outboxMail: null,\n outboxMailData: null,\n outboxMailUpdate: null,\n outboxMailAcc: null,\n historyOutboxMail: null,\n reportList: null,\n loadingReportList: true,\n loadingHistoryOutboxMail: true,\n loadingOutboxAcc: false,\n loadingUpdateOutboxMail: false,\n loadingPostOutboxMail: false,\n loadingOutboxMail: true,\n error: {}\n}\n\nexport default function (state = initialState, action) {\n const { type, payload } = action\n switch (type) {\n case actions.GET_OUTBOX_MAIL:\n return {\n ...state,\n outboxMail: payload,\n loadingOutboxMail: false\n }\n case actions.GET_REPORT_OUTBOXMAIL:\n return {\n ...state,\n reportList: payload,\n loadingReportList: false\n }\n case actions.POST_OUTBOX_MAIL_START:\n return {\n ...state,\n loadingPostOutboxMail: true\n }\n case actions.POST_OUTBOX_MAIL_SUCCESS:\n return {\n ...state,\n outboxMailData: payload,\n loadingPostOutboxMail: false\n }\n case actions.POST_OUTBOX_MAIL_FAIL:\n return {\n ...state,\n outboxMailData: payload,\n loadingPostOutboxMail: false\n }\n case actions.UPDATE_OUTBOX_MAIL_START:\n return {\n ...state,\n loadingUpdateOutboxMail: true\n }\n case actions.UPDATE_OUTBOX_MAIL_SUCCESS:\n return {\n ...state,\n outboxMailUpdate: payload,\n loadingUpdateOutboxMail: false\n }\n case actions.UPDATE_OUTBOX_MAIL_FAIL:\n return {\n ...state,\n outboxMailUpdate: payload,\n loadingUpdateOutboxMail: false\n }\n case actions.ACC_OUTBOX_MAIL_START:\n return {\n ...state,\n loadingOutboxAcc: true\n }\n case actions.ACC_OUTBOX_MAIL_SUCCESS:\n return {\n ...state,\n outboxMailAcc: payload,\n loadingOutboxAcc: false\n }\n case actions.ACC_OUTBOX_MAIL_FAIL:\n return {\n ...state,\n outboxMailAcc: payload,\n loadingOutboxAcc: false\n }\n case actions.GET_HISTORY_OUTBOX_MAIL:\n return {\n ...state,\n historyOutboxMail: payload,\n loadingHistoryOutboxMail: false\n }\n default:\n return state\n }\n}","import * as actions from '../actions/actionTypes'\n\nconst initialState = {\n listBagian: null,\n loadingListBagian: true,\n error: {}\n}\n\nexport default function (state = initialState, action) {\n const { type, payload } = action\n switch (type) {\n case actions.GET_BAGIAN:\n return {\n ...state,\n listBagian: payload,\n loadingListBagian: false\n }\n default:\n return state\n }\n}","import * as actions from '../actions/actionTypes'\n\nconst initialState = {\n memoList: null,\n documentDownloadList: null,\n dispositionMemo: null,\n staffMin: null,\n loadingStaffMin: true,\n loadingDispositionMemo: false,\n loadingDownloadDocumentDisposition: false,\n loadingMemoList: true,\n error: {}\n}\n\nexport default function (state = initialState, action) {\n const { type, payload } = action\n switch (type) {\n case actions.GET_MEMO:\n return {\n ...state,\n memoList: payload,\n loadingMemoList: false\n }\n case actions.DOWNLOAD_DOCUMENT_DISPOSITION_START:\n return {\n ...state,\n loadingDownloadDocumentDisposition: true\n }\n case actions.DOWNLOAD_DOCUMENT_DISPOSITION_SUCCESS:\n return {\n ...state,\n documentDownloadList: payload,\n loadingDownloadDocumentDisposition: false\n }\n case actions.DOWNLOAD_DOCUMENT_DISPOSITION_END:\n return {\n ...state,\n error: payload,\n loadingDownloadDocumentDisposition: false\n }\n case actions.DISPOSITION_INBOX_MAIL_START:\n return {\n ...state,\n loadingDispositionMemo: true\n }\n case actions.DISPOSITION_INBOX_MAIL_SUCCESS:\n return {\n ...state,\n dispositionMemo: payload,\n loadingDispositionMemo: false\n }\n case actions.DISPOSITION_INBOX_MAIL_FAIL:\n return {\n ...state,\n error: payload,\n loadingDispositionMemo: false\n }\n case actions.GET_STAFF_MIN:\n return {\n ...state,\n staffMin: payload,\n loadingStaffMin: false\n }\n default:\n return state\n }\n}","import * as actions from '../actions/actionTypes'\n\nconst initialState = {\n uploadTaskData: null,\n loadingUploadTask: false,\n error: {}\n}\n\nexport default function (state = initialState, action) {\n const { type, payload } = action\n switch (type) {\n case actions.UPLOAD_TASK_START:\n return {\n ...state,\n loadingUploadTask: true\n }\n case actions.UPLOAD_TASK_SUCCESS:\n return {\n ...state,\n uploadTaskData: payload,\n loadingUploadTask: false\n }\n case actions.UPLOAD_TASK_FAIL:\n return {\n ...state,\n error: payload,\n loadingUploadTask: false\n }\n default:\n return state\n }\n}","import * as actions from '../actions/actionTypes'\n\nconst initialState = {\n staffMin: null,\n createStaffMin: null,\n detailStaffMin: null,\n editStaffMin: null,\n loadingEditStaffMin: false,\n loadingDetailStaffMin: true,\n loadingCreateStaffMin: false,\n loadingStaffMin: true,\n error: {}\n}\n\nexport default function (state = initialState, action) {\n const { type, payload } = action\n switch (type) {\n case actions.GET_STAFF_MIN:\n return {\n ...state,\n staffMin: payload,\n loadingStaffMin: false\n }\n case actions.GET_DETAIL_STAFF_MIN:\n return {\n ...state,\n detailStaffMin: payload,\n loadingDetailStaffMin: false\n }\n case actions.ADD_STAFF_MIN_START:\n return {\n ...state,\n loadingCreateStaffMin: true\n }\n case actions.ADD_STAFF_MIN_SUCCESS:\n return {\n ...state,\n createStaffMin: payload,\n loadingCreateStaffMin: false\n }\n case actions.ADD_STAFF_MIN_FAIL:\n return {\n ...state,\n error: payload,\n loadingCreateStaffMin: false\n }\n case actions.UPDATE_STAFF_MIN_START:\n return {\n ...state,\n loadingEditStaffMin: true\n }\n case actions.UPDATE_STAFF_MIN_SUCCESS:\n return {\n ...state,\n editStaffMin: payload,\n loadingEditStaffMin: false\n }\n case actions.UPDATE_STAFF_MIN_FAIL:\n return {\n ...state,\n error: payload,\n loadingEditStaffMin: false\n }\n default:\n return state\n }\n}","import * as actions from '../actions/actionTypes'\n\nconst initialState = {\n dashboardList: null,\n loadingDashboardList: true,\n error: {}\n}\n\nexport default function (state = initialState, action) {\n const { type, payload } = action\n switch (type) {\n case actions.GET_DASHBOARD:\n return {\n ...state,\n dashboardList: payload,\n loadingDashboardList: false\n }\n default:\n return state\n }\n}","import { combineReducers } from 'redux'\nimport alert from './alert'\nimport auth from './auth'\nimport profile from '../../reducers/profile'\nimport suratMasuk from './suratMasuk'\nimport suratKeluar from './suratKeluar'\nimport bagian from './bagian'\nimport memo from './memo'\nimport uploadTask from './uploadTask'\nimport staffMin from './staffMin'\nimport dashboard from './dashboard'\n\nexport default combineReducers({\n alert,\n auth,\n profile,\n suratMasuk,\n suratKeluar,\n bagian,\n memo,\n uploadTask,\n staffMin,\n dashboard\n})","\nimport { createStore, applyMiddleware } from 'redux'\nimport { composeWithDevTools } from 'redux-devtools-extension'\nimport thunk from 'redux-thunk'\nimport rootReducer from './store/reducers'\n\nconst initialState = {}\n\nconst middleware = [thunk]\n\nconst store = createStore(\n rootReducer,\n initialState,\n composeWithDevTools(applyMiddleware(...middleware))\n)\n\nexport default store","import React from 'react'\nimport { Snackbar } from '@material-ui/core'\nimport Alerts from '@material-ui/lab/Alert'\nimport { connect } from 'react-redux'\nimport * as actions from '../../../../store/actions/index'\n\nconst SnackBarAlert = props => {\n const { open, payload } = props.alerts\n\n let snackBar = null\n if (open) {\n snackBar = (\n \n \n {payload.msg}\n \n \n )\n };\n\n return (\n \n {snackBar}\n
\n )\n}\n\nconst mapStateToProps = state => {\n return {\n alerts: state.alert\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n onCloseAlert: () => dispatch(actions.removeAlert())\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SnackBarAlert)\n","import React, { useEffect } from 'react';\nimport { Router } from 'react-router-dom';\nimport { createBrowserHistory } from 'history';\nimport { ThemeProvider } from '@material-ui/styles';\n// import { Chart } from 'react-chartjs-2';\n// import { chartjs } from './helpers';\nimport theme from './theme';\n// import 'react-perfect-scrollbar/dist/css/styles.css';\nimport './assets/scss/index.scss';\nimport Routes from './Routes';\nimport './App.css';\n\n// Firebase Initial\nimport { messaging } from \"./init-fcm\";\n\n// Redux\nimport { Provider } from 'react-redux'\nimport store from './store'\nimport Alert from './components/UI/Alert/SnackBar/SnackBar';\n\n// Clear Cache\nimport { useClearCache } from 'react-clear-cache';\n\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogContentText from '@material-ui/core/DialogContentText';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport Button from '@material-ui/core/Button';\n\n\n\nconst browserHistory = createBrowserHistory();\n\nexport default function App() {\n const { isLatestVersion, emptyCacheStorage } = useClearCache({ duration: 5000 });\n \n const fetchData = async () => {\n messaging.requestPermission()\n .then(async function() {\n const token = await messaging.getToken();\n console.log(token);\n sessionStorage.setItem('tokenFCM', token)\n })\n .catch(function(err) {\n console.log(\"Unable to get permission to notify.\", err);\n });\n navigator.serviceWorker.addEventListener(\"message\", (message) => {\n // history.push(`https://youtube.com/${message.data.url}`)\n // document.location.href = `https://youtube.com/${message.data.url}`;\n console.log(message)\n });\n }\n\n useEffect(() => {\n if(messaging !== undefined){\n fetchData();\n }\n });\n\n return (\n \n \n {!isLatestVersion && (\n \n {\"Update info\"} \n \n \n Kami telah melakukan beberapa perubahan, silahkan update\n \n \n \n {\n e.preventDefault();\n emptyCacheStorage();\n }} \n color=\"primary\" \n autoFocus\n >\n Update\n \n \n \n )}\n \n \n \n \n \n \n );\n}\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n // const swUrl = `${process.env.PUBLIC_URL}/firebase-messaging-sw.js`;\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import 'react-app-polyfill/stable'\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n// import { registerServiceWorker } from \"./register-sw\";\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.register();\n// registerServiceWorker();"],"sourceRoot":""}