@bjsdistribution/dms-client-return 0.0.2 → 0.0.4

package/src/components/order-view/generic-table/AuditLogs.tsx

@@ -0,0 +1,96 @@
+import styled from 'styled-components';
+import React from 'react';
+import { Skeleton } from 'antd';
+import { formatDateTime } from '@bjsdistribution/dms-component-library';
+import { usegetNotes, UseNotesLoading } from '../store';
+import { NotesTableData } from '../notes/logs/fakeData';
+
+const GenericAuditLogsTable = () => {
+  const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
+  const [getNotes] = usegetNotes();
+  const [isLoading] = UseNotesLoading();
+
+  return (
+    <ScrollableTableWrapper>
+      <AuditTableWrapper>
+        <table>
+          <thead>
+            <tr>
+              {tableHeadData.map(column => (
+                <th key={column.key}>{column.label}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading ? (
+              <tr>
+                <td className="noBoder" colSpan={tableHeadData?.length}>
+                  <Skeleton />
+                </td>
+              </tr>
+            ) : getNotes && getNotes?.length > 0 ? (
+              getNotes?.map((note: any) => (
+                <tr key={note?.id}>
+                  <td>
+                    <div className="bold" title={note?.created_by}>
+                      {note?.created_by}
+                    </div>
+                    <div>{formatDateTime(note?.created_at)}</div>
+                  </td>
+                  <td>{note?.description}</td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={tableHeadData?.length}>No data found</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </AuditTableWrapper>
+    </ScrollableTableWrapper>
+  );
+};
+
+const ScrollableTableWrapper = styled.div``;
+
+export const AuditTableWrapper = styled.div`
+  height: 250px;
+  min-height: 200px;
+  /* overflow: auto; */
+
+  table {
+    border-spacing: 0;
+    width: 100%;
+    text-align: left;
+
+    thead {
+      th {
+        border-bottom: 1px solid rgba(58, 54, 48, 0.25);
+        background: #faf9f9;
+        padding: 14px 12px;
+        color: #3a3630;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 24px;
+      }
+    }
+    tbody {
+      td {
+        color: #667085;
+        font-family: Lato;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+        padding: 10px;
+        .bold {
+          font-weight: 500;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+`;
+
+export default GenericAuditLogsTable;

package/src/components/order-view/hooks/useGetEventNotes.tsx

@@ -0,0 +1,47 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { getCookie } from '../utils';
+// import { useOrderDetails, useOrderProductSystemLogs } from '../store';
+
+function useGetEventNotes() {
+  const ssoToken = getCookie('id_token');
+
+  const perform = async () => {
+    const endpoint = `${getBaseEndpoint()}/events/get/event_information/`;
+    // setLoading(true);
+    try {
+      const headers = {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${ssoToken}`,
+        'x-pagination': JSON.stringify({
+          is_pagination: false,
+        }),
+      };
+      const response = await fetch(endpoint, {
+        method: 'GET',
+        headers,
+      });
+      if (!response.ok) {
+        const json = await response.json();
+        const detail = json?.detail;
+        const msg = detail[0]?.msg;
+        console.error('Error response:', msg);
+        // setLoading(false);
+        return [];
+      }
+      const json = await response.json();
+      if (json.code === 200) {
+        return json?.data;
+      }
+      return [];
+    } catch (err) {
+      console.error('Error fetching data:', err);
+      return [];
+    } finally {
+      //   setLoading(false);
+    }
+  };
+  return perform;
+}
+
+export default useGetEventNotes;

package/src/components/order-view/hooks/useGetSystemLogs.tsx

@@ -0,0 +1,60 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { getCookie } from '../utils';
+import { useOrderDetails, useOrderProductSystemLogs } from '../store';
+
+function useSystemLogs() {
+  const ssoToken = getCookie('id_token');
+  const [orderDetails] = useOrderDetails();
+  const gsitId = orderDetails?.gsit_order_id;
+  const [, setSystemLogsEvents] = useOrderProductSystemLogs();
+
+  const perform = async () => {
+    const endpoint = `${getBaseEndpoint()}/events/get/event/`;
+    // setLoading(true);
+    try {
+      const headers = {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${ssoToken}`,
+        'x-pagination': JSON.stringify({
+          page: 1,
+          per_page: 100,
+        }),
+        'x-filters': JSON.stringify([
+          {
+            field: 'object_id',
+            op: '=',
+            value: `${gsitId}`,
+          },
+        ]),
+      };
+      const response = await fetch(endpoint, {
+        method: 'GET',
+        headers,
+      });
+      if (!response.ok) {
+        const json = await response.json();
+        const detail = json?.detail;
+        const msg = detail[0]?.msg;
+        console.error('Error response:', msg);
+        // setLoading(false);
+        return [];
+      }
+      const json = await response.json();
+      if (json.code === 200) {
+        // setLoading(false);
+        setSystemLogsEvents(json.data);
+        return json.data;
+      }
+      return [];
+    } catch (err) {
+      console.error('Error fetching data:', err);
+      return [];
+    } finally {
+      //   setLoading(false);
+    }
+  };
+  return perform;
+}
+
+export default useSystemLogs;

package/src/components/order-view/index.tsx

@@ -21,6 +21,7 @@ import {
   useOrderId,
   useDepotOptions,
   usePrevOrderDetails,
+  useOrderProductSystemLogs,
 } from './store';
 // import Loader from '../order-daily-overview/header/loader/Loader';
 import { useLoading } from '../order-daily-overview/store/store';
@@ -30,6 +31,7 @@ import RouterHeader from '../order-daily-overview/header/route-header/RouterHead
 // import HeaderFilter from '../order-daily-overview/Header-filters/HeaderFilter';
 // import Filters from '../order-daily-overview/filters/Filters';
 import DetailsFilters from './details-filters/DetailsFilters';
+import useSystemLogs from './hooks/useGetSystemLogs';
 
 interface ApiResponse {
   message: string;
@@ -49,7 +51,7 @@ function OrderView() {
   };
 
   // For API Call
-  const [, setOrderDetails] = useOrderDetails();
+  const [orderDetails, setOrderDetails] = useOrderDetails();
   const [, setPrevOrderDetails] = usePrevOrderDetails();
   const [, setLoading] = useLoading();
   const [, setOrderStaticData] = useOrderStaticData();
@@ -153,6 +155,24 @@ function OrderView() {
     }
   }, [depotDataLoading]);
 
+  const gsitId = orderDetails?.gsit_order_id;
+
+  const systemLogsData = useSystemLogs();
+  const [, setSystemLogsEvents] = useOrderProductSystemLogs();
+
+  const fetchReminderData = async () => {
+    const result = await systemLogsData();
+    setSystemLogsEvents(result);
+  };
+
+  useEffect(() => {
+    if (gsitId) {
+      fetchReminderData();
+
+      console.log('Setting filters for gsitId:', gsitId);
+    }
+  }, [gsitId]);
+
   return (
     <>
       <DashBoardWrapper>
@@ -206,15 +226,16 @@ const Section = styled.div`
   border-radius: 12px;
   box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
   border: 1px solid #e0e0e0;
+  padding: 12px;
 `;
 /* // `; */
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;
-    background: #fff;
-    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);
+    /* background: #fff; */
+    /* box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1); */
     display: block;
-    padding: 15px 20px;
+    padding: 15px 0px;
   }
   .headerWrap,
   .tableData,

package/src/components/order-view/modalsPopup/CreateReturnModal.tsx

@@ -0,0 +1,83 @@
+import { Alert, Checkbox } from '@bjsdistribution/dms-component-library';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useLocationData } from '../../store';
+
+const CreateReturnModal = () => {
+  const [, setSelectedLocations] = useState<any[]>();
+  const [locationData] = useLocationData();
+
+  const handleSelectLocations = (id: any) => {
+    setSelectedLocations((prevSelectedLocations: any) => {
+      const isSelected = prevSelectedLocations?.some(
+        (location: any) => location.id === id
+      );
+
+      if (isSelected) {
+        return prevSelectedLocations.filter(
+          (invoice: any) => invoice.id !== id
+        );
+      } else {
+        return [...prevSelectedLocations, { id, status_id: 3 }];
+      }
+    });
+  };
+  return (
+    <Wrapper>
+      <Alert
+        onClose={() => {}}
+        description=""
+        type="info"
+        title="Do you wish to proceed?"
+        showOkButton={false}
+      />
+      <Container>
+        <ul style={{ listStyle: 'none', padding: 0 }}>
+          {locationData?.map((invoice: any) => (
+            <li
+              key={invoice.id}
+              style={{
+                marginBottom: '8px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Checkbox
+                checked={true}
+                onChange={() => handleSelectLocations(invoice.id)}
+              />
+              <StyledText style={{ marginLeft: '8px' }}>
+                {invoice.location_name}
+              </StyledText>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </Wrapper>
+  );
+};
+
+const StyledText = styled.div`
+  color: #8d8f90;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+`;
+
+const Container = styled.div``;
+
+export const Wrapper = styled.div`
+  display: flex;
+  padding: 15px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+`;
+
+export default CreateReturnModal;

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -14,24 +14,24 @@ import {
 } from '../store';
 
 import ProductAction from './ProductAction';
-import BulkUpdateProduct from './BulkUpdateProduct';
-import DeleteProduct from './DeleteProduct';
+// import DeleteProduct from './DeleteProduct';
 import AddProduct from './AddProduct';
 import logsTable from './qclogs/logsTable';
 import DefectsModal from './DefectsModal';
 import repackModal from './RepackModal';
-import { ApiResponse, DeleteProds } from '../types';
+import { ApiResponse } from '../types';
+import CreateReturnModal from './CreateReturnModal';
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
-  const [, setProductData] = useProductDetails();
+  const [,] = useProductDetails();
   const [orderProduct, setOrderProduct] = useCreateOrderProducts();
   const [orderId] = useOrderId();
-  const [selectedRows, setSelectedRows] = useDeleteProdsID();
+  const [selectedRows] = useDeleteProdsID();
   const [unRecieve, setUnRecieve] = useRecieveOrderProducts();
   const [updateOrderProduct, setUpdateOrderProduct] = useUpdateOrderProducts();
   const [selectedProductId] = useAtom(selectedProductIdAtom);
   const [selectedTab] = useAtom(selectedTabKeyAtom);
-  const [isFormValid, setIsFormValid] = useState(false);
+  const [, setIsFormValid] = useState(false);
 
   console.log(orderProduct, 'abcabcabcabcabcabcabcabcabcabcabc');
 
@@ -48,45 +48,45 @@ const ModalManager = () => {
     setIsFormValid(validateForm());
   }, [selectedRows]);
 
-  const payloads: DeleteProds[] = selectedRows?.map(row => ({
-    id: row.id,
-    order_id: row.order_id,
-  }));
+  // const payloads: DeleteProds[] = selectedRows?.map(row => ({
+  //   id: row.id,
+  //   order_id: row.order_id,
+  // }));
 
-  const { data: isresponse, setShouldPerformAction: setaction } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `order/order_products/delete/`,
-    method: 'DELETE',
-    body: payloads,
-    performAction: false,
-  });
+  // const { data: isresponse, setShouldPerformAction: setaction } = useApiHook<{
+  //   data: ApiResponse[];
+  // }>({
+  //   endpoint: `order/order_products/delete/`,
+  //   method: 'DELETE',
+  //   body: payloads,
+  //   performAction: false,
+  // });
 
   // Effect to handle API response
-  useEffect(() => {
-    if (isresponse && isresponse?.data) {
-      handleRemoveRow();
-      dispatch({ type: 'close' });
-    }
-  }, [isresponse]);
-  const onDeleteProducts = () => {
-    if (isFormValid) {
-      setaction(true);
-    } else {
-      console.log('Please fill in all required fields before proceeding.');
-    }
-  };
+  // useEffect(() => {
+  //   if (isresponse && isresponse?.data) {
+  //     handleRemoveRow();
+  //     dispatch({ type: 'close' });
+  //   }
+  // }, [isresponse]);
+  // const onDeleteProducts = () => {
+  //   if (isFormValid) {
+  //     setaction(true);
+  //   } else {
+  //     console.log('Please fill in all required fields before proceeding.');
+  //   }
+  // };
 
-  const handleRemoveRow = () => {
-    if (selectedRows.length > 0) {
-      setProductData((prevProductData: any) =>
-        prevProductData.filter(
-          (item: any) => !selectedRows.some(row => row.id === item.id)
-        )
-      );
-      setSelectedRows([]);
-    }
-  };
+  // const handleRemoveRow = () => {
+  //   if (selectedRows.length > 0) {
+  //     setProductData((prevProductData: any) =>
+  //       prevProductData.filter(
+  //         (item: any) => !selectedRows.some(row => row.id === item.id)
+  //       )
+  //     );
+  //     setSelectedRows([]);
+  //   }
+  // };
 
   // API block for creating product order
   const {
@@ -226,13 +226,13 @@ const ModalManager = () => {
 
   return (
     <>
-      {popupName?.state == 'bulkUpdate' && (
+      {popupName?.state == 'create-return' && (
         <AntModal
-          openStatus={popupName?.state == 'bulkUpdate' ? true : false}
+          openStatus={popupName?.state == 'create-return' ? true : false}
           closeModal={() => closeModal()}
           PopupHeader={{
-            heading: 'BULK UPDATE PRODUCT TYPE',
-            subHeading: 'Gemma Harris, LE12 6AW',
+            heading: 'CONFIRM RETURN',
+            subHeading: '',
           }}
           PopupFooter={{
             btns: [
@@ -245,13 +245,13 @@ const ModalManager = () => {
 
             btnAlign: 'justifyEnd',
           }}
-          BodyComponent={BulkUpdateProduct}
-          width={1104}
+          BodyComponent={CreateReturnModal}
+          width={800}
           classNameAdd={'globalPopup'}
         />
       )}
 
-      {popupName?.state === 'deleteProduct' && (
+      {/* {popupName?.state === 'deleteProduct' && (
         <AntModal
           openStatus={popupName?.state === 'deleteProduct'}
           closeModal={closeModal}
@@ -275,7 +275,7 @@ const ModalManager = () => {
           width={1104}
           classNameAdd={'globalPopup'}
         />
-      )}
+      )} */}
 
       {popupName?.state === 'addProduct' && (
         <AntModal

package/src/components/order-view/modalsPopup/UnReceiveProduct.tsx

@@ -1,7 +1,7 @@
 import { AntSelect, Label } from '@bjsdistribution/dms-component-library';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import Notes from '../../order-view/order-actions/actions/log-service-refusal/Notes';
+import Notes from '../order-actions/actions/log-service-refusal/Notes';
 import {
   useOrderStaticData,
   useProductDetails,

package/src/components/order-view/notes/AddNote.tsx

@@ -1,27 +1,130 @@
 import {
   Button,
   Label,
-  TextArea,
+  // SelectDropdown,
 } from '@bjsdistribution/dms-component-library';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+// import NoteType from './NoteType';
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { getCookie } from '../utils';
+import { useLocation } from 'react-router-dom';
+import {
+  useCallAPi,
+  usemoduleIds,
+  UseNotesLoading,
+  useOrderId,
+} from '../store';
+import { notification } from 'antd';
 
 function AddNote() {
-  const SaveNote = () => {
-    alert('saved');
+  const [, setNoteLoadingStore] = UseNotesLoading();
+  const [noteText, setNoteText] = useState('');
+  const [orderId] = useOrderId();
+
+  const location = useLocation();
+  const pathname = location.pathname;
+  const orderIdLocaation = pathname.split('/')[1];
+
+  // const [note, setNote] = useState('');
+  const [, CallAPi] = useCallAPi();
+  const ssoToken = getCookie('id_token');
+
+  const [moduleIds] = usemoduleIds();
+
+  // Save New Note
+
+  const [notificationData, setNotificationData] = useState<{
+    type: 'success' | 'error';
+    message: string;
+    description: string;
+  } | null>(null);
+
+  const saveNote = async () => {
+    setNoteLoadingStore(true);
+    CallAPi(false);
+
+    if (!noteText) return;
+    const endpoint = `${getBaseEndpoint()}/audit_logs/orders/`;
+    const payload = {
+      audit_logs: [
+        {
+          parent_object_id: orderId || orderIdLocaation,
+          parent_module_id: moduleIds?.parentId,
+          module_id: moduleIds?.id,
+          module_object_id: orderId || orderIdLocaation,
+          action: 'create',
+          description: noteText,
+          data_dump: '{}',
+        },
+      ],
+    };
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${ssoToken}`,
+        },
+        body: JSON.stringify(payload),
+      });
+
+      // setNoteLoadingStore(false);
+
+      const { message, error }: any = response;
+      if (response) {
+        setNotificationData({
+          type: 'success',
+          message: 'Success',
+          description: message || 'Successfully Created Note.',
+        });
+        setNoteLoadingStore(true);
+        setNoteText('');
+        setNoteLoadingStore(false);
+        CallAPi(true);
+      } else if (error) {
+        // Error: Set error notification
+        setNotificationData({
+          type: 'error',
+          message: 'Error',
+          description: error || 'Something went wrong. Please try again.',
+        });
+      }
+    } catch (error) {
+      console.error('Error saving note:', error);
+      alert('Failed to save note');
+    }
   };
 
+  useEffect(() => {
+    if (notificationData) {
+      const { type, message, description } = notificationData;
+      notification[type]({
+        message,
+        description,
+        duration: 5,
+      });
+      setNotificationData(null); // Clear notification data after showing
+    }
+
+    // Set top position for notifications
+    notification.config({
+      top: 80,
+    });
+  }, [notificationData]);
+
   return (
     <Container>
       <Label label="Add New Note" />
-      {/* <StyledSelectDropdown
-        placeholder="Standard"
-        inputId="standard"
-        openMenuOnFocus
-      /> */}
-      <CustomTextArea rows={3} />
+      <StyledTextArea
+        name="description"
+        placeholder="Enter your note here..."
+        value={noteText}
+        onChange={(e: any) => setNoteText(e.target.value)}
+      />
       <SaveNoteContainer>
-        <Button style={{ borderRadius: '20px' }} onClick={SaveNote}>
+        <Button disabled={!noteText} onClick={saveNote}>
           SAVE NOTE
         </Button>
       </SaveNoteContainer>
@@ -39,10 +142,21 @@ const Container = styled.div`
 const SaveNoteContainer = styled.div`
   display: inline-flex;
   gap: 10px;
+  .disabled button {
+    opacity: 0.5;
+    cursor: default;
+  }
 `;
 
-const CustomTextArea = styled(TextArea)`
-  flex: 1;
+const StyledTextArea = styled.textarea`
+  height: 57px;
+  border-radius: 12px;
+  background: #fff;
+  resize: none;
+  border-radius: 8px;
+  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
+  background: var(--Flowkit-White, #fff);
+  padding: 8px 12px;
 `;
 
 // const StyledSelectDropdown = styled(SelectDropdown)`