Main usage report latest

app/controllers/api/v2/usage_reports_controller.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+
+# API endpoint for generating usage reports
+class Api::V2::UsageReportsController < ActionController::Base
+  def create
+    authorize! :create, UsageReport
+    @export = UsageReportService.build(export_params, current_user)
+    @export.mark_started!
+    kpi_params = { 'start_date' => export_params[:selected_from_date], 'end_date' => export_params[:selected_to_date] }
+    UsageReportService.enqueue(@export, export_params[:password], kpi_params)
+    render :create
+  end
+
+  private
+
+  def export_params
+    @export_params ||= params.require(:data).permit(
+      :record_type, :export_format,
+      :order, :query, :file_name, :password, :selected_from_date, :selected_to_date,
+      { custom_export_params: {} }, { filters: {} }, :match_criteria
+    )
+  end
+end

app/javascript/components/action-dialog/component.jsx

@@ -41,7 +41,8 @@ function ActionDialog({
   successHandler,
   fetchAction,
   fetchArgs = [],
-  fetchLoadingPath
+  fetchLoadingPath,
+  fullWidth
 }) {
   const dispatch = useDispatch();
 
@@ -137,7 +138,7 @@ function ActionDialog({
       <Dialog
         open={open}
         onClose={onCloseDialog}
-        fullWidth
+        fullWidth={typeof fullWidth === "boolean" ? fullWidth : true} // Override only if undefined
         maxWidth={maxSize || "sm"}
         aria-labelledby="action-dialog-title"
         aria-describedby="action-dialog-description"
@@ -187,6 +188,7 @@ ActionDialog.propTypes = {
   fetchAction: PropTypes.func,
   fetchArgs: PropTypes.array,
   fetchLoadingPath: PropTypes.array,
+  fullWidth: PropTypes.bool,
   hideIcon: PropTypes.bool,
   maxSize: PropTypes.string,
   omitCloseAfterSuccess: PropTypes.bool,

app/javascript/components/form/components/form-section-field.jsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
-
 import PropTypes from "prop-types";
-import { cx } from "@emotion/css";
+import clsx from "clsx";
 
 import { ConditionalWrapper } from "../../../libs";
 import useFormField from "../use-form-field";
@@ -10,7 +9,7 @@ import formComponent from "../utils/form-component";
 
 import css from "./styles.css";
 
-function FormSectionField({ checkErrors, field, formMethods, formMode, disableUnderline = false }) {
+function FormSectionField({ checkErrors, field, formMethods, formMode, disableUnderline }) {
   const { errors } = formMethods;
   const {
     Field,
@@ -24,7 +23,7 @@ function FormSectionField({ checkErrors, field, formMethods, formMode, disableUn
     optionSelector
   } = useFormField(field, { checkErrors, errors, formMode, disableUnderline });
 
-  const classes = cx(css.field, {
+  const classes = clsx(css.field, {
     [css.readonly]: formMode.isShow
   });
 
@@ -49,7 +48,7 @@ function FormSectionField({ checkErrors, field, formMethods, formMode, disableUn
   return (
     handleVisibility() || (
       <ConditionalWrapper condition={Boolean(WrapWithComponent)} wrapper={WrapWithComponent}>
-        <div className={classes} data-testid="form-section-field">
+        <div className={`${classes} ${css[commonInputProps.id]}`} data-testid="form-section-field">
           {renderField}
         </div>
       </ConditionalWrapper>
@@ -59,6 +58,10 @@ function FormSectionField({ checkErrors, field, formMethods, formMode, disableUn
 
 FormSectionField.displayName = "FormSectionField";
 
+FormSectionField.defaultProps = {
+  disableUnderline: false
+};
+
 FormSectionField.propTypes = {
   checkErrors: PropTypes.object,
   disableUnderline: PropTypes.bool,

app/javascript/components/form/records.js

@@ -91,7 +91,8 @@ export const FieldRecord = Record({
   type: "",
   visible: null,
   watchedInputs: null,
-  wrapWithComponent: null
+  wrapWithComponent: null,
+  allowFullWidth: true
 });
 
 export const FormSectionRecord = Record({

app/javascript/components/form/use-form-field.js

@@ -1,5 +1,4 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
-
 import get from "lodash/get";
 import { useMemo } from "react";
 
@@ -104,7 +103,8 @@ export default (field, { checkErrors, errors, formMode, disableUnderline }) => {
     showDeleteAction,
     showDisableOption,
     maxOptionsAllowed,
-    optionFieldName
+    optionFieldName,
+    allowFullWidth
   } = field;
 
   const i18n = useI18n();
@@ -151,7 +151,7 @@ export default (field, { checkErrors, errors, formMode, disableUnderline }) => {
     disabled: inputDisabled,
     error: inputError,
     format: dateFormat,
-    fullWidth: true,
+    fullWidth: allowFullWidth !== undefined ? allowFullWidth : true,
     helperText: inputHelperTxt,
     label: inputLabel,
     name,

app/javascript/components/form/utils/form-submission.js

@@ -16,17 +16,18 @@ export const submitHandler = ({
   onSubmit,
   submitAllFields,
   submitAllArrayData = false,
-  message = null,
+  message,
   submitAlways
 }) => {
   // formState needs to be called here otherwise touched will not work.
   // https://github.com/react-hook-form/react-hook-form-website/issues/154
   const changedFormData = touchedFormData(dirtyFields, data, isEdit, initialValues, submitAllArrayData);
+  const snackbarMessage = message !== undefined ? message : null;
 
   if (isEmpty(changedFormData) && !submitAlways) {
     return dispatch(
-      enqueueSnackbar(message, {
-        ...(!message && { messageKey: "messages.no_changes" }),
+      enqueueSnackbar(snackbarMessage, {
+        ...(!snackbarMessage && { messageKey: "messages.no_changes" }),
         type: "error"
       })
     );

app/javascript/components/pages/admin/index.js

@@ -19,3 +19,4 @@ export { default as ConfigurationsList } from "./configurations-list";
 export { default as ConfigurationsForm } from "./configurations-form";
 export { default as LocationsList } from "./locations-list";
 export { default as CodeOfConduct } from "./code-of-conduct";
+export { default as UsageReports } from "./usage-reports";

app/javascript/components/pages/admin/index.unit.test.js

@@ -25,7 +25,8 @@ describe("pages/admin - index", () => {
       "UserGroupsForm",
       "UserGroupsList",
       "UsersForm",
-      "UsersList"
+      "UsersList",
+      "UsageReports"
     ].forEach(property => {
       expect(indexValues).to.have.property(property);
       delete indexValues[property];

app/javascript/components/pages/admin/roles-form/constants.js

@@ -38,7 +38,8 @@ export const RESOURCES = [
   "activity_log",
   "matching_configuration",
   "duplicate",
-  "kpi"
+  "kpi",
+  "usage_report"
 ];
 
 export const ROLES_PERMISSIONS = Object.freeze({

app/javascript/components/pages/admin/usage-reports/constants.js

@@ -0,0 +1,3 @@
+const NAME = "UsageReports";
+
+export default NAME;

app/javascript/components/pages/admin/usage-reports/container.jsx

@@ -0,0 +1,41 @@
+// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+
+import { SwapVert } from "@mui/icons-material";
+
+import { useI18n } from "../../../i18n";
+import { PageHeading, PageContent } from "../../../page";
+import { useDialog } from "../../../action-dialog";
+import { FormAction } from "../../../form";
+
+import UsageReport from "./export/component";
+import { USAGE_REPORT_DIALOG } from "./export/constants";
+
+function Container() {
+  const i18n = useI18n();
+  const { setDialog, pending, dialogOpen, setDialogPending, dialogClose } = useDialog(USAGE_REPORT_DIALOG);
+  const handleExport = dialog => setDialog({ dialog, open: true });
+  const handleClickExport = () => handleExport(USAGE_REPORT_DIALOG);
+
+  return (
+    <>
+      <PageHeading title={i18n.t("settings.navigation.usage_reports")}>
+        <FormAction actionHandler={handleClickExport} text={i18n.t("buttons.export")} startIcon={<SwapVert />} />
+      </PageHeading>
+      <PageContent>
+        <UsageReport
+          i18n={i18n}
+          open={dialogOpen}
+          pending={pending}
+          close={dialogClose}
+          setPending={setDialogPending}
+        />
+      </PageContent>
+    </>
+  );
+}
+
+Container.displayName = "UsageReports";
+
+Container.propTypes = {};
+
+export default Container;

app/javascript/components/pages/admin/usage-reports/export/component.jsx

@@ -0,0 +1,112 @@
+// Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+
+import PropTypes from "prop-types";
+import { useDispatch } from "react-redux";
+import { object, string, date } from "yup";
+
+import ActionDialog from "../../../../action-dialog";
+import Form from "../../../../form";
+import { saveUsageExport } from "../../../../record-actions/exports/action-creators";
+import { formatFileName } from "../../../../record-actions/exports/utils";
+import { toServerDateFormat } from "../../../../../libs";
+
+import { NAME, FORM_ID } from "./constants";
+import { form } from "./form";
+import css from "./style.css";
+
+function Component({ close, i18n, open, pending, setPending }) {
+  const dispatch = useDispatch();
+  const dialogPending = typeof pending === "object" ? pending.get("pending") : pending;
+  const message = undefined;
+
+  const validationSchema = object({
+    fromDate: date()
+      .transform(
+        originalValue => (originalValue === "" ? null : originalValue) // transform empty string to null
+      )
+      .required("From Date is required")
+      .typeError("From Date must be a valid date"),
+    toDate: date()
+      .transform(
+        originalValue => (originalValue === "" ? null : originalValue) // transform empty string to null
+      )
+      .required("To Date is required")
+      .typeError("To Date must be a valid date") // catch invalid date format
+      .test({
+        name: "is-after",
+        message: "To Date must be greater than From Date",
+        test: (value, context) => {
+          const { fromDate } = context.parent;
+
+          return !fromDate || !value || value > fromDate;
+        }
+      }),
+    file_name: string().required("File name is required")
+  });
+
+  // Form submission
+  const onSubmit = getData => {
+    const fileName = formatFileName(getData.file_name, "xlsx");
+    const defaultBody = {
+      export_format: "xlsx",
+      record_type: "usage_report",
+      file_name: fileName,
+      selected_from_date: toServerDateFormat(getData.fromDate),
+      selected_to_date: toServerDateFormat(getData.toDate)
+    };
+    const data = { ...defaultBody };
+
+    setPending(true);
+    dispatch(
+      saveUsageExport(
+        { data },
+        i18n.t(message || "exports.queueing", {
+          file_name: fileName ? `: ${fileName}.` : "."
+        }),
+        i18n.t("exports.go_to_exports")
+      )
+    );
+  };
+
+  const handleCustomClose = () => {
+    close();
+  };
+
+  return (
+    <ActionDialog
+      open={open}
+      confirmButtonProps={{
+        form: FORM_ID,
+        type: "submit"
+      }}
+      cancelHandler={handleCustomClose}
+      dialogTitle={i18n.t("usage_report.label")}
+      confirmButtonLabel={i18n.t("buttons.export")}
+      pending={dialogPending}
+      omitCloseAfterSuccess
+      fullWidth={false}
+    >
+      <Form
+        useCancelPrompt
+        formID={FORM_ID}
+        mode="new"
+        formSections={form(i18n)}
+        onSubmit={onSubmit}
+        formClassName={`${css["usage-reports-form"]}`}
+        validations={validationSchema}
+      />
+    </ActionDialog>
+  );
+}
+
+Component.displayName = NAME;
+
+Component.propTypes = {
+  close: PropTypes.func,
+  i18n: PropTypes.object,
+  open: PropTypes.bool,
+  pending: PropTypes.bool,
+  setPending: PropTypes.func
+};
+
+export default Component;

app/javascript/components/pages/admin/usage-reports/export/constants.js

@@ -0,0 +1,4 @@
+export const NAME = "UsageReport";
+export const USAGE_REPORT_DIALOG = "UsageReportDialog";
+export const EXPORT_TYPES = Object.freeze({ EXCEL: "xlsx" });
+export const FORM_ID = "export-users-form";

app/javascript/components/pages/admin/usage-reports/export/form.js

@@ -0,0 +1,32 @@
+/* eslint-disable import/prefer-default-export */
+
+import { fromJS } from "immutable";
+
+import { FieldRecord, FormSectionRecord, TEXT_FIELD, DATE_FIELD } from "../../../../form";
+
+export const form = i18n => {
+  return fromJS([
+    FormSectionRecord({
+      unique_id: "import_locations",
+      fields: [
+        FieldRecord({
+          display_name: `${i18n.t("key_performance_indicators.date_range_dialog.from")}*`,
+          name: "fromDate",
+          type: DATE_FIELD,
+          allowFullWidth: false
+        }),
+        FieldRecord({
+          display_name: `${i18n.t("key_performance_indicators.date_range_dialog.to")}*`,
+          name: "toDate",
+          type: DATE_FIELD,
+          allowFullWidth: false
+        }),
+        FieldRecord({
+          name: "file_name",
+          display_name: `${i18n.t("usage_report.file_name")}*`,
+          type: TEXT_FIELD
+        })
+      ]
+    })
+  ]);
+};

app/javascript/components/pages/admin/usage-reports/export/index.js

@@ -0,0 +1 @@
+export { default } from "./component";

app/javascript/components/pages/admin/usage-reports/export/style.css

@@ -0,0 +1,18 @@
+.usage-reports-form {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); 
+  gap: 16px;   
+}
+
+.usage-reports-form>div:nth-child(3) {
+  grid-column: span 2; 
+}
+
+
+
+
+
+
+
+
+