karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'Fix #104 Master Form (Product Master , Price Change)' (#106) from Feb09 into main 

Reviewed-on: Pozomind/pozo-retail-app#106
This commit is contained in:
karthikalakshmi 2026-02-09 12:44:56 +05:30
parent 6e269ca679 bfdde4e525
commit 8cef0cc788
4 changed files with 281 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Pages/Product/ProductForm.jsx
View File

@ -4035,7 +4035,7 @@ const ProductForm = ({ formType }) => {
</div>
)}
<div className="submitButton">
<div className="ProductSubBTN">
<Buttons
buttonText="SUBMIT"
color="901D77"

360
src/Pages/StockPriceUpdate/StockPriceUpdate.jsx
View File

@ -152,7 +152,7 @@ const StockPriceUpdate = () => {
const handleRemoveRecord = (index) => {
setUploadedData((prev) => prev.filter((_, i) => i !== index));
};
console.log(uploadedData, "uploadedData")
console.log(uploadedData, 'uploadedData');
const columns = [
{
title: 'Product Name',
@ -180,53 +180,53 @@ const StockPriceUpdate = () => {
},
...(hasFieldExists('Stock')
? [
{
title: 'Stock',
dataIndex: 'Stock',
key: 'Stock',
width: 80,
},
]
{
title: 'Stock',
dataIndex: 'Stock',
key: 'Stock',
width: 80,
},
]
: []),
...(hasFieldExists('Stock Date')
? [
{
title: 'Stock Date',
dataIndex: 'StockDate',
key: 'StockDate',
width: 80,
},
]
{
title: 'Stock Date',
dataIndex: 'StockDate',
key: 'StockDate',
width: 80,
},
]
: []),
...(hasFieldExists('Old MRP')
? [
{
title: 'Old MRP',
dataIndex: 'OldMRP',
key: 'OldMRP',
width: 100,
},
]
{
title: 'Old MRP',
dataIndex: 'OldMRP',
key: 'OldMRP',
width: 100,
},
]
: []),
...(hasFieldExists('Old SP')
? [
{
title: 'Old SP',
dataIndex: 'OldSP',
key: 'OldSP',
width: 100,
},
]
{
title: 'Old SP',
dataIndex: 'OldSP',
key: 'OldSP',
width: 100,
},
]
: []),
...(hasFieldExists('Old Wholesale Price')
? [
{
title: 'Old Wholesale Price',
dataIndex: 'OldWholeSalePrice',
key: 'OldWholeSalePrice',
width: 140,
},
]
{
title: 'Old Wholesale Price',
dataIndex: 'OldWholeSalePrice',
key: 'OldWholeSalePrice',
width: 140,
},
]
: []),
// ✅ EDITABLE
@ -323,7 +323,7 @@ const StockPriceUpdate = () => {
);
excelDataRef.current
?.validateFields([`NewSellPrice${record.localId}`])
.catch(() => { });
.catch(() => {});
}
}}
/>
@ -332,40 +332,40 @@ const StockPriceUpdate = () => {
},
...(hasFieldExists('New Wholesale Price')
? [
{
title: 'New Wholesale Price',
dataIndex: 'NewWholeSalePrice',
key: 'NewWholeSalePrice',
width: 160,
render: (value, record, index) => (
<Form.Item name={`NewWholeSalePrice${record?.localId}`}>
<Input
onChange={(e) =>
handlePriceChange(
index,
'NewWholeSalePrice',
e.target.value,
record.localId
)
}
placeholder="New Wholesale"
inputMode="decimal"
onInput={(e) => {
let cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
const parts = cleanedValue.split('.');
if (cleanedValue.startsWith('.')) {
cleanedValue = '0' + cleanedValue;
{
title: 'New Wholesale Price',
dataIndex: 'NewWholeSalePrice',
key: 'NewWholeSalePrice',
width: 160,
render: (value, record, index) => (
<Form.Item name={`NewWholeSalePrice${record?.localId}`}>
<Input
onChange={(e) =>
handlePriceChange(
index,
'NewWholeSalePrice',
e.target.value,
record.localId
)
}
e.target.value =
parts.length > 2
? `${parts[0]}.${parts.slice(1).join('')}`
: cleanedValue;
}}
/>
</Form.Item>
),
},
]
placeholder="New Wholesale"
inputMode="decimal"
onInput={(e) => {
let cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
const parts = cleanedValue.split('.');
if (cleanedValue.startsWith('.')) {
cleanedValue = '0' + cleanedValue;
}
e.target.value =
parts.length > 2
? `${parts[0]}.${parts.slice(1).join('')}`
: cleanedValue;
}}
/>
</Form.Item>
),
},
]
: []),
{
title: 'Action',
@ -897,7 +897,6 @@ const StockPriceUpdate = () => {
newData?.splice(index, 1, {
...item,
...row,
});
setBulkProductData(newData);
} else {
@ -1056,7 +1055,7 @@ const StockPriceUpdate = () => {
title: 'Name',
dataIndex: 'ProdName',
key: 'ProdName',
width: '20%',
width: 150,
filteredValue: [BulksearchedText],
onFilter: (value, record) => {
return String(record.ProdName)
@ -1078,90 +1077,90 @@ const StockPriceUpdate = () => {
dataIndex: 'ProdVariantName',
key: 'ProdVariantName',
align: 'left',
width: '120px',
width: 120,
},
{
title: 'Batch No',
dataIndex: 'BatchRef',
key: 'BatchRef',
align: 'left',
width: '120px',
width: 120,
},
...(hasField('Stock Date')
? [
{
title: 'stock Date',
dataIndex: 'InwardDate',
key: 'InwardDate',
align: 'center',
width: '100px',
render: (InwardDate) =>
InwardDate !== null ? ExtractDateFormate(InwardDate) : '-',
},
]
{
title: 'stock Date',
dataIndex: 'InwardDate',
key: 'InwardDate',
align: 'center',
width: 120,
render: (InwardDate) =>
InwardDate !== null ? ExtractDateFormate(InwardDate) : '-',
},
]
: []),
...(hasField('Expiry Date')
? [
{
title: 'Exp date',
dataIndex: 'ExpDate',
key: 'ExpDate',
align: 'center',
width: '100px',
render: (ExpDate) =>
ExpDate !== null ? ExtractDateFormate(ExpDate) : '-',
},
]
{
title: 'Exp date',
dataIndex: 'ExpDate',
key: 'ExpDate',
align: 'center',
width: 100,
render: (ExpDate) =>
ExpDate !== null ? ExtractDateFormate(ExpDate) : '-',
},
]
: []),
...(hasField('Stock')
? [
{
title: 'stock',
dataIndex: 'BalanceQty',
key: 'BalanceQty',
align: 'right',
width: '60px',
render: (BalanceQty) => (BalanceQty !== null ? BalanceQty : '-'),
},
]
{
title: 'stock',
dataIndex: 'BalanceQty',
key: 'BalanceQty',
align: 'right',
width: '60px',
render: (BalanceQty) => (BalanceQty !== null ? BalanceQty : '-'),
},
]
: []),
...(hasField('Old MRP')
? [
{
title: 'Old MRP',
dataIndex: 'MRP',
key: 'MRP',
align: 'right',
width: '70px',
render: (MRP) => (safeRound(MRP) !== null ? safeRound(MRP) : '-'),
},
]
{
title: 'Old MRP',
dataIndex: 'MRP',
key: 'MRP',
align: 'right',
width: '70px',
render: (MRP) => (safeRound(MRP) !== null ? safeRound(MRP) : '-'),
},
]
: []),
...(hasField('Old SP')
? [
{
title: 'Old SP',
dataIndex: 'SellPrice',
key: 'SellPrice',
align: 'right',
width: '70px',
render: (SellPrice) =>
safeRound(SellPrice) !== null ? safeRound(SellPrice) : '-',
},
]
{
title: 'Old SP',
dataIndex: 'SellPrice',
key: 'SellPrice',
align: 'right',
width: '70px',
render: (SellPrice) =>
safeRound(SellPrice) !== null ? safeRound(SellPrice) : '-',
},
]
: []),
...(hasField('Old Wholesale Price')
? [
{
title: 'Old Wholesale Price',
dataIndex: 'WhSalePrice',
key: 'WhSalePrice',
align: 'right',
width: '120px',
render: (WhSalePrice) =>
safeRound(WhSalePrice) !== null ? safeRound(WhSalePrice) : '-',
},
]
{
title: 'Old Wholesale Price',
dataIndex: 'WhSalePrice',
key: 'WhSalePrice',
align: 'right',
width: '120px',
render: (WhSalePrice) =>
safeRound(WhSalePrice) !== null ? safeRound(WhSalePrice) : '-',
},
]
: []),
{
title: 'New MRP',
@ -1185,19 +1184,19 @@ const StockPriceUpdate = () => {
},
...(hasField('New Wholesale Price')
? [
{
title: 'New Wholesale Price',
dataIndex: 'CurrentWhAmt',
key: 'CurrentWhAmt',
align: 'center',
with: '4rem',
editable: true,
render: (text, record) => (
<p>{text ? text : 'Enter Wholesale Price'}</p>
),
width: 120,
},
]
{
title: 'New Wholesale Price',
dataIndex: 'CurrentWhAmt',
key: 'CurrentWhAmt',
align: 'center',
with: '4rem',
editable: true,
render: (text, record) => (
<p>{text ? text : 'Enter Wholesale Price'}</p>
),
width: 120,
},
]
: []),
];
@ -1478,9 +1477,9 @@ const StockPriceUpdate = () => {
isStockVariantBased === 'Yes'
? BulkProductData || []
: (BulkProductData || [])?.filter(
(item, index, self) =>
index === self.findIndex((p) => p.ProdId === item.ProdId)
);
(item, index, self) =>
index === self.findIndex((p) => p.ProdId === item.ProdId)
);
if (!uniqueBulkProductData?.length) {
setMessageType('error');
@ -1593,9 +1592,9 @@ const StockPriceUpdate = () => {
cell.border = isHiddenCol
? undefined
: {
right: { style: 'thin', color: { argb: 'FF000000' } },
bottom: { style: 'thin', color: { argb: 'FF000000' } },
};
right: { style: 'thin', color: { argb: 'FF000000' } },
bottom: { style: 'thin', color: { argb: 'FF000000' } },
};
});
/* ---------------- ADD DATA ---------------- */
@ -1777,7 +1776,7 @@ const StockPriceUpdate = () => {
Number(current.MRP) !== Number(uploaded.NewMRP) ||
Number(current.SellPrice) !== Number(uploaded.NewSellPrice) ||
Number(current.WhSalePrice || 0) !==
Number(uploaded.NewWholeSalePrice || 0);
Number(uploaded.NewWholeSalePrice || 0);
return {
...uploaded,
@ -1965,13 +1964,11 @@ const StockPriceUpdate = () => {
const hasWholesale = !!data?.NewWholeSalePrice;
const isModified = data?.isModified === true;
// valid cases
if (hasMRP && hasSell && isModified) return true;
// ✅ Case 2: Only Wholesale changed
if (!hasMRP && !hasSell && hasWholesale && isModified) return true;;
if (!hasMRP && !hasSell && hasWholesale && isModified) return true;
return false;
})
@ -1999,7 +1996,6 @@ const StockPriceUpdate = () => {
return;
}
const res = await dispatch(bulkPriceUpdate(putData))?.unwrap();
if (res?.data?.statusCode === 1) {
@ -2092,7 +2088,7 @@ const StockPriceUpdate = () => {
onComplete={onComplete}
/>
<div className="formAddNew">
<div className="formAddNew" style={{ justifyContent: 'space-between' }}>
<div>
<FormHeader title={'Price Change'} />
</div>
@ -2104,16 +2100,7 @@ const StockPriceUpdate = () => {
}}
>
{RadioSelection == 'Bulk' && (
<div
className="toolbar"
style={{
display: 'flex',
gap: '1rem',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
}}
>
<div className="PriChangeUpper">
<div className="formSearch">
<Search
value={BulksearchedText}
@ -2132,7 +2119,7 @@ const StockPriceUpdate = () => {
/>
</div>
<Tooltip title="Field Setup">
<div className="btn btn--info" onClick={handleFieldSetup}>
<div className="btnbtninfo" onClick={handleFieldSetup}>
<MdOutlineAppRegistration size={19} />
</div>
</Tooltip>
@ -2214,17 +2201,17 @@ const StockPriceUpdate = () => {
<div>
{(RadioSelection == 'Bulk' ||
(RadioSelection == 'Single' && StockDetails.length > 0)) && (
<div className="samplereportTableButton">
<Buttons
buttonText="Submit"
color="901D77"
palcement={'right'}
handleSubmit={HandlePutData}
icon={<ArrowRightOutlined />}
disabled={addnewAccess}
></Buttons>
</div>
)}
<div className="samplereportTableButton">
<Buttons
buttonText="Submit"
color="901D77"
palcement={'right'}
handleSubmit={HandlePutData}
icon={<ArrowRightOutlined />}
disabled={addnewAccess}
></Buttons>
</div>
)}
</div>
</div>
{RadioSelection == 'Single' && (
@ -2242,20 +2229,17 @@ const StockPriceUpdate = () => {
StockDetails?.length < 11
? false
: {
current: page,
pageSize: pageSize,
onChange: handlePageChange,
}
current: page,
pageSize: pageSize,
onChange: handlePageChange,
}
}
onChange={handleChange}
></Table>
</div>
)}
{RadioSelection == 'Bulk' && (
<div
className="samplereportTable reportTable pricechangeTable"
style={{ height: '65vh !important' }}
>
<div className="bulkChangePriceTable">
<Table
columns={BulkPriceColumns}
components={BulkComponents}
@ -2315,7 +2299,7 @@ const StockPriceUpdate = () => {
<div
className={`export-excel-div ${exportLoading ? 'is-loading' : ''}`}
onClick={
exportLoading ? () => { } : () => showPriceChangeModal()
exportLoading ? () => {} : () => showPriceChangeModal()
}
>
<div>

109
src/Styles/OverAllStyle/OverAllStyle.scss
View File

@ -21,13 +21,9 @@
color: #fff;
padding: 15px;
border: 1px solid;
overflow: hidden;
width: 170px;
height: 45px;
background-color: var(--PRIMARY_BUTTON_BG_COLOR) !important;
@ -42,10 +38,6 @@
justify-content: space-between;
align-items: center;
z-index: 2;
}
.Counter-Category-mapping {
@ -198,7 +190,7 @@
.edit-btn,
.remove-btn {
border: none;
font-family: 'Poppins';
font-family: "Poppins";
padding: 4px 10px;
border-radius: 6px;
cursor: pointer;
@ -223,7 +215,6 @@
}
.address-type-section {
// padding: 12px;
// background-color: #f8fafc;
// border-radius: 8px;
@ -584,7 +575,7 @@
button {
padding: 14px 18px;
border: none;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
@ -592,12 +583,12 @@
outline: none;
}
>button:nth-child(1) {
> button:nth-child(1) {
background-color: #daecfd;
color: #1292ee;
}
>button:nth-child(2) {
> button:nth-child(2) {
background-color: #ffdcdc;
color: #ee3333;
}
@ -616,7 +607,7 @@
flex-direction: column;
margin-bottom: 5px;
>div:nth-child(2) {
> div:nth-child(2) {
width: max-content;
font-size: 12px !important;
height: max-content;
@ -669,7 +660,7 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
// deilivery Address
// deilivery Address
.Address-button {
display: flex;
@ -698,7 +689,7 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.deliveryaddress{
.deliveryaddress {
display: flex;
align-items: flex-start;
flex-direction: column;
@ -706,7 +697,7 @@
padding: 10px;
border-radius: 4px;
height: max-content;
.deliveryaddress_edit{
.deliveryaddress_edit {
color: #0cabf4;
display: flex;
align-items: center;
@ -718,7 +709,7 @@
.add-slot-header {
font-size: 25px;
font-weight: 600;
font-family: 'Gilroy';
font-family: "Gilroy";
padding-bottom: 6px;
}
@ -744,7 +735,7 @@
.swicthCardScanToggle {
button {
background-color: #1292ee !important;
font-family: 'Poppins';
font-family: "Poppins";
font-weight: 500;
}
}
@ -756,7 +747,7 @@
}
.searched-value {
font-family: 'Poppins';
font-family: "Poppins";
font-weight: 500;
}
@ -764,7 +755,8 @@
scrollbar-width: thin;
padding-right: 8px;
@media (max-width: 600px) {}
@media (max-width: 600px) {
}
.ant-table-thead {
&:hover {
@ -915,14 +907,14 @@
}
.table-notes {
font-family: 'Poppins';
font-family: "Poppins";
font-style: italic;
margin-bottom: 10px;
}
.ant-table table {
border-spacing: 0 !important;
font-family: 'Poppins';
font-family: "Poppins";
}
}
@ -956,13 +948,13 @@
table {
thead {
th {
font-family: 'Gilroy' !important;
font-family: "Gilroy" !important;
}
}
tbody {
td {
font-family: 'Poppins' !important;
font-family: "Poppins" !important;
font-weight: 500;
font-size: 13px;
}
@ -1085,7 +1077,7 @@ table {
border: 1px solid #dadada;
border-radius: 4px;
>img {
> img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
@ -1210,7 +1202,7 @@ table {
flex-direction: column;
justify-content: center;
>img {
> img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
@ -1237,7 +1229,7 @@ table {
flex-direction: column;
justify-content: center;
>img {
> img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
@ -1273,7 +1265,7 @@ table {
flex-direction: row;
justify-content: space-between;
>img {
> img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
@ -1300,7 +1292,7 @@ table {
flex-direction: row;
justify-content: space-between;
>img {
> img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
@ -1328,7 +1320,7 @@ table {
flex-direction: column;
justify-content: space-between;
>img {
> img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
@ -1416,8 +1408,7 @@ table {
p {
width: 15px;
height: 15px;
background-color: #C00000;
background-color: #c00000;
}
span {
@ -1433,7 +1424,7 @@ table {
display: flex;
align-items: center;
gap: 6px;
background-color: #1292EE;
background-color: #1292ee;
color: #fff;
font-family: "Poppins";
font-weight: 500;
@ -1487,14 +1478,14 @@ table {
.tab-item:hover {
background: #f5f5f5;
color: #901D77;
color: #901d77;
}
.tab-item.active {
display: flex;
background: #fff;
color: #901D77;
border-color: #901D77;
color: #901d77;
border-color: #901d77;
border-bottom: 2px solid #fff;
margin-bottom: -2px;
z-index: 1;
@ -1503,7 +1494,7 @@ table {
}
.tab-item.active::after {
content: '';
content: "";
position: absolute;
bottom: -2px;
left: 0;
@ -1528,5 +1519,45 @@ table {
color: #c00000;
font-weight: 500;
}
}
}
.bulkChangePriceTable {
width: 83vw;
overflow: auto;
height: 60vh;
scrollbar-width: thin;
position: relative;
.ant-table-cell {
padding: 2px 6px !important;
}
.ant-table-tbody {
height: 60vh !important;
}
.ant-input {
padding: 3px 14px 4px 11px !important;
text-align: center;
}
}
.PriChangeUpper {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
.btnbtninfo {
background: #8f1e78;
color: #fff;
vertical-align: top;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
border-radius: 4px;
height: 42px;
&:hover {
background: #d333b3;
}
}
}

54
src/Styles/Product/Product.scss
View File

@ -1,9 +1,16 @@
.cropUploadFieldSmall {
:where(.css-dev-only-do-not-override-1v5z42l).ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,
:where(.css-dev-only-do-not-override-1v5z42l).ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,
:where(.css-dev-only-do-not-override-1v5z42l).ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-container,
:where(.css-dev-only-do-not-override-1v5z42l).ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload-list.ant-upload-list-picture-circle .ant-upload-list-item-container {
:where(.css-dev-only-do-not-override-1v5z42l).ant-upload-wrapper.ant-upload-picture-card-wrapper
.ant-upload-list.ant-upload-list-picture-card
.ant-upload-list-item-container,
:where(.css-dev-only-do-not-override-1v5z42l).ant-upload-wrapper.ant-upload-picture-circle-wrapper
.ant-upload-list.ant-upload-list-picture-card
.ant-upload-list-item-container,
:where(.css-dev-only-do-not-override-1v5z42l).ant-upload-wrapper.ant-upload-picture-card-wrapper
.ant-upload-list.ant-upload-list-picture-circle
.ant-upload-list-item-container,
:where(.css-dev-only-do-not-override-1v5z42l).ant-upload-wrapper.ant-upload-picture-circle-wrapper
.ant-upload-list.ant-upload-list-picture-circle
.ant-upload-list-item-container {
width: 65px;
height: 65px;
}
@ -45,7 +52,7 @@
font-weight: 600;
font-size: 14px;
color: #000000;
background-color: 'rgba(0, 0, 0, 0.02)';
background-color: "rgba(0, 0, 0, 0.02)";
& .ant-form-item .ant-form-item-explain-error {
font-weight: 400 !important;
@ -290,7 +297,7 @@
color: #23378a;
padding: 12px 24px;
border: none;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
@ -319,14 +326,14 @@
}
.viewerExcelupload .ant-table-wrapper,
.viewerExcelupload .ant-table-tbody>tr.ant-table-row>td {
.viewerExcelupload .ant-table-tbody > tr.ant-table-row > td {
padding: 4px;
font-size: 14px;
font-weight: 600;
}
.viewerExcelupload .ant-table-wrapper,
.viewerExcelupload .ant-table-thead>tr>th {
.viewerExcelupload .ant-table-thead > tr > th {
padding: 1px 8px !important;
}
@ -381,7 +388,7 @@
}
.productinputForm {
.ant-input-affix-wrapper>input.ant-input {
.ant-input-affix-wrapper > input.ant-input {
padding-top: 1.5rem;
}
}
@ -412,7 +419,7 @@
border: none;
outline: none;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
color: #fff;
background-color: #1677ff;
border-radius: 6px;
@ -435,7 +442,7 @@
}
.product-Add-HSN {
.ant-input-affix-wrapper>input.ant-input {
.ant-input-affix-wrapper > input.ant-input {
padding: 12px 0 0 0 !important;
}
}
@ -446,7 +453,7 @@
background-color: #d4e7ff;
font-weight: 500;
font-size: 13px;
font-family: 'Poppins';
font-family: "Poppins";
border: none;
cursor: pointer;
border-radius: 6px;
@ -473,9 +480,13 @@
.ant-form-item {
margin-bottom: 0;
}
.ant-input {
padding: 4px 14px 6px 11px !important;
text-decoration: underline;
text-decoration-color: #b8b8b8;
}
}
.productFormproductImg {
width: 350px;
align-items: center;
@ -483,8 +494,19 @@
.Customized_QuickAdd {
margin-bottom: 10px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
}
}
.ProductSubBTN {
width: 100%;
display: flex;
justify-content: flex-end;
@media (max-width: 500px) {
position: fixed;
right: 10px;
bottom: 8px;
}
}