diff --git a/src/components/DownloadLogsFilePopover.vue b/src/components/DownloadLogsFilePopover.vue
new file mode 100644
index 00000000..ab9e78bc
--- /dev/null
+++ b/src/components/DownloadLogsFilePopover.vue
@@ -0,0 +1,76 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ dataManagerLog.logId }}</ion-list-header>
+      <ion-item button @click="downloadFile('logFile')">
+        {{ translate('Log file') }}
+      </ion-item>
+      <ion-item button @click="downloadFile('uploadedFile')">
+        {{ translate('Uploaded file') }}
+      </ion-item>
+      <ion-item button :disabled="!dataManagerLog?.errorRecordContentId" lines="none" @click="downloadFile('failedRecords')">
+        {{ translate('Failed records') }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  IonListHeader,
+  popoverController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from "@hotwax/dxp-components";
+import { JobService } from "@/services/JobService";
+import { saveDataFile, showToast } from '@/utils';
+import logger from "@/logger";
+
+export default defineComponent({
+  name: "DownloadLogsFilePopover",
+  components: { 
+    IonContent,
+    IonItem,
+    IonList,
+    IonListHeader
+  },
+  props: ["dataManagerLog"],
+  methods: {
+    async downloadFile(type: string) {
+      let dataResource = {} as any;
+
+      if (type === 'logFile') {
+        dataResource.dataResourceId = this.dataManagerLog.logFileDataResourceId
+        dataResource.name = this.dataManagerLog.logFileContentName
+      } else if (type === 'uploadedFile') {
+        dataResource.name = this.dataManagerLog.contentName
+        dataResource.dataResourceId = this.dataManagerLog.dataResourceId
+      } else if (type === 'failedRecords') {
+        dataResource.dataResourceId = this.dataManagerLog.errorRecordDataResourceId
+        dataResource.name = this.dataManagerLog.errorRecordContentName
+      }
+
+      if (dataResource.dataResourceId) {
+        try {
+          const response = await JobService.fetchFileData({
+            dataResourceId: dataResource.dataResourceId
+          });
+          saveDataFile(response.data, dataResource.name);
+        } catch (error) {
+          showToast(translate('Error downloading file'))
+          logger.error(error)
+        }
+      }
+      popoverController.dismiss();
+    }
+  },
+  setup() {
+    return {
+      translate
+    }
+  }
+});
+</script> 
\ No newline at end of file
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 77926a83..ec43e91e 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -6,7 +6,8 @@
       <ion-button fill="outline" slot="end" v-if="isRefreshRequired" @click="refreshCurrentJob">
         <ion-icon :icon="refreshOutline" slot="icon-only" />
       </ion-button>
-      <ion-badge slot="end" color="dark" v-if="currentJob?.runTime && currentJob.statusId !== 'SERVICE_DRAFT' && !isRefreshRequired">{{ translate("running") }} {{ timeTillJob(currentJob.runTime) }}</ion-badge>
+      <ion-badge slot="end" color="dark" v-if="currentJob.cancelDateTime || currentJob.finishDateTime">{{ currentJob.statusId == "SERVICE_CANCELLED" || currentJob.statusId == "SERVICE_CRASHED" ?  timeTillJob(currentJob.cancelDateTime) : timeTillJob(currentJob.finishDateTime) }}</ion-badge>
+      <ion-badge slot="end" color="dark" v-else-if="currentJob?.runTime && currentJob.statusId !== 'SERVICE_DRAFT' && !isRefreshRequired">{{ translate("running") }} {{ timeTillJob(currentJob.runTime) }}</ion-badge>
     </ion-item>
 
     <ion-list>
@@ -19,33 +20,45 @@
 
       <ion-item>
         <ion-icon slot="start" :icon="timeOutline" />
-        <ion-select interface="popover" :placeholder="translate('Select')" :value="runTime" @ionChange="updateRunTime($event)">
-          <div slot="label" class="ion-text-wrap">{{ translate("Run time") }}</div>
-          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ translate(runTime.label) }}</ion-select-option>
-        </ion-select>
-        <!-- TODO: display a button when we are not having a runtime and open the datetime component
-        on click of that button
-        Currently, when mapping the same datetime component for label and button so it's not working so for
-        now commented the button and added a fallback string -->
-        <!-- <ion-button id="open-run-time-modal" size="small" fill="outline" color="medium" v-show="!currentJob?.runTime">{{ translate("Select run time") }}</ion-button> -->
-        <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
-          <ion-content force-overscroll="false">
-            <ion-datetime          
-              show-default-buttons
-              hour-cycle="h23"
-              :value="runTime ? (isCustomRunTime(runTime) ? getDateTime(runTime) : getDateTime(DateTime.now().toMillis() + runTime)) : getNowTimestamp()"
-              @ionChange="updateCustomTime($event)"
-            />
-          </ion-content>
-        </ion-modal>
+        <template v-if="historyJobConfig">
+          <ion-label class="ion-text-wrap">{{ translate("Run time") }}</ion-label>
+          <ion-label slot="end">{{ currentJob.runTime ? getTime(currentJob.runTime) : '' }}</ion-label>
+        </template>
+        <template v-else>
+          <ion-select interface="popover" :placeholder="translate('Select')" :value="runTime" @ionChange="updateRunTime($event)">
+            <div slot="label" class="ion-text-wrap">{{ translate("Run time") }}</div>
+            <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ translate(runTime.label) }}</ion-select-option>
+          </ion-select>
+          <!-- TODO: display a button when we are not having a runtime and open the datetime component
+          on click of that button
+          Currently, when mapping the same datetime component for label and button so it's not working so for
+          now commented the button and added a fallback string -->
+          <!-- <ion-button id="open-run-time-modal" size="small" fill="outline" color="medium" v-show="!currentJob?.runTime">{{ translate("Select run time") }}</ion-button> -->
+          <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
+            <ion-content force-overscroll="false">
+              <ion-datetime          
+                show-default-buttons
+                hour-cycle="h23"
+                :value="runTime ? (isCustomRunTime(runTime) ? getDateTime(runTime) : getDateTime(DateTime.now().toMillis() + runTime)) : getNowTimestamp()"
+                @ionChange="updateCustomTime($event)"
+              />
+            </ion-content>
+          </ion-modal>
+        </template>
       </ion-item>
 
       <ion-item>
         <ion-icon slot="start" :icon="timerOutline" />
-        <ion-select :value="jobStatus" :interface-options="{ header: translate('Frequency') }" interface="popover" :placeholder="translate('Disabled')" @ionChange="jobStatus = $event.detail.value" @ionDismiss="jobStatus == 'CUSTOM' && setCustomFrequency()">
-          <div slot="label" class="ion-text-wrap">{{ translate("Schedule") }}</div>
-          <ion-select-option v-for="freq in frequencyOptions" :key="freq.id" :value="freq.id">{{ freq.description }}</ion-select-option>
-        </ion-select>
+        <template v-if="historyJobConfig">
+          <ion-label class="ion-text-wrap">{{ translate("Schedule") }}</ion-label>
+          <ion-label slot="end">{{ currentJob.tempExprId ? temporalExpr(currentJob.tempExprId)?.description : "🙃" }}</ion-label>
+        </template>
+        <template v-else>
+          <ion-select :value="jobStatus" :interface-options="{ header: translate('Frequency') }" interface="popover" :placeholder="translate('Disabled')" @ionChange="jobStatus = $event.detail.value" @ionDismiss="jobStatus == 'CUSTOM' && setCustomFrequency()">
+            <div slot="label" class="ion-text-wrap">{{ translate("Schedule") }}</div>
+            <ion-select-option v-for="freq in frequencyOptions" :key="freq.id" :value="freq.id">{{ freq.description }}</ion-select-option>
+          </ion-select>
+        </template>
       </ion-item>
 
       <ion-item lines="none">
@@ -76,20 +89,20 @@
       </ion-item> -->
     </ion-list>
 
-    <div class="actions desktop-only">
+    <div class="actions desktop-only" :disabled="historyJobConfig">
       <div>
-        <ion-button size="small" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT' || isRefreshRequired" @click="skipJob(currentJob)">{{ translate("Skip once") }}</ion-button>
-        <ion-button size="small" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT' || isRefreshRequired" @click="cancelJob(currentJob)">{{ translate("Disable") }}</ion-button>
+        <ion-button size="small" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT' || isRefreshRequired || historyJobConfig" @click="skipJob(currentJob)">{{ translate("Skip once") }}</ion-button>
+        <ion-button size="small" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT' || isRefreshRequired || historyJobConfig" @click="cancelJob(currentJob)">{{ translate("Disable") }}</ion-button>
       </div>
       <div>
-        <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing || isRefreshRequired" size="small" fill="outline" @click="saveChanges()">{{ translate("Save changes") }}</ion-button>
+        <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing || isRefreshRequired || historyJobConfig" size="small" fill="outline" @click="saveChanges()">{{ translate("Save changes") }}</ion-button>
       </div>
     </div>
 
     <div class=" actions mobile-only">
-      <ion-button size="small" expand="block" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT' || isRefreshRequired" @click="skipJob(currentJob)">{{ translate("Skip once") }}</ion-button>
-      <ion-button size="small" expand="block" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT' || isRefreshRequired" @click="cancelJob(currentJob)">{{ translate("Disable") }}</ion-button>
-      <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing || isRefreshRequired" expand="block" @click="saveChanges()">{{ translate("Save changes") }}</ion-button>
+      <ion-button size="small" expand="block" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT' || isRefreshRequired || historyJobConfig" @click="skipJob(currentJob)">{{ translate("Skip once") }}</ion-button>
+      <ion-button size="small" expand="block" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT' || isRefreshRequired || historyJobConfig" @click="cancelJob(currentJob)">{{ translate("Disable") }}</ion-button>
+      <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing || isRefreshRequired || historyJobConfig" expand="block" @click="saveChanges()">{{ translate("Save changes") }}</ion-button>
     </div>
   </section>
   <div class="more-actions">
@@ -97,7 +110,7 @@
       <ion-icon slot="start" :icon="timeOutline" />
       {{ translate("History") }}
     </ion-item>
-    <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="runNow(currentJob)" button>
+    <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || historyJobConfig" @click="runNow(currentJob)" button>
       <ion-icon slot="start" :icon="flashOutline" />
       {{ translate("Run now") }}
     </ion-item>
@@ -105,14 +118,38 @@
       <ion-icon slot="start"  :icon="copyOutline" />
       {{ translate("Copy details") }}
     </ion-item>
-    <ion-item @click="updatePinnedJobs(currentJob?.systemJobEnumId)" button>
+    <ion-item :disabled="historyJobConfig" @click="updatePinnedJobs(currentJob?.systemJobEnumId)" button>
       <ion-icon slot="start" :icon="pinOutline" />
       <ion-checkbox :checked="pinnedJobs && pinnedJobs.includes(currentJob.systemJobEnumId)">
         <ion-label>{{ translate("Pin job") }}</ion-label>
       </ion-checkbox>
     </ion-item>
   </div>
-
+  <!-- Import logs -->
+  <section v-if="historyJobConfig && currentJob.runtimeData?.configId && getDataManagerLogs?.length">
+    <ion-item lines="none">
+      <h1>{{ translate('Import logs') }}</h1>
+      <ion-button slot="end" fill="clear" @click="openImportLogsDetails()">{{ translate('View details') }}</ion-button>
+    </ion-item>
+    <ion-progress-bar :value="(getProcessedFileCount() - getErrorFileCount()) / getDataManagerLogs.length"></ion-progress-bar>
+    <ion-list>
+      <ion-item>
+        <ion-icon slot="start" :icon="fileTrayFullOutline" />
+        {{ translate('Files received') }}
+        <ion-label slot="end">{{ getDataManagerLogs.length }}</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" :icon="codeWorkingOutline" />
+        {{ translate('Files processed') }}
+        <ion-label slot="end">{{ getProcessedFileCount() }}</ion-label>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-icon slot="start" :icon="warningOutline" />
+        {{ translate('Files with errors') }}
+        <ion-label slot="end">{{ getErrorFileCount() }}</ion-label>
+      </ion-item>
+    </ion-list>
+  </section>
 </template>
 
 <script lang="ts">
@@ -129,6 +166,7 @@ import {
   IonLabel,
   IonList,
   IonModal,
+  IonProgressBar,
   IonRow,
   IonSelect,
   IonSelectOption,
@@ -138,7 +176,9 @@ import {
 import {
   addOutline,
   calendarClearOutline,
+  codeWorkingOutline,
   flashOutline,
+  fileTrayFullOutline,
   listCircleOutline,
   copyOutline,
   timeOutline,
@@ -146,7 +186,8 @@ import {
   syncOutline,
   personCircleOutline,
   pinOutline,
-  refreshOutline
+  refreshOutline,
+  warningOutline
 } from "ionicons/icons";
 import JobHistoryModal from '@/components/JobHistoryModal.vue'
 import { Plugins } from '@capacitor/core';
@@ -173,6 +214,7 @@ export default defineComponent({
     IonLabel,
     IonList,
     IonModal,
+    IonProgressBar,
     IonRow,
     IonSelect,
     IonSelectOption,
@@ -205,7 +247,7 @@ export default defineComponent({
     this.generateRunTimes(this.runTime)
     this.generateFrequencyOptions(this.jobStatus)
   },
-  props: ["isBrokerJob", "status", "type"],
+  props: ["isBrokerJob", "status", "type", "historyJobConfig"],
   computed: {
     ...mapGetters({
       pinnedJobs: 'user/getPinnedJobs',
@@ -215,6 +257,8 @@ export default defineComponent({
       currentEComStore: 'user/getCurrentEComStore',
       currentJob: 'job/getCurrentJob',
       pendingJobs: 'job/getPendingJobs',
+      getDataManagerLogs: 'job/getDataManagerLogs',
+      temporalExpr: 'job/getTemporalExpr'
     }),
     isRequiredParametersMissing() {
       return this.customRequiredParameters.some((parameter: any) => !parameter.value?.trim())
@@ -225,6 +269,16 @@ export default defineComponent({
     }
   },
   methods: {
+    getProcessedFileCount() {
+      return this.getDataManagerLogs?.filter((log: any) => log.statusId === "SERVICE_FINISHED").length
+    },
+    getErrorFileCount() {
+      return this.getDataManagerLogs?.filter((log: any) => log.errorRecordContentId !== null).length
+    },
+    openImportLogsDetails() {
+      const jobId = this.currentJob.jobId
+      this.router.push({ name: 'DataManagerLogDetails', params: { jobId } })
+    },
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toISO()
     },
@@ -525,10 +579,12 @@ export default defineComponent({
       Actions,
       addOutline,
       calendarClearOutline,
+      codeWorkingOutline,
       copyOutline,
       DateTime,
       listCircleOutline,
       flashOutline,
+      fileTrayFullOutline,
       hasPermission,
       isCustomRunTime,
       getNowTimestamp,
@@ -540,17 +596,18 @@ export default defineComponent({
       personCircleOutline,
       pinOutline,
       refreshOutline,
-      translate
+      translate,
+      warningOutline
     };
   }
 });
 </script>
 
 <style scoped>
-ion-list {
-  margin: 0 0 var(--spacer-base);
+section {
+  margin-top: var(--spacer-sm);
+  margin-bottom: var(--spacer-sm);
 }
-
 .actions > ion-button {
   margin: var(--spacer-sm);
 }
diff --git a/src/components/JobParameterModal.vue b/src/components/JobParameterModal.vue
index db0659c7..d53320f4 100644
--- a/src/components/JobParameterModal.vue
+++ b/src/components/JobParameterModal.vue
@@ -8,7 +8,7 @@
       </ion-buttons>
       <ion-title>{{ translate('Custom Parameters') }}</ion-title>
       <ion-buttons slot="end">
-        <ion-button color="primary" :disabled="currentJob.statusId === 'SERVICE_PENDING'" @click="save()">{{ translate('Save') }}</ion-button>
+        <ion-button color="primary" :disabled="currentJob.statusId !== 'SERVICE_DRAFT'" @click="save()">{{ translate('Save') }}</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
diff --git a/src/locales/en.json b/src/locales/en.json
index a0250ee1..a2975e89 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -65,6 +65,7 @@
   "Custom": "Custom",
   "Custom frequency": "Custom frequency",
   "Custom Parameters": "Custom Parameters",
+  "Crashed": "Crashed",
   "Create batches and schedule brokering for different orders.": "Create batches and schedule brokering for different orders.",
   "Create or update order fulfillment history records from FTP.": "Create or update order fulfillment history records from FTP.",
   "Create new brokering job": "Create new brokering job",
@@ -78,6 +79,7 @@
   "Dismiss": "Dismiss",
   "Don't cancel": "Don't cancel",
   "Don't skip": "Don't skip",
+  "Draft": "Draft",
   "eCom Store": "eCom Store",
   "eCommerce": "eCommerce",
   "eCommerce stores are directly connected to one Shop Config. If your OMS is connected to multiple eCommerce stores selling the same catalog operating as one Company, you may have multiple Shop Configs for the selected Product Store.": "eCommerce stores are directly connected to one Shop Config. If your OMS is connected to multiple eCommerce stores selling the same catalog operating as one Company, you may have multiple Shop Configs for the selected Product Store.",
@@ -88,12 +90,16 @@
   "Every 6 hours": "Every 6 hours",
   "Every day": "Every day",
   "Failed": "Failed",
+  "Failed records": "Failed records",
   "Failed job reason": "Failed job reason",
   "Failed to schedule service(s)": "Failed to schedule {count} service(s)",
   "Fetching TimeZones": "Fetching TimeZones",
   "File upload status": "File upload status",
   "Filters": "Filters",
   "Finished": "Finished",
+  "Files received": "Files received",
+  "Files processed": "Files processed",
+  "Files with errors": "Files with errors",
   "Frequency": "Frequency",
   "Fulfilled": "Fulfilled",
   "Fulfillment": "Fulfillment",
@@ -120,6 +126,8 @@
   "Inventory": "Inventory",
   "Inventory cost": "Inventory cost",
   "Inventory level update": "Inventory level update",
+  "Import logs": "Import logs",
+  "Job": "Job",
   "Job details": "Job details",
   "Job runtime has passed. The job data has refreshed. Please try again.": "Job runtime has passed. The job data has refreshed. Please try again.",
   "Job runtime has passed. Please refresh to get the latest job data in order to perform any action.": "Job runtime has passed. Please refresh to get the latest job data in order to perform any action.",
@@ -129,6 +137,8 @@
   "Last Shopify Order ID": "Last Shopify Order ID",
   "Loading": "Loading",
   "Login": "Login",
+  "Log Id": "Log Id",
+  "Log file": "Log file",
   "Logging in": "Logging in",
   "Logging out": "Logging out",
   "Logout": "Logout",
@@ -137,6 +147,8 @@
   "More jobs": "More jobs",
   "More parameters": "More parameters",
   "More options": "More options",
+  "Mode": "Mode",
+  "Multithreading": "Multithreading",
   "Name": "Name",
   "New broker run": "New broker run",
   "New orders": "New orders",
@@ -144,6 +156,7 @@
   "No": "No",
   "no eCommerce selected": "no eCommerce selected",
   "No frequency found": "No frequency found",
+  "No logs found": "No logs found",
   "No jobs found": "No jobs found",
   "No jobs have run yet": "No jobs have run yet",
   "No parameters available": "No parameters available",
@@ -187,6 +200,7 @@
   "Promise date change": "Promise date change",
   "Promise date changes": "Promise date changes",
   "Provide a future date and time": "Provide a future date and time",
+  "Queued": "Queued",
   "Ready to create an app?": "Ready to create an app?",
   "Realtime adjustments": "Realtime adjustments",
   "Realtime POS sales": "Realtime POS sales",
@@ -243,6 +257,7 @@
   "Service updated successfully": "Service updated successfully",
   "Services have been scheduled in bulk": "Services have been scheduled in bulk",
   "Settings": "Settings",
+  "SFTP": "SFTP",
   "Ship packed orders": "Ship packed orders",
   "Shipping": "Shipping",
   "Shop Config": "Shop Config",
@@ -302,11 +317,13 @@
   "Update promise date": "Update promise date",
   "Update shipping dates in Shopify": "Update shipping dates in Shopify",
   "Upload": "Upload",
+  "Uploaded file": "Uploaded file",
   "Upload Pending Process": "Upload Pending Process",
   "Use POs to manage catalog": "Use POs to manage catalog",
   "Username": "Username",
   "Version: ": "Version: {appVersion}",
   "View catalog": "View catalog",
+  "View details": "View details",
   "Webhook subscribed successfully": "Webhook subscribed successfully",
   "Webhook unsubscribed successfully": "Webhook unsubscribed successfully",
   "Webhooks": "Webhooks",
diff --git a/src/router/index.ts b/src/router/index.ts
index 10f36458..1d5b85a2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,7 @@ import Miscellaneous from '@/views/Miscellaneous.vue'
 import Reports from '@/views/Reports.vue'
 import BulkEditor from '@/views/BulkEditor.vue'
 import Settings from "@/views/Settings.vue"
+import DataManagerLogDetails from "@/views/DataManagerLogDetails.vue"
 import store from '@/store'
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
@@ -63,6 +64,13 @@ const routes: Array<RouteRecordRaw> = [
       permissionId: "APP_PIPELINE_VIEW"
     }
   },
+  {
+    path: '/import-logs-detail/:jobId',
+    name: 'DataManagerLogDetails',
+    component: DataManagerLogDetails,
+    beforeEnter: authGuard,
+    props: true
+  },
   {
     path: '/inventory',
     name: 'Inventory',
diff --git a/src/services/JobService.ts b/src/services/JobService.ts
index dbc2577d..4eb37197 100644
--- a/src/services/JobService.ts
+++ b/src/services/JobService.ts
@@ -64,6 +64,39 @@ const cancelJob = async (payload: any): Promise <any> => {
     data: payload
   });
 }
+
+const fetchDataManagerLogs = async (payload: any): Promise <any> => {
+  return api ({
+    url: "performFind",
+    method: "get",
+    params: payload
+  })
+}
+
+const fetchDataResource = async (payload: any): Promise <any> => {
+  return api ({
+    url: "performFind",
+    method: "get",
+    params: payload
+  })
+}
+
+const fetchDataManagerConfig = async (payload: any): Promise <any> => {
+  return api ({
+    url: "performFind",
+    method: "get",
+    params: payload
+  })
+}
+
+const fetchFileData = async (payload: any): Promise <any> => {
+  return api ({
+    url: "DownloadCsvFile",
+    method: "get",
+    params: payload
+  })
+}
+
 const fetchJobPreviousOccurrence = async (payload: any): Promise <any>  => {
   try {
     const params = {
@@ -118,5 +151,9 @@ export const JobService = {
   scheduleJob,
   updateAutoCancelDays,
   getAutoCancelDays,
-  cancelJob
+  cancelJob,
+  fetchDataManagerLogs,
+  fetchDataResource,
+  fetchDataManagerConfig,
+  fetchFileData
 }
\ No newline at end of file
diff --git a/src/store/modules/job/JobState.ts b/src/store/modules/job/JobState.ts
index 7e1f5c3e..92e34579 100644
--- a/src/store/modules/job/JobState.ts
+++ b/src/store/modules/job/JobState.ts
@@ -33,4 +33,5 @@ export default interface JobState {
       runtime: any,
       frequency: any,
     },
+    dataManagerLogs: any
 }
\ No newline at end of file
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index c63bc496..0df0fdcf 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -260,6 +260,72 @@ const actions: ActionTree<JobState, RootState> = {
       showToast(translate("Something went wrong"));
     })
   },
+
+  async fetchDataManagerLogs({ commit }, jobId) {
+    commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, []);
+    let logs = [] as any
+    const payload = {
+      "inputFields":  {
+        "systemJobEnumId_op": "not-empty",
+        "createdByJobId": jobId
+      },
+      "fieldList": ["statusId", "logId", "createdDate", "startDateTime", "finishDateTime", "logFileContentId", "errorRecordContentId", "contentName", "dataResourceId"],
+      "noConditionFind": "Y",
+      "viewSize": 250,
+      "entityName": "DataManagerLogAndContent",
+    }
+
+    try {
+      const resp = await JobService.fetchDataManagerLogs(payload);
+      if (resp.data.docs?.length > 0 && !hasError(resp)) {
+        logs = resp.data.docs;
+      } else {
+        throw resp.data;
+      }
+    } catch (err) {
+      logger.error(err);
+    }
+    commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, logs);
+    return logs;
+  },
+
+  async fetchDataResource({ commit }, logs) {
+    // Extract logFileContentId and errorRecordContentId from logs
+    const contentIds = [].concat(...logs.map((log: any) => [log.logFileContentId, log.errorRecordContentId].filter(id => id)));
+  
+    const payload = {
+      "inputFields": {
+        "coContentId": contentIds,
+        "coContentId_op": "in"
+      },
+      "fieldList": ["coContentId", "coDataResourceId", "coContentName"], 
+      "noConditionFind": "Y",
+      "viewSize": 250,
+      "entityName": "DataResourceContentView"
+    }
+  
+    try {
+      const resp = await JobService.fetchDataResource(payload);
+      if (resp.data.docs?.length > 0 && !hasError(resp)) {
+        logs.forEach((log: any) => {
+          const logFileDataResource = resp.data.docs.find((doc: any) => doc.coContentId === log.logFileContentId);
+          if (logFileDataResource) {
+            log.logFileDataResourceId = logFileDataResource.coDataResourceId;
+            log.logFileContentName = logFileDataResource.coContentName;
+          }
+  
+          const errorRecordDataResource = resp.data.docs.find((doc: any) => doc.coContentId === log.errorRecordContentId);
+          if (errorRecordDataResource) {
+            log.errorRecordDataResourceId = errorRecordDataResource.coDataResourceId;
+            log.errorRecordContentName = errorRecordDataResource.coContentName;
+          }
+        });
+      }
+    } catch (err) {
+      logger.error(err);
+    }
+    commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, logs);
+  },
   async fetchMiscellaneousJobs({ commit, dispatch, state }, payload){
     const fetchJobRequests = [];
     const params = {
diff --git a/src/store/modules/job/getters.ts b/src/store/modules/job/getters.ts
index 1656ba35..9ff94838 100644
--- a/src/store/modules/job/getters.ts
+++ b/src/store/modules/job/getters.ts
@@ -85,6 +85,9 @@ const getters: GetterTree <JobState, RootState> = {
     getGlobalFreq: (state) => {
       return state.bulk.frequency;
     },
+    getDataManagerLogs: (state) => {
+      return state.dataManagerLogs
+    }
   }
 
   export default getters;
\ No newline at end of file
diff --git a/src/store/modules/job/index.ts b/src/store/modules/job/index.ts
index 71a6ccb4..6849eed6 100644
--- a/src/store/modules/job/index.ts
+++ b/src/store/modules/job/index.ts
@@ -42,6 +42,7 @@ const jobModule: Module<JobState, RootState> = {
         runtime: '',
         frequency: '',
       },
+      dataManagerLogs: []
     },
     getters,
     actions,
diff --git a/src/store/modules/job/mutation-types.ts b/src/store/modules/job/mutation-types.ts
index 9a020e3e..87498883 100644
--- a/src/store/modules/job/mutation-types.ts
+++ b/src/store/modules/job/mutation-types.ts
@@ -13,4 +13,5 @@ export const JOB_PIPELINE_FILTERS_CLEARED = SN_JOB + '/PIPELINE_FILTERS_CLEARED'
 export const JOB_BULK_UPDATED = SN_JOB + '/BULK_UPDATED'
 export const JOB_BULK_FREQUENCY_UPDATED = SN_JOB + '/BULK_FREQUENCY_UPDATED'
 export const JOB_BULK_RUNTIME_UPDATED = SN_JOB + '/BULK_DATA_UPDATED'
-export const JOB_BULK_CLEARED = SN_JOB + '/BULK_CLEARED'
\ No newline at end of file
+export const JOB_BULK_CLEARED = SN_JOB + '/BULK_CLEARED'
+export const JOB_DATA_MANAGER_LOGS_UPDATED = SN_JOB + '/DATA_MANAGER_LOGS_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/job/mutations.ts b/src/store/modules/job/mutations.ts
index 4b54d3da..77963a05 100644
--- a/src/store/modules/job/mutations.ts
+++ b/src/store/modules/job/mutations.ts
@@ -64,6 +64,9 @@ const mutations: MutationTree <JobState> = {
             runtime: '',
             frequency: ''
         }
-    }
+    },
+    [types.JOB_DATA_MANAGER_LOGS_UPDATED] (state, payload) {
+        state.dataManagerLogs = payload
+    },
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ed6bbccd..313e99ca 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -341,6 +341,18 @@ const copyToClipboard = async (value: string, text?: string) => {
   });
 }
 
+const saveDataFile = async (response: any, fileName: string) => {
+  let data;
+
+  if (typeof response === 'object') {
+    data = JSON.stringify(response)
+  } else {
+    data = response
+  }
+
+  const blob = new Blob([data], {type: "text/plain;charset=utf-8"})
+  saveAs(blob, fileName);
+}
 
 export {
   copyToClipboard,
@@ -358,5 +370,6 @@ export {
   jsonToCsv,
   JsonToCsvOption,
   isFutureDate,
-  prepareRuntime
+  prepareRuntime,
+  saveDataFile
 }
diff --git a/src/views/DataManagerLogDetails.vue b/src/views/DataManagerLogDetails.vue
new file mode 100644
index 00000000..5d80031d
--- /dev/null
+++ b/src/views/DataManagerLogDetails.vue
@@ -0,0 +1,315 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/pipeline" />
+        <ion-title>{{ translate("Import logs")}}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <div class="header ion-padding">
+        <section>
+          <ion-item lines="none">
+            <h1>{{ translate('Import logs') }}</h1>
+          </ion-item>
+          <ion-list>
+            <ion-item>
+              <ion-icon slot="start" :icon="pulseOutline" />
+              {{ translate('Job') }}
+              <ion-label slot="end" class="ion-text-wrap">{{ currentJob?.jobId }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="fileTrayFullOutline" />
+              {{ translate('Files received') }}
+              <ion-label slot="end">{{ getDataManagerLogs.length }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="codeWorkingOutline" />
+              {{ translate('Files processed') }}
+              <ion-label slot="end">{{ getProcessedFileCount() }}</ion-label>
+            </ion-item>
+            <ion-item lines="none">
+              <ion-icon slot="start" :icon="warningOutline" />
+              {{ translate('Files with errors') }}
+              <ion-label slot="end">{{ getErrorFileCount() }}</ion-label>
+            </ion-item>
+          </ion-list>
+        </section>
+        <div class="config-details">
+          <ion-label lines="none">
+            <p class="overline">{{ currentJob?.runtimeData?.configId }}</p>
+            <h1>{{ configDetails?.description }}</h1>
+          </ion-label>
+          <ion-list>
+            <ion-item>
+              <ion-icon slot="start" :icon="shareSocialOutline" />
+              {{ translate('Multithreading') }}
+              <ion-label slot="end">{{ currentJob.runtimeData?.groupBy ? currentJob.runtimeData?.groupBy : "-" }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="globeOutline" />
+              {{ translate('SFTP') }}
+              <ion-label class="ion-text-wrap" slot="end">{{ configDetails?.importPath }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="optionsOutline" />
+              {{ translate('Mode') }}
+              <ion-label slot="end">{{ configDetails?.executionModeId ? configDetails?.executionModeId : "-"}}</ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </div>
+
+      <div class="ion-padding">
+        <ion-chip v-for="filter in dataManagerLogFilters" :key="filter.id" outline @click="filterDataManagerLogs(filter.id)">
+          <ion-label>{{ filter.label }}</ion-label>
+          <ion-icon v-if="selectedFilter === filter.id" :icon="checkmarkOutline" />
+        </ion-chip>
+      </div>
+      
+      <div class="empty-state" v-if="isLoading">
+        <ion-spinner name="crescent" />
+      </div>
+      <div v-else-if="dataManagerLogList?.length" >
+        <div class="list-item" v-for="(log, index) in dataManagerLogList" :key="index">
+          <ion-item lines="none">
+            <ion-icon slot="start" :icon="documentTextOutline" />
+            <ion-label>
+              <p class="overline">{{ log.logId }}</p>
+              {{ log.contentName }}
+              <p>{{ getDateTime(log.createdDate) }}</p>
+            </ion-label>
+          </ion-item>
+  
+          <ion-label>
+            {{ log.startDateTime ? getDateTime(log.startDateTime) : '-' }}
+            <p>{{ translate('Started') }}</p>
+          </ion-label>
+  
+          <ion-label>
+            {{ log.finishDateTime ? getDateTime(log.finishDateTime) : '-' }}
+            <p>{{ translate('Finished') }}</p>
+          </ion-label>
+
+          <ion-badge v-if="log.statusId" :color="log.statusId === 'SERVICE_FAILED' ? 'danger' : 'success'">{{ translate(getStatusDesc(log.statusId)) }}</ion-badge>
+          
+          <div class="ion-text-center" lines="none" v-if="log.errorRecordContentId" button @click="downloadErrorRecordFile(log)">
+            <ion-icon slot="start" :icon="cloudDownloadOutline" />
+            <ion-label>
+              <p>{{ translate('Failed records') }}</p>
+            </ion-label>
+          </div>
+          <div v-else></div>
+  
+          <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover(log, $event)">
+            <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+          </ion-button>
+        </div>
+      </div>
+      <div v-else class="empty-state">
+        {{ translate('No logs found') }}
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { checkmarkOutline, codeWorkingOutline, cloudDownloadOutline, documentTextOutline, ellipsisVerticalOutline, fileTrayFullOutline, globeOutline, optionsOutline, pulseOutline, shareSocialOutline, warningOutline } from "ionicons/icons";
+import { IonBackButton, IonBadge, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSpinner, IonTitle, IonToolbar, popoverController } from "@ionic/vue";
+import { defineComponent } from 'vue'
+import { mapGetters, useStore } from 'vuex'
+import { saveDataFile, hasError } from '@/utils';
+import { translate } from '@hotwax/dxp-components'
+import { DateTime } from 'luxon'
+import DownloadLogsFilePopover from "@/components/DownloadLogsFilePopover.vue";
+import { JobService } from "@/services/JobService";
+import logger from '@/logger';
+
+export default defineComponent ({
+  name: "DataManagerLogDetails",
+  components: {
+    IonBackButton,
+    IonBadge,
+    IonButton,
+    IonChip,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage,
+    IonSpinner,
+    IonTitle,
+    IonToolbar,
+  },
+  data() {
+    return {
+      configDetails: {},
+      currentJob: {},
+      selectedFilter: 'All',
+      dataManagerLogFilters: [
+        { id: 'ALL', label: 'All' },
+        { id: 'FAILED_LOGS', label: 'Failed logs' },
+        { id: 'FAILED_RECORDS', label: 'Failed records' }
+      ],
+      dataManagerLogList: [],
+      isLoading: true,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      getDataManagerLogs: 'job/getDataManagerLogs',
+      getStatusDesc: 'util/getStatusDesc',
+    }),
+  },
+  props: ['jobId'],
+  async mounted() {
+    this.currentJob = await this.fetchJobHistory(this.jobId);
+    await this.store.dispatch('job/updateCurrentJob', this.currentJob);
+    await this.fetchDataManagerConfig(this.currentJob?.runtimeData.configId)
+    await this.store.dispatch('job/fetchDataManagerLogs', this.currentJob.jobId)
+    await this.store.dispatch('job/fetchDataResource', this.getDataManagerLogs)
+    this.filterDataManagerLogs('ALL');
+    this.isLoading = false;
+  },
+  methods : {
+    filterDataManagerLogs(id) {
+      this.selectedFilter = id
+      if (id === 'ALL') {
+        this.dataManagerLogList = this.getDataManagerLogs
+      } else if (id === 'FAILED_LOGS') {
+        this.dataManagerLogList = this.getDataManagerLogs.filter(log => log.statusId === 'SERVICE_FAILED')
+      } else if (id === 'FAILED_RECORDS') {
+        this.dataManagerLogList = this.getDataManagerLogs.filter(log => log.errorRecordContentId !== null)
+      }
+    },
+    getDateTime(time) {
+      return DateTime.fromMillis(time).toFormat("dd/MM/yyyy H:mm a")
+    },
+    getProcessedFileCount() {
+      return this.getDataManagerLogs.filter((log) => log.statusId === "SERVICE_FINISHED").length
+    },
+    getErrorFileCount() {
+      return this.getDataManagerLogs.filter((log) => log.errorRecordContentId !== null).length
+    },
+    async openDownloadLogsFilePopover(dataManagerLog, event) {
+      const popover = await popoverController.create({
+        component: DownloadLogsFilePopover,
+        showBackdrop: false,
+        event: event,
+        componentProps: { dataManagerLog }
+      });
+      return popover.present()
+    },
+    async fetchJobHistory(jobId) {
+      let resp;
+
+      try {
+        resp = await JobService.fetchJobInformation({
+          "inputFields": {
+            "jobId": jobId
+          },
+          "noConditionFind": "Y"
+        })
+        if(resp.data.docs?.length > 0 && !hasError(resp)) {
+          return resp.data.docs[0];
+        } else {
+          return {}
+        }
+      } catch(err) {
+        logger.error(err)
+        return {}
+      }
+    },
+    async fetchDataManagerConfig(configId) {
+      let resp = {}
+      const payload = {
+        "inputFields":  {
+          "configId": configId
+        },
+        "fieldList": ["importPath", "multiThreading", "description", "executionModeId"],
+        "noConditionFind": "Y",
+        "viewSize": 1,
+        "entityName": "DataManagerConfig",
+      }
+      
+      try {
+        resp = await JobService.fetchDataManagerConfig(payload);
+        if (resp.data.docs?.length > 0 && !hasError(resp)) {
+          this.configDetails = resp.data.docs[0];
+        } else {
+          throw resp.data
+        }
+      } catch (err) {
+        logger.error(err);
+      }
+    },
+    async downloadErrorRecordFile(dataManagerLog) {
+      try {
+        if (dataManagerLog?.errorRecordDataResourceId) {
+          const response = await JobService.fetchFileData({
+            dataResourceId: dataManagerLog.errorRecordDataResourceId
+          });
+          saveDataFile(response.data, dataManagerLog?.errorRecordContentName);
+        }
+      } catch (error) {
+        logger.error(error);
+      }
+    }
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      checkmarkOutline,
+      codeWorkingOutline,
+      cloudDownloadOutline,
+      documentTextOutline,
+      ellipsisVerticalOutline,
+      fileTrayFullOutline,
+      globeOutline,
+      optionsOutline,
+      pulseOutline,
+      shareSocialOutline,
+      warningOutline,
+      translate,
+      store
+    }
+  }
+})
+</script>
+
+<style scoped>
+.header > section {
+  overflow: hidden;
+  border: var(--border-medium);
+  border-radius: 16px;
+}
+
+.list-item {
+  --columns-desktop: 6;
+  border-bottom : 1px solid var(--ion-color-medium);
+}
+
+.list-item > ion-item {
+  width: 100%;
+}
+
+.header {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--spacer-sm);
+}
+
+.config-details {
+  align-self: end;
+}
+
+@media (max-width: 991px) {
+  .header {
+    grid-template-columns: 1fr;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/JobDetails.vue b/src/views/JobDetails.vue
index 4266336b..ebe0fac9 100644
--- a/src/views/JobDetails.vue
+++ b/src/views/JobDetails.vue
@@ -9,7 +9,7 @@
 
     <ion-content>
       <InitialJobConfiguration v-if="jobCategory === 'initial-load'" :type='type' :shopifyOrderId='lastShopifyOrderId' :key="currentJob" />
-      <JobConfiguration v-else :status="currentJob?.status === 'SERVICE_DRAFT' ? currentJob?.status : currentJob?.tempExprId" :type="freqType" :key="currentJob"/>
+      <JobConfiguration v-else :status="currentJob?.status === 'SERVICE_DRAFT' ? currentJob?.status : currentJob?.tempExprId" :type="freqType" :key="currentJob" :historyJobConfig="checkJobStatus(currentJob?.statusId)"/>
     </ion-content>
   </ion-page>
 </template>
@@ -87,6 +87,10 @@ export default defineComponent({
         const jobFreqTypeId = (Object.keys(this.jobFrequencyType).find((enumId: any) => enumId === id)) as any;
         this.freqType = (id && jobFreqTypeId) && this.jobFrequencyType[jobFreqTypeId];
       }
+    },
+    checkJobStatus(statusId: string) {
+      const statuses = ["SERVICE_CANCELLED", "SERVICE_CRASHED", "SERVICE_FAILED", "SERVICE_FINISHED", "SERVICE_RUNNING", "SERVICE_QUEUED"];
+      return statuses.includes(statusId);
     }
   },
   mounted() {
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index 2e8164fd..de90cbc7 100644
--- a/src/views/Pipeline.vue
+++ b/src/views/Pipeline.vue
@@ -180,7 +180,7 @@
           </div>
 
           <div v-else>
-          <ion-card v-for="job in jobHistory" :key="job.jobId">
+          <ion-card v-for="job in jobHistory" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop">
             <ion-card-header>
               <div>
                 <ion-card-subtitle class="overline">{{ job.parentJobId }}</ion-card-subtitle>
@@ -188,7 +188,7 @@
               </div>
               <div>
                 <ion-badge v-if="job.cancelDateTime || job.finishDateTime" color="dark">{{ job.statusId == "SERVICE_CANCELLED" || job.statusId == "SERVICE_CRASHED" ?  timeFromNow(job.cancelDateTime) : timeFromNow(job.finishDateTime) }}</ion-badge>
-                <ion-badge v-if="job.statusId" :color="job.statusId === 'SERVICE_FINISHED' ? 'success' : 'danger'" @click="job.statusId === 'SERVICE_FAILED' ? openFailedJobReason(job) : ''">{{ job.statusDesc }}</ion-badge>
+                <ion-badge v-if="job.statusId" :color="job.statusId === 'SERVICE_FINISHED' ? 'success' : 'danger'" @click.stop="job.statusId === 'SERVICE_FAILED' ? openFailedJobReason(job) : ''">{{ job.statusDesc }}</ion-badge>
               </div>
             </ion-card-header>
 
@@ -237,8 +237,8 @@
           </div>          
         </section>
 
-        <aside class="desktop-only" v-if="isDesktop" v-show="segmentSelected === 'pending' && currentJob && Object.keys(currentJob).length">
-          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+        <aside class="desktop-only" v-if="isDesktop" v-show="(segmentSelected === 'pending' || segmentSelected === 'history') && currentJob && Object.keys(currentJob).length">
+          <JobConfiguration :status="currentJobStatus" :type="freqType" :historyJobConfig="segmentSelected === 'history'" :key="currentJob"/>
         </aside>
       </main>
     </ion-content>
@@ -608,6 +608,9 @@ export default defineComponent({
       this.freqType = appFreqType ? appFreqType[1] : "default"
 
       await this.store.dispatch('job/updateCurrentJob', { job });
+      if(this.segmentSelected === 'history' && job.runtimeData?.configId) {
+        await this.store.dispatch('job/fetchDataManagerLogs', job.jobId)
+      }
       if(!this.isDesktop && job?.jobId) {
         this.router.push({ name: 'JobDetails', params: { jobId: job?.jobId, category: "pipeline" } });
         return;