vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement local file preview and manual upload flow for Aadhar and PAN documents in SettingsTab
All checks were successful
Beta CI/CD Pipeline / build-and-test (push) Successful in 59s
Details
Beta CI/CD Pipeline / deploy-beta (push) Successful in 9s
Details

Browse source
This commit is contained in:
vickytechkey 2026-08-28 16:13:11 +05:30
parent ca06e999e2
commit b1d2fa5753
1 changed files with 100 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
src/components/dashboard/tabs/SettingsTab.tsx
View file

@ -15,8 +15,8 @@ export default function SettingsTab() {
emailVerified, phoneVerified, setEmailVerified, setPhoneVerified,
// Business Details
gstin, setGstin, isGstinVerified, handleVerifyGstin,
aadharFile, aadharS3Key, aadharUrl,
panFile, panS3Key, panUrl,
aadharFile, aadharS3Key, aadharUrl, setAadharS3Key, setAadharFile,
panFile, panS3Key, panUrl, setPanS3Key, setPanFile,
// Location
address, setAddress
} = useSeller();
@ -25,6 +25,14 @@ export default function SettingsTab() {
const [saveSuccess, setSaveSuccess] = useState(false);
const [saveError, setSaveError] = useState('');
const [localAadhar, setLocalAadhar] = useState<File | null>(null);
const [localAadharPreview, setLocalAadharPreview] = useState<string | null>(null);
const [isUploadingAadhar, setIsUploadingAadhar] = useState(false);
const [localPan, setLocalPan] = useState<File | null>(null);
const [localPanPreview, setLocalPanPreview] = useState<string | null>(null);
const [isUploadingPan, setIsUploadingPan] = useState(false);
// OTP Verification local state
const [emailOtpSentLocal, setEmailOtpSentLocal] = useState(false);
const [phoneOtpSentLocal, setPhoneOtpSentLocal] = useState(false);
@ -342,23 +350,61 @@ export default function SettingsTab() {
<div className="file has-name is-fullwidth">
<label className="file-label">
<input className="file-input" type="file" onChange={e => {
if (e.target.files?.[0]) uploadDocument(e.target.files[0], 'aadhar');
const file = e.target.files?.[0];
if (file) {
setLocalAadhar(file);
setLocalAadharPreview(URL.createObjectURL(file));
}
}} />
<span className="file-cta">
<span className="file-icon"><span className="material-symbols-outlined">upload</span></span>
<span className="file-label">Choose Aadhar...</span>
</span>
<span className="file-name">{aadharFile || aadharS3Key || 'No file uploaded'}</span>
<span className="file-name">{localAadhar ? localAadhar.name : (aadharFile || aadharS3Key || 'No file uploaded')}</span>
</label>
</div>
{/* Add Preview Link Below */}
{aadharUrl && (
{localAadhar ? (
<div className="mt-2 is-flex is-align-items-center" style={{ gap: '10px' }}>
<a href={localAadharPreview!} target="_blank" rel="noopener noreferrer" className="button is-small is-info is-light">
<span className="icon is-small"><i className="material-symbols-outlined" style={{ fontSize: '14px' }}>visibility</i></span>
<span>Preview Selected</span>
</a>
<button
type="button"
className={`button is-small is-primary ${isUploadingAadhar ? 'is-loading' : ''}`}
onClick={async () => {
setIsUploadingAadhar(true);
const s3Key = await uploadDocument(localAadhar, 'aadhar');
setAadharS3Key(s3Key);
setAadharFile(localAadhar.name);
setLocalAadhar(null);
setLocalAadharPreview(null);
setIsUploadingAadhar(false);
}}
>
Upload
</button>
<button
type="button"
className="button is-small is-danger is-light"
onClick={() => {
setLocalAadhar(null);
setLocalAadharPreview(null);
}}
>
Cancel
</button>
</div>
) : (
aadharUrl && (
<p className="help mt-2">
<a href={aadharUrl} target="_blank" rel="noopener noreferrer">
<span className="icon is-small"><i className="material-symbols-outlined" style={{ fontSize: '14px' }}>visibility</i></span>
Preview Aadhar
Preview Uploaded Aadhar
</a>
</p>
)
)}
</div>
</div>
@ -370,23 +416,61 @@ export default function SettingsTab() {
<div className="file has-name is-fullwidth">
<label className="file-label">
<input className="file-input" type="file" onChange={e => {
if (e.target.files?.[0]) uploadDocument(e.target.files[0], 'pan');
const file = e.target.files?.[0];
if (file) {
setLocalPan(file);
setLocalPanPreview(URL.createObjectURL(file));
}
}} />
<span className="file-cta">
<span className="file-icon"><span className="material-symbols-outlined">upload</span></span>
<span className="file-label">Choose PAN...</span>
</span>
<span className="file-name">{panFile || panS3Key || 'No file uploaded'}</span>
<span className="file-name">{localPan ? localPan.name : (panFile || panS3Key || 'No file uploaded')}</span>
</label>
</div>
{/* Add Preview Link Below */}
{panUrl && (
{localPan ? (
<div className="mt-2 is-flex is-align-items-center" style={{ gap: '10px' }}>
<a href={localPanPreview!} target="_blank" rel="noopener noreferrer" className="button is-small is-info is-light">
<span className="icon is-small"><i className="material-symbols-outlined" style={{ fontSize: '14px' }}>visibility</i></span>
<span>Preview Selected</span>
</a>
<button
type="button"
className={`button is-small is-primary ${isUploadingPan ? 'is-loading' : ''}`}
onClick={async () => {
setIsUploadingPan(true);
const s3Key = await uploadDocument(localPan, 'pan');
setPanS3Key(s3Key);
setPanFile(localPan.name);
setLocalPan(null);
setLocalPanPreview(null);
setIsUploadingPan(false);
}}
>
Upload
</button>
<button
type="button"
className="button is-small is-danger is-light"
onClick={() => {
setLocalPan(null);
setLocalPanPreview(null);
}}
>
Cancel
</button>
</div>
) : (
panUrl && (
<p className="help mt-2">
<a href={panUrl} target="_blank" rel="noopener noreferrer">
<span className="icon is-small"><i className="material-symbols-outlined" style={{ fontSize: '14px' }}>visibility</i></span>
Preview PAN
Preview Uploaded PAN
</a>
</p>
)
)}
</div>
</div>