update to pddikti naik/turun sanksi

fix table riwayat log di menu riwayat

actions/pengunjung.js

@@ -25,7 +25,7 @@ export const createPengunjung = async (_csrf) => {
 
 export const getPengunjung = async (token) => {
 	try {
-		const res = await axios.get(`/pengunjung`, { headers: { Authorization: token } });
+		const res = await axios.get(`/pengunjung?tahun=${new Date().getFullYear()}`, { headers: { Authorization: token } });
 		return res.data;
 	} catch (error) {
 		console.log("error", error);

actions/sanksi.js

@@ -118,7 +118,7 @@ export const update = async (token, id, data, _csrf) => {
 const logUpdate = async (token, id) => {
 	const getToken = await getCsrf();
 	const _csrf = getToken.token;
-	await createLog(token, { aktivitas: `Berhasil Merubah Sanksi, id: ${id}`, _csrf: _csrf });
+	await createLog(token, { aktivitas: `Berhasil Merubah Sanksi, id: ${id}`, _csrf: _csrf,menu:"Perubahan  Sanksi" });
 
 }
 export const updatePT = async (token, id, data, _csrf) => {

components/Main/Login.js

@@ -75,10 +75,10 @@ class Login extends Component {
         this.props.setUser(auth.data.user);
         axiosAPI.defaults.headers.common["Authorization"] = auth.data.token;
         if (auth.data.user.role.id === 2022) {
-          await createLog(auth.data.token, { aktivitas: "PT berhasil Login", _csrf: _csrf });
+          await createLog(auth.data.token, { aktivitas: "PT berhasil Login", menu: "Pelaporan", _csrf: _csrf });
           return location.href = '/pt/pemantauan';
         } else if ([2020, 2021, 2023, 2024].includes(auth.data.user.role.id)) {
-          await createLog(auth.data.token, { aktivitas: "Berhasil Login", _csrf: _csrf });
+          await createLog(auth.data.token, { aktivitas: "Berhasil Login", menu: "Pelaporan", _csrf: _csrf });
           return location.href = '/app/pemantauan';
         } else {
           this.setState({ error: "Akun tidak ada" });

components/NaikSanksi/InputTanggal.js

@@ -158,17 +158,51 @@ class InputTanggal extends Component {
     handleChangeListSanksi = (listSanksi) => {
         this.setState({ listSanksi });
     };
+
+    done = async (data) => {
+		if (this.props?.user?.role.id === 2024) {
+			Swal.fire({
+				icon: 'error',
+				title: 'Oops...',
+				html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+				confirmButtonColor: "#3e3a8e",
+				confirmButtonText: 'Oke'
+			})
+		} else {
+			this.setState({
+				loading: true
+			})
+			const sanksi = await this.ubahSanksi(data)
+			if (sanksi && ENV === "production") {
+				await this.updatePddikti(sanksi.data._id)  //kirim sanksiID ke function updatePDDIKTI
+			}
+
+			await Router.push({
+				pathname: "/app/naik-sanksi",
+			});
+		}
+	};
+    updatePddikti = async (sanksiId) => {
+		const getToken = await getCsrf();
+		const _csrf2 = getToken.token;
+		const toastPddikti = toast.loading("Updating pddikti...");
+		try {
+			const { query, token } = this.props;
+			const { id } = query;
+			await updatePddikti(token, sanksiId, _csrf2)
+
+			toast.update(toastPddikti, { render: "Berhasil Update PDDIKTI", type: "success", isLoading: false, autoClose: true, closeButton: true });
+
+		}
+
+		catch (error) {
+			toast.update(toastPddikti, { render: ("Gagal Update PDDIKTI"), type: "error", isLoading: false, autoClose: true, closeButton: true });
+		}
+
+	}
  
-    handelSimpan = async (data) => {
-        if (this.props?.user?.role.id === 2024) {
-            Swal.fire({
-                icon: 'error',
-                title: 'Oops...',
-                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
-                confirmButtonColor: "#3e3a8e",
-                confirmButtonText: 'Oke'
-            })
-        } else {
+    ubahSanksi = async (data) => {
+       
             if (this.state.tmtCheck === true ||this.state.listSanksi?.find(z => z.label === "Sanksi Administratif Berat - Pencabutan izin Program Studi" || z.label === "Sanksi Administratif Berat - Pembubaran PTN atau pencabutan izin PTS")) {
                 const getToken = await getCsrf();
                 const _csrf = getToken.token;
@@ -191,9 +225,10 @@ class InputTanggal extends Component {
                     toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
                 } else {
                     toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
-                    Router.push("/app/naik-sanksi");
+                    // Router.push("/app/naik-sanksi");
                 }
             }else{
+                console.log("ubahsanksi")
                 const getToken = await getCsrf();
             const _csrf = getToken.token;
             const { token, query } = this.props;
@@ -215,10 +250,10 @@ class InputTanggal extends Component {
                 toast.update(toastid, { render: "Error", type: "error", isLoading: false, autoClose: true, closeButton: true });
             } else {
                 toast.update(toastid, { render: "Success", type: "success", isLoading: false, autoClose: true, closeButton: true });
-                Router.push("/app/naik-sanksi");
+                // Router.push("/app/naik-sanksi");
             }
         }
-            }
+            
             
 
     };
@@ -251,7 +286,7 @@ class InputTanggal extends Component {
                             dokumen: [],
                         }}
                         validationSchema={rekomendasiSchema}
-                        onSubmit={this.handelSimpan}
+                        onSubmit={this.done}
                     >
                         {({ isSubmitting }) => (
                             <Form className="form-horizontal">

components/PT/CabutSanksi/Riwayat.js

@@ -13,7 +13,6 @@ function Riwayat({ data, role }) {
 			confirmButtonText: 'Oke'
 		})
 	};
-	console.log(data)
 	return (
 		<Card className="card-default">
 			<CardHeader>

components/Pemeriksaan/InputEvaluasi.js

@@ -271,7 +271,6 @@ class InputEvaluasi extends Component {
 				<button className="bg-transparent button-transparent border-0 fas fa-trash text-danger float-right" onClick={removeFile(file)} />
 			</p>
 		));
-		console.log(new Date(this.state.tanggal))
 		return (
 			<>
 				<Formik

components/PencabutanSanksi/RiwayatPerbaikan.js

@@ -13,7 +13,6 @@ function RiwayatPerbaikan({ data, role }) {
 			confirmButtonText: 'Oke'
 		})
 	};
-	console.log(data.map((e)=> e.dokumen))
 
 	return (
 		<Card className="card-default">

components/Riwayat/ChartData.js

@@ -17,7 +17,7 @@ class ChartData extends Component {
 	async componentDidMount() {
 		const { token } = this.props;
 		const dataPengunjung = await getPengunjung(token);
-		this.setState({ dataPengunjung: dataPengunjung.data.map((e) => [this.convertMonth(e._id.bulan), e.jumlah_pengunjung]) });
+		this.setState({ dataPengunjung: dataPengunjung?.data?.map((e) => [this.convertMonth(e._id.bulan), e.jumlah_pengunjung]) });
 		this.setState((prevState) => ({ dataChart: { ...prevState.dataChart, data: [{ ...prevState.dataChart.data[0], data: prevState.dataPengunjung }] } }));
 	}
 

components/Riwayat/TableRiwayat.js

@@ -1,3 +1,4 @@
+import DataTable from 'react-data-table-component';
 import Datatable from "@/components/Tables/Datatable";
 import Link from "next/link";
 import moment from "moment";
@@ -9,65 +10,202 @@ import { Row, Col, Input, FormGroup, Label, Progress, Button } from "reactstrap"
 
 import Datetime from "react-datetime";
 
+
 class TableRiwayat extends Component {
     constructor(props) {
         super(props);
         this.state = {
             dataRiwayat: [],
-            dataRiwayatsort: "",
+            dataRiwayatsort: [],
             fromDate: "",
             toDate: "",
-            updateTable: false
+            updateTable: false,
+            search: "",
+            dataFilterSearch: []
+
         };
     }
     componentDidMount = async () => {
         const { token } = this.props;
 
-        // const dataRiwayat = await getLog2(this.props.token)
-        // this.setState({ dataRiwayat });
+        const data = await getLog2(this.props.token)
+        const dataRiwayat = data.data
+        this.setState({ dataRiwayat });
     }
-    onFilter = async () => {
-        // const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
-        // const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
-        // const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
+    fetchData = async () => {
+        const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
+        const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
+        const data = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
+        const dataFilterSearch = data.data
+        this.setState({ dataFilterSearch: dataFilterSearch, dataRiwayat: dataFilterSearch });
         // this.setState({ dataRiwayat });
-        this.setState({ updateTable: true });
-        setTimeout(() => {
-            this.setState({ updateTable: false });
-        }, 1);
+    }
 
+    onFilter = () => {
+        this.setState({ loading: true });
+        this.fetchData(); 21
+        this.setState({ loading: false });
+        if (this.state.dataRiwayat && this.state.dataRiwayat.length) {
+            // this.renderTableData();
+            this.setState({ noData: true });
+        }
     }
-    componentDidUpdate = async (prevProps, prevState) => {
-        const { dataRiwayat } = this.state
-        if (prevState.toDate != this.state.toDate) {
-            console.log(dataRiwayat)
-            const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
-            const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
-            const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
-            this.setState({ dataRiwayat });
+    handleSearchChange = (e) => {
+        const { dataRiwayat } = this.state;
+        const searchValue = e.target.value;
+        const dataNoFilter = dataRiwayat
+        const result = dataRiwayat.filter((item) =>
+            item.aktivitas.toLowerCase().includes(searchValue.toLowerCase())
+            || item?.timestamp?.toLowerCase().includes(searchValue.toLowerCase())
+            || item?.username?.toLowerCase().includes(searchValue.toLowerCase())
+            || item?.ipv4?.toLowerCase().includes(searchValue.toLowerCase())
+            || item?.menu?.toLowerCase().includes(searchValue.toLowerCase())
+        );
+        this.setState({
+            search: searchValue,
+        })
+        if (result.length) {
+            this.setState({
+
+                dataFilterSearch: result
+            });
+
         }
-        // const dataRiwayatsort = this.state
-        // if (this.state.updateTable === true) {
-        //     const date1 = moment(this.state.fromDate).format("YYYY-MM-DD")
-        //     const date2 = moment(this.state.toDate).format("YYYY-MM-DD")
-        //     const dataRiwayat = await getLog2(this.props.token, { fromDate: date1, toDate: date2 })
-        //     this.setState({ dataRiwayatsort });
-        //     // this.setState({ dataRiwayat });
-        // }
+        else {
+            this.setState({
 
+                dataFilterSearch: dataNoFilter
+            })
+        }
 
     }
 
-
     render() {
+        const { dataRiwayat, search, dataFilterSearch } = this.state
+        const columns = [
+            {
+                name: 'Timestamp',
+                // selector: row => row.timestamp,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
+                            >
+                                { }
+                                {row.timestamp}
+                            </div>
+                        </div>
+                    </div>
+                )
+            },
+            {
+                name: 'UserName',
+                // selector: row => row.username,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
+                            >
+                                { }
+                                {row.username}
+                            </div>
+                        </div>
+                    </div>
+                )
+            },
+            {
+                name: 'IPv4',
+                // selector: row => row.ipv4,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '100px' }}
+                            >
+                                { }
+                                {row.ipv4}
+                            </div>
+                        </div>
+                    </div>
+                )
+            },
+
+            {
+                name: 'Menu',
+                // selector: row => row.menu,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', whiteSpace: 'wrap', width: '100px' }}
+                            >
+                     
+                                {row.menu||"-"}
+                            </div>
+                        </div>
+                    </div>
+                )
+            },
+            {
+                name: 'Deskripsi',
+                // selector: row => row.aktivitas,
+                cell: row => (
+                    <div>
+                        <div>
+                            <div
+                                data-tag="allowRowEvents"
+                                style={{ color: 'grey', overflow: 'hidden', whiteSpace: 'wrap', textOverflow: 'ellipses', width: '300px' }}
+                            >
+                                { }
+                                {row.aktivitas}
+                            </div>
+                        </div>
+                    </div>
+                ),
+            },
+        ];
+        const data = dataRiwayat?.map((value, index) => (
+
+            {
+
+                timestamp: value.createdAt,
+                username: value.user?.nama,
+                ipv4: value?.ipv4,
+                menu: value?.menu,
+                aktivitas: value?.aktivitas,
+            }
+
+
+
+        ))
+        const datasearch = dataFilterSearch?.map((value, index) => (
+
+            {
+
+                timestamp: value.createdAt,
+                username: value.user?.nama,
+                ipv4: value?.ipv4,
+                menu: value?.menu,
+                aktivitas: value?.aktivitas,
+            }
+
+
+
+        ))
         return (
             <div className="card b ">
 
-                <div className="card-body card-over">
-                    <span className=" ml-2 float-left">
+                <div className="row card-body card-over">
+                    <div className=" pl-4 col-2 float-left">
                         <label className="col-form-label">Range Filter : </label>
 
-                        <span className=" mr-2 ml-4">
+                        <span>
                             <Datetime
                                 timeFormat={false}
                                 inputProps={{ className: "form-control" }}
@@ -76,6 +214,7 @@ class TableRiwayat extends Component {
                                 onChange={(fromDate) => {
                                     this.setState({ fromDate })
                                 }}
+                                className=' mb-3'
                             />
                         </span>
                         <span>
@@ -87,87 +226,32 @@ class TableRiwayat extends Component {
                                 onChange={(toDate) => {
                                     this.setState({ toDate })
                                 }}
+                                // className=' w-75'
                             />
                         </span>
-                        <Button color="info" className=" mt-4" onClick={this.onFilter}>Filter</Button>
-
-                    </span>
-                    
-                    {this.state.dataRiwayat && (
-                        <Datatable options={{
-                            searching: true,
-                            aLengthMenu: [500],
-                            paging: false,
-                            scrollX: true, scrollY: "370px",
-                            bordered: true,
-                            "pageLength": 10
-                        }}>
-                            <table className="table w-100" data-order='[[3, "desc"]]'>
-                                <thead>
-                                    <tr>
-                                        <th>Timestamp</th>
-                                        <th>Username</th>
-                                        <th>IPv4</th>
-                                        <th>Menu</th>
-                                        <th>Deskripsi</th>
-                                        {/* <th>Created</th> */}
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {this.state.dataRiwayat && this.state.dataRiwayat.data?.map(value => (
-                                        <tr>
-                                            <td style={{ width: 175 }}>
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.createdAt && (moment(value.createdAt).format("DD-MM-YYYY, HH:mm"))}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td >
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.user?.nama}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td>
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.ipv4}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td >
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.menu}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                            <td style={{ minWidth: 350 }}>
-                                                <div className="media align-items-center">
-                                                    <div className="media-body d-flex">
-                                                        <div>
-                                                            <p>{value.aktivitas}</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    ))}
-
-                                </tbody>
-                            </table>
-                        </Datatable>
-                    )}
+                        <Button color="info" className=" mt-4" onClick={(e) => this.onFilter()}>Filter</Button>
+
+                    </div>
+                    <div className="col-10">
+                        <DataTable data={datasearch.length ? datasearch : data} columns={columns}
+                            defaultSortField="title"
+                            pagination
+                            // selectableRows
+                            subHeader
+                            subHeaderComponent={
+                                <input
+                                    type="text"
+                                    className="w-25 form-control"
+                                    placeholder="Search..."
+                                    value={search}
+                                    onChange={this.handleSearchChange}
+                                />
+                            }
+                            subHeaderAlign="right"
+                        />
+                    </div>
+
+
                 </div>
             </div >
         );

components/TurunSanksi/InputTanggal.js

@@ -155,9 +155,48 @@ class InputTanggal extends Component {
     handleTmtCheck = () => {
         this.setState({ tmtCheck: !this.state.tmtCheck });
     };
+    done = async (data) => {
+		if (this.props?.user?.role.id === 2024) {
+			Swal.fire({
+				icon: 'error',
+				title: 'Oops...',
+				html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
+				confirmButtonColor: "#3e3a8e",
+				confirmButtonText: 'Oke'
+			})
+		} else {
+			this.setState({
+				loading: true
+			})
+			const sanksi = await this.ubahSanksi(data)
+			if (sanksi && ENV === "production") {
+				await this.updatePddikti(sanksi.data._id)  //kirim sanksiID ke function updatePDDIKTI
+			}
 
+			await Router.push({
+				pathname: "/app/turun-sanksi",
+			});
+		}
+	};
+    updatePddikti = async (sanksiId) => {
+		const getToken = await getCsrf();
+		const _csrf2 = getToken.token;
+		const toastPddikti = toast.loading("Updating pddikti...");
+		try {
+			const { query, token } = this.props;
+			const { id } = query;
+			await updatePddikti(token, sanksiId, _csrf2)
 
-    handelSimpan = async (data) => {
+			toast.update(toastPddikti, { render: "Berhasil Update PDDIKTI", type: "success", isLoading: false, autoClose: true, closeButton: true });
+
+		}
+
+		catch (error) {
+			toast.update(toastPddikti, { render: ("Gagal Update PDDIKTI"), type: "error", isLoading: false, autoClose: true, closeButton: true });
+		}
+
+	}
+    ubahSanksi = async (data) => {
         if (this.props?.user?.role.id === 2024) {
             Swal.fire({
                 icon: 'error',
@@ -186,7 +225,6 @@ class InputTanggal extends Component {
                 toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
             } else {
                 toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-                Router.push("/app/turun-sanksi");
             }
         }
 

package-lock.json

@@ -2175,6 +2175,11 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
@@ -3639,6 +3644,11 @@
         }
       }
     },
+    "camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+    },
     "caniuse-lite": {
       "version": "1.0.30001299",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
@@ -4247,6 +4257,11 @@
         "component-classes": "^1.2.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-loader": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.3.0.tgz",
@@ -4291,6 +4306,16 @@
         "fastparse": "^1.1.2"
       }
     },
+    "css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -7397,6 +7422,11 @@
       "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
       "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
     },
+    "nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -8306,6 +8336,11 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
     "picomatch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
@@ -9002,6 +9037,21 @@
         "shallowequal": "^1.1.0"
       }
     },
+    "react-data-table-component": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-7.6.2.tgz",
+      "integrity": "sha512-nHe7040fmtrJyQr/ieGrTfV0jBflYGK4sLokC6/AFOv3ThjmA9WzKz8Z8/2wMxzRqLU+Rn0CVFg+8+frKLepWQ==",
+      "requires": {
+        "deepmerge": "^4.3.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+          "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+        }
+      }
+    },
     "react-datepicker": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
@@ -10283,6 +10333,11 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -10608,6 +10663,67 @@
         "schema-utils": "^2.6.6"
       }
     },
+    "styled-components": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
+      "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
+      "requires": {
+        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/unitless": "0.8.0",
+        "@types/stylis": "4.2.0",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.2",
+        "postcss": "8.4.31",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.1",
+        "tslib": "2.5.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+          "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+          "requires": {
+            "@emotion/memoize": "^0.8.1"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+          "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+        },
+        "@emotion/unitless": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+          "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+        },
+        "csstype": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+          "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+        },
+        "postcss": {
+          "version": "8.4.31",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+          "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
+        "stylis": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+          "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+        },
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
+    },
     "styled-jsx": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.3.0.tgz",

package.json

@@ -89,6 +89,7 @@
     "react-contenteditable": "^3.3.7",
     "react-copy-to-clipboard": "^5.1.0",
     "react-data-grid": "6.1.0",
+    "react-data-table-component": "^7.6.2",
     "react-datepicker": "^4.8.0",
     "react-datetime": "2.16.3",
     "react-dnd": "6.0.0",
@@ -115,6 +116,7 @@
     "screenfull": "3.3.3",
     "simple-line-icons": "2.5.5",
     "spinkit": "1.2.5",
+    "styled-components": "^6.1.8",
     "sweetalert": "2.1.2",
     "sweetalert2": "^11.4.14",
     "swr": "^1.0.1",

pages/app/perbaikan/detail.js

@@ -31,7 +31,6 @@ class PemantauanDokumen extends Component {
 
 	render() {
 		const { sanksi, pt } = this.state;
-		console.log(sanksi)
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}

pages/app/sanksi/proses.js

@@ -454,7 +454,6 @@ class ProsesSanksi extends Component {
 
 	render() {
 		const { dataUpload, dataPelanggaran, pelaporan, dataSuratBA, thisclose } = this.state
-		console.log(dataPelanggaran, this.state.dataPelanggaran)
 		return (
 			<ContentWrapper unwrap>
 				{/* <Header /> */}

pages/laporan/new/index.js

@@ -459,6 +459,7 @@ class App extends Component {
                             {({ field, form }) => (
                               <Input
                                 type="file"
+                                accept="image/jpeg, image/png"
                                 onChange={(e) =>
                                   form.setFieldValue(
                                     field.name,
@@ -603,6 +604,7 @@ class App extends Component {
                               <Input
                                 type="file"
                                 multiple
+                                accept=".pdf"
                                 onChange={(e) =>
                                   form.setFieldValue(
                                     field.name,
@@ -618,7 +620,7 @@ class App extends Component {
                             className="form-text text-danger"
                           />
                           <p className="mrgn-top-5">
-                          Ukuran setiap dokumen PDF maksimal 15 Mb
+                            Ukuran setiap dokumen PDF maksimal 15 Mb
                           </p>
                         </div>
                       </FormGroup>