Create New Item

import-React-from-'react';-const-NewItemForm-=-()-=>-{-return-(-<div-className="bg-white-shadow-md-rounded-md-p-6">-<div-className="grid-grid-cols-2-gap-6">-<div-className="col-span-1">-<label-htmlFor="type"-className="block-font-medium-text-gray-700">-Type-</label>-<div-className="mt-1">-<input-type="radio"-id="goods"-name="type"-value="Goods"-className="form-radio-h-4-w-4-text-indigo-600-transition-duration-150-ease-in-out"-/>-<label-htmlFor="goods"-className="ml-2-text-gray-700">-Goods-</label>-<input-type="radio"-id="service"-name="type"-value="Service"-className="form-radio-h-4-w-4-text-indigo-600-transition-duration-150-ease-in-out-ml-4"-/>-<label-htmlFor="service"-className="ml-2-text-gray-700">-Service-</label>-</div>-</div>-<div-className="col-span-1">-<label-htmlFor="name"-className="block-font-medium-text-gray-700">-Name-</label>-<input-type="text"-id="name"-name="name"-className="mt-1-block-w-full-rounded-md-border-gray-300-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"-/>-</div>-<div-className="col-span-1">-<label-htmlFor="sku"-className="block-font-medium-text-gray-700">-SKU-</label>-<input-type="text"-id="sku"-name="sku"-className="mt-1-block-w-full-rounded-md-border-gray-300-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"-/>-</div>-<div-className="col-span-1">-<label-htmlFor="unit"-className="block-font-medium-text-gray-700">-Unit-</label>-<select-id="unit"-name="unit"-className="mt-1-block-w-full-rounded-md-border-gray-300-bg-white-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"->-<option>Select-Unit</option>-</select>-</div>-<div-className="col-span-1">-<label-htmlFor="hsnCode"-className="block-font-medium-text-gray-700">-HSN-Code-</label>-<input-type="text"-id="hsnCode"-name="hsnCode"-className="mt-1-block-w-full-rounded-md-border-gray-300-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"-/>-</div>-<div-className="col-span-1">-<label-htmlFor="taxPreference"-className="block-font-medium-text-gray-700">-Tax-Preference-</label>-<select-id="taxPreference"-name="taxPreference"-className="mt-1-block-w-full-rounded-md-border-gray-300-bg-white-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"->-<option>Taxable</option>-</select>-</div>-</div>-<div-className="grid-grid-cols-2-gap-6-mt-6">-<div-className="col-span-1">-<label-htmlFor="sellingPrice"-className="block-font-medium-text-gray-700">-Selling-Price-</label>-<input-type="text"-id="sellingPrice"-name="sellingPrice"-className="mt-1-block-w-full-rounded-md-border-gray-300-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"-/>-</div>-<div-className="col-span-1">-<label-htmlFor="account"-className="block-font-medium-text-gray-700">-Account-</label>-<select-id="account"-name="account"-className="mt-1-block-w-full-rounded-md-border-gray-300-bg-white-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"->-<option>Sales</option>-</select>-</div>-<div-className="col-span-1">-<label-htmlFor="costPrice"-className="block-font-medium-text-gray-700">-Cost-Price-</label>-<input-type="text"-id="costPrice"-name="costPrice"-className="mt-1-block-w-full-rounded-md-border-gray-300-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"-/>-</div>-<div-className="col-span-1">-<label-htmlFor="account"-className="block-font-medium-text-gray-700">-Account-</label>-<select-id="account"-name="account"-className="mt-1-block-w-full-rounded-md-border-gray-300-bg-white-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"->-<option>Cost-of-Goods-Sold</option>-</select>-</div>-<div-className="col-span-2">-<label-htmlFor="description"-className="block-font-medium-text-gray-700">-Description-</label>-<textarea-id="description"-name="description"-rows={3}-className="mt-1-block-w-full-rounded-md-border-gray-300-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"-/>-</div>-<div-className="col-span-1">-<label-htmlFor="preferredVendor"-className="block-font-medium-text-gray-700">-Preferred-Vendor-</label>-<select-id="preferredVendor"-name="preferredVendor"-className="mt-1-block-w-full-rounded-md-border-gray-300-bg-white-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"->-<option>Select-Vendor</option>-</select>-</div>-</div>-<div-className="grid-grid-cols-2-gap-6-mt-6">-<div-className="col-span-1">-<label-htmlFor="intraStateTaxRate"-className="block-font-medium-text-gray-700">-Intra-State-Tax-Rate-</label>-<input-type="text"-id="intraStateTaxRate"-name="intraStateTaxRate"-className="mt-1-block-w-full-rounded-md-border-gray-300-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"-defaultValue="GST-18-(18-%)"-disabled-/>-</div>-<div-className="col-span-1">-<label-htmlFor="interStateTaxRate"-className="block-font-medium-text-gray-700">-Inter-State-Tax-Rate-</label>-<input-type="text"-id="interStateTaxRate"-name="interStateTaxRate"-className="mt-1-block-w-full-rounded-md-border-gray-300-shadow-sm-focus:border-indigo-500-focus:ring-indigo-500-sm:text-sm"-defaultValue="IGST-18-(18-%)"-disabled-/>-</div>-</div>-<div-className="mt-6-flex-justify-end">-<button-type="button"-className="inline-flex-items-center-rounded-md-border-border-transparent-bg-indigo-600-px-4-py-2-text-sm-font-medium-text-white-shadow-sm-hover:bg-indigo-700-focus:outline-none-focus:ring-2-focus:ring-indigo-500-focus:ring-offset-2"->-Save-</button>-</div>-</div>-);-};-export-default-NewItemForm;