Ifdpp 387 binding page CRUD functionalities

frontend/src/components/contractManager/binding-card.tsx

@@ -0,0 +1,74 @@
+import moment from "moment";
+import { useRouter } from "next/router";
+import { GiAlarmClock } from "react-icons/gi";
+import { MdLockOpen, MdLockOutline } from "react-icons/md";
+
+const BindingCard:React.FC<any> =({binding})=>{
+    const formattedDate = moment(binding?.meta_data?.created_at).format("DD MMM YYYY");
+    const router =useRouter();
+
+  return (
+    <div 
+   onClick={()=>router.push(`binding/${binding?.contract_binding_ifric_id}`)}
+    className="flex contract-card mt-4" style={{ gap: "3rem" }}>
+      <div className="flex gap-2 folder-heading align-items-center">
+        <i className="pi pi-file-import" style={{ fontSize: "22px" }}></i>
+        <h3 className="m-0 binding-card-heading">{binding?.contract_binding_ifric_id}</h3>
+      </div>
+      <div>
+        <div>
+          <p className="card-label-grey">Created at:</p>
+          <p className="mt-1 card-label-black">
+            {formattedDate}
+          </p>
+        </div>
+        <div className="mt-3">
+          <p className="card-label-grey">Created by:</p>
+          <p className="mt-1 card-label-black">
+            {binding?.meta_data?.created_user}
+          </p>
+        </div>
+      </div>
+      <div>
+                <p className="card-label-grey">Shared with:</p>
+                <div className="flex mt-3">
+                  <div className=" share-content user-one">OW</div>
+                  <div className=" share-content user-two">NA</div>
+                </div>
+            </div>
+            <div>
+                <div className="flex gap-3">
+                  <i className=" pi pi-arrow-right"
+                  style={{color: "#1be21b"
+                   }}
+                  ></i>
+                  <MdLockOutline style={{ fontSize: "20px", color: "#1be21b"}}/>
+                  <div>
+                    <p className="card-label-black">Other Company Lt.d</p>
+                    <p className="mt-1 card-label-grey">Jacob Hamesworth</p>
+                  </div>
+                </div>
+                <div className="mt-3 flex gap-3">
+                  <i className="pi pi-eye" style={{color:"#95989a"}}></i>
+                  <MdLockOpen style={{ fontSize: "20px", color: "#95989a"}}/>
+                  <div>
+                    <p className="card-label-black">Different company Gmbh</p>
+                    <p className="mt-1 card-label-grey" >Jarek Owczarek</p>
+                  </div>
+                </div>
+                <div>
+
+                </div>
+            </div>
+            <div className="flex justify-content-center align-items-center">
+                <button
+                className="reminder-btn"
+                >
+                    <GiAlarmClock className="mr-2" />
+                    Add Reminder</button>
+            </div> 
+
+    </div>
+  );
+}
+export default BindingCard;

frontend/src/components/contractManager/binding-header.tsx

@@ -0,0 +1,100 @@
+import { Dropdown } from "primereact/dropdown";
+import { TabPanel, TabView } from "primereact/tabview";
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Button } from "primereact/button";
+interface Optiontype {
+  label: string;
+  value: string;
+}
+
+const BindingHeader:React.FC<any> = ({handleCreateClick}) => {
+  const router = useRouter();
+  const sortOptions = [
+    { label: "Asc", value: "contract_name" },
+    { label: "Desc", value: "!contract_name" },
+  ];
+  const [selectedSortOption, setSelectedSortOption] = useState(
+    sortOptions[0].value
+  );
+
+
+
+  const handleSortChange = (e: { value: string }) => {
+    setSelectedSortOption(e.value);
+  };
+  const CustomOption = (option: Optiontype) => {
+    return (
+      <div className="custom-option">
+        <input
+          type="radio"
+          name="sort-option"
+          checked={selectedSortOption === option.value}
+          onChange={() => setSelectedSortOption(option.value)}
+        />
+        <span> {option.label}</span>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="contract-header-container">
+        <div>
+          <TabView className="asset-tabs contract-tabs">
+            <TabPanel header="All"></TabPanel>
+            <TabPanel header="Require Action" disabled></TabPanel>
+            <TabPanel header="Signed" disabled></TabPanel>
+            <TabPanel header="Pending" disabled></TabPanel>
+            <TabPanel header="Requested Changes" disabled></TabPanel>
+            <TabPanel header="Dismissed" disabled></TabPanel>
+            <TabPanel header="Imported" disabled></TabPanel>
+          </TabView>
+        </div>
+        <div className="flex gap-5 align-items-center">
+          <div className="flex">
+            <img
+              src="/filter_icon.svg"
+              alt="filter_icon"
+              style={{ marginRight: "8px" }}
+            />
+            <p className="filter-heading">Filters</p>
+          </div>
+          <div>
+            <div className="hover_state_group">
+              <img
+                src="/sort_icon.svg"
+                alt="sort-icon"
+                style={{ marginBottom: "-2px", marginRight: "4px" }}
+              />
+              <Dropdown
+                appendTo="self"
+                className="sort-dropdown"
+                optionLabel="label"
+                placeholder="Sort"
+                options={sortOptions}
+                onChange={(e) => handleSortChange(e)}
+                itemTemplate={(option) => CustomOption(option)}
+              />
+            </div>
+          </div>
+          <button
+            className="contract-btn flex justify-content-center align-items-center border-none black_button_hover"
+            onClick={handleCreateClick}
+          >
+            Create Binding
+            <img
+              src="/plus_icon.svg"
+              width="24"
+              height="24"
+              alt="plus icon"
+              style={{ marginRight: "6px" }}
+            ></img>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BindingHeader;

frontend/src/components/contractManager/delete-dialog-box.tsx

@@ -0,0 +1,60 @@
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import React from 'react';
+import { Dispatch, SetStateAction } from "react";
+import { useTranslation } from 'react-i18next';
+import "../../styles/add-contract.css"
+
+interface DeleteDialogProps {
+    deleteDialog: boolean;
+    setDeleteDialog: Dispatch<SetStateAction<boolean>>;
+    handleDelete: () => void;
+    deleteItemName?: React.ReactNode;
+    id: string
+  }
+
+
+const DeleteDialogBox:React.FC<DeleteDialogProps> = ({
+    deleteDialog,
+    setDeleteDialog,
+    handleDelete,
+    deleteItemName,
+    id
+  }) => {
+
+    const { t } = useTranslation("overview");
+    const header = () => <h4 className="m-0">Confirm Delete</h4>;
+
+    const footerContent =(
+      <div>
+        <Button
+          className="cancel-btn"
+          label="Cancel"
+          onClick={() => setDeleteDialog(false)}
+        />
+        <Button
+        className="action-btn-save"
+        label="Save" onClick={() => handleDelete(id)} autoFocus />
+      </div>
+    );
+
+    return (
+      <>
+        <Dialog
+          style={{ width: "600px" }}
+          visible={deleteDialog}
+          onHide={() => setDeleteDialog(false)}
+          header={header}
+          footer={footerContent}
+        >
+          <div className="mb-4 mt-5">
+            {deleteItemName}
+          </div>
+
+        </Dialog>
+      </>
+    );
+
+}
+
+export default DeleteDialogBox;

frontend/src/pages/add-contract.tsx

@@ -439,7 +439,7 @@ const AddContractPage: React.FC = () => {
                                                 maxDate={certificateExpiry ? new Date(certificateExpiry) : undefined} className='contract_form_field' placeholder='Choose an end date' dateFormat="MM dd, yy"
                                             />
                                             {certificateExpiry && (
-                                                <small>
+                                                <small className="ml-3 mt-2">
                                                     Contract end date must be before {new Date(certificateExpiry).toLocaleDateString('en-US', {
                                                         year: 'numeric',
                                                         month: 'short',