rev : report divisi
Deskripsi: - report semua divisi api - report semua divisi ui No Issues
This commit is contained in:
@@ -223,7 +223,22 @@ export async function GET(request: Request) {
|
||||
// CHART EVENT
|
||||
let kondisiEvent, kondisiSelesai, kondisiComingSoon
|
||||
if (division == "undefined") {
|
||||
kondisiEvent = {
|
||||
// kondisiEvent = {
|
||||
// isActive: true,
|
||||
// Division: {
|
||||
// idGroup: String(grup)
|
||||
// },
|
||||
// DivisionCalendarReminder: {
|
||||
// some: {
|
||||
// dateStart: {
|
||||
// gte: new Date(String(date)),
|
||||
// lte: new Date(String(dateAkhir))
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
kondisiSelesai = {
|
||||
isActive: true,
|
||||
Division: {
|
||||
idGroup: String(grup)
|
||||
@@ -232,24 +247,39 @@ export async function GET(request: Request) {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(date)),
|
||||
lte: new Date()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
kondisiComingSoon = {
|
||||
isActive: true,
|
||||
Division: {
|
||||
idGroup: String(grup)
|
||||
},
|
||||
DivisionCalendarReminder: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gt: new Date(),
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
kondisiEvent = {
|
||||
isActive: true,
|
||||
idDivision: String(division),
|
||||
DivisionCalendarReminder: {
|
||||
some: {
|
||||
dateStart: {
|
||||
gte: new Date(String(date)),
|
||||
lte: new Date(String(dateAkhir))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// kondisiEvent = {
|
||||
// isActive: true,
|
||||
// idDivision: String(division),
|
||||
// DivisionCalendarReminder: {
|
||||
// some: {
|
||||
// dateStart: {
|
||||
// gte: new Date(String(date)),
|
||||
// lte: new Date(String(dateAkhir))
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
kondisiSelesai = {
|
||||
isActive: true,
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { globalRole, LayoutNavbarNew, TEMA } from "@/module/_global";
|
||||
import { funGetAllGroup, IDataGroup } from "@/module/group";
|
||||
import { useHookstate } from "@hookstate/core";
|
||||
import { Box, Select, Skeleton, Stack } from "@mantine/core";
|
||||
import { Badge, Box, Select, Skeleton, Stack, Table } from "@mantine/core";
|
||||
import { DateInput } from "@mantine/dates";
|
||||
import { useShallowEffect } from "@mantine/hooks";
|
||||
import moment from "moment";
|
||||
@@ -13,21 +13,32 @@ import { funGetReportDivision } from "../lib/api_division";
|
||||
import EchartBarReport from "./echart_bar_report";
|
||||
import EchartPaiReport from "./echart_pai_report";
|
||||
import EventReport from "./event_report";
|
||||
import _ from "lodash";
|
||||
import router from "next/router";
|
||||
import EchartBarReportCalender from "./echart_bar_calender";
|
||||
|
||||
export default function CreateReport() {
|
||||
const [value, setValue] = useState<Date | null>(null);
|
||||
const [valueAkhir, setValueAkhir] = useState<Date | null>(null);
|
||||
const [dataGroup, setDataGroup] = useState<IDataGroup[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingTable, setLoadingTable] = useState(false);
|
||||
const [tampil, setTampil] = useState(false);
|
||||
const [isGroup, setIsGroup] = useState("");
|
||||
const param = useParams<{ id: string }>()
|
||||
const tema = useHookstate(TEMA)
|
||||
const roleLogin = useHookstate(globalRole)
|
||||
const [reportTable, setReportTable] = useState<any[]>([])
|
||||
const [report, setReport] = useState({
|
||||
progress: [],
|
||||
dokumen: [],
|
||||
event: [],
|
||||
})
|
||||
const [touched, setTouched] = useState({
|
||||
grup: false,
|
||||
start_date: false,
|
||||
end_date: false
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
const loadGroup = await funGetAllGroup('?active=true')
|
||||
@@ -38,7 +49,7 @@ export default function CreateReport() {
|
||||
}
|
||||
}
|
||||
|
||||
async function onReport(group: string, date: any) {
|
||||
async function onReport(group: string, awal: any, akhir: any) {
|
||||
try {
|
||||
setReport({
|
||||
progress: [],
|
||||
@@ -47,7 +58,7 @@ export default function CreateReport() {
|
||||
})
|
||||
setTampil(true)
|
||||
setLoading(true)
|
||||
const res = await funGetReportDivision(`?group=${group}&division=${param.id}&date=${moment(date).format("YYYY-MM-DD")}`)
|
||||
const res = await funGetReportDivision(`?group=${group}&division=${param.id}&date=${moment(awal).format("YYYY-MM-DD")}&date-end=${moment(akhir).format("YYYY-MM-DD")}`)
|
||||
if (res.success) {
|
||||
setReport(res.data)
|
||||
} else {
|
||||
@@ -61,36 +72,71 @@ export default function CreateReport() {
|
||||
}
|
||||
}
|
||||
|
||||
function onChooseGroup(val: any) {
|
||||
if (val != null && val != "" && value != null && value != undefined) {
|
||||
onReport(val, value)
|
||||
async function onReportTable(group: string, awal: any, akhir: any) {
|
||||
try {
|
||||
setLoadingTable(true)
|
||||
const res = await funGetReportDivision(`?cat=table-progress&group=${group}&division=${param.id}&date=${moment(awal).format("YYYY-MM-DD")}&date-end=${moment(akhir).format("YYYY-MM-DD")}`)
|
||||
if (res.success) {
|
||||
setReportTable(res.data)
|
||||
} else {
|
||||
toast.error(res.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
} finally {
|
||||
setLoadingTable(false)
|
||||
}
|
||||
|
||||
if (val == null || val == "") {
|
||||
setTampil(false)
|
||||
toast.error("Error! harus memilih grup")
|
||||
}
|
||||
setIsGroup(String(val))
|
||||
}
|
||||
|
||||
function onChangeDate(val: any) {
|
||||
|
||||
if (roleLogin.get() == "supadmin") {
|
||||
if (val != null && val != "" && isGroup != "" && isGroup != "null") {
|
||||
onReport(isGroup, val)
|
||||
}
|
||||
|
||||
if (isGroup == null || isGroup == "") {
|
||||
function onChangeDate(val: any, kat: string) {
|
||||
if (kat == "grup") {
|
||||
setIsGroup(val)
|
||||
if (val == null || val == "") {
|
||||
setTampil(false)
|
||||
toast.error("Error! harus memilih grup")
|
||||
setTouched({ ...touched, grup: true })
|
||||
} else {
|
||||
setIsGroup(String(val))
|
||||
setTouched({ ...touched, grup: false })
|
||||
|
||||
if (value != null && value != undefined && valueAkhir != null && valueAkhir != undefined && !touched.end_date) {
|
||||
onReport(String(val), value, valueAkhir)
|
||||
onReportTable(String(val), value, valueAkhir)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (val != null && val != "") {
|
||||
onReport(isGroup, val)
|
||||
} else if (kat == "start-date") {
|
||||
setValue(val)
|
||||
if (valueAkhir != null && valueAkhir != undefined) {
|
||||
if (val >= valueAkhir) {
|
||||
setTouched({ ...touched, end_date: true })
|
||||
setTampil(false)
|
||||
} else {
|
||||
setTouched({ ...touched, end_date: false })
|
||||
if (roleLogin.get() == "supadmin" && (isGroup == "" || isGroup == null || isGroup == undefined)) {
|
||||
setTampil(false)
|
||||
} else {
|
||||
onReport(isGroup, val, valueAkhir)
|
||||
onReportTable(isGroup, val, valueAkhir)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (kat == "end-date") {
|
||||
setValueAkhir(val)
|
||||
if (value != null && value != undefined) {
|
||||
if (value >= val) {
|
||||
setTouched({ ...touched, end_date: true })
|
||||
setTampil(false)
|
||||
} else {
|
||||
setTouched({ ...touched, end_date: false })
|
||||
if (roleLogin.get() == "supadmin" && (isGroup == "" || isGroup == null || isGroup == undefined)) {
|
||||
setTampil(false)
|
||||
} else {
|
||||
onReport(isGroup, value, val)
|
||||
onReportTable(isGroup, value, val)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setValue(val)
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
@@ -113,19 +159,32 @@ export default function CreateReport() {
|
||||
value: String(pro.id),
|
||||
label: pro.name
|
||||
}))}
|
||||
onChange={(val) => { onChooseGroup(val) }}
|
||||
onChange={(val) => { onChangeDate(val, 'grup') }}
|
||||
error={touched.grup && "Grup tidak boleh kosong"}
|
||||
/>
|
||||
}
|
||||
|
||||
<DateInput
|
||||
valueFormat="DD-MM-YYYY"
|
||||
valueFormat='DD-MM-YYYY'
|
||||
value={value}
|
||||
onChange={(val) => { onChangeDate(val) }}
|
||||
onChange={(val) => { onChangeDate(val, 'start-date') }}
|
||||
radius={10}
|
||||
size="md"
|
||||
required
|
||||
label="Tanggal"
|
||||
placeholder="Tanggal"
|
||||
label="Tanggal Awal"
|
||||
placeholder="Tanggal Awal"
|
||||
/>
|
||||
|
||||
<DateInput
|
||||
valueFormat='DD-MM-YYYY'
|
||||
value={valueAkhir}
|
||||
onChange={(val) => { onChangeDate(val, 'end-date') }}
|
||||
radius={10}
|
||||
size="md"
|
||||
required
|
||||
label="Tanggal Akhir"
|
||||
placeholder="Tanggal Akhir"
|
||||
error={touched.end_date && "Tanggal akhir harus lebih besar dari tanggal awal"}
|
||||
/>
|
||||
{
|
||||
tampil &&
|
||||
@@ -158,6 +217,52 @@ export default function CreateReport() {
|
||||
}}
|
||||
>
|
||||
<EchartPaiReport data={report.progress} />
|
||||
{
|
||||
!loadingTable ?
|
||||
<Table highlightOnHover striped withTableBorder mt={50}>
|
||||
<Table.Tr>
|
||||
<Table.Th>Tugas</Table.Th>
|
||||
<Table.Th>Progres</Table.Th>
|
||||
<Table.Th>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
{
|
||||
reportTable.length == 0 ?
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={3} ta={"center"}>Data kosong</Table.Td>
|
||||
</Table.Tr>
|
||||
:
|
||||
reportTable.map((item: any, i: number) => {
|
||||
return (
|
||||
<Table.Tr key={i} onClick={() => { router.push(`/division/${param.id}/task/${item.id}`) }}>
|
||||
<Table.Td>{item.title}</Table.Td>
|
||||
<Table.Td>
|
||||
{_.isNull(item.progress) ? 0 : item.progress}%
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge size="xs" color={
|
||||
item.status === 0 ? '#5470c6' :
|
||||
item.status === 2 ? '#fac858' :
|
||||
item.status === 1 ? '#92cc76' :
|
||||
item.status === 3 ? '#ef6666' :
|
||||
"grey"
|
||||
}>
|
||||
{
|
||||
item.status === 0 ? 'Segera' :
|
||||
item.status === 1 ? 'Dikerjakan' :
|
||||
item.status === 2 ? 'Selesai' :
|
||||
item.status === 3 ? 'Dibatalkan' :
|
||||
"Segera"
|
||||
}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</Table>
|
||||
: <></>
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box pt={10}>
|
||||
@@ -181,7 +286,8 @@ export default function CreateReport() {
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} />
|
||||
<EchartBarReportCalender data={report.event} />
|
||||
{/* <EventReport data={report.event} tgl={moment(value).format("DD MMMM YYYY")} /> */}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -31,7 +31,6 @@ export default function ReportDivisionId() {
|
||||
event: [],
|
||||
})
|
||||
const [reportTable, setReportTable] = useState<any[]>([])
|
||||
|
||||
const [touched, setTouched] = useState({
|
||||
start_date: false,
|
||||
end_date: false
|
||||
|
||||
Reference in New Issue
Block a user