(false);
const wrapperRef = useRef(null);
useEffect(() => {
@@ -61,12 +68,15 @@ const InvoiceTable = ({ selectedClient, setSelectedOption, selectedOption, lineI
setShowItemInputs={setShowItemInputs}
addNew={addNew}
setAddNew={setAddNew}
- lineItems= {lineItems}
+ lineItems={lineItems}
+ setLineItems={setLineItems}
loadMoreItems={loadMoreItems}
- totalLineItems= {totalLineItems}
- pageNumber = {pageNumber}
+ totalLineItems={totalLineItems}
+ pageNumber={pageNumber}
+ setPageNumber={setPageNumber}
setSelectedOption={setSelectedOption}
selectedOption={selectedOption}
+ setMultiLineItemModal={setMultiLineItemModal}
/>;
}
return (
@@ -133,6 +143,14 @@ const InvoiceTable = ({ selectedClient, setSelectedOption, selectedOption, lineI
))}
+
+ {showMultiLineItemModal && }
+
);
};
diff --git a/app/javascript/src/components/Invoices/Generate/NewLineItemRow.tsx b/app/javascript/src/components/Invoices/Generate/NewLineItemRow.tsx
index 7885a73f88..52c1a40b0d 100644
--- a/app/javascript/src/components/Invoices/Generate/NewLineItemRow.tsx
+++ b/app/javascript/src/components/Invoices/Generate/NewLineItemRow.tsx
@@ -1,27 +1,34 @@
import React from "react";
+import dayjs from "dayjs";
-const NewLineItemRow = ({ item }) => (
-
- |
- {item.name}
- {item.first_name} {item.last_name}
- |
-
- {item.date}
- |
-
- {item.description}
- |
-
- {item.rate}
- |
-
- {item.qty/60}
- |
-
- {(item.qty/60) * item.rate}
- |
-
-);
+const NewLineItemRow = ({ item }) => {
+ const hoursLogged = (item.qty / 60).toFixed(2);
+ const date = dayjs(item.date).format("DD.MM.YYYY");
+ const rate = (item.qty / 60) * item.rate;
+
+ return (
+
+ |
+ {item.name}
+ {item.first_name} {item.last_name}
+ |
+
+ {date}
+ |
+
+ {item.description}
+ |
+
+ {item.rate}
+ |
+
+ {hoursLogged}
+ |
+
+ {rate.toFixed(2)}
+ |
+
+ );
+};
export default NewLineItemRow;
diff --git a/app/javascript/src/components/Invoices/Generate/NewLineItemTable.tsx b/app/javascript/src/components/Invoices/Generate/NewLineItemTable.tsx
index f36287f02a..936167a877 100644
--- a/app/javascript/src/components/Invoices/Generate/NewLineItemTable.tsx
+++ b/app/javascript/src/components/Invoices/Generate/NewLineItemTable.tsx
@@ -1,18 +1,32 @@
import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
+import dayjs from "dayjs";
import { DropdownHeader } from "./CustomComponents";
-const NewLineItemTable = ({ showItemInputs, setShowItemInputs, addNew, setAddNew, lineItems, loadMoreItems, totalLineItems, pageNumber, selectedOption, setSelectedOption }) => {
+const NewLineItemTable = ({
+ showItemInputs,
+ setShowItemInputs,
+ addNew, setAddNew,
+ lineItems, setLineItems,
+ loadMoreItems,
+ totalLineItems,
+ pageNumber, setPageNumber,
+ selectedOption,
+ setSelectedOption,
+ setMultiLineItemModal }) => {
+
const hasMoreItems = lineItems.length === totalLineItems;
const selectRowId = (items) => {
- const option = { ...items, lineTotal: (Number(items.qty)/60 * Number(items.rate)) };
+ const option = { ...items, lineTotal: (Number(items.qty) / 60 * Number(items.rate)) };
setAddNew(false);
setSelectedOption([...selectedOption, option]);
+ setLineItems([]);
+ setPageNumber(1);
};
return (
-
+
}
>
- {lineItems.map(items => (
- {selectRowId(items);}} className="py-2 px-3 flex justify-between cursor-pointer hover:bg-miru-gray-100">
-
- {items.first_name} {items.last_name}
-
-
- {items.description}
-
-
- {items.date}
-
-
- ${items.rate}
-
-
- ))
+ {lineItems.map((item, index) => {
+ const hoursLogged = (item.qty / 60).toFixed(2);
+ const date = dayjs(item.date).format("DD.MM.YYYY");
+ return (
+ { selectRowId(item); }} className="py-2 px-3 flex justify-between cursor-pointer hover:bg-miru-gray-100">
+
+ {item.first_name} {item.last_name}
+
+
+ {item.description}
+
+
+ {date}
+
+
+ {hoursLogged}
+
+
+ );
+ })
}
diff --git a/app/javascript/src/components/Invoices/Generate/index.tsx b/app/javascript/src/components/Invoices/Generate/index.tsx
index b67fd03806..9587a75ae6 100644
--- a/app/javascript/src/components/Invoices/Generate/index.tsx
+++ b/app/javascript/src/components/Invoices/Generate/index.tsx
@@ -26,11 +26,10 @@ const GenerateInvoices = () => {
const [lineItems, setLineItems] = useState
([]);
const [selectedClient, setSelectedClient] = useState();
const [invoiceNumber, setInvoiceNumber] = useState("");
- const [reference, setReference] = useState("");
+ const [reference] = useState("");
const [amount, setAmount] = useState(0);
- const [outstandingAmount, setOutstandingAmount] = useState(0);
const [amountDue, setAmountDue] = useState(0);
- const [amountPaid, setAmountPaid] = useState(0);
+ const [amountPaid] = useState(0);
const [discount, setDiscount] = useState(0);
const [tax, setTax] = useState(0);
const [issueDate, setIssueDate] = useState(new Date());
@@ -58,7 +57,6 @@ const GenerateInvoices = () => {
amountPaid={amountPaid}
discount={discount}
tax={tax}
- outstandingAmount={outstandingAmount}
invoiceLineItems={selectedOption}
/>
{
invoiceNumber={invoiceNumber}
setInvoiceNumber={setInvoiceNumber}
reference={reference}
- setReference={setReference}
issueDate={issueDate}
setIssueDate={setIssueDate}
dueDate={dueDate}
setDueDate={setDueDate}
amount={amount}
setAmount={setAmount}
- outstandingAmount={outstandingAmount}
- setOutstandingAmount={setOutstandingAmount}
amountDue={amountDue}
setAmountDue={setAmountDue}
amountPaid={amountPaid}
- setAmountPaid={setAmountPaid}
discount={discount}
setDiscount={setDiscount}
tax={tax}
diff --git a/app/javascript/src/components/Invoices/List/Table/TableRow.tsx b/app/javascript/src/components/Invoices/List/Table/TableRow.tsx
index aaca2e6c7e..5ee6af98a3 100644
--- a/app/javascript/src/components/Invoices/List/Table/TableRow.tsx
+++ b/app/javascript/src/components/Invoices/List/Table/TableRow.tsx
@@ -1,5 +1,4 @@
import React, { useState } from "react";
-import { Link } from "react-router-dom";
import CustomCheckbox from "common/CustomCheckbox";
import dayjs from "dayjs";
diff --git a/app/javascript/src/components/Invoices/MultipleEntriesModal/FilterSelect.tsx b/app/javascript/src/components/Invoices/MultipleEntriesModal/FilterSelect.tsx
new file mode 100644
index 0000000000..9082bb3e6c
--- /dev/null
+++ b/app/javascript/src/components/Invoices/MultipleEntriesModal/FilterSelect.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import Select from "react-select";
+
+const FilterSelect = ({ option, placeholder }) => {
+
+ const [selectedOption, setSelectedOption] = useState();
+ return (
+
- <%= form.select :timezone, [[ "Please select", "", { selected: true, disabled: true }]] + TZInfo::Timezone.all_country_zones.collect { |t| [ t.to_s ] }, {}, { autofocus: true, class: "rounded tracking-wider border block w-full px-3 py-2 bg-miru-gray-100 shadow-sm text-xs text-miru-dark-purple-1000 focus:outline-none #{error_message_class(form.object, :timezone)}" } %>
+
@@ -105,7 +115,7 @@
- <%= form.select :base_currency, [[ "Please select", "", { selected: true, disabled: true }]] + Money::Currency.table.collect { |k, v| [ v[:name], v[:iso_code] ] }, {}, {autofocus: true, class: "rounded tracking-wider border block w-full px-3 py-2 bg-miru-gray-100 shadow-sm text-xs text-miru-dark-purple-1000 focus:outline-none #{error_message_class(form.object, :base_currency)}"} %>
+ <%= form.select :base_currency, [[ "Please select", "", { disabled: true }]] + Money::Currency.table.collect { |k, v| [ v[:name], v[:iso_code] ] }, {selected: "USD"}, {autofocus: true, class: "rounded tracking-wider border block w-full px-3 py-2 bg-miru-gray-100 shadow-sm text-xs text-miru-dark-purple-1000 focus:outline-none #{error_message_class(form.object, :base_currency)}"} %>
@@ -133,7 +143,7 @@
- <%= form.select :fiscal_year_end, [[ "Please select", "", { selected: true, disabled: true }], ["January-December", "jan-dec",], ["April-March", "apr-mar"]], {}, {autofocus: true, class: "rounded tracking-wider border block w-full px-3 py-2 bg-miru-gray-100 shadow-sm text-xs text-miru-dark-purple-1000 focus:outline-none #{error_message_class(form.object, :fiscal_year_end)}"} %>
+ <%= form.select :fiscal_year_end, [[ "Please select", "", { disabled: true }], ["January-December", "jan-dec", {selected: true}], ["October-September", "oct-sep"], ["April-March", "apr-mar"]], {}, {autofocus: true, class: "rounded tracking-wider border block w-full px-3 py-2 bg-miru-gray-100 shadow-sm text-xs text-miru-dark-purple-1000 focus:outline-none #{error_message_class(form.object, :fiscal_year_end)}"} %>
@@ -147,7 +157,7 @@
- <%= form.select :date_format, [[ "Please select", "", { selected: true, disabled: true }], ["DD-MM-YYYY"], ["MM-DD-YYYY"], ["YYYY-MM-DD"]], {}, {autofocus: true, class: "rounded tracking-wider border block w-full px-3 py-2 bg-miru-gray-100 shadow-sm text-xs text-miru-dark-purple-1000 focus:outline-none #{error_message_class(form.object, :date_format)}"} %>
+ <%= form.select :date_format, [[ "Please select", "", { disabled: true }], ["DD-MM-YYYY"], ["MM-DD-YYYY", {selected: true}], ["YYYY-MM-DD"]], {}, {autofocus: true, class: "rounded tracking-wider border block w-full px-3 py-2 bg-miru-gray-100 shadow-sm text-xs text-miru-dark-purple-1000 focus:outline-none #{error_message_class(form.object, :date_format)}"} %>
@@ -159,3 +169,4 @@
+
+
+
+
+ <%= yield %>
+
+
+