Journal Entry Dropdown - Copy this React, Tailwind Component to your project

"use-client";-import-{-useMemo,-useRef,-useState-}-from-"react";-import-{-IoIosArrowBack,-IoIosArrowDown-}-from-"react-icons/io";-import-Label-from-"@/components/ui/Label";-import-Button-from-"@/components/ui/Button";-import-{-Temporal-}-from-"@js-temporal/polyfill";-import-Image-from-"next/image";-import-{-useRouter-}-from-"next/navigation";-import-dynamic-from-"next/dynamic";-import-TagInput-from-"@/components/expense/bill/tag";-import-JurnalTable-from-"../../_components/JurnalTable";-import-GetToken-from-"@/hooks/getToken";-import-{-useQueries-}-from-"@tanstack/react-query";-import-{-GetData-}-from-"@/services/FetchMethods";-const-TextEditor-=-dynamic(-()-=>-import("@/app/dashboard/sales/all_sales/_components/TextEditor"),-{-ssr:-false-}-);-const-JournalEntry-=-()-=>-{-const-[searchCurrency,-setSearchCurrency]-=-useState<string>("");-const-[isOpen,-setIsOpen]-=-useState(false);-const-[termsCondition,-setTermsCondition]-=-useState<any>();-const-[preview,-setPreview]-=-useState(false);-const-todayDate-=-Temporal.Now.plainDateISO().toString();-const-router-=-useRouter();-const-componentRef-=-useRef<HTMLDivElement>(null);-const-[tags,-setTags]-=-useState<string[]>([]);-const-handleBackClick-=-()-=>-{-router.back();-};-const-handlePrint-=-()-=>-{-setPreview((prev)-=>-!prev);-};-const-[currentPage,-setCurrentPage]-=-useState(1);-const-[totalCount,-setTotalCount]-=-useState(10);-const-token-=-GetToken();-const-results-=-useQueries({-queries:-[-{-queryKey:-["account_list",-currentPage],-queryFn:-async-()-=>-{-const-data-=-await-GetData(-`we/chart-of-accounts?page=${currentPage}`,-token,-);-//-console.log(data);-setTotalCount(data.count);-return-data;-},-enabled:-!!token,-},-{-queryKey:-["customer_list",-currentPage],-queryFn:-async-()-=>-{-const-data-=-await-GetData(`we/customers?page=${currentPage}`,-token);-//-console.log(data);-setTotalCount(data.count);-return-data;-},-enabled:-!!token,-},-{-queryKey:-["supplier_list",-currentPage],-queryFn:-async-()-=>-{-const-data-=-await-GetData(`we/suppliers?page=${currentPage}`,-token);-//-console.log(data);-setTotalCount(data.count);-return-data;-},-enabled:-!!token,-},-],-});-const-[accountList,-customerList,-supplierList]-=-results;-const-mergedOptions-=-useMemo(()-=>-{-if-(customerList?.isSuccess-&&-supplierList?.isSuccess)-{-const-customers-=-customerList.data.results.map((item:-any)-=>-({-id:-item.id,-value:-`${item.first_name}-${item.last_name}`,-type:-"Customer",-}));-const-suppliers-=-supplierList.data.results.map((item:-any)-=>-({-id:-item.id,-value:-`${item.first_name}-${item.last_name}`,-type:-"Supplier",-}));-return-[...customers,-...suppliers];-}-return-[];-},-[customerList,-supplierList]);-return-(-<>-<span-className="mt-5-inline-block-cursor-pointer-items-center-pl-4-font-inter-text-sm-text-[#6A6EF6]">-<div-className="mt-5-flex-cursor-pointer-items-center-gap-x-1-font-inter-text-sm-text-[#6A6EF6]"-onClick={handleBackClick}->-<IoIosArrowBack-/>-Back-</div>-</span>-<div-className="flex-font-inter-text-sm">-<div-className="w-full-px-2"-ref={componentRef}>-<div-className="mt-3-rounded-2xl-bg-[#F8F8FF]-px-4-py-5-text-sm">-<div-className="flex-justify-between">-<h1-className="text-[32px]-font-semibold-text-[#131523]">-Journal-Entry-No.-1-</h1>-</div>-<div-className="mt-9-flex-gap-12">-<div-className="flex-1-space-y-3">-<div-className="flex-items-center-justify-between-gap-2">-<Label-className="w-3/10-flex-shrink-0-text-sm-font-medium-text-accent_text_gray">-Currency-</Label>-<div-className="custom-select-relative-w-7/10">-<input-type="text"-placeholder="Type-to-find-a-currency..."-value={searchCurrency}-onChange={(e)-=>-setSearchCurrency(e.target.value)}-onFocus={()-=>-setIsOpen(true)}-className="w-full-flex-1-border-b-2-bg-transparent-px-6-py-2-outline-none-focus:border-accent_text_violet"-/>-<IoIosArrowDown-className="absolute-right-3-top-[50%]-translate-y-[-50%]-transform-text-[1.3rem]-text-gray-500"-/>-</div>-</div>-<div>-<div-className="mt-7-flex-items-center-justify-between-gap-2">-<Label-className="w-3/10-flex-shrink-0-text-sm-font-medium-text-accent_text_gray">-Journal-No-</Label>-<input-placeholder="Journal-No"-className="flex-1-border-b-2-bg-transparent-px-6-py-2-outline-none-focus:border-accent_text_violet"-type="text"-/>-</div>-</div>-<div-className="flex-items-center-justify-start-gap-2-text-[#7E84A3]">-<div-className="flex-items-center-gap-2">-<span>1-USD</span>-<Image-src="/images/united-states-of-america.png"-width={512}-height={512}-alt="USA"-className="h-8-w-8-rounded-lg"-/>-</div>-<span>=</span>-<div-className="flex-items-center-gap-2">-<input-type="text"-readOnly-value={0.77}-className="w-14-rounded-lg-border-bg-transparent-px-2-py-2-outline-none"-/>-<span>1-GBP</span>-<Image-src="/images/england.png"-width={512}-height={512}-alt="ENG"-className="h-8-w-8-rounded-lg"-/>-</div>-</div>-</div>-<div-className="flex-1-space-y-3">-<div-className="flex-items-center-justify-between-gap-2">-<Label-className="w-3/10-flex-shrink-0-text-sm-font-medium-text-accent_text_gray">-journal-date-</Label>-<input-defaultValue={todayDate}-className="w-full-flex-1-border-b-2-bg-transparent-px-6-py-2-outline-none-focus:border-accent_text_violet"-type="date"-/>-</div>-<div-className="flex-items-center-justify-between-gap-2">-<Label-className="flex-gap-x-4-font-medium-text-accent_text_gray">-<input-className="w-[20px]-flex-1-border-b-2-bg-transparent-focus:border-accent_text_violet"-type="checkbox"-/>-Is-Adjusting-Journal-Entry?-</Label>-</div>-</div>-</div>-</div>-{/*-Journal-Table-will-go-here-*/}-<div-className="mt-10">-<JurnalTable-mergedOptions={mergedOptions}-accountList={accountList}-setSearchCurrency={setSearchCurrency}-/>-</div>-<div-className="w-full">-<div-className="w-full">-<TagInput-tags={tags}-onChange={setTags}-/>-</div>-</div>-<div-className="relative-mt-5">-<Label-className="mb-2-block-font-medium-text-accent_text_gray">-Terms-and-Conditions-</Label>-<TextEditor-setTermsCondition={setTermsCondition}-/>-</div>-<div-className="mt-10-flex-items-end-justify-between">-<div-className="flex-1">-{/*-Add-your-file-upload-component-here-*/}-</div>-<div-className={`flex-items-center-gap-8-${!preview-?-"block"-:-"hidden"}`}>-<Button-className="w-[142px]-border-border-accent_text_violet-bg-[#D3D4FA]-px-1-font-semibold-text-accent_text_violet"-style={{-boxShadow:-"0--2px-4px-rgba(0,-0,-0,-0.1)"-}}->-Save-and-Close-</Button>-<Button-className="w-[142px]-bg-accent_dark_blue-px-0-font-semibold-text-white">-Save-&-Send-</Button>-</div>-</div>-</div>-</div>-</>-);-};-export-default-JournalEntry;import-React,-{-useState-}-from-"react";-import-{-RxDragHandleDots2-}-from-"react-icons/rx";-import-{-RiDeleteBin6Line-}-from-"react-icons/ri";-import-{-IoIosArrowDown-}-from-"react-icons/io";-interface-Row-{-id:-number;-}-interface-DropdownProps-{-options:-{-name:-string;-code:-string-}[];-placeholder:-string;-rowId:-number;-field:-string;-}-interface-JurnalTableProps-{-mergedOptions:-any[];-accountList:-any;-setSearchCurrency:-React.Dispatch<React.SetStateAction<string>>;-}-const-JurnalTable:-React.FC<JurnalTableProps>-=-({-mergedOptions,-accountList,-setSearchCurrency-})-=>-{-const-[rows,-setRows]-=-useState<Row[]>([{-id:-1-}]);-const-[dropdownStates,-setDropdownStates]-=-useState<{-[key:-string]:-boolean-}>({});-const-addRow-=-()-=>-{-const-newId-=-rows.length-+-1;-setRows([...rows,-{-id:-newId-}]);-};-const-removeRow-=-(id:-number)-=>-{-setRows(rows.filter(row-=>-row.id-!==-id));-};-const-toggleDropdown-=-(rowId:-number,-field:-string)-=>-{-setDropdownStates(prev-=>-({-...prev,-[`${rowId}-${field}`]:-!prev[`${rowId}-${field}`]-}));-};-const-Dropdown:-React.FC<DropdownProps>-=-({-options,-placeholder,-rowId,-field-})-=>-{-const-[searchTerm,-setSearchTerm]-=-useState("");-const-[isOpen,-setIsOpen]-=-useState(false);-const-filteredOptions-=-options.filter(option-=>-option.name.toLowerCase().includes(searchTerm.toLowerCase())-);-const-handleSelectOption-=-(name:-string)-=>-{-setSearchTerm(name);-setIsOpen(false);-};-return-(-<div-className="relative-w-full">-{/*-Input-Field-*/}-<input-type="text"-placeholder={placeholder}-value={searchTerm}-onChange={(e)-=>-setSearchTerm(e.target.value)}-onFocus={()-=>-setIsOpen(true)}-className="w-full-px-4-py-2-focus:outline-none-border-none-shadow-none"-/>-{/*-Arrow-Icon-*/}-<IoIosArrowDown-className={`absolute-right-4-top-1/2-transform--translate-y-1/2-text-gray-400-transition-transform-${-isOpen-?-"rotate-180"-:-"rotate-0"-}`}-/>-{/*-Dropdown-Options-*/}-{isOpen-&&-(-<div-className="absolute-z-10-mt-2-w-full-max-h-72-overflow-y-auto-rounded-lg-border-bg-white-shadow-md">-{filteredOptions.map((option)-=>-(-<div-key={option.code}-onClick={()-=>-handleSelectOption(option.name)}-className="flex-justify-between-items-center-p-3-hover:bg-blue-100-cursor-pointer"->-<span-className="text-sm-font-medium-text-gray-700">{option.name}</span>-<span-className="text-xs-font-medium-text-gray-500">{option.code}</span>-</div>-))}-{filteredOptions.length-===-0-&&-(-<p-className="p-3-text-center-text-sm-text-gray-500">No-options-found!</p>-)}-</div>-)}-</div>-);-};-return-(-<div-className="collapse-collapse-arrow-overflow-visible-rounded-none-border-b-border-base-300">-<input-type="radio"-name="my-accordion-4"-defaultChecked-/>-<div-className="collapse-title-text-sm-font-medium">-Account-details-</div>-<div-className="collapse-content-overflow-visible">-<div-className="overflow-visible">-<table-className="table">-<thead>-<tr-className="border-b-2-border-gray-300-uppercase">-<th>#</th>-<th-className="align-middle">Account</th>-<th>Name</th>-<th>Tax</th>-<th>Location</th>-<th>Dabit(usd)</th>-<th>Credit(usd)</th>-<th></th>-</tr>-</thead>-<tbody>-{rows.map((row)-=>-(-<tr-key={row.id}-className="border-none-bg-[#F8F8FF]-text-gray-400">-<th-className="cursor-pointer-bg-transparent">-<RxDragHandleDots2-/>-</th>-<td-className="w-[200px]-border-b">-<Dropdown-options={accountList?.data?.results-||-[]}-placeholder="Type-to-find-an-account..."-rowId={row.id}-field="account"-/>-</td>-<td-className="border-b">-<input-type="text"-placeholder="Name"-className="h-full-w-24-border-b-gray-300-bg-transparent-px-2-outline-none-hover:border-b-2-hover:border-accent_text_violet"-/>-</td>-<td-className="w-20-border-b">-<Dropdown-options={[-{-name:-"No-Tax",-code:-"0%"-},-{-name:-"Standard-Rate",-code:-"20%"-},-{-name:-"Reduced-Rate",-code:-"5%"-}-]}-placeholder="Select-Tax-Rate"-rowId={row.id}-field="tax"-/>-</td>-<td-className="border-b">-<Dropdown-options={[-{-name:-"Main-Office",-code:-"MO"-},-{-name:-"Branch-1",-code:-"B1"-},-{-name:-"Branch-2",-code:-"B2"-}-]}-placeholder="Select-Location"-rowId={row.id}-field="location"-/>-</td>-<td-className="border-b">-<input-type="text"-placeholder="0.00"-className="h-full-w-20-border-b-gray-300-bg-transparent-px-2-outline-none-hover:border-b-2-hover:border-accent_text_violet"-/>-</td>-<td-className="border-b">-<input-type="text"-placeholder="0.00"-className="h-full-w-20-border-b-gray-300-bg-transparent-px-2-outline-none-hover:border-b-2-hover:border-accent_text_violet"-/>-</td>-<td-className="cursor-pointer-border-b-border-l-bg-transparent">-<RiDeleteBin6Line-className="text-red-500"-onClick={()-=>-removeRow(row.id)}-/>-</td>-</tr>-))}-</tbody>-</table>-<div-className="mt-3-flex-justify-between">-<div-className="flex-gap-x-4">-<p-className="cursor-pointer-font-medium-text-blue-500"-onClick={addRow}->-Add-a-Account-</p>-<p-className="cursor-pointer-font-medium-text-blue-500">-Add-a-Section-</p>-<p-className="cursor-pointer-font-medium-text-blue-500">-Add-a-Note-</p>-<p-className="cursor-pointer-font-medium-text-blue-500"-onClick={()-=>-setRows([{-id:-1-}])}->-Clear-All-Lines-</p>-</div>-</div>-</div>-</div>-</div>-);-};-export-default-JurnalTable;{-"count":-3,-"next":-null,-"previous":-null,-"results":-[-{-"uid":-"bfe97273-9847-443f-b2b8-64baffc86acf",-"title":-"Test-Account",-"date":-"2024-12-20",-"code":-"code1011",-"status":-"ACTIVE",-"account_type":-"NON_CURRENT_ASSETS",-"detail_type":-"CALLED_UP_SHARE_CAPITAL",-"opening_balance":-"100.00",-"currency":-"AFN",-"description":-"Test-too",-"parent":-null,-"created_at":-"2024-12-20T22:36:22.000099+06:00",-"updated_at":-"2024-12-24T23:59:42.720660+06:00"-},-}-{-"count":-8,-"next":-null,-"previous":-null,-"results":-[-{-"uid":-"db7fe6b5-b726-4718-bbf8-984d0de8a277",-"currency":-"USD",-"first_name":-"Talha",-"middle_name":-"c",-"last_name":-"Doe",-"suffix":-"CR",-"company_name":-"XYZ-Ltd.",-"company_email":-"john@xyz.com",-"email":-"talhha@bb.com",-"telephone_number":-"321-654-0987",-"mobile_number":-"+8801878674902",-"fax":-"",-"website":-"https://balanzifyapi.jumatechs.xyz/api/v1/we/customers/db7fe6b5-b726-4718-bbf8-984d0de8a277",-"business_id":-"987654321",-"billing_rate":-"200.00",-"account_number":-"444555666",-"date":-"2024-01-02",-"opening_balance":-"1000.00",-"status":-"DRAFT",-"description":-"Reliable-services",-"address":-{-"uid":-"c086c206-a165-40ed-9344-f0ee277a67d8",-"is_shipping":-false,-"country":-"af",-"street":-"456-Elm-Avenue",-"city":-"Chicago",-"province":-"IL",-"postal_code":-"60601",-"full_address":-null,-"shipping_by":-null,-"shipping_date":-"2024-12-22"-},-"payment_method":-"",-"delivery_option":-"",-"file_count":-0,-"image":-"http://balanzifyapi.jumatechs.xyz/media/media/customer/Talha/Screenshot_from_2024-12-24_20-58-03.png",-"created_at":-"2024-12-07T14:56:28.375080+06:00",-"updated_at":-"2024-12-24T20:59:37.849335+06:00"-},-}so-for-account-i-want-to-show-title-but-for-name-or-mergedoptions-i-need-to-show-first_name-last_name-so-thats-why-i-want-no-need-to-make-DropDown-component-..-so-how-i-can-render-it