admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Updates.

Browse Source
This commit is contained in:
Patrick Fic
2021-04-01 09:44:29 -07:00
parent 10690ec187
commit ad0347e25b
17 changed files with 1262 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
View File

@@ -1,4 +1,4 @@
import { Input, Table, Checkbox } from "antd";
import { Input, Table, Checkbox, Card, Space } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
@@ -145,28 +145,26 @@ export default function AccountingPayablesTableComponent({ loading, bills }) {
: bills;
return (
<div>
<Card
extra={
<Space wrap>
<PayableExportAll
billids={selectedBills}
disabled={transInProgress || selectedBills.length === 0}
loadingCallback={setTransInProgress}
completedCallback={setSelectedBills}
/>
<Input
value={state.search}
onChange={handleSearch}
placeholder={t("general.labels.search")}
allowClear
/>
</Space>
}
>
<Table
loading={loading}
title={() => {
return (
<div className="imex-table-header">
<PayableExportAll
billids={selectedBills}
disabled={transInProgress || selectedBills.length === 0}
loadingCallback={setTransInProgress}
completedCallback={setSelectedBills}
/>
<Input
className="imex-table-header__search"
value={state.search}
onChange={handleSearch}
placeholder={t("general.labels.search")}
allowClear
/>
</div>
);
}}
dataSource={dataSource}
pagination={{ position: "top", pageSize: 50 }}
columns={columns}
@@ -185,6 +183,6 @@ export default function AccountingPayablesTableComponent({ loading, bills }) {
type: "checkbox",
}}
/>
</div>
</Card>
);
}

54
client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
View File

@@ -1,4 +1,4 @@
import { Input, Table } from "antd";
import { Card, Input, Space, Table } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
@@ -123,13 +123,11 @@ export default function AccountingPayablesTableComponent({
sorter: (a, b) => a.clm_total - b.clm_total,
render: (text, record) => (
<div>
<PaymentExportButton
paymentId={record.id}
disabled={transInProgress || !!record.exportedat}
loadingCallback={setTransInProgress}
/>
</div>
<PaymentExportButton
paymentId={record.id}
disabled={transInProgress || !!record.exportedat}
loadingCallback={setTransInProgress}
/>
),
},
];
@@ -152,28 +150,26 @@ export default function AccountingPayablesTableComponent({
: payments;
return (
<div>
<Card
extra={
<Space wrap>
<PaymentsExportAllButton
paymentIds={selectedPayments}
disabled={transInProgress || selectedPayments.length === 0}
loadingCallback={setTransInProgress}
completedCallback={setSelectedPayments}
/>
<Input
value={state.search}
onChange={handleSearch}
placeholder={t("general.labels.search")}
allowClear
/>
</Space>
}
>
<Table
loading={loading}
title={() => {
return (
<div className="imex-table-header">
<PaymentsExportAllButton
paymentIds={selectedPayments}
disabled={transInProgress || selectedPayments.length === 0}
loadingCallback={setTransInProgress}
completedCallback={setSelectedPayments}
/>
<Input
className="imex-table-header__search"
value={state.search}
onChange={handleSearch}
placeholder={t("general.labels.search")}
allowClear
/>
</div>
);
}}
dataSource={dataSource}
pagination={{ position: "top", pageSize: 50 }}
columns={columns}
@@ -192,6 +188,6 @@ export default function AccountingPayablesTableComponent({
type: "checkbox",
}}
/>
</div>
</Card>
);
}

46
client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
View File

@@ -1,4 +1,4 @@
import { Button, Input, Table } from "antd";
import { Button, Card, Input, Space, Table } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
@@ -121,7 +121,7 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
sorter: (a, b) => a.clm_total - b.clm_total,
render: (text, record) => (
<div style={{ display: "flex" }}>
<Space wrap>
<JobExportButton
jobId={record.id}
disabled={!!record.date_exported}
@@ -129,7 +129,7 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
<Link to={`/manage/jobs/${record.id}/close`}>
<Button>{t("jobs.labels.viewallocations")}</Button>
</Link>
</div>
</Space>
),
},
];
@@ -166,28 +166,26 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
: jobs;
return (
<div>
<Card
extra={
<Space wrap>
<JobsExportAllButton
jobIds={selectedJobs}
disabled={transInProgress || selectedJobs.length === 0}
loadingCallback={setTransInProgress}
completedCallback={setSelectedJobs}
/>
<Input.Search
value={state.search}
onChange={handleSearch}
placeholder={t("general.labels.search")}
allowClear
/>
</Space>
}
>
<Table
loading={loading}
title={() => {
return (
<div className="imex-table-header">
<JobsExportAllButton
jobIds={selectedJobs}
disabled={transInProgress || selectedJobs.length === 0}
loadingCallback={setTransInProgress}
completedCallback={setSelectedJobs}
/>
<Input.Search
className="imex-table-header__search"
value={state.search}
onChange={handleSearch}
placeholder={t("general.labels.search")}
allowClear
/>
</div>
);
}}
dataSource={dataSource}
pagination={{ position: "top" }}
columns={columns}
@@ -206,6 +204,6 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
type: "checkbox",
}}
/>
</div>
</Card>
);
}

40
client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons";
import { Button, Input, Space, Table } from "antd";
import { Button, Card, Input, Space, Table } from "antd";
import queryString from "query-string";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
@@ -175,7 +175,23 @@ export function PaymentsListPaginated({
};
return (
<div>
<Card
extra={
<Space wrap>
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Input.Search
placeholder={t("general.labels.search")}
onSearch={(value) => {
search.search = value;
history.push({ search: queryString.stringify(search) });
}}
enterButton
/>
</Space>
}
>
<Table
loading={loading}
scroll={{ x: true }}
@@ -189,26 +205,8 @@ export function PaymentsListPaginated({
rowKey="id"
dataSource={payments}
onChange={handleTableChange}
title={() => {
return (
<div className="imex-table-header">
<Button onClick={() => refetch()}>
<SyncOutlined />
</Button>
<Input.Search
className="imex-table-header__search"
placeholder={t("general.labels.search")}
onSearch={(value) => {
search.search = value;
history.push({ search: queryString.stringify(search) });
}}
enterButton
/>
</div>
);
}}
/>
</div>
</Card>
);
}

40
client/src/components/schedule-calendar/schedule-calendar.component.jsx
View File

@@ -1,5 +1,5 @@
import { SyncOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { Button, Col, PageHeader, Row, Space } from "antd";
import React from "react";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
@@ -7,23 +7,29 @@ import ScheduleProductionList from "../schedule-production-list/schedule-product
export default function ScheduleCalendarComponent({ data, refetch }) {
return (
<div>
<div className="imex-flex-row">
<Button
className="imex-flex-row__margin"
onClick={() => {
refetch();
}}
>
<SyncOutlined />
</Button>
<ScheduleProductionList />
</div>
<Row gutter={[16, 16]}>
<ScheduleModal />
<Col span={24}>
<PageHeader
extra={
<Space wrap>
<Button
onClick={() => {
refetch();
}}
>
<SyncOutlined />
</Button>
<ScheduleCalendarWrapperComponent data={data} refetch={refetch} />
</div>
<ScheduleProductionList />
</Space>
}
/>
</Col>
<Col span={24}>
<ScheduleCalendarWrapperComponent data={data} refetch={refetch} />
</Col>
</Row>
);
}

2
client/src/components/schedule-calendar/schedule-calendar.container.jsx
View File

@@ -50,7 +50,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
return (
<ScheduleCalendarComponent
refetch={refetch}
data={data ? normalizedData : null}
data={data ? normalizedData : []}
/>
);
}

6
client/src/components/schedule-production-list/schedule-production-list.component.jsx
View File

@@ -1,5 +1,5 @@
import { DownOutlined } from "@ant-design/icons";
import { Card, Popover } from "antd";
import { Button, Card, Popover } from "antd";
import React from "react";
import { useLazyQuery } from "@apollo/client";
import { useTranslation } from "react-i18next";
@@ -63,10 +63,10 @@ export default function ScheduleProductionList() {
return (
<Popover content={content} trigger="click" placement="bottomRight">
<a href=" #" onClick={() => callQuery()}>
<Button onClick={() => callQuery()}>
{t("appointments.labels.inproduction")}
<DownOutlined />
</a>
</Button>
</Popover>
);
}

4
client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
View File

@@ -30,7 +30,9 @@ export function TechClockOffButton({
const [form] = Form.useForm();
const { t } = useTranslation();
const emps = bodyshop.employees.filter((e) => e.id === technician.id)[0];
const emps = bodyshop.employees.filter(
(e) => e.id === technician && technician.id
)[0];
const handleFinish = async (values) => {
logImEXEvent("tech_clock_out_job");

1
client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
View File

@@ -38,6 +38,7 @@ export default function TimeTicketsDatesSelector() {
start ? moment(start) : moment().startOf("week").subtract(7, "days"),
end ? moment(end) : moment().endOf("week"),
]}
format="MM/DD/YYYY"
ranges={DatePickerRanges}
onCalendarChange={handleChange}
/>

22
client/src/components/time-ticket-list/time-ticket-list.component.jsx
View File

@@ -16,6 +16,7 @@ export default function TimeTicketList({
refetch,
techConsole,
jobId,
extra,
}) {
const [state, setState] = useState({
sortedInfo: {},
@@ -200,15 +201,18 @@ export default function TimeTicketList({
<Card
title={t("timetickets.labels.timetickets")}
extra={
jobId &&
(techConsole ? null : (
<TimeTicketEnterButton
actions={{ refetch }}
context={{ jobId: jobId }}
>
{t("timetickets.actions.enter")}
</TimeTicketEnterButton>
))
<Space wrap>
{jobId &&
(techConsole ? null : (
<TimeTicketEnterButton
actions={{ refetch }}
context={{ jobId: jobId }}
>
{t("timetickets.actions.enter")}
</TimeTicketEnterButton>
))}
{extra}
</Space>
}
>
<Table

390
client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
View File

@@ -1,14 +1,15 @@
import { Button, List, Space, Statistic, Typography } from "antd";
import { Card, Col, Row, Table } from "antd";
import _ from "lodash";
import moment from "moment";
import React from "react";
import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { onlyUnique } from "../../utils/arrayHelper";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { alphaSort } from "../../utils/sorters";
import { TemplateList } from "../../utils/TemplateConstants";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -24,8 +25,6 @@ export function TimeTicketsSummaryEmployees({
startDate,
endDate,
}) {
const { t } = useTranslation();
//Group everything by employee
//Then sum the individual time TimeTicketsSummary.
@@ -42,6 +41,7 @@ export function TimeTicketsSummaryEmployees({
});
const jobTickets = Object.keys(jobTicketsByEmployee).map(function (key) {
return {
jobKey: key,
employee: jobTicketsByEmployee[key][0].employee,
tickets: jobTicketsByEmployee[key],
};
@@ -65,150 +65,248 @@ export function TimeTicketsSummaryEmployees({
};
});
const handlePrintEmployeeTicket = async (empId) => {
GenerateDocument(
{
name: TemplateList().timetickets_employee.key,
variables: { id: empId, start: startDate, end: endDate },
},
{},
"p"
);
};
return (
<div>
<List
header={
<Typography.Title level={3}>
{t("timetickets.labels.jobhours")}
</Typography.Title>
}
itemLayout="horizontal"
//dataSource={jobTickets}
>
{jobTickets.map((item, idx) => {
const employeeCostCenters = item.tickets
.map((i) => i.cost_center)
.filter(onlyUnique);
return employeeCostCenters.map((costCenter) => {
const actHrs = item.tickets
.filter((ticket) => ticket.cost_center === costCenter)
.reduce((acc, val) => acc + val.actualhrs, 0);
const prodHrs = item.tickets
.filter((ticket) => ticket.cost_center === costCenter)
.reduce((acc, val) => acc + val.productivehrs, 0);
const clockHrs = item.tickets
.filter((ticket) => ticket.cost_center === costCenter)
.reduce((acc, val) => {
if (!!val.clockoff && !!val.clockon)
return (
acc +
moment(val.clockoff).diff(
moment(val.clockon),
"hours",
true
)
);
return acc;
}, 0);
return (
<List.Item
key={`${idx}${costCenter}`}
actions={[
<Button
onClick={() => handlePrintEmployeeTicket(item.employee.id)}
>
{t("timetickets.actions.printemployee")}
</Button>,
]}
>
<LoadingSkeleton loading={loading}>
<List.Item.Meta
title={`${item.employee.first_name} ${item.employee.last_name}`}
description={costCenter}
/>
<Space>
<Statistic
title={t("timetickets.fields.actualhrs")}
precision={1}
value={actHrs}
/>
<Statistic
title={t("timetickets.fields.productivehrs")}
precision={1}
value={prodHrs}
/>
<Statistic
title={t("timetickets.fields.efficiency")}
precision={1}
value={
actHrs === 0 || !actHrs ? "∞" : (prodHrs / actHrs) * 100
}
suffix={"%"}
/>
<Statistic
title={t("timetickets.fields.clockhours")}
precision={1}
value={clockHrs}
/>
</Space>
</LoadingSkeleton>
</List.Item>
);
});
})}
</List>
<List
header={
<Typography.Title level={3}>
{t("timetickets.labels.clockhours")}
</Typography.Title>
}
itemLayout="horizontal"
dataSource={shiftTickets}
renderItem={(item) => {
const clockHrs = item.tickets.reduce((acc, val) => {
if (!!val.clockoff && !!val.clockon)
return (
acc +
moment(val.clockoff).diff(moment(val.clockon), "hours", true)
);
return acc;
}, 0);
return (
<List.Item
actions={[
<Button
onClick={() => handlePrintEmployeeTicket(item.employee.id)}
>
{t("timetickets.actions.printemployee")}
</Button>,
]}
>
<LoadingSkeleton loading={loading}>
<List.Item.Meta
title={`${item.employee.first_name} ${item.employee.last_name}`}
/>
<Statistic
title={t("timetickets.fields.clockhours")}
precision={2}
value={clockHrs}
/>
</LoadingSkeleton>
</List.Item>
);
}}
/>
</div>
<Row gutter={[16, 16]}>
<Col span={24}>
<JobRelatedTicketsTable
loading={loading}
jobTickets={jobTickets}
startDate={startDate}
endDate={endDate}
/>
</Col>
<Col span={24}>
<ShiftRelatedTicketsTable
loading={loading}
shiftTickets={shiftTickets}
startDate={startDate}
endDate={endDate}
/>
</Col>
</Row>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(TimeTicketsSummaryEmployees);
const JobRelatedTicketsTable = ({
loading,
jobTickets,
startDate,
endDate,
}) => {
const Templates = TemplateList();
const { t } = useTranslation();
const [state, setState] = useState({
sortedInfo: {},
});
const data = useMemo(() => {
return _.flatten(
jobTickets.map((item, idx) => {
const employeeCostCenters = item.tickets
.map((i) => i.cost_center)
.filter(onlyUnique);
return employeeCostCenters.map((costCenter) => {
const actHrs = item.tickets
.filter((ticket) => ticket.cost_center === costCenter)
.reduce((acc, val) => acc + val.actualhrs, 0);
const prodHrs = item.tickets
.filter((ticket) => ticket.cost_center === costCenter)
.reduce((acc, val) => acc + val.productivehrs, 0);
const clockHrs = item.tickets
.filter((ticket) => ticket.cost_center === costCenter)
.reduce((acc, val) => {
if (!!val.clockoff && !!val.clockon)
return (
acc +
moment(val.clockoff).diff(moment(val.clockon), "hours", true)
);
return acc;
}, 0);
return {
id: `${item.jobKey}${costCenter}`,
item,
actHrs,
prodHrs,
clockHrs,
};
});
})
);
}, [jobTickets]);
const columns = [
{
title: t("bills.fields.vendorname"),
dataIndex: "empname",
key: "empname",
sorter: (a, b) => alphaSort(a.empname, b.empname),
sortOrder:
state.sortedInfo.columnKey === "empname" && state.sortedInfo.order,
render: (text, record) =>
`${record.item.employee.first_name} ${record.item.employee.last_name}`,
},
{
title: t("timetickets.fields.actualhrs"),
dataIndex: "actHrs",
key: "actHrs",
sorter: (a, b) => a.actHrs - b.actHrs,
sortOrder:
state.sortedInfo.columnKey === "actHrs" && state.sortedInfo.order,
},
{
title: t("timetickets.fields.productivehrs"),
dataIndex: "prodHrs",
key: "prodHrs",
sorter: (a, b) => a.prodHrs - b.prodHrs,
sortOrder:
state.sortedInfo.columnKey === "prodHrs" && state.sortedInfo.order,
},
{
title: t("timetickets.fields.efficiency"),
dataIndex: "total",
key: "total",
sorter: (a, b) => a.total - b.total,
sortOrder:
state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
render: (text, record) =>
record.actHrs === 0 || !record.actHrs
? "∞"
: (record.prodHrs / record.actHrs) * 100,
},
{
title: t("timetickets.fields.clockhours"),
dataIndex: "clockHrs",
key: "clockHrs",
sorter: (a, b) => a.clockHrs - b.clockHrs,
sortOrder:
state.sortedInfo.columnKey === "clockHrs" && state.sortedInfo.order,
render: (text, record) => record.clockHrs.toFixed(2),
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
key: "actions",
render: (text, record) => (
<PrintWrapperComponent
templateObject={{
name: Templates.timetickets_employee.key,
variables: {
id: record.item.employee.id,
start: startDate,
end: endDate,
},
}}
messageObject={{ subject: Templates.timetickets_employee.subject }}
/>
),
},
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
return (
<Card title={t("timetickets.labels.jobhours")}>
<Table
loading={loading}
scroll={{ x: true, y: "50rem" }}
columns={columns}
rowKey="id"
dataSource={data}
onChange={handleTableChange}
/>
</Card>
);
};
const ShiftRelatedTicketsTable = ({
loading,
shiftTickets,
startDate,
endDate,
}) => {
const Templates = TemplateList();
const { t } = useTranslation();
const [state, setState] = useState({
sortedInfo: {},
});
const data = useMemo(() => {
return shiftTickets.map((item) => {
const clockHrs = item.tickets.reduce((acc, val) => {
if (!!val.clockoff && !!val.clockon)
return (
acc + moment(val.clockoff).diff(moment(val.clockon), "hours", true)
);
return acc;
}, 0);
return { id: item.employee.id, item, clockHrs };
});
}, [shiftTickets]);
const columns = [
{
title: t("bills.fields.vendorname"),
dataIndex: "empname",
key: "empname",
sorter: (a, b) => alphaSort(a.empname, b.empname),
sortOrder:
state.sortedInfo.columnKey === "empname" && state.sortedInfo.order,
render: (text, record) =>
`${record.item.employee.first_name} ${record.item.employee.last_name}`,
},
{
title: t("timetickets.fields.clockhours"),
dataIndex: "clockHrs",
key: "clockHrs",
sorter: (a, b) => a.clockHrs - b.clockHrs,
sortOrder:
state.sortedInfo.columnKey === "clockHrs" && state.sortedInfo.order,
render: (text, record) => record.clockHrs.toFixed(2),
},
{
title: t("general.labels.actions"),
dataIndex: "actions",
key: "actions",
render: (text, record) => (
<PrintWrapperComponent
templateObject={{
name: Templates.timetickets_employee.key,
variables: {
id: record.item.employee.id,
start: startDate,
end: endDate,
},
}}
messageObject={{ subject: Templates.timetickets_employee.subject }}
/>
),
},
];
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
return (
<Card title={t("timetickets.labels.clockhours")}>
<Table
loading={loading}
scroll={{ x: true, y: "50rem" }}
columns={columns}
rowKey="id"
dataSource={data}
onChange={handleTableChange}
/>
</Card>
);
};

20
client/src/components/time-tickets-summary/time-tickets-summary.component.jsx
View File

@@ -1,20 +0,0 @@
import React from "react";
import TimeTicketsSummaryEmployees from "../time-tickets-summary-employees/time-tickets-summary-employees.component";
export default function TimeTicketsSummary({
loading,
timetickets,
startDate,
endDate,
}) {
return (
<div>
<TimeTicketsSummaryEmployees
loading={loading}
timetickets={timetickets}
startDate={startDate}
endDate={endDate}
/>
</div>
);
}