Datepick addition

app/javascript/src/common/CutomDatePicker/index.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import { getMonth, getYear } from "date-fns";
+import { CaretCircleLeft, CaretCircleRight } from "phosphor-react";
+
+import "react-datepicker/dist/react-datepicker.css";
+
+const CustomDatePicker = ({ handleChange }) => {
+  const range = (start, end) => {
+    const ans = [];
+    for (let i = start; i <= end; i++) {
+      ans.push(i);
+    }
+    return ans;
+  };
+
+  const years = range(1990, getYear(new Date()) + 1);
+  const months = [
+    "Jan",
+    "Febr",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ];
+  return (
+    <DatePicker
+      wrapperClassName="datePicker absolute"
+      inline
+      calendarClassName="miru-calendar"
+      renderCustomHeader={({
+        date,
+        changeYear,
+        changeMonth,
+        decreaseMonth,
+        increaseMonth,
+        prevMonthButtonDisabled,
+        nextMonthButtonDisabled
+      }) => (
+        <div
+          className="headerWrapper"
+        >
+          <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+            <CaretCircleLeft color="#5b34ea" size={16} />
+          </button>
+          <div>
+            <select
+              value={months[getMonth(date)]}
+              onChange={({ target: { value } }) =>
+                changeMonth(months.indexOf(value))
+              }
+            >
+              {months.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+
+            <select
+              value={getYear(date)}
+              onChange={({ target: { value } }) => changeYear(value)}
+            >
+              {years.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+          <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+            <CaretCircleRight color="#5b34ea" size={16} />
+          </button>
+        </div>
+      )}
+      onChange={(date) => handleChange(date)}
+    />
+  );
+};
+
+export default CustomDatePicker;

app/javascript/src/components/Invoices/Generate/Container.tsx

@@ -12,8 +12,8 @@ const Container = ({
   invoiceNumber, setInvoiceNumber,
   amount, setAmount,
   reference, setReference,
-  issueDate,
-  dueDate,
+  issueDate, setIssueDate,
+  dueDate, setDueDate,
   outstandingAmount, setOutstandingAmount,
   amountDue, setAmountDue,
   amountPaid, setAmountPaid,
@@ -22,22 +22,24 @@ const Container = ({
   selectedOption, setSelectedOption
 }) => (
   <div className="bg-miru-gray-100 mt-5 mb-10 p-0 m-0 w-full">
-    <CompanyInfo companyDetails={invoiceDetails.companyDetails}/>
+    <CompanyInfo companyDetails={invoiceDetails.companyDetails} />
     <InvoiceDetails
       currency={invoiceDetails.companyDetails.currency}
-      clientList = {invoiceDetails.clientList}
+      clientList={invoiceDetails.clientList}
       selectedClient={selectedClient}
-      setSelectedClient= {setSelectedClient}
+      setSelectedClient={setSelectedClient}
       amount={amount}
+      setDueDate={setDueDate}
       issueDate={issueDate}
+      setIssueDate={setIssueDate}
       dueDate={dueDate}
       invoiceNumber={invoiceNumber}
       setInvoiceNumber={setInvoiceNumber}
       reference={reference}
     />
     <div className="px-10 py-5">
       <InvoiceTable
-        selectedClient ={selectedClient}
+        selectedClient={selectedClient}
         selectedOption={selectedOption}
         setSelectedOption={setSelectedOption}
         setLineItems={setLineItems}

app/javascript/src/components/Invoices/Generate/Header.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import invoicesApi from "apis/invoices";
+import dayjs from "dayjs";
 import { X, FloppyDisk, PaperPlaneTilt } from "phosphor-react";
 
 const Header = ({
@@ -21,14 +22,16 @@ const Header = ({
 
   const navigate = useNavigate();
   const [isInvoiceSavedSuccessfully, setIsInvoiceSavedSuccessfully] = React.useState<boolean>(false);
+  const getIssuedDate = dayjs(issueDate).format("DD.MM.YYYY");
+  const getDueDate = dayjs(dueDate).format("DD.MM.YYYY");
 
   const saveInvoice = () => {
     invoicesApi.post({
       client_id: client.value,
       invoice_number: invoiceNumber,
       reference: reference,
-      issue_date: issueDate,
-      due_date: dueDate,
+      issue_date: getIssuedDate,
+      due_date: getDueDate,
       amount_due: amountDue,
       amount_paid: amountPaid,
       amount: amount,
@@ -43,14 +46,14 @@ const Header = ({
         timesheet_entry_id: ilt.timesheet_entry_id
       }))
     })
-      .then(()=>navigate("/invoices"))
+      .then(() => navigate("/invoices"))
       .catch();
 
   };
 
   return (
     <React.Fragment>
-      <ToastContainer/>
+      <ToastContainer />
       <div className="sm:flex mt-6 mb-3 sm:items-center sm:justify-between">
         <h2 className="header__title font-bold">Generate Invoice</h2>
 

app/javascript/src/components/Invoices/Generate/InvoiceDetails.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useRef } from "react";
+import CustomDatePicker from "common/CutomDatePicker";
+import dayjs from "dayjs";
 import { currencyFormat } from "helpers/currency";
 import { PencilSimple } from "phosphor-react";
 import ClientSelection from "./ClientSelection";
@@ -9,33 +11,60 @@ const InvoiceDetails = ({
   clientList,
   selectedClient, setSelectedClient,
   amount,
-  issueDate,
-  dueDate,
+  issueDate, setIssueDate,
+  dueDate, setDueDate,
   invoiceNumber,
   setInvoiceNumber,
   reference
 }) => {
+
   const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [showDateOfIssuePicker, setShowDateOfIssuePicker] = useState<boolean>(false);
+  const [showDueDatePicker, setShowDueDatePicker] = useState<boolean>(false);
   const wrapperRef = useRef(null);
 
   useOutsideClick(wrapperRef, () => setIsEditing(false), isEditing);
 
+  const getIssuedDate = dayjs(issueDate).format("DD.MM.YYYY");
+  const getDueDate = dayjs(dueDate).format("DD.MM.YYYY");
+  const handleDatePickerChange = (date) => {
+    setIssueDate(date);
+    setShowDateOfIssuePicker(false);
+  };
+
+  const handleDueDatePicker = (date) => {
+    setDueDate(date);
+    setShowDueDatePicker(false);
+  };
+
   return (
     <div className="flex justify-between border-b-2 border-miru-gray-400 px-10 py-5 h-36">
-      <ClientSelection selectedClient={selectedClient} setSelectedClient={setSelectedClient} clientList ={clientList} />
+      <ClientSelection selectedClient={selectedClient} setSelectedClient={setSelectedClient} clientList={clientList} />
       <div className="group">
-        <p className="font-normal text-xs text-miru-dark-purple-1000 flex">
-          Date of Issue
-        </p>
-        <p className="font-normal text-base text-miru-dark-purple-1000">
-          {issueDate}
-        </p>
-        <p className="font-normal text-xs text-miru-dark-purple-1000 mt-4">
-          Due Date
-        </p>
-        <p className="font-normal text-base text-miru-dark-purple-1000">
-          {dueDate}
-        </p>
+        <div className="hoverPencil">
+          <p className="font-normal text-xs text-miru-dark-purple-1000 flex">
+            <span>Date of Issue</span>
+            <button className="ml-2 invisible" onClick={() => setShowDateOfIssuePicker(!showDateOfIssuePicker)}>
+              <PencilSimple size={13} color="#1D1A31" />
+            </button>
+          </p>
+          {showDateOfIssuePicker && <CustomDatePicker handleChange={handleDatePickerChange} />}
+          <p className="font-normal text-base text-miru-dark-purple-1000">
+            {getIssuedDate}
+          </p>
+        </div>
+        <div className="hoverPencil">
+          <p className="font-normal text-xs text-miru-dark-purple-1000 mt-4 flex">
+            <span>Due Date</span>
+            <button className="ml-2 invisible" onClick={() => setShowDueDatePicker(!showDueDatePicker)}>
+              <PencilSimple size={13} color="#1D1A31" />
+            </button>
+          </p>
+          {showDueDatePicker && <CustomDatePicker handleChange={handleDueDatePicker} />}
+          <p className="font-normal text-base text-miru-dark-purple-1000">
+            {getDueDate}
+          </p>
+        </div>
       </div>
 
       <div>
@@ -48,7 +77,7 @@ const InvoiceDetails = ({
               <PencilSimple size={13} color="#1D1A31" />
             </button>
           </div>
-          <input type="text" disabled={!isEditing} value={invoiceNumber} onChange={(e) => setInvoiceNumber(e.target.value) }/>
+          <input type="text" disabled={!isEditing} value={invoiceNumber} onChange={(e) => setInvoiceNumber(e.target.value)} />
         </div>
         <p className="font-normal text-xs text-miru-dark-purple-1000 mt-4">
           Reference

app/javascript/src/components/Invoices/Generate/index.tsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { setAuthHeaders, registerIntercepts } from "apis/axios";
 import generateInvoice from "apis/generateInvoice";
-import dayjs from "dayjs";
 
 import Container from "./Container";
 import Header from "./Header";
@@ -34,8 +33,8 @@ const GenerateInvoices = () => {
   const [amountPaid, setAmountPaid] = useState<any>(0);
   const [discount, setDiscount] = useState<any>(0);
   const [tax, setTax] = useState<any>(0);
-  const [issueDate] = useState<string>(dayjs().format("DD.MM.YYYY"));
-  const [dueDate] = useState<string>(dayjs().add(1, "month").format("DD.MM.YYYY"));
+  const [issueDate, setIssueDate] = useState(new Date());
+  const [dueDate, setDueDate] = useState(new Date());
   const [selectedOption, setSelectedOption] = useState<any>([]);
 
   useEffect(() => {
@@ -72,7 +71,9 @@ const GenerateInvoices = () => {
           reference={reference}
           setReference={setReference}
           issueDate={issueDate}
+          setIssueDate={setIssueDate}
           dueDate={dueDate}
+          setDueDate={setDueDate}
           amount={amount}
           setAmount={setAmount}
           outstandingAmount={outstandingAmount}

app/javascript/stylesheets/application.scss

@@ -5,6 +5,7 @@
 @import "toastr/toastr";
 @import "team";
 @import "time-tracking";
+@import "react-calendar";
 
 @layer base {
   @font-face {
@@ -369,3 +370,17 @@ body {
 .box-shadow {
   box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
 }
+
+.hoverPencil:hover button {
+  @apply visible
+}
+
+
+
+.hoverPencil .react-datepicker-wrapper {
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2px;
+}

app/javascript/stylesheets/react-calendar.scss

@@ -0,0 +1,67 @@
+.miru-calendar {
+  padding: 28px;
+  position: absolute !important;
+  z-index: 15;
+  border: none !important;
+  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  .headerWrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 14px;
+    margin-bottom: 12px;
+    select {
+      color: #5b34ea;
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 19px;
+      outline: none;
+      margin-right: 5px;
+    }
+  }
+  .react-datepicker__day-name {
+    color: #A5A3AD;
+    font-weight: 700;
+  }
+  .react-datepicker__day--keyboard-selected {
+    color: #5B34EA;
+    background-color: transparent;
+  }
+  .react-datepicker__day {
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 2px;
+    padding: 8px;
+    font-weight: 700;
+    &:hover {
+      color: #5B34EA;
+      background-color: #F5F7F9;
+      border-radius: 4px;
+    }
+  }
+  .react-datepicker__day--today {
+    color: #5B34EA;
+    background-color: transparent;
+    &:hover {
+      background-color: #F5F7F9;
+      border-radius: 4px;
+    }
+  }
+  .react-datepicker__current-month--hasMonthDropdown {
+    display: none;
+  }
+  .react-datepicker__navigation--previous {
+    top: 35px;
+    left: 27px;
+  }
+  .react-datepicker__navigation--next {
+    top: 35px;
+    right: 27px;
+  }
+  .react-datepicker__header {
+    background-color: transparent;
+    border-bottom: none;
+  }
+}

config/routes.rb

@@ -38,6 +38,7 @@ def draw(routes_name)
   resources :team, only: [:index, :update, :destroy, :edit]
 
   resources :reports, only: [:index]
+
   resources :workspaces, only: [:update]
 
   get "clients/*path", to: "clients#index", via: :all