diff --git a/src/app/utils/commonClientUtil.ts b/src/app/utils/commonClientUtil.ts
new file mode 100644
index 0000000..363f1e8
--- /dev/null
+++ b/src/app/utils/commonClientUtil.ts
@@ -0,0 +1,32 @@
+import { useTranslation } from "react-i18next";
+
+export const minutesToHoursMinutes = (minutes: number): string => {
+    const { t } = useTranslation("common");
+    const defaultHrStr = "hr"
+    const defaultMinStr = "min"
+
+    if (minutes == 0) {
+        return `0 ${defaultMinStr}`
+    }
+
+    const hrs = Math.floor(minutes / 60)
+    const mins = minutes % 60
+
+    let finalHrStr: string = ""
+    if (hrs > 1) {
+        finalHrStr = `${hrs} ` + t(`${defaultHrStr}s`)
+    } else if (hrs == 1) {
+        finalHrStr = `1 ` + t(`${defaultHrStr}`)
+    }
+
+    let finalMinStr: string = ""
+    if (mins > 1) {
+        finalMinStr = `${mins} ` + t(`${defaultMinStr}s`)
+    } else if (mins == 1) {
+        finalMinStr = `1 ` + t(`${defaultMinStr}`)
+    }
+
+    const colon = finalHrStr.length > 0 && finalMinStr.length > 0 ? ":" : ""
+
+    return `${finalHrStr} ${colon} ${finalMinStr}`.trim()
+}
\ No newline at end of file
diff --git a/src/app/utils/formatUtil.ts b/src/app/utils/formatUtil.ts
index 839804d..421a473 100644
--- a/src/app/utils/formatUtil.ts
+++ b/src/app/utils/formatUtil.ts
@@ -10,7 +10,6 @@ import {
   take,
 } from "lodash";
 import { Box, BoxProps } from "@mui/material";
-import { useTranslation } from "react-i18next";
 
 export const manhourFormatter = new Intl.NumberFormat("en-HK", {
   minimumFractionDigits: 2,
@@ -69,37 +68,6 @@ export const dayjsToDateString = (date: Dayjs) => {
   return date.format(OUTPUT_DATE_FORMAT);
 };
 
-export const minutesToHoursMinutes = (minutes: number): string => {
-  const { t } = useTranslation("common");
-  const defaultHrStr = "hr"
-  const defaultMinStr = "min"
-
-  if (minutes == 0) {
-    return `0 ${defaultMinStr}`
-  }
-
-  const hrs = Math.floor(minutes / 60)
-  const mins = minutes % 60
-
-  let finalHrStr: string = ""
-  if (hrs > 1) {
-    finalHrStr = `${hrs} `+ t(`${defaultHrStr}s`)
-  } else if (hrs == 1) {
-    finalHrStr = `1 `+ t(`${defaultHrStr}`)
-  }
-
-  let finalMinStr: string = ""
-  if (mins > 1) {
-    finalMinStr = `${mins} ` + t(`${defaultMinStr}s`)
-  } else if (mins == 1) {
-    finalMinStr = `1 ` + t(`${defaultMinStr}`)
-  }
-
-  const colon = finalHrStr.length > 0 && finalMinStr.length > 0 ? ":" : ""
-
-  return `${finalHrStr} ${colon} ${finalMinStr}`.trim()
-}
-
 export const stockInLineStatusMap: { [status: string]: number } = {
   draft: 0,
   pending: 1,
diff --git a/src/components/DetailedScheduleDetail/ProdTimeColumn.tsx b/src/components/DetailedScheduleDetail/ProdTimeColumn.tsx
index 2bb967a..435e144 100644
--- a/src/components/DetailedScheduleDetail/ProdTimeColumn.tsx
+++ b/src/components/DetailedScheduleDetail/ProdTimeColumn.tsx
@@ -1,5 +1,5 @@
 import { DetailedProdScheduleLineProdTimeResult } from "@/app/api/scheduling"
-import { minutesToHoursMinutes } from "@/app/utils/formatUtil";
+import { minutesToHoursMinutes } from "@/app/utils/commonClientUtil";
 import { Box, Divider, Grid, Typography } from "@mui/material";
 import React, { useMemo } from "react"
 import { useTranslation } from "react-i18next";
diff --git a/src/components/DetailedScheduleDetail/ViewByFGDetails.tsx b/src/components/DetailedScheduleDetail/ViewByFGDetails.tsx
index 77f5620..7c39ab2 100644
--- a/src/components/DetailedScheduleDetail/ViewByFGDetails.tsx
+++ b/src/components/DetailedScheduleDetail/ViewByFGDetails.tsx
@@ -14,7 +14,7 @@ import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Box, Grid, Tooltip, Typography } from "@mui/material";
 import { GridApiCommunity } from "@mui/x-data-grid/internals";
-import { decimalFormatter, integerFormatter, minutesToHoursMinutes } from "@/app/utils/formatUtil";
+import { decimalFormatter, integerFormatter } from "@/app/utils/formatUtil";
 import { DetailedProdScheduleLineResult, DetailedProdScheduleResult, ScheduleType } from "@/app/api/scheduling";
 import ProdTimeColumn from "./ProdTimeColumn";
 import ScheduleTable, { Column } from "../ScheduleTable/ScheduleTable";