|
|
|
@@ -31,8 +31,9 @@ import { Contact, Customer, Subsidiary } from "@/app/api/customer"; |
|
|
|
import Link from "next/link"; |
|
|
|
import React, { useEffect, useMemo, useState } from "react"; |
|
|
|
import { fetchCustomer } from "@/app/api/customer/actions"; |
|
|
|
import { Checkbox, ListItemText } from "@mui/material"; |
|
|
|
import { Autocomplete, Checkbox, ListItemText } from "@mui/material"; |
|
|
|
import uniq from "lodash/uniq"; |
|
|
|
import ControlledAutoComplete from "../ControlledAutoComplete/ControlledAutoComplete"; |
|
|
|
|
|
|
|
interface Props { |
|
|
|
isActive: boolean; |
|
|
|
@@ -64,7 +65,7 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
const { t } = useTranslation(); |
|
|
|
const { |
|
|
|
register, |
|
|
|
formState: { errors }, |
|
|
|
formState: { errors, defaultValues }, |
|
|
|
watch, |
|
|
|
control, |
|
|
|
setValue, |
|
|
|
@@ -108,8 +109,9 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
setCustomerContacts(contacts); |
|
|
|
setCustomerSubsidiaryIds(subsidiaryIds); |
|
|
|
|
|
|
|
if (subsidiaryIds.length > 0) setValue("clientSubsidiaryId", subsidiaryIds[0]) |
|
|
|
else setValue("clientSubsidiaryId", undefined) |
|
|
|
// if (subsidiaryIds.length > 0) setValue("clientSubsidiaryId", subsidiaryIds[0]) |
|
|
|
// else |
|
|
|
setValue("clientSubsidiaryId", undefined) |
|
|
|
// if (contacts.length > 0) setValue("clientContactId", contacts[0].id) |
|
|
|
// else setValue("clientContactId", undefined) |
|
|
|
}); |
|
|
|
@@ -122,18 +124,19 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
// get subsidiary contact combo |
|
|
|
const contacts = allSubsidiaries.find(subsidiary => subsidiary.id === clientSubsidiaryId)?.subsidiaryContacts!! |
|
|
|
setSubsidiaryContacts(contacts) |
|
|
|
setValue("clientContactId", contacts[0].id) |
|
|
|
setValue("clientContactId", selectedCustomerId === defaultValues?.clientId && Boolean(defaultValues?.clientSubsidiaryId) ? contacts.find(contact => contact.id === defaultValues.clientContactId)?.id ?? contacts[0].id : contacts[0].id) |
|
|
|
setValue("isSubsidiaryContact", true) |
|
|
|
} else if (customerContacts?.length > 0) { |
|
|
|
setSubsidiaryContacts([]) |
|
|
|
setValue("clientContactId", customerContacts[0].id) |
|
|
|
setValue("clientContactId", selectedCustomerId === defaultValues?.clientId && !Boolean(defaultValues?.clientSubsidiaryId) ? customerContacts.find(contact => contact.id === defaultValues.clientContactId)?.id ?? customerContacts[0].id : customerContacts[0].id) |
|
|
|
setValue("isSubsidiaryContact", false) |
|
|
|
} |
|
|
|
}, [customerContacts, clientSubsidiaryId]); |
|
|
|
}, [customerContacts, clientSubsidiaryId, selectedCustomerId]); |
|
|
|
|
|
|
|
// Automatically add the team lead to the allocated staff list |
|
|
|
const selectedTeamLeadId = watch("projectLeadId"); |
|
|
|
useEffect(() => { |
|
|
|
console.log(selectedTeamLeadId) |
|
|
|
if (selectedTeamLeadId !== undefined) { |
|
|
|
const currentStaffIds = getValues("allocatedStaffIds"); |
|
|
|
const newList = uniq([...currentStaffIds, selectedTeamLeadId]); |
|
|
|
@@ -141,15 +144,15 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
} |
|
|
|
}, [getValues, selectedTeamLeadId, setValue]); |
|
|
|
|
|
|
|
const buildingTypeIdNameMap = buildingTypes.reduce<{ [id: number]: string }>( |
|
|
|
(acc, building) => ({ ...acc, [building.id]: building.name }), |
|
|
|
{}, |
|
|
|
); |
|
|
|
// const buildingTypeIdNameMap = buildingTypes.reduce<{ [id: number]: string }>( |
|
|
|
// (acc, building) => ({ ...acc, [building.id]: building.name }), |
|
|
|
// {}, |
|
|
|
// ); |
|
|
|
|
|
|
|
const workNatureIdNameMap = workNatures.reduce<{ [id: number]: string }>( |
|
|
|
(acc, wn) => ({ ...acc, [wn.id]: wn.name }), |
|
|
|
{}, |
|
|
|
); |
|
|
|
// const workNatureIdNameMap = workNatures.reduce<{ [id: number]: string }>( |
|
|
|
// (acc, wn) => ({ ...acc, [wn.id]: wn.name }), |
|
|
|
// {}, |
|
|
|
// ); |
|
|
|
|
|
|
|
return ( |
|
|
|
<Card sx={{ display: isActive ? "block" : "none" }}> |
|
|
|
@@ -164,12 +167,12 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
label={t("Project Code")} |
|
|
|
fullWidth |
|
|
|
disabled |
|
|
|
{...register("projectCode", |
|
|
|
// { |
|
|
|
// required: "Project code required!", |
|
|
|
// } |
|
|
|
{...register("projectCode", |
|
|
|
// { |
|
|
|
// required: "Project code required!", |
|
|
|
// } |
|
|
|
)} |
|
|
|
// error={Boolean(errors.projectCode)} |
|
|
|
// error={Boolean(errors.projectCode)} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
@@ -183,184 +186,79 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Project Category")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={projectCategories[0].id} |
|
|
|
control={control} |
|
|
|
name="projectCategoryId" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Project Category")} {...field}> |
|
|
|
{projectCategories.map((category, index) => ( |
|
|
|
<MenuItem |
|
|
|
key={`${category.id}-${index}`} |
|
|
|
value={category.id} |
|
|
|
> |
|
|
|
{t(category.name)} |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={projectCategories} |
|
|
|
name="projectCategoryId" |
|
|
|
label={t("Project Category")} |
|
|
|
noOptionsText={t("No Project Category")} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Team Lead")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={teamLeads[0].id} |
|
|
|
control={control} |
|
|
|
name="projectLeadId" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Team Lead")} {...field}> |
|
|
|
{teamLeads.map((staff, index) => ( |
|
|
|
<MenuItem key={`${staff.id}-${index}`} value={staff.id}> |
|
|
|
{`${staff.staffId} - ${staff.name} (${staff.team})`} |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={teamLeads.map((staff) => ({ ...staff, label: `${staff.staffId} - ${staff.name} (${staff.team})` }))} |
|
|
|
name="projectLeadId" |
|
|
|
label={t("Team Lead")} |
|
|
|
noOptionsText={t("No Team Lead")} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Service Type")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={serviceTypes[0].id} |
|
|
|
control={control} |
|
|
|
name="serviceTypeId" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Service Type")} {...field}> |
|
|
|
{serviceTypes.map((type, index) => ( |
|
|
|
<MenuItem key={`${type.id}-${index}`} value={type.id}> |
|
|
|
{type.name} |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={serviceTypes} |
|
|
|
name="serviceTypeId" |
|
|
|
label={t("Service Type")} |
|
|
|
noOptionsText={t("No Service Type")} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Funding Type")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={fundingTypes[0].id} |
|
|
|
control={control} |
|
|
|
name="fundingTypeId" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Funding Type")} {...field}> |
|
|
|
{fundingTypes.map((type, index) => ( |
|
|
|
<MenuItem key={`${type.id}-${index}`} value={type.id}> |
|
|
|
{type.name} |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={fundingTypes} |
|
|
|
name="fundingTypeId" |
|
|
|
label={t("Funding Type")} |
|
|
|
noOptionsText={t("No Funding Type")} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Contract Type")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={contractTypes[0].id} |
|
|
|
control={control} |
|
|
|
name="contractTypeId" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Contract Type")} {...field}> |
|
|
|
{contractTypes.map((type, index) => ( |
|
|
|
<MenuItem key={`${type.id}-${index}`} value={type.id}> |
|
|
|
{type.name} |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={contractTypes} |
|
|
|
name="contractTypeId" |
|
|
|
label={t("Contract Type")} |
|
|
|
noOptionsText={t("No Contract Type")} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Location")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={locationTypes[0].id} |
|
|
|
control={control} |
|
|
|
name="locationId" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Location")} {...field}> |
|
|
|
{locationTypes.map((type, index) => ( |
|
|
|
<MenuItem key={`${type.id}-${index}`} value={type.id}> |
|
|
|
{type.name} |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={locationTypes} |
|
|
|
name="locationId" |
|
|
|
label={t("Location")} |
|
|
|
noOptionsText={t("No Location")} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Building Types")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={[]} |
|
|
|
control={control} |
|
|
|
name="buildingTypeIds" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select |
|
|
|
renderValue={(types) => |
|
|
|
types |
|
|
|
.map((type) => buildingTypeIdNameMap[type]) |
|
|
|
.join(", ") |
|
|
|
} |
|
|
|
multiple |
|
|
|
label={t("Building Types")} |
|
|
|
{...field} |
|
|
|
> |
|
|
|
{buildingTypes.map((type, index) => ( |
|
|
|
<MenuItem key={`${type.id}-${index}`} value={type.id}> |
|
|
|
<Checkbox |
|
|
|
checked={field.value.indexOf(type.id) > -1} |
|
|
|
/> |
|
|
|
<ListItemText primary={type.name} /> |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={buildingTypes} |
|
|
|
name="buildingTypeIds" |
|
|
|
label={t("Building Types")} |
|
|
|
noOptionsText={t("No Building Types")} |
|
|
|
isMultiple |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth> |
|
|
|
<InputLabel>{t("Work Nature")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={[]} |
|
|
|
control={control} |
|
|
|
name="workNatureIds" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select |
|
|
|
renderValue={(types) => |
|
|
|
types |
|
|
|
.map((type) => workNatureIdNameMap[type]) |
|
|
|
.join(", ") |
|
|
|
} |
|
|
|
multiple |
|
|
|
label={t("Work Nature")} |
|
|
|
{...field} |
|
|
|
> |
|
|
|
{workNatures.map((type, index) => ( |
|
|
|
<MenuItem key={`${type.id}-${index}`} value={type.id}> |
|
|
|
<Checkbox |
|
|
|
checked={field.value.indexOf(type.id) > -1} |
|
|
|
/> |
|
|
|
<ListItemText primary={type.name} /> |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={workNatures} |
|
|
|
name="workNatureIds" |
|
|
|
label={t("Work Nature")} |
|
|
|
noOptionsText={t("No Work Nature")} |
|
|
|
isMultiple |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={6}> |
|
|
|
@@ -383,13 +281,13 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
</Grid> |
|
|
|
|
|
|
|
<Grid item xs={6}> |
|
|
|
<Checkbox |
|
|
|
{...register("isClpProject")} |
|
|
|
defaultChecked={watch("isClpProject")} |
|
|
|
/> |
|
|
|
<Typography variant="overline" display="inline"> |
|
|
|
{t("CLP Project")} |
|
|
|
</Typography> |
|
|
|
<Checkbox |
|
|
|
{...register("isClpProject")} |
|
|
|
defaultChecked={watch("isClpProject")} |
|
|
|
/> |
|
|
|
<Typography variant="overline" display="inline"> |
|
|
|
{t("CLP Project")} |
|
|
|
</Typography> |
|
|
|
</Grid> |
|
|
|
</Grid> |
|
|
|
</Box> |
|
|
|
@@ -410,29 +308,17 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
</Stack> |
|
|
|
<Grid container spacing={2} columns={{ xs: 6, sm: 12 }}> |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl fullWidth error={Boolean(errors.clientId)}> |
|
|
|
<InputLabel>{t("Client")}</InputLabel> |
|
|
|
<Controller |
|
|
|
defaultValue={allCustomers[0]?.id} |
|
|
|
control={control} |
|
|
|
name="clientId" |
|
|
|
rules={{ |
|
|
|
required: "Please select a client", |
|
|
|
}} |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Client")} {...field}> |
|
|
|
{allCustomers.map((customer, index) => ( |
|
|
|
<MenuItem |
|
|
|
key={`${customer.id}-${index}`} |
|
|
|
value={customer.id} |
|
|
|
> |
|
|
|
{`${customer.code} - ${customer.name}`} |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={allCustomers.map((customer) => ({ ...customer, label: `${customer.code} - ${customer.name}` }))} |
|
|
|
name="clientId" |
|
|
|
label={t("Client")} |
|
|
|
noOptionsText={t("No Client")} |
|
|
|
rules={{ |
|
|
|
required: "Please select a client" |
|
|
|
}} |
|
|
|
error={Boolean(errors.clientId)} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item sx={{ display: { xs: "none", sm: "block" } }} /> |
|
|
|
<Grid item xs={6}> |
|
|
|
@@ -448,96 +334,42 @@ const ProjectClientDetails: React.FC<Props> = ({ |
|
|
|
<Grid item sx={{ display: { xs: "none", sm: "block" } }} /> |
|
|
|
{customerContacts.length > 0 && ( |
|
|
|
<> |
|
|
|
{customerSubsidiaryIds.length > 0 && ( |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl |
|
|
|
fullWidth |
|
|
|
error={Boolean(errors.clientSubsidiaryId)} |
|
|
|
> |
|
|
|
<InputLabel>{t("Client Subsidiary")}</InputLabel> |
|
|
|
<Controller |
|
|
|
// rules={{ |
|
|
|
// validate: (value) => { |
|
|
|
// if ( |
|
|
|
// !customerSubsidiaryIds.find( |
|
|
|
// (subsidiaryId) => subsidiaryId === value, |
|
|
|
// ) |
|
|
|
// ) { |
|
|
|
// return t("Please choose a valid subsidiary"); |
|
|
|
// } else return true; |
|
|
|
// }, |
|
|
|
// }} |
|
|
|
defaultValue={customerSubsidiaryIds[0]} |
|
|
|
control={control} |
|
|
|
name="clientSubsidiaryId" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Client Subsidiary")} {...field}> |
|
|
|
{customerSubsidiaryIds |
|
|
|
.filter((subId) => subsidiaryMap[subId]) |
|
|
|
.map((subsidiaryId, index) => { |
|
|
|
const subsidiary = subsidiaryMap[subsidiaryId]; |
|
|
|
|
|
|
|
return ( |
|
|
|
<MenuItem |
|
|
|
key={`${subsidiaryId}-${index}`} |
|
|
|
value={subsidiaryId} |
|
|
|
> |
|
|
|
{`${subsidiary.code} - ${subsidiary.name}`} |
|
|
|
</MenuItem> |
|
|
|
); |
|
|
|
})} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
</Grid> |
|
|
|
)} |
|
|
|
<Grid item xs={6}> |
|
|
|
<FormControl |
|
|
|
fullWidth |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={[{ id: undefined, label: t("No Subsidiary") }, ...customerSubsidiaryIds |
|
|
|
.filter((subId) => subsidiaryMap[subId]) |
|
|
|
.map((subsidiaryId, index) => { |
|
|
|
const subsidiary = subsidiaryMap[subsidiaryId] |
|
|
|
return { id: subsidiary.id, label: `${subsidiary.code} - ${subsidiary.name}` } |
|
|
|
})]} |
|
|
|
name="clientSubsidiaryId" |
|
|
|
label={t("Client Subsidiary")} |
|
|
|
noOptionsText={t("No Client Subsidiary")} |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid item xs={6}> |
|
|
|
<ControlledAutoComplete |
|
|
|
control={control} |
|
|
|
options={Boolean(watch("clientSubsidiaryId")) ? subsidiaryContacts : customerContacts} |
|
|
|
name="clientContactId" |
|
|
|
label={t("Client Lead")} |
|
|
|
noOptionsText={t("No Client Lead")} |
|
|
|
rules={{ |
|
|
|
validate: (value) => { |
|
|
|
if ( |
|
|
|
(customerContacts.length > 0 && !customerContacts.find( |
|
|
|
(contact) => contact.id === value, |
|
|
|
)) && (subsidiaryContacts?.length > 0 && !subsidiaryContacts.find( |
|
|
|
(contact) => contact.id === value, |
|
|
|
)) |
|
|
|
) { |
|
|
|
return t("Please provide a valid contact"); |
|
|
|
} else return true; |
|
|
|
}, |
|
|
|
}} |
|
|
|
error={Boolean(errors.clientContactId)} |
|
|
|
> |
|
|
|
<InputLabel>{t("Client Lead")}</InputLabel> |
|
|
|
<Controller |
|
|
|
rules={{ |
|
|
|
validate: (value) => { |
|
|
|
if ( |
|
|
|
(customerContacts.length > 0 && !customerContacts.find( |
|
|
|
(contact) => contact.id === value, |
|
|
|
)) && (subsidiaryContacts?.length > 0 && !subsidiaryContacts.find( |
|
|
|
(contact) => contact.id === value, |
|
|
|
)) |
|
|
|
) { |
|
|
|
return t("Please provide a valid contact"); |
|
|
|
} else return true; |
|
|
|
}, |
|
|
|
}} |
|
|
|
defaultValue={subsidiaryContacts?.length > 0 ? subsidiaryContacts[0].id : customerContacts[0].id} |
|
|
|
control={control} |
|
|
|
name="clientContactId" |
|
|
|
render={({ field }) => ( |
|
|
|
<Select label={t("Client Lead")} {...field}> |
|
|
|
{subsidiaryContacts?.length > 0 ? |
|
|
|
subsidiaryContacts.map((contact, index) => ( |
|
|
|
<MenuItem |
|
|
|
key={`${contact.id}-${index}`} |
|
|
|
value={contact.id} |
|
|
|
> |
|
|
|
{contact.name} |
|
|
|
</MenuItem> |
|
|
|
)) |
|
|
|
: customerContacts.map((contact, index) => ( |
|
|
|
<MenuItem |
|
|
|
key={`${contact.id}-${index}`} |
|
|
|
value={contact.id} |
|
|
|
> |
|
|
|
{contact.name} |
|
|
|
</MenuItem> |
|
|
|
))} |
|
|
|
</Select> |
|
|
|
)} |
|
|
|
/> |
|
|
|
</FormControl> |
|
|
|
/> |
|
|
|
</Grid> |
|
|
|
<Grid container sx={{ display: { xs: "none", sm: "block" } }} /> |
|
|
|
<Grid item xs={6}> |
|
|
|
|
