1  import { useState } from "react";
  2  import styles from "./form.module.scss";
  3  import Image from "next/image";
  4  import NotesTable from "../Table/NotesTable";
  5  import { NotesDB } from "../Database/Database";
  6  
  7  import { useEffect, useRef } from "react";
  8  
  9  const NotesForm = ({
 10    logo,
 11    updateLogo,
 12    logoUpdated,
 13    prefill,
 14    currencySymbol,
 15    rows,
 16    onFormMod,
 17    onTableUpdate,
 18    onRowAdd,
 19    onRowRemove,
 20    handleNotesData,
 21  }) => {
 22    const [total, setTotal] = useState(0);
 23    const imageRef = useRef(null);
 24  
 25    const handleChange = (e) => {
 26      e.preventDefault();
 27      const { name, value, type, checked } = e.target;
 28  
 29      if (type !== "checkbox") {
 30        // to handle regular form input
 31        onFormMod(name, value);
 32      } else {
 33        // to handle checkbox input
 34        onFormMod(name, checked);
 35      }
 36    };
 37  
 38    // Table Functions
 39    const updateTable = (e, id, amount) => {
 40      onTableUpdate(e, id, amount);
 41    };
 42    const addRow = () => {
 43      onRowAdd();
 44    };
 45    const removeRow = (id) => {
 46      onRowRemove(id);
 47    };
 48  
 49    const changeImage = () => {
 50      imageRef.current.click();
 51    };
 52  
 53    const imageHandler = (e) => {
 54      updateLogo(e);
 55    };
 56  
 57    useEffect(() => {
 58      setTotal(calculateTotal());
 59    }, [rows]);
 60  
 61    const calculateTotal = () => {
 62      let sum = 0;
 63      rows.forEach((row) => {
 64        sum += parseFloat(row.amount);
 65      });
 66      return sum;
 67    };
 68  
 69    const formatAmountWithCommas = (amount) => {
 70      // Remove commas from the input value
 71      const cleanValue = amount.replace(/,/g, "");
 72  
 73      // Add commas for formatting
 74      const formattedValue = cleanValue.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 75      return formattedValue;
 76    };
 77  
 78    const notesData = {
 79      investor: prefill.investorName,
 80      amount: prefill.maxAmount,
 81    };
 82  
 83    useEffect(() => {
 84      handleNotesData(notesData);
 85    }, [prefill.investorName, prefill.maxAmount]);
 86  
 87    return (
 88      <div>
 89        <form className={styles.form}>
 90          <div className={styles.header}>
 91            <input
 92              className={`${styles.invoice__title} ${styles.input__default}`}
 93              type="text"
 94              name="formName"
 95              id="formName"
 96              placeholder="Note Contract"
 97              onChange={handleChange}
 98              value={prefill.formName || ""}
 99            />
100            <div className={styles.photo__drop__zone}>
101              <input
102                className={styles.logo__input}
103                accept="image/jpeg ,image/jpg ,image/png ,image/webp"
104                type="file"
105                name="logo"
106                id="logo"
107                placeholder="Logo"
108                ref={imageRef}
109                onChange={imageHandler}
110              />
111              <div className={styles.img__holder} onClick={changeImage}>
112                {logo && (
113                  <Image
114                    src={logo}
115                    className={styles.logo}
116                    alt="company logo"
117                    width={150}
118                    height={150}
119                  />
120                )}
121              </div>
122              <label htmlFor="logo" className={styles.image__label}>
123                <span>{logoUpdated ? "Update logo" : "Add your logo"}</span>
124                <span className={styles.logoIcon}>
125                  <svg
126                    aria-hidden="true"
127                    focusable="false"
128                    data-prefix="fas"
129                    data-icon="image"
130                    role="img"
131                    xmlns="http://www.w3.org/2000/svg"
132                    viewBox="0 0 512 512"
133                  >
134                    <path
135                      fill="currentColor"
136                      d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"
137                    ></path>
138                  </svg>
139                </span>
140              </label>
141            </div>
142          </div>
143          <div className={styles.invoice__details}>
144            <div>
145              <h3>Issuer:</h3>
146              <br />
147              <br />
148              <hr className={styles.divider} />
149              <h5>Business Entity</h5>
150              <hr className={styles.divider} />
151              <div className={styles.form__field}>
152                <label htmlFor="issuerName" className={styles.label}>
153                  Name
154                </label>
155                <input
156                  className={styles.input__default}
157                  type="text"
158                  name="issuerName"
159                  id="issuerName"
160                  placeholder="Business Name"
161                  onChange={handleChange}
162                  value={prefill.issuerName || ""}
163                />
164              </div>
165              <div className={styles.form__field}>
166                <label htmlFor="issuerEmail" className={styles.label}>
167                  {" "}
168                  Email
169                </label>
170                <input
171                  className={styles.input__default}
172                  type="email"
173                  name="issuerEmail"
174                  id="issuerEmail"
175                  placeholder="name@business.com"
176                  onChange={handleChange}
177                  value={prefill.issuerEmail || ""}
178                />
179              </div>
180              <div className={styles.form__field}>
181                <label htmlFor="issuerAddress" className={styles.label}>
182                  Address
183                </label>
184                <input
185                  className={styles.input__default}
186                  type="text"
187                  name="issuerAddress"
188                  id="issuerAddress"
189                  placeholder="street"
190                  onChange={handleChange}
191                  value={prefill.issuerAddress || ""}
192                />
193              </div>
194              <div className={styles.form__field}>
195                <label htmlFor="issuerCity" className={styles.label}></label>
196                <input
197                  className={styles.input__default}
198                  type="text"
199                  name="issuerCity"
200                  id="issuerCity"
201                  placeholder="city, state, country"
202                  onChange={handleChange}
203                  value={prefill.issuerCity || ""}
204                />
205              </div>
206              <div className={styles.form__field}>
207                <label htmlFor="issuerZipcode" className={styles.label}></label>
208                <input
209                  className={styles.input__default}
210                  type="text"
211                  name="issuerZipcode"
212                  id="issuerZipcode"
213                  placeholder="postal/zip code"
214                  onChange={handleChange}
215                  value={prefill.issuerZipcode || ""}
216                />
217              </div>
218              <div className={styles.form__field}>
219                <label htmlFor="issuerJurisdiction" className={styles.label}>
220                  Jurisdiction
221                </label>
222                <input
223                  className={styles.input__default}
224                  type="text"
225                  name="issuerJurisdiction"
226                  id="issuerJurisdiction"
227                  placeholder="Court"
228                  onChange={handleChange}
229                  value={prefill.issuerJurisdiction || ""}
230                />
231              </div>
232              <div className={styles.form__field}>
233                <label htmlFor="issuerRegNumber" className={styles.label}>
234                  Reg No
235                </label>
236                <input
237                  className={styles.input__default}
238                  type="text"
239                  name="issuerRegNumber"
240                  id="issuerRegNumber"
241                  placeholder="RC****"
242                  onChange={handleChange}
243                  value={prefill.issuerRegNumber || ""}
244                />
245              </div>
246              <div className={styles.group}>
247                <hr className={styles.divider} />
248                <h5>Business Representative</h5>
249                <hr className={styles.divider} />
250                <div className={styles.form__field}>
251                  <label htmlFor="issuerRepFirstName" className={styles.label}>
252                    Name
253                  </label>
254                  <input
255                    className={styles.input__default}
256                    type="text"
257                    name="issuerRepFirstName"
258                    id="issuerRepFirstName"
259                    placeholder="First Name"
260                    onChange={handleChange}
261                    value={prefill.issuerRepFirstName || ""}
262                  />
263                  <label htmlFor="issuerRepLastName"></label>
264                  <input
265                    className={styles.input__default}
266                    type="text"
267                    name="issuerRepLastName"
268                    id="issuerRepLastName"
269                    placeholder="Last Name"
270                    onChange={handleChange}
271                    value={prefill.issuerRepLastName || ""}
272                  />
273                </div>
274                <div className={styles.form__field}>
275                  <label htmlFor="issuerRepPosition" className={styles.label}>
276                    Position
277                  </label>
278                  <input
279                    className={styles.input__default}
280                    type="text"
281                    name="issuerRepPosition"
282                    id="issuerRepPosition"
283                    placeholder="CEO"
284                    onChange={handleChange}
285                    value={prefill.issuerRepPosition || ""}
286                  />
287                </div>
288                <div className={styles.form__field}>
289                  <label htmlFor="issuerRepDOB" className={styles.label}>
290                    D.O.B
291                  </label>
292                  <input
293                    className={styles.input__default}
294                    type="date"
295                    name="issuerRepDOB"
296                    id="issuerRepDOB"
297                    onChange={handleChange}
298                    value={prefill.issuerRepDOB || ""}
299                  />
300                </div>
301                <div className={styles.form__field}>
302                  <label htmlFor="issuerRepPassportNo" className={styles.label}>
303                    Passport No
304                  </label>
305                  <input
306                    className={styles.input__default}
307                    type="text"
308                    name="issuerRepPassportNo"
309                    id="issuerRepPassportNo"
310                    placeholder="ID001"
311                    onChange={handleChange}
312                    value={prefill.issuerRepPassportNo || ""}
313                  />
314                </div>
315              </div>
316              <div className={styles.group}>
317                <hr className={styles.divider} />
318                <h5>Financing Details</h5>
319                <hr className={styles.divider} />
320                <div className={styles.form__field}>
321                  <label htmlFor="currency" className={styles.label}>
322                    Currency
323                  </label>
324                  <select
325                    name="currency"
326                    id="currency"
327                    onChange={handleChange}
328                    value={prefill.currency || ""}
329                    className={styles.select}
330                  >
331                    <option value="usdt">USDT</option>
332                    <option value="usdc">USDC</option>
333                    <option value="eurc">EURC</option>
334                  </select>
335                </div>
336                <div className={styles.form__field}>
337                  <label htmlFor="maxAmount" className={styles.label}>
338                    Max Amount
339                  </label>
340                  <input
341                    className={styles.input__default}
342                    type="text"
343                    name="maxAmount"
344                    id="maxAmount"
345                    placeholder="0.00"
346                    onChange={handleChange}
347                    value={formatAmountWithCommas(prefill.maxAmount || "")}
348                  />
349                </div>
350                <div className={styles.form__field}>
351                  <label htmlFor="minAmount" className={styles.label}>
352                    Min Amount
353                  </label>
354                  <input
355                    className={styles.input__default}
356                    type="text"
357                    name="minAmount"
358                    id="minAmount"
359                    placeholder="0.00"
360                    onChange={handleChange}
361                    value={formatAmountWithCommas(prefill.minAmount || "")}
362                  />
363                </div>
364                <div className={styles.form__field}>
365                  <label htmlFor="startDate" className={styles.label}>
366                    Start Date
367                  </label>
368                  <input
369                    className={styles.input__default}
370                    type="date"
371                    name="startDate"
372                    id="startDate"
373                    placeholder="dd/mm/yyyy"
374                    onChange={handleChange}
375                    value={prefill.startDate || ""}
376                  />
377                </div>
378                <div className={styles.form__field}>
379                  <label htmlFor="dueDate" className={styles.label}>
380                    Due Date
381                  </label>
382                  <input
383                    className={styles.input__default}
384                    type="date"
385                    name="dueDate"
386                    id="dueDate"
387                    placeholder="dd/mm/yyyy"
388                    onChange={handleChange}
389                    value={prefill.dueDate || ""}
390                  />
391                </div>
392                <div className={styles.form__field}>
393                  <label htmlFor="duration" className={styles.label}>
394                    Duration
395                  </label>
396                  <input
397                    className={styles.input__default}
398                    type="text"
399                    name="duration"
400                    id="duration"
401                    placeholder="90 days"
402                    onChange={handleChange}
403                    value={prefill.duration || ""}
404                  />
405                </div>
406                <div className={styles.form__field}>
407                  <label htmlFor="repaymentType" className={styles.label}>
408                    Repayment Type
409                  </label>
410                  <select
411                    className={styles.select}
412                    name="repaymentType"
413                    id="repaymentType"
414                    onChange={handleChange}
415                    value={prefill.repaymentType || ""}
416                  >
417                    <option value="interestOnly">Interest only</option>
418                    <option value="principalAndInterest">
419                      Principal + Interest
420                    </option>
421                  </select>
422                </div>
423                <div className={styles.form__field}>
424                  <label htmlFor="issuerFirstRepayment" className={styles.label}>
425                    First Repayment
426                  </label>
427                  <input
428                    className={styles.input__default}
429                    type="date"
430                    name="issuerFirstRepayment"
431                    id="issuerFirstRepayment"
432                    placeholder="dd/mm/yyyy"
433                    onChange={handleChange}
434                    value={prefill.issuerFirstRepayment || ""}
435                  />
436                </div>
437              </div>
438              <div className={styles.group}>
439                <hr className={styles.divider} />
440                <h5>Payment Details</h5>
441                <hr className={styles.divider} />
442                <div className={styles.form__field}>
443                  <label htmlFor="transactionCurrency" className={styles.label}>
444                    Transaction Currency
445                  </label>
446                  <select
447                    name="transactionCurrency"
448                    id="transactionCurrency"
449                    onChange={handleChange}
450                    value={prefill.transactionCurrency || ""}
451                    className={styles.select}
452                  >
453                    <option value="usdt">USDT</option>
454                    <option value="ngn">NGN</option>
455                    <option value="gha">GHA</option>
456                  </select>
457                </div>
458                <div className={styles.form__field}>
459                  <label htmlFor="borroweHanseWallet" className={styles.label}>
460                    Hanse Wallet
461                  </label>
462                  <input
463                    className={styles.input__default}
464                    type="text"
465                    name="borroweHanseWallet"
466                    id="borroweHanseWallet"
467                    placeholder="2147ed09h2756886nf0y"
468                    onChange={handleChange}
469                    value={prefill.borroweHanseWallet || ""}
470                  />
471                </div>
472                <div className={styles.form__field}>
473                  <label htmlFor="borrowerEthWallet" className={styles.label}>
474                    Eth Wallet
475                  </label>
476                  <input
477                    className={styles.input__default}
478                    type="text"
479                    name="borrowerEthWallet"
480                    id="borrowerEthWallet"
481                    placeholder="0x.........."
482                    onChange={handleChange}
483                    value={prefill.borrowerEthWallet || ""}
484                  />
485                </div>
486              </div>
487              <div className={styles.group}>
488                <hr className={styles.divider} />
489                <h5>Collateral</h5>
490                <hr className={styles.divider} />
491                <div className={styles.form__field}>
492                  <label htmlFor="propertyId" className={styles.label}>
493                    Property ID
494                  </label>
495                  <input
496                    className={styles.input__default}
497                    type="text"
498                    name="propertyId"
499                    id="propertyId"
500                    placeholder="NFT_001"
501                    onChange={handleChange}
502                    value={prefill.propertyId || ""}
503                  />
504                </div>
505                <div className={styles.form__field}>
506                  <label htmlFor="propertyType" className={styles.label}>
507                    Property Type
508                  </label>
509                  <input
510                    className={styles.input__default}
511                    type="text"
512                    name="propertyType"
513                    id="propertyType"
514                    placeholder="Cargo, Service"
515                    onChange={handleChange}
516                    value={prefill.propertyType || ""}
517                  />
518                </div>
519                <div className={styles.form__field}>
520                  <label htmlFor="maxPurchaseValue" className={styles.label}>
521                    Max Purchase Value($)
522                  </label>
523                  <input
524                    className={styles.input__default}
525                    type="text"
526                    name="maxPurchaseValue"
527                    id="maxPurchaseValue"
528                    placeholder="50,0000"
529                    onChange={handleChange}
530                    value={prefill.maxPurchaseValue || ""}
531                  />
532                </div>
533              </div>
534            </div>
535            <div>
536              <h3>Investor:</h3>
537              <br />
538              <br />
539              <hr className={styles.divider} />
540              <h5>Business Entity</h5>
541              <hr className={styles.divider} />
542              <div className={styles.form__field}>
543                <label htmlFor="investorName" className={styles.label}>
544                  Name
545                </label>
546                <input
547                  className={styles.input__default}
548                  type="text"
549                  name="investorName"
550                  id="investorName"
551                  placeholder="Business Name"
552                  onChange={handleChange}
553                  value={prefill.investorName || ""}
554                />
555              </div>
556              <div className={styles.form__field}>
557                <label htmlFor="investorEmail" className={styles.label}>
558                  Email
559                </label>
560                <input
561                  className={styles.input__default}
562                  type="email"
563                  name="investorEmail"
564                  id="investorEmail"
565                  placeholder="name@investoremail.com"
566                  onChange={handleChange}
567                  value={prefill.investorEmail || ""}
568                />
569              </div>
570              <div className={styles.form__field}>
571                <label htmlFor="investorAddress" className={styles.label}>
572                  Address
573                </label>
574                <input
575                  className={styles.input__default}
576                  type="text"
577                  name="investorAddress"
578                  id="investorAddress"
579                  placeholder="street"
580                  onChange={handleChange}
581                  value={prefill.investorAddress || ""}
582                />
583              </div>
584              <div className={styles.form__field}>
585                <label htmlFor="investorCity" className={styles.label}></label>
586                <input
587                  className={styles.input__default}
588                  type="text"
589                  name="investorCity"
590                  id="investorCity"
591                  placeholder="city, state, country"
592                  onChange={handleChange}
593                  value={prefill.investorCity || ""}
594                />
595              </div>
596              <div className={styles.form__field}>
597                <label htmlFor="investorZipcode" className={styles.label}></label>
598                <input
599                  className={styles.input__default}
600                  type="text"
601                  name="investorZipcode"
602                  id="investorZipcode"
603                  placeholder="postal/zip code"
604                  onChange={handleChange}
605                  value={prefill.investorZipcode || ""}
606                />
607              </div>
608              <div className={styles.form__field}>
609                <label htmlFor="investorJurisdiction" className={styles.label}>
610                  Jurisdiction
611                </label>
612                <input
613                  className={styles.input__default}
614                  type="text"
615                  name="investorJurisdiction"
616                  id="investorJurisdiction"
617                  placeholder="Court"
618                  onChange={handleChange}
619                  value={prefill.investorJurisdiction || ""}
620                />
621              </div>
622              <div className={styles.form__field}>
623                <label htmlFor="investorRegNumber" className={styles.label}>
624                  Reg No
625                </label>
626                <input
627                  className={styles.input__default}
628                  type="text"
629                  name="investorRegNumber"
630                  id="investorRegNumber"
631                  placeholder="RC****"
632                  onChange={handleChange}
633                  value={prefill.investorRegNumber || ""}
634                />
635              </div>
636              <div className={styles.group}>
637                <hr className={styles.divider} />
638                <h5>Business Representative</h5>
639                <hr className={styles.divider} />
640                <div className={styles.form__field}>
641                  <label htmlFor="investorRepFirstName" className={styles.label}>
642                    Name
643                  </label>
644                  <input
645                    className={styles.input__default}
646                    type="text"
647                    name="investorRepFirstName"
648                    id="investorRepFirstName"
649                    placeholder="First Name"
650                    onChange={handleChange}
651                    value={prefill.investorRepFirstName || ""}
652                  />
653                  <label htmlFor="investorRepLastName"></label>
654                  <input
655                    className={styles.input__default}
656                    type="text"
657                    name="investorRepLastName"
658                    id="investorRepLastName"
659                    placeholder="Last Name"
660                    onChange={handleChange}
661                    value={prefill.investorRepLastName || ""}
662                  />
663                </div>
664                <div className={styles.form__field}>
665                  <label htmlFor="investorRepPosition" className={styles.label}>
666                    Position
667                  </label>
668                  <input
669                    className={styles.input__default}
670                    type="text"
671                    name="investorRepPosition"
672                    id="investorRepPosition"
673                    placeholder="CEO"
674                    onChange={handleChange}
675                    value={prefill.investorRepPosition || ""}
676                  />
677                </div>
678                <div className={styles.form__field}>
679                  <label htmlFor="investorRepDOB" className={styles.label}>
680                    D.O.B
681                  </label>
682                  <input
683                    className={styles.input__default}
684                    type="date"
685                    name="investorRepDOB"
686                    id="investorRepDOB"
687                    placeholder="dd/mm/yyyy"
688                    onChange={handleChange}
689                    value={prefill.investorRepDOB || ""}
690                  />
691                </div>
692                <div className={styles.form__field}>
693                  <label htmlFor="investorRepPassportNo" className={styles.label}>
694                    Passport No
695                  </label>
696                  <input
697                    className={styles.input__default}
698                    type="text"
699                    name="investorRepPassportNo"
700                    id="investorRepPassportNo"
701                    placeholder="ID001"
702                    onChange={handleChange}
703                    value={prefill.investorRepPassportNo || ""}
704                  />
705                </div>
706              </div>
707              <div className={styles.group}>
708                <hr className={styles.divider} />
709                <h5>Financing Details</h5>
710                <hr className={styles.divider} />
711                <div className={styles.form__field}>
712                  <label htmlFor="interestRate" className={styles.label}>
713                    Interest Rate (%)
714                  </label>
715                  <input
716                    className={styles.input__default}
717                    type="number"
718                    name="interestRate"
719                    id="interestRate"
720                    placeholder="0"
721                    onChange={handleChange}
722                    value={prefill.interestRate || ""}
723                  />
724                </div>
725                <div className={styles.form__field}>
726                  <label htmlFor="investorFirstPayment" className={styles.label}>
727                    First Date of Payment
728                  </label>
729                  <input
730                    className={styles.input__default}
731                    type="date"
732                    name="investorFirstPayment"
733                    id="investorFirstPayment"
734                    placeholder="dd/mm/yyyy"
735                    onChange={handleChange}
736                    value={prefill.investorFirstPayment || ""}
737                  />
738                </div>
739                <div className={styles.form__field}>
740                  <label htmlFor="paymentFrequency" className={styles.label}>
741                    Payment Frequency
742                  </label>
743                  <select
744                    className={styles.select}
745                    name="paymentFrequency"
746                    id="paymentFrequency"
747                    onChange={handleChange}
748                    value={prefill.paymentFrequency || ""}
749                  >
750                    <option value="daily">Daily</option>
751                    <option value="weekly">Weekly</option>
752                    <option value="monthly">Monthly</option>
753                    <option value="quarterly">Quarterly</option>
754                    <option value="annualy">Annualy</option>
755                  </select>
756                </div>
757                <div className={styles.form__field}>
758                  <label htmlFor="lateFee" className={styles.label}>
759                    Late Fee (%)
760                  </label>
761                  <input
762                    className={styles.input__default}
763                    type="number"
764                    name="lateFee"
765                    id="lateFee"
766                    placeholder="0"
767                    onChange={handleChange}
768                    value={prefill.lateFee || ""}
769                  />
770                </div>
771                <div className={styles.form__field}>
772                  <label htmlFor="lateFeeStarts" className={styles.label}>
773                    Late Fee Starts
774                  </label>
775                  <input
776                    className={styles.input__default}
777                    type="date"
778                    name="lateFeeStarts"
779                    id="lateFeeStarts"
780                    placeholder="dd/mm/yyyy"
781                    onChange={handleChange}
782                    value={prefill.lateFeeStarts || ""}
783                  />
784                </div>
785                <div className={styles.form__field}>
786                  <label htmlFor="latePaymentPenalty" className={styles.label}>
787                    Late Payment Penalty
788                  </label>
789                  <select
790                    className={styles.select}
791                    name="latePaymentPenalty"
792                    id="latePaymentPenalty"
793                    onChange={handleChange}
794                    value={prefill.latePaymentPenalty || ""}
795                  >
796                    <option value="noPenalty">No Penalty</option>
797                    <option value="fixdAmount">Fixed Amount</option>
798                    <option value="percentageOfRemainingPrincipal">
799                      % of Remaining Principal
800                    </option>
801                    <option value="percentageOfTotalPrincipal">
802                      % of Total Principal
803                    </option>
804                  </select>
805                </div>
806              </div>
807              <div className={styles.group} style={{ marginTop: "101px" }}>
808                <hr className={styles.divider} />
809                <h5>Payment Details</h5>
810                <hr className={styles.divider} />
811                <div className={styles.form__field}>
812                  <label htmlFor="lenderHanseWallet" className={styles.label}>
813                    Hanse Wallet
814                  </label>
815                  <input
816                    className={styles.input__default}
817                    type="text"
818                    name="lenderHanseWallet"
819                    id="lenderHanseWallet"
820                    placeholder="2147ed09h2756886nf0y"
821                    onChange={handleChange}
822                    value={prefill.lenderHanseWallet || ""}
823                  />
824                </div>
825                <div className={styles.form__field}>
826                  <label htmlFor="lenderEthWallet" className={styles.label}>
827                    Eth Wallet
828                  </label>
829                  <input
830                    className={styles.input__default}
831                    type="text"
832                    name="lenderEthWallet"
833                    id="lenderEthWallet"
834                    placeholder="0x.........."
835                    onChange={handleChange}
836                    value={prefill.lenderEthWallet || ""}
837                  />
838                </div>
839                <div className={styles.group} style={{ marginTop: "53px" }}>
840                  <hr className={styles.divider} />
841                  <h5>Collateral</h5>
842                  <hr className={styles.divider} />
843                  <div className={styles.form__field}>
844                    <label htmlFor="counterParty" className={styles.label}>
845                      Counter Party
846                    </label>
847                    <input
848                      className={styles.input__default}
849                      type="text"
850                      name="counterParty"
851                      id="counterParty"
852                      placeholder="BMW"
853                      onChange={handleChange}
854                      value={prefill.counterParty || ""}
855                    />
856                  </div>
857                  <div className={styles.form__field}>
858                    <label htmlFor="maxTime" className={styles.label}>
859                      Max Time
860                    </label>
861                    <input
862                      className={styles.input__default}
863                      type="text"
864                      name="maxTime"
865                      id="maxTime"
866                      placeholder="14w2d"
867                      onChange={handleChange}
868                      value={prefill.maxTime || ""}
869                    />
870                  </div>
871                  <div className={styles.form__field}>
872                    <label htmlFor="destinationCountry" className={styles.label}>
873                      Destination Country
874                    </label>
875                    <input
876                      className={styles.input__default}
877                      type="text"
878                      name="destinationCountry"
879                      id="destinationCountry"
880                      placeholder="Nigeria"
881                      onChange={handleChange}
882                      value={prefill.destinationCountry || ""}
883                    />
884                  </div>
885                </div>
886              </div>
887            </div>
888          </div>
889          <hr className={styles.divider} />
890          <div className={styles.row__group}></div>
891  
892          {/* invoice list table */}
893          {/* <NotesTable
894            rows={rows} 
895            prefill={prefill}
896            onAddInvoiceRow={addRow}
897            onRemoveInvoiceRow={removeRow}
898            currencySymbol={currencySymbol}
899            onModifyTable={updateTable}
900          /> */}
901          {/* <section className={styles.total__section}>
902            <div>
903              <span>Amount</span>
904              <span className={styles.total}>{currencySymbol}{total.toFixed(2)}</span>
905            </div>
906          </section>
907          <div>
908            <p>Terms</p>
909            <textarea
910              name="notes" 
911              id="notes"
912              onChange={handleChange}
913              value={prefill.notes || ''} 
914              style={{height: '135px', marginTop: '18px', resize: 'none', fontFamily: 'Arial'}}
915              placeholder="Notes - any relevant information not covered, additional terms and conditions."
916              className={`${styles.input__default} ${styles.details}`}></textarea>
917          </div> */}
918          {/* Took out signature and photo sections */}
919  
920          {/* <section>
921            <span>
922              <p>Signature</p>
923            </span>
924            <span>
925              <button
926                type='button'
927                className={`${styles.add__invoice__item} ${styles.btn__add}`}>
928                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#ffffff" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
929              </button>
930            </span>
931          </section>
932  
933          <section>
934            <p>Photos</p>
935            <input 
936              accept="image/jpeg ,image/jpg ,image/png ,image/webp"
937              type="file" 
938              name="photos" 
939              id="photos" 
940              placeholder="Logo"
941            />
942            
943          </section> */}
944        </form>
945      </div>
946    );
947  };
948  
949  export default NotesForm;