feature/IO-3497-Ant-Design-v5-to-v6 - Orientation

This commit is contained in:
Dave
2026-01-09 18:29:43 -05:00
parent 30e137eaf6
commit c3da0d9035
34 changed files with 1219 additions and 900 deletions

2031
client/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -25,7 +25,7 @@
"@sentry/vite-plugin": "^4.6.1", "@sentry/vite-plugin": "^4.6.1",
"@splitsoftware/splitio-react": "^2.6.1", "@splitsoftware/splitio-react": "^2.6.1",
"@tanem/react-nprogress": "^5.0.56", "@tanem/react-nprogress": "^5.0.56",
"antd": "^5.28.1", "antd": "^6.1.4",
"apollo-link-logger": "^2.0.1", "apollo-link-logger": "^2.0.1",
"apollo-link-sentry": "^4.4.0", "apollo-link-sentry": "^4.4.0",
"autosize": "^6.0.1", "autosize": "^6.0.1",
@@ -50,7 +50,7 @@
"normalize-url": "^8.1.1", "normalize-url": "^8.1.1",
"object-hash": "^3.0.0", "object-hash": "^3.0.0",
"phone": "^3.1.69", "phone": "^3.1.69",
"posthog-js": "^1.315.1", "posthog-js": "^1.316.1",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"query-string": "^9.3.1", "query-string": "^9.3.1",
"raf-schd": "^4.0.3", "raf-schd": "^4.0.3",

View File

@@ -316,7 +316,7 @@ const CardPaymentModalComponent = ({
> >
{t("job_payments.buttons.proceedtopayment")} {t("job_payments.buttons.proceedtopayment")}
</Button> </Button>
<Space direction="vertical" align="center"> <Space orientation="vertical" align="center">
<Button <Button
type="primary" type="primary"
// data-ipayname="submit" // data-ipayname="submit"

View File

@@ -95,7 +95,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
<> <>
{item.label && <Tag color="blue">{item.label}</Tag>} {item.label && <Tag color="blue">{item.label}</Tag>}
{item.job_conversations.length > 0 ? ( {item.job_conversations.length > 0 ? (
<Space direction="vertical">{names}</Space> <Space orientation="vertical">{names}</Space>
) : ( ) : (
<Space> <Space>
<PhoneFormatter>{item.phone_num}</PhoneFormatter> <PhoneFormatter>{item.phone_num}</PhoneFormatter>

View File

@@ -68,7 +68,7 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
}; };
return ( return (
<Space direction="vertical" style={{ width: "100%" }} size="middle"> <Space orientation="vertical" style={{ width: "100%" }} size="middle">
{isOptedOut && ( {isOptedOut && (
<Tooltip title={t("consent.text_body")}> <Tooltip title={t("consent.text_body")}>
<Alert <Alert

View File

@@ -67,7 +67,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
.isBefore(dayjs(form.getFieldValue("scheduledreturn"))); .isBefore(dayjs(form.getFieldValue("scheduledreturn")));
if (insuranceOver) if (insuranceOver)
return ( return (
<Space direction="vertical" style={{ color: "tomato" }}> <Space orientation="vertical" style={{ color: "tomato" }}>
<span> <span>
<WarningFilled style={{ marginRight: ".3rem" }} /> <WarningFilled style={{ marginRight: ".3rem" }} />
{t("contracts.labels.insuranceexpired")} {t("contracts.labels.insuranceexpired")}
@@ -107,7 +107,7 @@ export default function ContractFormComponent({ form, create = false, selectedJo
.isSameOrBefore(dayjs(form.getFieldValue("scheduledreturn"))); .isSameOrBefore(dayjs(form.getFieldValue("scheduledreturn")));
if (mileageOver || dueForService) if (mileageOver || dueForService)
return ( return (
<Space direction="vertical" style={{ color: "tomato" }}> <Space orientation="vertical" style={{ color: "tomato" }}>
<span> <span>
<WarningFilled style={{ marginRight: ".3rem" }} /> <WarningFilled style={{ marginRight: ".3rem" }} />
{t("contracts.labels.cardueforservice")} {t("contracts.labels.cardueforservice")}

View File

@@ -208,7 +208,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
const mileageOver = nextservicekm ? nextservicekm <= form.getFieldValue("mileage") : false; const mileageOver = nextservicekm ? nextservicekm <= form.getFieldValue("mileage") : false;
if (mileageOver) if (mileageOver)
return ( return (
<Space direction="vertical" style={{ color: "tomato" }}> <Space orientation="vertical" style={{ color: "tomato" }}>
<span> <span>
<WarningFilled style={{ marginRight: ".3rem" }} /> <WarningFilled style={{ marginRight: ".3rem" }} />
{t("contracts.labels.cardueforservice")} {t("contracts.labels.cardueforservice")}
@@ -232,7 +232,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
if (dueForService) if (dueForService)
return ( return (
<Space direction="vertical" style={{ color: "tomato" }}> <Space orientation="vertical" style={{ color: "tomato" }}>
<span> <span>
<WarningFilled style={{ marginRight: ".3rem" }} /> <WarningFilled style={{ marginRight: ".3rem" }} />
{t("contracts.labels.cardueforservice")} {t("contracts.labels.cardueforservice")}
@@ -265,7 +265,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
if (dateover) if (dateover)
return ( return (
<Space direction="vertical" style={{ color: "tomato" }}> <Space orientation="vertical" style={{ color: "tomato" }}>
<span> <span>
<WarningFilled style={{ marginRight: ".3rem" }} /> <WarningFilled style={{ marginRight: ".3rem" }} />
{t("contracts.labels.dateinpast")} {t("contracts.labels.dateinpast")}
@@ -298,7 +298,7 @@ export default function CourtesyCarCreateFormComponent({ form, saveLoading, newC
if (dateover) if (dateover)
return ( return (
<Space direction="vertical" style={{ color: "tomato" }}> <Space orientation="vertical" style={{ color: "tomato" }}>
<span> <span>
<WarningFilled style={{ marginRight: ".3rem" }} /> <WarningFilled style={{ marginRight: ".3rem" }} />
{t("contracts.labels.dateinpast")} {t("contracts.labels.dateinpast")}

View File

@@ -70,7 +70,7 @@ export function DmsLogEvents({
key: idx, key: idx,
color: logLevelColor(level), color: logLevelColor(level),
children: ( children: (
<Space direction="vertical" size={4} style={{ display: "flex" }}> <Space orientation="vertical" size={4} style={{ display: "flex" }}>
{/* Row 1: summary + inline "Details" toggle */} {/* Row 1: summary + inline "Details" toggle */}
<Space wrap align="start"> <Space wrap align="start">
<Tag color={logLevelColor(level)}>{level}</Tag> <Tag color={logLevelColor(level)}>{level}</Tag>

View File

@@ -89,7 +89,7 @@ const DateTimePicker = ({
return ( return (
<div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}> <div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
{isSeparatedTime && ( {isSeparatedTime && (
<Space direction="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
<DatePicker <DatePicker
showTime={false} showTime={false}
format="MM/DD/YYYY" format="MM/DD/YYYY"

View File

@@ -17,7 +17,7 @@ export default function FormsFieldChanged({ form, skipPrompt }) {
const errors = form.getFieldsError().filter((e) => e.errors.length > 0); const errors = form.getFieldsError().filter((e) => e.errors.length > 0);
if (form.isFieldsTouched()) if (form.isFieldsTouched())
return ( return (
<Space direction="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
<Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} /> <Prompt when={!skipPrompt} beforeUnload={true} message={t("general.messages.unsavedchangespopup")} />
<AlertComponent <AlertComponent
type="warning" type="warning"

View File

@@ -14,7 +14,7 @@ export default function FormListMoveArrows({ move, index, total }) {
}; };
return ( return (
<Space direction="vertical"> <Space orientation="vertical">
<UpOutlined disabled={upDisabled} onClick={handleUp} /> <UpOutlined disabled={upDisabled} onClick={handleUp} />
<DownOutlined disabled={downDisabled} onClick={handleDown} /> <DownOutlined disabled={downDisabled} onClick={handleDown} />
</Space> </Space>

View File

@@ -19,7 +19,7 @@ export default function HelpRescue() {
return ( return (
<div style={{ display: "flex", justifyContent: "center" }}> <div style={{ display: "flex", justifyContent: "center" }}>
<Space direction="vertical" align="center"> <Space orientation="vertical" align="center">
<div>{t("help.labels.rescuedesc")}</div> <div>{t("help.labels.rescuedesc")}</div>
<Input <Input
size="large" size="large"

View File

@@ -87,7 +87,7 @@ export function ScheduleEventComponent({
}); });
const blockContent = ( const blockContent = (
<Space direction="vertical" wrap> <Space orientation="vertical" wrap>
<Input <Input
value={title} value={title}
onChange={(e) => setTitle(e.currentTarget.value)} onChange={(e) => setTitle(e.currentTarget.value)}

View File

@@ -7,11 +7,11 @@ export default function JobCostingStatistics({ summaryData, onlyGP }) {
const gpTotals = ( const gpTotals = (
<> <>
<Space wrap direction="horizontal" size={"large"}> <Space wrap orientation="horizontal" size={"large"}>
<Statistic value={Dinero(summaryData.totalSales).toFormat()} title={t("jobs.labels.total_sales")} /> <Statistic value={Dinero(summaryData.totalSales).toFormat()} title={t("jobs.labels.total_sales")} />
<Statistic value={Dinero(summaryData.totalCost).toFormat()} title={t("jobs.labels.total_cost")} /> <Statistic value={Dinero(summaryData.totalCost).toFormat()} title={t("jobs.labels.total_cost")} />
</Space>{" "} </Space>{" "}
<Space wrap direction="horizontal" size={"large"}> <Space wrap orientation="horizontal" size={"large"}>
<Statistic value={Dinero(summaryData.gpdollars).toFormat()} title={t("jobs.labels.gpdollars")} /> <Statistic value={Dinero(summaryData.gpdollars).toFormat()} title={t("jobs.labels.gpdollars")} />
<Statistic value={summaryData.gppercentFormatted} title={t("jobs.labels.gppercent")} /> <Statistic value={summaryData.gppercentFormatted} title={t("jobs.labels.gppercent")} />
</Space> </Space>

View File

@@ -509,7 +509,7 @@ export function JobLinesComponent({
}} }}
destroyOnHidden destroyOnHidden
> >
<Space direction="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
<Typography.Text type="secondary"> <Typography.Text type="secondary">
{t("general.labels.selected")}: {selectedLineIds.length} {t("general.labels.selected")}: {selectedLineIds.length}
</Typography.Text> </Typography.Text>

View File

@@ -144,11 +144,11 @@ export function JobLifecycleComponent({ bodyshop, job, statuses }) {
<Card loading={loading} title={t("job_lifecycle.content.title")}> <Card loading={loading} title={t("job_lifecycle.content.title")}>
{!loading ? ( {!loading ? (
lifecycleData && lifecycleData.lifecycle && lifecycleData.durations ? ( lifecycleData && lifecycleData.lifecycle && lifecycleData.durations ? (
<Space direction="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
<Card <Card
type="inner" type="inner"
title={ title={
<Space direction="horizontal" size="small"> <Space orientation="horizontal" size="small">
<Badge status="processing" count={lifecycleData.durations.totalStatuses} /> <Badge status="processing" count={lifecycleData.durations.totalStatuses} />
{t("job_lifecycle.content.title_durations")} {t("job_lifecycle.content.title_durations")}
</Space> </Space>
@@ -303,7 +303,7 @@ export function JobLifecycleComponent({ bodyshop, job, statuses }) {
type="inner" type="inner"
title={ title={
<> <>
<Space direction="horizontal" size="small"> <Space orientation="horizontal" size="small">
<Badge status="processing" count={lifecycleData.lifecycle.length} /> <Badge status="processing" count={lifecycleData.lifecycle.length} />
{t("job_lifecycle.content.title_transitions")} {t("job_lifecycle.content.title_transitions")}
</Space> </Space>

View File

@@ -48,7 +48,7 @@ export default function JobReconciliationTotals({ billLines, jobLines, jobLineSt
</Space> </Space>
</div> </div>
<div> <div>
<Space direction="horizontal"> <Space orientation="horizontal">
<Button onClick={() => reconcileByAssocLine(jobLines, jobLineState, billLines, billLineState, setErrors)}> <Button onClick={() => reconcileByAssocLine(jobLines, jobLineState, billLines, billLineState, setErrors)}>
{t("jobs.labels.reconciliation.byassoc")} {t("jobs.labels.reconciliation.byassoc")}
</Button> </Button>

View File

@@ -81,7 +81,7 @@ const NotificationCenterComponent = forwardRef(
return ( return (
<div className={`notification-center ${visible ? "visible" : ""}`} ref={ref}> <div className={`notification-center ${visible ? "visible" : ""}`} ref={ref}>
<div className="notification-header"> <div className="notification-header">
<Space direction="horizontal"> <Space orientation="horizontal">
<h3>{t("notifications.labels.notification-center")}</h3> <h3>{t("notifications.labels.notification-center")}</h3>
{loading && <Spin spinning={loading} size="small"></Spin>} {loading && <Spin spinning={loading} size="small"></Spin>}
</Space> </Space>

View File

@@ -113,7 +113,7 @@ export function PartsOrderListTableDrawerComponent({
}, [selectedPartsOrderRecord, billQuery]); }, [selectedPartsOrderRecord, billQuery]);
const recordActions = (record) => ( const recordActions = (record) => (
<Space direction="horizontal" wrap> <Space orientation="horizontal" wrap>
<Button <Button
disabled={jobRO || record.return || record.vendor.id === bodyshop.inhousevendorid} disabled={jobRO || record.return || record.vendor.id === bodyshop.inhousevendorid}
onClick={() => { onClick={() => {

View File

@@ -72,7 +72,7 @@ export function PartsOrderListTableComponent({
const { refetch } = billsQuery; const { refetch } = billsQuery;
const recordActions = (record, showView = false) => ( const recordActions = (record, showView = false) => (
<Space direction="horizontal" wrap> <Space orientation="horizontal" wrap>
<ShareToTeamsButton <ShareToTeamsButton
linkText={""} linkText={""}
urlOverride={`${window.location.origin}/manage/jobs/${job.id}?partsorderid=${record.id}&tab=partssublet `} urlOverride={`${window.location.origin}/manage/jobs/${job.id}?partsorderid=${record.id}&tab=partssublet `}

View File

@@ -22,7 +22,7 @@ export function PartsShopManagementComponent({ form, saveLoading }) {
</Button> </Button>
} }
> >
<Space direction="vertical" size="large" style={{ width: "100%" }}> <Space orientation="vertical" size="large" style={{ width: "100%" }}>
{/* Business Information Section - Limited to basic shop info only */} {/* Business Information Section - Limited to basic shop info only */}
<PartsBusinessInfoComponent form={form} /> <PartsBusinessInfoComponent form={form} />

View File

@@ -99,7 +99,7 @@ export function PaymentsGenerateLink({ bodyshop, currentUser, callback, job, ope
<CurrencyFormItemComponent /> <CurrencyFormItemComponent />
</Form.Item> </Form.Item>
{paymentLink && ( {paymentLink && (
<Space direction="vertical"> <Space orientation="vertical">
<Space <Space
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
onClick={() => { onClick={() => {

View File

@@ -97,7 +97,7 @@ function PhoneNumberConsentList({ bodyshop }) {
} }
return owners.map((owner) => ( return owners.map((owner) => (
<div key={owner.id}> <div key={owner.id}>
<Space direction="horizontal"> <Space orientation="horizontal">
<Link to={"/manage/owners/" + owner.id}> <Link to={"/manage/owners/" + owner.id}>
<OwnerNameDisplay ownerObject={owner} /> <OwnerNameDisplay ownerObject={owner} />
</Link> </Link>

View File

@@ -13,7 +13,7 @@ function PinnedJobNotes({ job }) {
return pinnedNotes?.length ? ( return pinnedNotes?.length ? (
<> <>
<Divider /> <Divider />
<Space direction="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
{pinnedNotes?.map((note) => ( {pinnedNotes?.map((note) => (
<Card <Card
key={note.id} key={note.id}

View File

@@ -56,7 +56,7 @@ export default function ProductionListDate({ record, field, time, pastIndicator
key: "overlayItem1", key: "overlayItem1",
label: ( label: (
<Card style={{ padding: "1rem" }} onClick={(e) => e.stopPropagation()}> <Card style={{ padding: "1rem" }} onClick={(e) => e.stopPropagation()}>
<Space direction={"vertical"}> <Space orientation={"vertical"}>
<DateTimePicker <DateTimePicker
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
value={(record[field] && dayjs(record[field])) || null} value={(record[field] && dayjs(record[field])) || null}

View File

@@ -87,7 +87,7 @@ export function ScheduleCalendarWrapperComponent({
<span style={{ color: "var(--error-header-text)" }}>{t("appointments.labels.severalerrorsfound")}</span> <span style={{ color: "var(--error-header-text)" }}>{t("appointments.labels.severalerrorsfound")}</span>
} }
> >
<Space direction="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
{problemJobs.map((problem) => ( {problemJobs.map((problem) => (
<Alert <Alert
key={problem.id} key={problem.id}
@@ -108,7 +108,7 @@ export function ScheduleCalendarWrapperComponent({
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
) : ( ) : (
<Space direction="vertical" style={{ width: "100%", marginBottom: "5px" }}> <Space orientation="vertical" style={{ width: "100%", marginBottom: "5px" }}>
{problemJobs.map((problem) => ( {problemJobs.map((problem) => (
<Alert <Alert
key={problem.id} key={problem.id}

View File

@@ -49,7 +49,7 @@ export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
<Row gutter={[16, 16]}> <Row gutter={[16, 16]}>
<Col md={24}> <Col md={24}>
{/* Daily Stats */} {/* Daily Stats */}
<Space direction="vertical" size="middle" style={{ display: "flex" }}> <Space orientation="vertical" size="middle" style={{ display: "flex" }}>
<Row gutter={[16, 16]} align="center"> <Row gutter={[16, 16]} align="center">
{["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => { {["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
if (bodyshop.workingdays[day] === true) { if (bodyshop.workingdays[day] === true) {

View File

@@ -338,7 +338,7 @@ export function ShopInfoROStatusComponent({ bodyshop, form }) {
<Space size="large" wrap> <Space size="large" wrap>
{fields.map((field, index) => ( {fields.map((field, index) => (
<Form.Item key={field.key}> <Form.Item key={field.key}>
<Space direction="vertical"> <Space orientation="vertical">
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
<Form.Item <Form.Item
style={{ flex: 1 }} style={{ flex: 1 }}

View File

@@ -257,7 +257,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
<InputNumber /> <InputNumber />
</Form.Item> </Form.Item>
<Space direction="horizontal"> <Space orientation="horizontal">
<Form.Item <Form.Item
label={ label={
<Space> <Space>

View File

@@ -187,7 +187,7 @@ function TaskListComponent({
); );
} }
return items.length > 0 ? <Space direction="vertical">{items}</Space> : null; return items.length > 0 ? <Space orientation="vertical">{items}</Space> : null;
} }
}); });
@@ -232,7 +232,7 @@ function TaskListComponent({
key: "toggleCompleted", key: "toggleCompleted",
width: "8%", width: "8%",
render: (text, record) => ( render: (text, record) => (
<Space direction="horizontal"> <Space orientation="horizontal">
<ShareToTeamsButton <ShareToTeamsButton
linkText="" linkText=""
urlOverride={`${window.location.origin}/manage/tasks/alltasks?taskid=${record.id}`} urlOverride={`${window.location.origin}/manage/tasks/alltasks?taskid=${record.id}`}
@@ -310,7 +310,7 @@ function TaskListComponent({
*/ */
const tasksExtra = useCallback(() => { const tasksExtra = useCallback(() => {
return ( return (
<Space direction="horizontal"> <Space orientation="horizontal">
{!onlyMine && ( {!onlyMine && (
<Switch <Switch
checkedChildren={t("tasks.buttons.myTasks")} checkedChildren={t("tasks.buttons.myTasks")}

View File

@@ -130,7 +130,7 @@ export function TechClockOffButton({
cost_center: isShiftTicket ? "timetickets.labels.shift" : technician ? technician.cost_center : null cost_center: isShiftTicket ? "timetickets.labels.shift" : technician ? technician.cost_center : null
}} }}
> >
<Space direction="vertical"> <Space orientation="vertical">
{!isShiftTicket ? ( {!isShiftTicket ? (
<div> <div>
<Form.Item <Form.Item

View File

@@ -342,7 +342,7 @@ export function LaborAllocationContainer({ jobid, loading, lineTicketData, hideT
if (!lineTicketData) return null; if (!lineTicketData) return null;
if (!jobid) return null; if (!jobid) return null;
return ( return (
<Space direction="vertical" style={{ width: "100%" }}> <Space orientation="vertical" style={{ width: "100%" }}>
<Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}> <Card style={{ height: "100%" }} title={t("jobs.labels.employeeassignments")}>
<JobEmployeeAssignmentsContainer job={lineTicketData.jobs_by_pk} /> <JobEmployeeAssignmentsContainer job={lineTicketData.jobs_by_pk} />
</Card> </Card>

View File

@@ -219,7 +219,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, set
} }
/> />
<JobCloseRoGuardContainer form={form} job={job} /> <JobCloseRoGuardContainer form={form} job={job} />
<Space wrap direction="vertical" style={{ width: "100%" }}> <Space wrap orientation="vertical" style={{ width: "100%" }}>
<FormsFieldChanged form={form} /> <FormsFieldChanged form={form} />
{!job.actual_in && job.scheduled_in && <Alert type="warning" message={t("jobs.labels.actual_in_inferred")} />} {!job.actual_in && job.scheduled_in && <Alert type="warning" message={t("jobs.labels.actual_in_inferred")} />}
{!job.actual_completion && job.scheduled_completion && ( {!job.actual_completion && job.scheduled_completion && (

View File

@@ -461,7 +461,7 @@ export function JobsDetailPage({
icon: <FaTasks style={{ paddingTop: 3 }} />, icon: <FaTasks style={{ paddingTop: 3 }} />,
id: "job-details-tasks", id: "job-details-tasks",
label: ( label: (
<Space direction="horizontal" align="center"> <Space orientation="horizontal" align="center">
<span>{t("jobs.labels.tasks")}</span> <span>{t("jobs.labels.tasks")}</span>
{job.tasks_aggregate.aggregate.count > 0 && ( {job.tasks_aggregate.aggregate.count > 0 && (
<Badge size="small" count={job.tasks_aggregate.aggregate.count} /> <Badge size="small" count={job.tasks_aggregate.aggregate.count} />