1
1
import React , { useEffect , useState } from "react" ;
2
2
import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage" ;
3
- import "../styles/signature.css" ;
4
- import "../styles/AddUser.css" ;
5
3
import Title from "../components/Title" ;
6
4
import RenderDebugPdf from "../components/RenderDebugPdf" ;
7
5
import { pdfjs } from "react-pdf" ;
@@ -217,14 +215,18 @@ const DebugPdf = () => {
217
215
} ;
218
216
return (
219
217
< div >
220
- { copied && < Alert type = "success" > Copied</ Alert > }
218
+ { copied && (
219
+ < Alert type = "success" >
220
+ < span className = "ml-3" > Copied</ span >
221
+ </ Alert >
222
+ ) }
221
223
< Title title = { "Debug Pdf" } />
222
224
{ width < 800 ? (
223
225
< HandleError handleError = { "Debug PDF only availble for PC" } />
224
226
) : (
225
227
< >
226
228
{ ! isModal && (
227
- < div className = "signatureContainer " >
229
+ < div className = "flex flex-row justify-between " >
228
230
{ /* this component used to render all pdf pages in left side */ }
229
231
< RenderAllPdfPage
230
232
signPdfUrl = { pdf }
@@ -253,106 +255,55 @@ const DebugPdf = () => {
253
255
/>
254
256
</ div >
255
257
</ div >
256
- < div style = { { backgroundColor : "white" , width : 220 } } >
257
- < div
258
- style = { {
259
- fontSize : 18 ,
260
- fontWeight : 500 ,
261
- padding : "10px 12px" ,
262
- borderBottom : "1px solid grey"
263
- } }
264
- >
258
+ < div className = "w-[220px] bg-base-100" >
259
+ < div className = "text-[18px] font-medium py-[10px] px-[12px] border-b-[1px] border-[gray]" >
265
260
PDF details
266
261
</ div >
267
- < div style = { { fontSize : 14 , padding : " 5px 12px" } } >
262
+ < div className = "text-[14px] py-[ 5px] px-[ 12px]" >
268
263
Name: { pdfDetails ?. name }
269
264
</ div >
270
- < div style = { { fontSize : 14 , padding : " 5px 12px" } } >
265
+ < div className = "text-[14px] py-[ 5px] px-[ 12px]" >
271
266
Pdf type: { pdfDetails ?. pdftype }
272
267
</ div >
273
- < div style = { { fontSize : 14 , padding : " 5px 12px" } } >
268
+ < div className = "text-[14px] py-[ 5px] px-[ 12px]" >
274
269
Total Pages: { pdfDetails ?. totalPages }
275
270
</ div >
276
- < div style = { { fontSize : 14 , padding : " 5px 12px" } } >
271
+ < div className = "text-[14px] py-[ 5px] px-[ 12px]" >
277
272
Current Page: { pdfDetails ?. currentPage }
278
273
</ div >
279
- < div style = { { fontSize : 14 , padding : " 5px 12px" } } >
274
+ < div className = "text-[14px] py-[ 5px] px-[ 12px]" >
280
275
Base64 : { pdfDetails ?. base64 . slice ( 0 , 10 ) } ...
281
276
< span
282
- style = { {
283
- borderRadius : 4 ,
284
- padding : "3px 5px" ,
285
- border : "1px solid gray" ,
286
- fontSize : 12 ,
287
- margin : 2 ,
288
- cursor : "pointer"
289
- } }
277
+ className = "op-btn op-btn-outline op-btn-primary op-btn-xs rounded-md w-[25px] h-[25px] text-[12px] m-[2px] "
290
278
onClick = { ( ) => copytoclipboard ( pdfDetails ?. base64 ) }
291
279
>
292
280
< i className = "fa-solid fa-copy" > </ i >
293
281
</ span >
294
282
</ div >
295
- < div
296
- style = { {
297
- fontSize : 18 ,
298
- fontWeight : 500 ,
299
- padding : "10px 12px" ,
300
- borderBottom : "1px solid grey"
301
- } }
302
- >
283
+ < div className = "text-[18px] font-medium py-[10px] px-[12px] border-b-[1px] border-[gray]" >
303
284
Last click
304
285
</ div >
305
- < div style = { { fontSize : 14 , padding : " 5px 12px" } } >
286
+ < div className = "text-[14px] py-[ 5px] px-[ 12px]" >
306
287
x co-ordinate: { pdfDetails ?. x }
307
288
</ div >
308
- < div style = { { fontSize : 14 , padding : " 5px 12px" } } >
289
+ < div className = "text-[14px] py-[ 5px] px-[ 12px]" >
309
290
y co-ordinate: { pdfDetails ?. y }
310
291
</ div >
311
-
312
- < div
313
- style = { {
314
- fontSize : 18 ,
315
- fontWeight : 500 ,
316
- padding : "10px 12px" ,
317
- borderBottom : "1px solid grey" ,
318
- borderTop : "1px solid grey"
319
- } }
320
- >
292
+ < div className = "text-[18px] font-medium py-[10px] px-[12px] border-y-[1px] border-[gray]" >
321
293
Annotation
322
294
</ div >
323
- < ul
324
- style = { {
325
- listStyle : "none" ,
326
- padding : 10 ,
327
- height : 500 ,
328
- overflowY : "auto" ,
329
- scrollbarWidth : 5
330
- } }
331
- >
295
+ < ul className = " list-none p-[10px] h-[500px] overflow-y-auto" >
332
296
{ annotations . map ( ( coord , index ) => (
333
297
< li key = { index } >
334
- < span style = { { fontSize : 13 , fontWeight : 500 } } > { `Box ${
298
+ < span className = "text-[13px] font-medium" > { `Box ${
335
299
index + 1
336
300
} :`} </ span >
337
- < code
338
- style = { {
339
- fontSize : 12 ,
340
- color : "black" ,
341
- cursor : "pointer"
342
- } }
343
- >
301
+ < code className = "text-[12px] text-base-content select-none" >
344
302
{ ` ["page":${ coord ?. page } , "x": ${ coord . x } , "y": ${ coord . y } , "w": ${ coord . width } , "h": ${ coord . height } ]` }
345
303
</ code >
346
304
< div >
347
305
< span
348
- style = { {
349
- borderRadius : 4 ,
350
- padding : "3px 5px" ,
351
- border : "1px solid gray" ,
352
- fontSize : 12 ,
353
- margin : 2 ,
354
- cursor : "pointer"
355
- } }
306
+ className = "op-btn op-btn-outline op-btn-primary op-btn-xs rounded-md w-[23px] h-[20px] text-[12px] m-[2px] "
356
307
onClick = { ( ) =>
357
308
copytoclipboard (
358
309
`"page":${ coord ?. page } , "x": ${ coord . x } , "y": ${ coord . y } , "w": ${ coord . width } , "h": ${ coord . height } `
@@ -362,14 +313,7 @@ const DebugPdf = () => {
362
313
< i className = "fa-solid fa-copy" > </ i >
363
314
</ span >
364
315
< span
365
- style = { {
366
- borderRadius : 4 ,
367
- padding : "3px 5px" ,
368
- border : "1px solid gray" ,
369
- fontSize : 12 ,
370
- margin : 2 ,
371
- cursor : "pointer"
372
- } }
316
+ className = "op-btn op-btn-outline op-btn-error op-btn-xs rounded-md w-[23px] h-[20px] text-[12px] m-[2px] "
373
317
onClick = { ( ) => handleDelete ( coord . key ) }
374
318
>
375
319
< i className = "fa-solid fa-trash-can" > </ i >
@@ -382,38 +326,16 @@ const DebugPdf = () => {
382
326
</ div >
383
327
) }
384
328
< ModalUi title = { "Select PDF" } isOpen = { isModal } >
385
- < form onSubmit = { handleSubmit } style = { { margin : " 10px" } } >
329
+ < form onSubmit = { handleSubmit } className = "m-[ 10px]" >
386
330
< input
387
331
type = "file"
388
332
onChange = { ( e ) => handleFileChange ( e . target . files ) }
389
- style = { {
390
- width : "100%" ,
391
- border : "1px solid grey" ,
392
- borderRadius : "4px" ,
393
- padding : "5px" ,
394
- fontSize : 12
395
- } }
333
+ className = "op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full h-[40px] text-xs"
396
334
accept = ".pdf"
397
335
required
398
336
/>
399
- < div
400
- style = { { borderTop : "1px solid grey" , margin : "10px 0" } }
401
- > </ div >
402
337
< button
403
- style = { {
404
- background : "#32a3ac" ,
405
- borderRadius : "2px" ,
406
- boxShadow :
407
- "0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18)" ,
408
- border : "none" ,
409
- textTransform : "uppercase" ,
410
- fontSize : "13px" ,
411
- fontWeight : "600" ,
412
- padding : "0.375rem 0.75rem" ,
413
- textAlign : "center" ,
414
- color : "#ffffff" ,
415
- outline : "none"
416
- } }
338
+ className = "op-btn op-btn-primary w-full mt-3 mb-1"
417
339
type = "submit"
418
340
>
419
341
Submit
0 commit comments