camera feature added for upload

This commit is contained in:
unknown 2026-02-20 09:57:03 +05:30
parent 6e22db34c8
commit 5cd65fa104
12 changed files with 1394 additions and 1275 deletions

View File

@ -9,6 +9,8 @@ import { FiPenTool } from 'react-icons/fi';
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
import '../../Styles/Product/Product.scss';
import { Messages } from '../Notifications/Messages.jsx';
import { isMobile } from 'react-device-detect';
import Camera from '../MobileComponent/Camera.jsx';
const allowedTypes = [
'image/jpeg',
'image/png',
@ -22,7 +24,7 @@ const CropUpload = ({
ImageLink,
onlineImage,
isProductList = {},
handleClose = () => {}
handleClose = () => { }
}) => {
const dispatch = useDispatch();
const [messageType, setMessageType] = useState(null);
@ -405,13 +407,36 @@ const CropUpload = ({
<Modal visible={previewVisible} onCancel={handleCancel} footer={null}>
<img alt="Preview" style={{ width: '100%' }} src={previewImage} />
</Modal>
{isMobile && fileList?.length == 0 && <>
<div style={{ textAlign: "center", margin: "6px 0", fontFamily: "Poppins", fontWeight: "500" }}>OR</div>
<Camera
handleCapture={async (e) => {
const file = e.target.files?.[0];
if (!file) return;
try {
await handleUpload({
file,
onSuccess: () => {
setEditImageOpen(true);
},
onError: () => {
console.error("Upload failed");
}
});
} catch (error) {
console.error(error);
}
}}
/>
</>}
<DefaultModal
title="Edit Image"
width={800}
open={editImageOpen}
footer={
(cropImage && croppedImage === null) ||
(shapedImage && shapedData === null)
(shapedImage && shapedData === null)
? false
: true
}
@ -426,7 +451,7 @@ const CropUpload = ({
onlineImage !== '' && onlineImage != null
? onlineImage
: fileList?.[0]?.['url'] != '' &&
fileList?.[0]?.['url'] != null
fileList?.[0]?.['url'] != null
? fileList?.[0]?.['url']
: ''
}
@ -465,7 +490,7 @@ const CropUpload = ({
onlineImage !== '' && onlineImage != null
? onlineImage
: fileList?.[0]?.['url'] != '' &&
fileList?.[0]?.['url'] != null
fileList?.[0]?.['url'] != null
? fileList?.[0]?.['url']
: ''
}

View File

@ -3,6 +3,8 @@ import { useDispatch } from 'react-redux';
import { Modal, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { uploadImage } from '../../Features/upload/upload';
import Camera from '../MobileComponent/Camera';
import { isMobile } from 'react-device-detect';
const allowedTypes = [
'image/jpeg',
'image/png',
@ -25,6 +27,7 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState('');
const [fileList, setFileList] = useState([]);
console.log(fileList, "fileList")
useEffect(() => {
// Inside Imageupload.jsx
@ -94,6 +97,19 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
</div>
);
const handleCameraCapture = async (e) => {
const file = e.target.files[0];
if (!file) return;
let data = await dispatch(uploadImage(file)).unwrap();
if (data?.data?.status) {
updateImageUrl(data?.data?.image);
setFileList([{ url: data?.data?.image }]);
}
};
return (
<>
<Upload
@ -125,6 +141,20 @@ const App = ({ singleImage, updateImageUrl, ImageLink = '', listType }) => {
src={previewImage}
/>
</Modal>
{isMobile && fileList?.length == 0 && <>
<div style={{ textAlign: "center", margin: "6px 0", fontFamily: "Poppins", fontWeight: "500" }}>OR</div>
<Camera
handleCapture={(e) => {
const files = Array.from(e.target.files);
const formattedFileList = files.map((file) => ({
originFileObj: file,
}));
handleChange({ fileList: formattedFileList });
}}
/>
</>}
</>
);
};

View File

@ -0,0 +1,43 @@
import { useRef } from 'react'
import { TbCapture } from "react-icons/tb";
const Camera = ({ handleCapture = () => { } }) => {
const cameraRef = useRef(null);
return (
<div>
<input
ref={cameraRef}
type="file"
accept="image/*"
capture="environment"
multiple
hidden
onChange={handleCapture}
style={{ display: "none" }}
/>
<div style={{
backgroundColor: "#1292ee",
color: "#fff",
padding: "4px 8px",
fontSize: "12px",
fontWeight: "500",
fontFamily: "Poppins",
display: "flex",
alignItems: "center",
gap: "4px",
borderRadius: "4px",
cursor: "pointer",
marginTop: "5px",
flexWrap: 'nowrap',
whiteSpace: "nowrap"
}} onClick={() => cameraRef.current.click()}>
<TbCapture size={16} />
Take Photo
</div>
</div>
)
}
export default Camera

View File

@ -355,7 +355,7 @@ const BSBillingTable3Pay = () => {
const OrderCardDetail = useSelector(GlobalOrderCardDetails);
const [customerPreviesOrders, setCustomerPreviesOrders] = useState(false);
console.log(paybtns, 'paybtnspaybtnspaybtnspaybtns', currentOrderNetAmount, previousNetAmount);
console.log(OrderCardDetail, 'OrderCardDetail');
//Total calculation
const TotalItems = OrderCardDetail?.length;
const [formattedDate, setFormattedDate] = useState('');

View File

@ -1193,6 +1193,11 @@ const FeaturesFunctionalities = (props) => {
),
},
];
console.log(ReorderHoldDetails,
BookingType,
GlobalExtraCharge, "GlobalExtraCharge");
const defaultColumns1 = [
{
title: 'ExtraCharge Type',

View File

@ -1292,6 +1292,7 @@ function BSReprint({ setOpenModel = () => { } }) {
OrderQty: item?.SalesQty,
OrderRate: item?.Rate,
SellingPrice: item?.Rate,
TaxPercentage: (item?.ProdTaxPercentage || 0)
// TotalAmt: formatAmount((item.TotalAmt - item.OfferValue)),
}));
@ -1855,7 +1856,7 @@ function BSReprint({ setOpenModel = () => { } }) {
</div>
))}
{ showShareModal && <ReprintPDFDataShare
{showShareModal && <ReprintPDFDataShare
printerTemplateStyle={printerTemplateStyle}
printDatas={printDatas}
SettingDataSelector={SettingDataSelector}

View File

@ -756,11 +756,13 @@ const ProductForm = ({
<div className="upload_btn">
<p>Upload Icon</p>
<br></br>
<Imageupload
singleImage={true}
updateImageUrl={updateBrandImageUrl}
ImageLink={imageBrandUrl ? imageBrandUrl : ''}
/>
<div style={{ width: 'max-content' }}>
<Imageupload
singleImage={true}
updateImageUrl={updateBrandImageUrl}
ImageLink={imageBrandUrl ? imageBrandUrl : ''}
/>
</div>
</div>
)}

View File

@ -90,11 +90,11 @@ const CommonMaster = () => {
const TypeNames =
AppType === 'Wholesale'
? ConfigTypeNames.filter((item) =>
baseConfigTypeOptions.includes(item.TypeName)
) // include only these for Wholesale
baseConfigTypeOptions.includes(item.TypeName)
) // include only these for Wholesale
: ConfigTypeNames.filter(
(item) => !baseConfigTypeOptions.includes(item.TypeName)
);
(item) => !baseConfigTypeOptions.includes(item.TypeName)
);
const [open, setOpen] = useState(false);
const [EditState, setEditState] = useState(false);
@ -203,34 +203,34 @@ const CommonMaster = () => {
setCommonDataFilter([
...(Array.isArray(CommonData)
? CommonData.filter(
(data) =>
![
'Product Category',
'Product Sub-Category',
'Product Brand',
'Product Tax',
'Designation',
'Wholesale Extra Charges',
'Wholesale Unit Of Measure',
'Wholesale Quantity',
'Wholesale Screen Name',
'Wholesale Payment Mode',
'Wholesale Designation',
].includes(data?.TypeName)
)
: []),
...(Array.isArray(CommonData)
? CommonData.filter((data) =>
[
(data) =>
![
'Product Category',
'Product Sub-Category',
'Product Brand',
'Product Tax',
'Designation',
'PackingType',
'Wholesale Extra Charges',
'Wholesale Unit Of Measure',
'Wholesale Quantity',
'Wholesale Screen Name',
'Wholesale Payment Mode',
'Wholesale Designation',
].includes(data?.TypeName)
).filter((item) => item.AlphaNumFId == AppId)
)
: []),
...(Array.isArray(CommonData)
? CommonData.filter((data) =>
[
'Product Category',
'Product Sub-Category',
'Product Brand',
'Product Tax',
'Designation',
'PackingType',
].includes(data?.TypeName)
).filter((item) => item.AlphaNumFId == AppId)
: []),
]);
}
@ -675,11 +675,11 @@ const CommonMaster = () => {
style={{ color: '#1292EE' }}
onClick={() =>
UserType === 'Super Admin' ||
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.UpdateAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.UpdateAccess === 'Y') ||
UserType === 'Admin'
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.UpdateAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.UpdateAccess === 'Y') ||
UserType === 'Admin'
? actionsFormatter(record, index)
: ''
}
@ -696,11 +696,11 @@ const CommonMaster = () => {
}}
onClick={() =>
UserType === 'Super Admin' ||
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.DeleteAccess === 'Y') ||
UserType === 'Admin'
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.DeleteAccess === 'Y') ||
UserType === 'Admin'
? statusFormatter(record)
: ''
}
@ -712,11 +712,11 @@ const CommonMaster = () => {
}}
onClick={() =>
UserType === 'Super Admin' ||
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.DeleteAccess === 'Y') ||
UserType === 'Admin'
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.DeleteAccess === 'Y') ||
UserType === 'Admin'
? statusFormatter(record)
: ''
}
@ -1158,11 +1158,13 @@ const CommonMaster = () => {
<div className="upload_btn">
<p>Upload Icon</p>
<br />
<Imageupload
singleImage={true}
updateImageUrl={updateImageUrl}
ImageLink={imageUrl ? imageUrl : ''}
/>
<div style={{ width: 'max-content' }}>
<Imageupload
singleImage={true}
updateImageUrl={updateImageUrl}
ImageLink={imageUrl ? imageUrl : ''}
/>
</div>
</div>
</Form>
</div>

View File

@ -33,6 +33,8 @@ import { getCommonAppPreference } from '../../Features/BrachLogin/BranchLogin.js
import { AiOutlineDownCircle, AiOutlineUpCircle } from 'react-icons/ai';
// import TextArea from 'antd/es/input/TextArea.js';
import CropUpload from '../../Components/Forms/CropUpload.jsx';
import { isMobile } from 'react-device-detect';
import Camera from '../../Components/MobileComponent/Camera.jsx';
const { Panel } = Collapse;
const { TextArea } = Input;
const subDirectory = import.meta.env.BASE_URL;
@ -804,7 +806,7 @@ const EmployeeForm = ({ formType }) => {
isOnchanges={formType == 'edit' ? true : false}
valueData={selectedUserData}
disabled={formType == 'edit' ? true : false}
// defaultValue={LastSelectConfig}
// defaultValue={LastSelectConfig}
/>
</Form.Item>
) : null}
@ -918,7 +920,7 @@ const EmployeeForm = ({ formType }) => {
disabled={true}
isOnChange={
formRef.current?.getFieldsValue()?.MobileNo !=
undefined
undefined
? true
: false
}
@ -967,8 +969,8 @@ const EmployeeForm = ({ formType }) => {
{SelectedUserCreation === 'N' ? (
<Form.Item
name="Password"
// rules={[{ required: true }]}
// hasFeedback
// rules={[{ required: true }]}
// hasFeedback
>
<Input.Password
field="Password"
@ -983,7 +985,7 @@ const EmployeeForm = ({ formType }) => {
addonBefore="Password"
isOnChange={formType == 'edit' ? true : false}
style={{ width: '250px' }}
// disabled={formType == "edit" ? true : false}
// disabled={formType == "edit" ? true : false}
/>
</Form.Item>
) : null}
@ -1039,7 +1041,7 @@ const EmployeeForm = ({ formType }) => {
onChangeFunction={(e) => EmpTypeDropDownChange(e)}
isOnchanges={formType == 'edit' ? true : false}
valueData={seletedEmpTypeDrop}
// defaultValue={LastSelectConfig}
// defaultValue={LastSelectConfig}
/>
</Form.Item>
{/* EmpDesig */}
@ -1066,7 +1068,7 @@ const EmployeeForm = ({ formType }) => {
onChangeFunction={(e) => EmpDesigDropDownChange(e)}
isOnchanges={formType == 'edit' ? true : false}
valueData={seletedEmpDesigDrop}
// defaultValue={LastSelectConfig}
// defaultValue={LastSelectConfig}
/>
</Form.Item>
{/* EmpDept */}
@ -1093,7 +1095,7 @@ const EmployeeForm = ({ formType }) => {
onChangeFunction={(e) => EmpDeptDropDownChange(e)}
isOnchanges={formType == 'edit' ? true : false}
valueData={seletedEmpDeptDrop}
// defaultValue={LastSelectConfig}
// defaultValue={LastSelectConfig}
/>
</Form.Item>
@ -1122,7 +1124,7 @@ const EmployeeForm = ({ formType }) => {
onChangeFunction={(e) => ShiftDropDownChange(e)}
isOnchanges={formType == 'edit' ? true : false}
valueData={seletedShiftDrop}
// defaultValue={LastSelectConfig}
// defaultValue={LastSelectConfig}
/>
</Form.Item>
@ -1242,7 +1244,7 @@ const EmployeeForm = ({ formType }) => {
formType === 'edit'
? editstate?.EmpPhotoLink
: formRef.current?.getFieldsValue()
?.UserImage || ImageUrl;
?.UserImage || ImageUrl;
// Always return a string
return typeof link === 'string' ? link : '';
})()}
@ -1288,7 +1290,7 @@ const EmployeeForm = ({ formType }) => {
// isOnChange={editstate?.Address1 ? true : false}
isOnChange={
formRef.current?.getFieldsValue()?.Address1 !=
undefined
undefined
? true
: false
}
@ -1327,7 +1329,7 @@ const EmployeeForm = ({ formType }) => {
// isOnChange={editstate?.Address2 ? true : false}
isOnChange={
formRef.current?.getFieldsValue()?.Address2 !=
undefined
undefined
? true
: false
}
@ -1350,13 +1352,13 @@ const EmployeeForm = ({ formType }) => {
{
validator: (_, value) =>
(value || editstate?.Zip) &&
value?.toString().length === 6
value?.toString().length === 6
? Promise.resolve()
: editstate?.Zip?.toString().length === 6
? Promise.resolve()
: Promise.reject(
'Please enter a 6-digit ZIP code'
),
'Please enter a 6-digit ZIP code'
),
},
]}
>
@ -1509,7 +1511,7 @@ const EmployeeForm = ({ formType }) => {
isOnChange={
SelectedLatitude ||
(formRef.current?.getFieldsValue()?.Latitude !=
undefined
undefined
? true
: false)
}
@ -1562,7 +1564,7 @@ const EmployeeForm = ({ formType }) => {
isOnChange={
SelectedLatitude ||
(formRef.current?.getFieldsValue()?.Longitude !=
undefined
undefined
? true
: false)
}
@ -1601,7 +1603,7 @@ const EmployeeForm = ({ formType }) => {
}
isOnChange={
formType == 'edit' ||
fieldChangeMap['Description']
fieldChangeMap['Description']
? true
: false
}
@ -1618,7 +1620,7 @@ const EmployeeForm = ({ formType }) => {
}
isOnChange={
formType == 'edit' ||
fieldChangeMap['Certification']
fieldChangeMap['Certification']
? true
: false
}
@ -1630,14 +1632,17 @@ const EmployeeForm = ({ formType }) => {
length: Math.max(1, imageUrls.length),
}).map((_, idx) => (
<div key={idx} style={{ marginBottom: 12 }}>
<CropUpload
onlineImage={''}
ImageLink={imageUrls[idx]?.image}
updateImageUrl={(url) =>
updateImageUrls(url, idx)
}
/>
<div style={{ width: 'max-content' }}>
<CropUpload
onlineImage={''}
ImageLink={imageUrls[idx]?.image}
updateImageUrl={(url) =>
updateImageUrls(url, idx)
}
/>
</div>
<Input
placeholder={`Image name (optional)`}
value={imageUrls[idx]?.name || ''}
@ -1696,9 +1701,9 @@ const EmployeeForm = ({ formType }) => {
prevlca={
editstate
? {
lat: editstate.Latitude,
lng: editstate.Longitude,
}
lat: editstate.Latitude,
lng: editstate.Longitude,
}
: null
}
/>
@ -1712,7 +1717,7 @@ const EmployeeForm = ({ formType }) => {
buttonText="SUBMIT"
color="901D77"
icon={<ArrowRightOutlined />}
// handleSubmit={handleSubmit}
// handleSubmit={handleSubmit}
/>
</div>
</Form>

View File

@ -57,7 +57,7 @@ const OtherServices = ({ formType }) => {
},
{
name: 'OtherServices',
name: 'Other Services',
link: `${subDirectory}setting/other-services`,
},
];

File diff suppressed because it is too large Load Diff

View File

@ -199,11 +199,11 @@ const TicketForm = () => {
style={{ color: '#1292EE' }}
onClick={() =>
UserType === 'Super Admin' ||
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.UpdateAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.UpdateAccess === 'Y') ||
UserType === 'Admin'
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.UpdateAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.UpdateAccess === 'Y') ||
UserType === 'Admin'
? actionsFormatter(record, index)
: null
}
@ -220,11 +220,11 @@ const TicketForm = () => {
}}
onClick={() =>
UserType === 'Super Admin' ||
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.DeleteAccess === 'Y') ||
UserType === 'Admin'
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.DeleteAccess === 'Y') ||
UserType === 'Admin'
? statusFormatter(record)
: null
}
@ -236,11 +236,11 @@ const TicketForm = () => {
}}
onClick={() =>
UserType === 'Super Admin' ||
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.DeleteAccess === 'Y') ||
UserType === 'Admin'
(UserType === 'Super Admin User' &&
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
(UserType === 'Employee' &&
empData?.DeleteAccess === 'Y') ||
UserType === 'Admin'
? statusFormatter(record)
: null
}
@ -699,11 +699,13 @@ const TicketForm = () => {
<div className="upload_btn">
<p>Upload Attachment</p>
<br></br>
<Imageupload
singleImage={true}
updateImageUrl={updateImageUrl}
ImageLink={imageUrl ? imageUrl : ''}
/>
<div style={{ width: 'max-content' }}>
<Imageupload
singleImage={true}
updateImageUrl={updateImageUrl}
ImageLink={imageUrl ? imageUrl : ''}
/>
</div>
</div>
</div>
</div>