CaseProgress(header, laporan terbaru)

components/Delegasi/CaseProgress.js

@@ -1,4 +1,5 @@
 import React, { Component, useState, useEffect } from 'react';
+import { Button } from "reactstrap";
 import { Progress } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
 import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
@@ -14,7 +15,7 @@ const ChartPie = {
         "color": "#287DAD",
         "data": 70
     }, {
-        "label": "Ditindaklanjuti DIKTI",
+        "label": "Ditindaklanjuti LLDIKTI",
         "color": "#52D489",
         "data": 40
     }, {
@@ -103,27 +104,21 @@ const ChartBar = {
 }
 
 function CaseProgress() {
-
-
-    // const chartdata = [
-    //     { y: "Delegasi DIKTI", a: 100 },
-    //     { y: "Delegasi LLDIKTI", b: 70 },
-    //     { y: "Ditutup", c: 50 }
-    // ]
-
-    // const barOptions = {
-    //     element: 'morris-bar',
-    //     xkey: 'y',
-    //     ykeys: ["a", "b", "c"],
-    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-    //     xLabelMargin: 2,
-    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
-    //     resize: true
-    // }
-
     return (
         <div className="card b">
             <div className="card-body bb">
+                <div className="margin-botton-20 text-tahun">
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/previous.png"></img>
+                    </Button>
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/next.png"></img>
+                    </Button>
+                    <b className="text-tahun">Tahun 2022 </b>
+                    <Button className="float-right button-hidden icon-eksport">
+                        <img src="/static/img/Eksport.png"></img>
+                    </Button>
+                </div>
                 <div className="header-1">
                     <h2 className="card-title-1">Perkembangan</h2>
                 </div >

components/Pelaporan/CaseProgress.js

@@ -1,15 +1,39 @@
-import { Progress } from "reactstrap";
+import { Pagination, Progress, PaginationItem, PaginationLink, Button } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
 import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
 import FlotChart from '@/components/Charts/Flot.js';
 import { ChartSpline, ChartArea, ChartBar, ChartBarStacked, ChartDonut, ChartLine, ChartPie } from '@/components/Config/flot.setup.js';
 import Datatable from "@/components/Tables/Datatable";
 
+const FaCard = ({ icon }) => {
+    const iconName = icon.split('fa-')[1].substring(0, 20)
+    return (
+        <Col xl={3} lg={4}>
+            <div className="card">
+                <div className="card-body d-flex align-items-center">
+                    <em className={"fa-2x mr-2 " + icon}></em>
+                </div>
+            </div>
+        </Col>
+    )
+}
 
 function CaseProgress() {
     return (
         <div className="card b">
             <div className="card-body bb">
+                <div className="margin-botton-20 text-tahun">
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/previous.png"></img>
+                    </Button>
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/next.png"></img>
+                    </Button>
+                    <b className="text-tahun">Tahun 2022 </b>
+                    <Button className="float-right button-hidden icon-eksport">
+                        <img src="/static/img/Eksport.png"></img>
+                    </Button>
+                </div>
                 <div className="header-1">
                     <h2 className="card-title-1">Perkembangan</h2>
                 </div>
@@ -27,36 +51,17 @@ function CaseProgress() {
                 <div className="header-1">
                     <h2 className="card-title-1">Laporan Terbaru</h2>
                 </div>
-                <table className="table bb">
-                    <tbody>
-                        <tr>
-                            <td>
-                                <strong></strong>
-                            </td>
-                            <td>80</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <strong>Close Case</strong>
-                            </td>
-                            <td>20</td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <strong>Performance</strong>
-                            </td>
-                            <td>
-                                <em className="far fa-smile fa-lg text-warning"></em>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>
-                                <strong>Last Case Closed</strong>
-                            </td>
-                            <td>BI:1107 - 12/01/2016</td>
-                        </tr>
-                    </tbody>
-                </table>
+                <div>
+                    <h5 className="card-title text-left py-2 bg-gray border-radius-login">
+                        <b className="f-size">04047803</b> -<b>Universitas Satyagama</b>
+                    </h5>
+                    <h5 className="card-title text-left py-2 bg-gray border-radius-login">
+                        <b className="f-size">04047803</b> -<b>Universitas Satyagama</b>
+                    </h5>
+                    <h5 className="card-title text-left py-2 bg-gray border-radius-login">
+                        <b className="f-size">04047803</b> -<b>Universitas Satyagama</b>
+                    </h5>
+                </div>
             </div>
         </div >
     );

components/Pemeriksaan/CaseProgress.js

@@ -1,7 +1,7 @@
 import React, { Component, useState, useEffect } from 'react';
 import { Progress } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
-import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
+import { Container, Row, Col, Card, CardHeader, CardBody, Button } from 'reactstrap';
 import FlotChart from '@/components/Charts/Flot.js';
 import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from '@/components/Config/flot.setup.js';
 import Datatable from "@/components/Tables/Datatable";
@@ -93,27 +93,21 @@ const ChartBar = {
 }
 
 function CaseProgress() {
-
-
-    // const chartdata = [
-    //     { y: "Delegasi DIKTI", a: 100 },
-    //     { y: "Delegasi LLDIKTI", b: 70 },
-    //     { y: "Ditutup", c: 50 }
-    // ]
-
-    // const barOptions = {
-    //     element: 'morris-bar',
-    //     xkey: 'y',
-    //     ykeys: ["a", "b", "c"],
-    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-    //     xLabelMargin: 2,
-    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
-    //     resize: true
-    // }
-
     return (
         <div className="card b">
             <div className="card-body bb">
+                <div className="margin-botton-20 text-tahun">
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/previous.png"></img>
+                    </Button>
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/next.png"></img>
+                    </Button>
+                    <b className="text-tahun">Tahun 2022 </b>
+                    <Button className="float-right button-hidden icon-eksport">
+                        <img src="/static/img/Eksport.png"></img>
+                    </Button>
+                </div>
                 <div className="header-1">
                     <h2 className="card-title-1">Perkembangan</h2>
                 </div >

components/Penjadwalan/CaseProgress.js

@@ -1,7 +1,7 @@
 import React, { Component, useState, useEffect } from 'react';
 import { Progress } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
-import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
+import { Container, Row, Col, Card, CardHeader, CardBody, Button } from 'reactstrap';
 import FlotChart from '@/components/Charts/Flot.js';
 import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from '@/components/Config/flot.setup.js';
 import Datatable from "@/components/Tables/Datatable";
@@ -93,27 +93,21 @@ const ChartBar = {
 }
 
 function CaseProgress() {
-
-
-    // const chartdata = [
-    //     { y: "Delegasi DIKTI", a: 100 },
-    //     { y: "Delegasi LLDIKTI", b: 70 },
-    //     { y: "Ditutup", c: 50 }
-    // ]
-
-    // const barOptions = {
-    //     element: 'morris-bar',
-    //     xkey: 'y',
-    //     ykeys: ["a", "b", "c"],
-    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-    //     xLabelMargin: 2,
-    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
-    //     resize: true
-    // }
-
     return (
         <div className="card b">
             <div className="card-body bb">
+                <div className="margin-botton-20 text-tahun">
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/previous.png"></img>
+                    </Button>
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/next.png"></img>
+                    </Button>
+                    <b className="text-tahun">Tahun 2022 </b>
+                    <Button className="float-right button-hidden icon-eksport">
+                        <img src="/static/img/Eksport.png"></img>
+                    </Button>
+                </div>
                 <div className="header-1">
                     <h2 className="card-title-1">Perkembangan</h2>
                 </div >

components/Sanksi/CaseProgress.js

@@ -1,7 +1,7 @@
 import React, { Component, useState, useEffect } from 'react';
 import { Progress } from "reactstrap";
 import Sparkline from "@/components/Common/Sparklines";
-import { Container, Row, Col, Card, CardHeader, CardBody } from 'reactstrap';
+import { Container, Row, Col, Card, CardHeader, CardBody, Button } from 'reactstrap';
 import FlotChart from '@/components/Charts/Flot.js';
 import { ChartSpline, ChartArea, ChartBarStacked, ChartDonut, ChartLine } from '@/components/Config/flot.setup.js';
 import Datatable from "@/components/Tables/Datatable";
@@ -93,27 +93,21 @@ const ChartBar = {
 }
 
 function CaseProgress() {
-
-
-    // const chartdata = [
-    //     { y: "Delegasi DIKTI", a: 100 },
-    //     { y: "Delegasi LLDIKTI", b: 70 },
-    //     { y: "Ditutup", c: 50 }
-    // ]
-
-    // const barOptions = {
-    //     element: 'morris-bar',
-    //     xkey: 'y',
-    //     ykeys: ["a", "b", "c"],
-    //     labels: ["Ditindaklanjuti LLDIKTI", "Ditindaklanjuti DIKTI", "Ditutup"],
-    //     xLabelMargin: 2,
-    //     barColors: ['#287DAD', '#52D489', '#FD4233'],
-    //     resize: true
-    // }
-
     return (
         <div className="card b">
             <div className="card-body bb">
+                <div className="margin-botton-20 text-tahun">
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/previous.png"></img>
+                    </Button>
+                    <Button className="float-left button-hidden icon-next">
+                        <img src="/static/img/next.png"></img>
+                    </Button>
+                    <b className="text-tahun">April 2022</b>
+                    <Button className="float-right button-hidden icon-eksport">
+                        <img src="/static/img/Eksport.png"></img>
+                    </Button>
+                </div>
                 <div className="header-1">
                     <h2 className="card-title-1">Perkembangan</h2>
                 </div >

styles/bootstrap/_buttons.scss

@@ -255,4 +255,9 @@ input[type="button"] {
 }
 .btn-radius .button-lihatpemantauan{
 	border: 0;
-}
+}
+.button-hidden{
+	border: 0;
+	padding: 0;
+	
+}

styles/bootstrap/_card.scss

@@ -339,4 +339,21 @@
 	.card-over{
 		overflow: auto;
 	}
+	.f-size{
+		margin-left: 10px;
+	}
+	.w-40{
+		width: 100px;
+	}
+	.margin-botton-20{
+		margin-bottom: 20px;
+	}
+	.text-tahun{
+		font-size: 20px;
+		text-align: center;
+	}
+	.fl{
+		display: inline;
+	}
+
 

styles/bootstrap/_images.scss

@@ -116,4 +116,17 @@
     width: 97%;
     margin-left: auto;
     margin-right: auto;
+  }
+  .icon-next{
+    margin-right: 15px;
+    margin-top: 5px;
+  }
+  .float-rigt{
+    float: right;
+  }
+  .float-left{
+    float: left;
+  }
+  .icon-eksport{
+    margin-top: 5px;
   }