From 15cc852cf0e105057e5bfcd0034831fa4f8a6f2e Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 27 Mar 2025 04:09:31 +0000
Subject: [PATCH 1/9] feat: rotate pdf

---
 .idea/workspace.xml                           | 210 +++++++--------
 src/pages/tools/pdf/index.ts                  |   3 +-
 src/pages/tools/pdf/rotate-pdf/index.tsx      | 242 ++++++++++++++++++
 src/pages/tools/pdf/rotate-pdf/meta.ts        |  14 +
 .../pdf/rotate-pdf/rotate-pdf.service.test.ts |  36 +++
 src/pages/tools/pdf/rotate-pdf/service.ts     |  82 ++++++
 src/pages/tools/pdf/rotate-pdf/types.ts       |   7 +
 7 files changed, 489 insertions(+), 105 deletions(-)
 create mode 100644 src/pages/tools/pdf/rotate-pdf/index.tsx
 create mode 100644 src/pages/tools/pdf/rotate-pdf/meta.ts
 create mode 100644 src/pages/tools/pdf/rotate-pdf/rotate-pdf.service.test.ts
 create mode 100644 src/pages/tools/pdf/rotate-pdf/service.ts
 create mode 100644 src/pages/tools/pdf/rotate-pdf/types.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 8bf2251..06cc430 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,13 +4,14 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: result file name">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: text result extensions">
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/index.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/meta.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/rotate-pdf.service.test.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/service.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/types.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/csv/csv-to-json/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/csv/csv-to-json/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/csv/csv-to-xml/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/csv/csv-to-xml/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/minify/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/minify/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/prettify/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/prettify/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/stringify/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/stringify/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/pdf/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/pdf/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -33,72 +34,72 @@
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="RESET_MODE" value="HARD" />
   </component>
-  <component name="GitHubPullRequestSearchHistory"><![CDATA[{
-  "history": [
+  <component name="GitHubPullRequestSearchHistory">{
+  &quot;history&quot;: [
     {
-      "assignee": "iib0011"
+      &quot;assignee&quot;: &quot;iib0011&quot;
     },
     {
-      "state": "OPEN"
+      &quot;state&quot;: &quot;OPEN&quot;
     }
   ],
-  "lastFilter": {
-    "state": "OPEN"
+  &quot;lastFilter&quot;: {
+    &quot;state&quot;: &quot;OPEN&quot;
   }
-}]]></component>
-  <component name="GitHubPullRequestState"><![CDATA[{
-  "prStates": [
+}</component>
+  <component name="GitHubPullRequestState">{
+  &quot;prStates&quot;: [
     {
-      "id": {
-        "id": "PR_kwDOMJIfts51PkS9",
-        "number": 22
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts51PkS9&quot;,
+        &quot;number&quot;: 22
       },
-      "lastSeen": 1741207144695
+      &quot;lastSeen&quot;: 1741207144695
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6NiNYl",
-        "number": 32
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6NiNYl&quot;,
+        &quot;number&quot;: 32
       },
-      "lastSeen": 1741209723869
+      &quot;lastSeen&quot;: 1741209723869
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6Nheyd",
-        "number": 31
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6Nheyd&quot;,
+        &quot;number&quot;: 31
       },
-      "lastSeen": 1741213371410
+      &quot;lastSeen&quot;: 1741213371410
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6NmRBs",
-        "number": 33
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6NmRBs&quot;,
+        &quot;number&quot;: 33
       },
-      "lastSeen": 1741282429036
+      &quot;lastSeen&quot;: 1741282429036
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts5zyFTs",
-        "number": 15
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts5zyFTs&quot;,
+        &quot;number&quot;: 15
       },
-      "lastSeen": 1741535540953
+      &quot;lastSeen&quot;: 1741535540953
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6QQB3c",
-        "number": 59
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6QQB3c&quot;,
+        &quot;number&quot;: 59
       },
-      "lastSeen": 1743018960900
+      &quot;lastSeen&quot;: 1743018960900
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6QMPEg",
-        "number": 58
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6QMPEg&quot;,
+        &quot;number&quot;: 58
       },
-      "lastSeen": 1743019452983
+      &quot;lastSeen&quot;: 1743019452983
     }
   ]
-}]]></component>
+}</component>
   <component name="GithubPullRequestsUISettings">{
   &quot;selectedUrlAndAccountId&quot;: {
     &quot;url&quot;: &quot;https://github.com/iib0011/omni-tools.git&quot;,
@@ -127,55 +128,55 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_ADD_EXTERNAL_FILES": "true",
-    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    "Docker.Dockerfile build.executor": "Run",
-    "Docker.Dockerfile.executor": "Run",
-    "Playwright.Create transparent PNG.should make png color transparent.executor": "Run",
-    "Playwright.JoinText Component.executor": "Run",
-    "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "RunOnceActivity.git.unshallow": "true",
-    "Vitest.compute function (1).executor": "Run",
-    "Vitest.compute function.executor": "Run",
-    "Vitest.mergeText.executor": "Run",
-    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
-    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
-    "Vitest.parsePageRanges.executor": "Run",
-    "Vitest.removeDuplicateLines function.executor": "Run",
-    "Vitest.removeDuplicateLines function.newlines option.executor": "Run",
-    "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
-    "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
-    "Vitest.replaceText function.executor": "Run",
-    "git-widget-placeholder": "main",
-    "ignore.virus.scanning.warn.message": "true",
-    "kotlin-language-version-configured": "true",
-    "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/components/input",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "npm.build.executor": "Run",
-    "npm.dev.executor": "Run",
-    "npm.lint.executor": "Run",
-    "npm.prebuild.executor": "Run",
-    "npm.script:create:tool.executor": "Run",
-    "npm.test.executor": "Run",
-    "npm.test:e2e.executor": "Run",
-    "npm.test:e2e:run.executor": "Run",
-    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    "project.structure.last.edited": "Problems",
-    "project.structure.proportion": "0.0",
-    "project.structure.side.proportion": "0.2",
-    "settings.editor.selected.configurable": "refactai_advanced_settings",
-    "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
+    &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
+    &quot;Playwright.Create transparent PNG.should make png color transparent.executor&quot;: &quot;Run&quot;,
+    &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
+    &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.parsePageRanges.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor&quot;: &quot;Run&quot;,
+    &quot;Vitest.replaceText function.executor&quot;: &quot;Run&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src/components/input&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;npm.build.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;npm.lint.executor&quot;: &quot;Run&quot;,
+    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
+    &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
+    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;refactai_advanced_settings&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -365,15 +366,8 @@
       <workItem from="1741547560596" duration="1671000" />
       <workItem from="1741567442768" duration="14127000" />
       <workItem from="1741971589699" duration="371000" />
-      <workItem from="1743018497879" duration="2495000" />
-    </task>
-    <task id="LOCAL-00120" summary="fix: bg">
-      <option name="closed" value="true" />
-      <created>1740503419102</created>
-      <option name="number" value="00120" />
-      <option name="presentableId" value="LOCAL-00120" />
-      <option name="project" value="LOCAL" />
-      <updated>1740503419102</updated>
+      <workItem from="1743018497879" duration="3895000" />
+      <workItem from="1743047367993" duration="986000" />
     </task>
     <task id="LOCAL-00121" summary="fix: bg">
       <option name="closed" value="true" />
@@ -759,7 +753,15 @@
       <option name="project" value="LOCAL" />
       <updated>1743020690384</updated>
     </task>
-    <option name="localTasksCounter" value="169" />
+    <task id="LOCAL-00169" summary="chore: text result extensions">
+      <option name="closed" value="true" />
+      <created>1743022260639</created>
+      <option name="number" value="00169" />
+      <option name="presentableId" value="LOCAL-00169" />
+      <option name="project" value="LOCAL" />
+      <updated>1743022260639</updated>
+    </task>
+    <option name="localTasksCounter" value="170" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -806,7 +808,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="fix: tsc" />
     <MESSAGE value="style: optimizations" />
     <MESSAGE value="fix: replace text service" />
     <MESSAGE value="chore: smooth scroll for use this tool and examles" />
@@ -831,7 +832,8 @@
     <MESSAGE value="feat: split pdf" />
     <MESSAGE value="fix: typo" />
     <MESSAGE value="chore: result file name" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: result file name" />
+    <MESSAGE value="chore: text result extensions" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: text result extensions" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/tools/pdf/index.ts b/src/pages/tools/pdf/index.ts
index e93a8c1..380e593 100644
--- a/src/pages/tools/pdf/index.ts
+++ b/src/pages/tools/pdf/index.ts
@@ -1,4 +1,5 @@
+import { tool as pdfRotatePdf } from './rotate-pdf/meta';
 import { meta as splitPdfMeta } from './split-pdf/meta';
 import { DefinedTool } from '@tools/defineTool';
 
-export const pdfTools: DefinedTool[] = [splitPdfMeta];
+export const pdfTools: DefinedTool[] = [splitPdfMeta, pdfRotatePdf];
diff --git a/src/pages/tools/pdf/rotate-pdf/index.tsx b/src/pages/tools/pdf/rotate-pdf/index.tsx
new file mode 100644
index 0000000..4152269
--- /dev/null
+++ b/src/pages/tools/pdf/rotate-pdf/index.tsx
@@ -0,0 +1,242 @@
+import { Box, FormControlLabel, Switch, Typography } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolPdfInput from '@components/input/ToolPdfInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { PDFDocument } from 'pdf-lib';
+import { InitialValuesType, RotationAngle } from './types';
+import { parsePageRanges, rotatePdf } from './service';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+
+const initialValues: InitialValuesType = {
+  rotationAngle: 90,
+  applyToAllPages: true,
+  pageRanges: ''
+};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Rotate All Pages 90°',
+    description: 'Rotate all pages in the document 90 degrees clockwise',
+    sampleText: '',
+    sampleResult: '',
+    sampleOptions: {
+      rotationAngle: 90,
+      applyToAllPages: true,
+      pageRanges: ''
+    }
+  },
+  {
+    title: 'Rotate Specific Pages 180°',
+    description: 'Rotate only pages 1 and 3 by 180 degrees',
+    sampleText: '',
+    sampleResult: '',
+    sampleOptions: {
+      rotationAngle: 180,
+      applyToAllPages: false,
+      pageRanges: '1,3'
+    }
+  },
+  {
+    title: 'Rotate Page Range 270°',
+    description: 'Rotate pages 2 through 5 by 270 degrees',
+    sampleText: '',
+    sampleResult: '',
+    sampleOptions: {
+      rotationAngle: 270,
+      applyToAllPages: false,
+      pageRanges: '2-5'
+    }
+  }
+];
+
+export default function RotatePdf({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const [totalPages, setTotalPages] = useState<number>(0);
+  const [pageRangePreview, setPageRangePreview] = useState<string>('');
+
+  // Get the total number of pages when a PDF is uploaded
+  useEffect(() => {
+    const getPdfInfo = async () => {
+      if (!input) {
+        setTotalPages(0);
+        return;
+      }
+
+      try {
+        const arrayBuffer = await input.arrayBuffer();
+        const pdf = await PDFDocument.load(arrayBuffer);
+        setTotalPages(pdf.getPageCount());
+      } catch (error) {
+        console.error('Error getting PDF info:', error);
+        setTotalPages(0);
+      }
+    };
+
+    getPdfInfo();
+  }, [input]);
+
+  const onValuesChange = (values: InitialValuesType) => {
+    const { pageRanges, applyToAllPages } = values;
+
+    if (applyToAllPages) {
+      setPageRangePreview(
+        totalPages > 0 ? `All ${totalPages} pages will be rotated` : ''
+      );
+      return;
+    }
+
+    if (!totalPages || !pageRanges?.trim()) {
+      setPageRangePreview('');
+      return;
+    }
+
+    try {
+      const count = parsePageRanges(pageRanges, totalPages).length;
+      setPageRangePreview(
+        `${count} page${count !== 1 ? 's' : ''} will be rotated`
+      );
+    } catch (error) {
+      setPageRangePreview('');
+    }
+  };
+
+  const compute = async (values: InitialValuesType, input: File | null) => {
+    if (!input) return;
+
+    try {
+      setIsProcessing(true);
+      const rotatedPdf = await rotatePdf(input, values);
+      setResult(rotatedPdf);
+    } catch (error) {
+      throw new Error('Error rotating PDF: ' + error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  const angleOptions: { value: RotationAngle; label: string }[] = [
+    { value: 90, label: '90° Clockwise' },
+    { value: 180, label: '180° (Upside down)' },
+    { value: 270, label: '270° (90° Counter-clockwise)' }
+  ];
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      setInput={setInput}
+      initialValues={initialValues}
+      compute={compute}
+      exampleCards={exampleCards}
+      inputComponent={
+        <ToolPdfInput
+          value={input}
+          onChange={setInput}
+          accept={['application/pdf']}
+          title={'Input PDF'}
+        />
+      }
+      resultComponent={
+        <ToolFileResult
+          title={'Rotated PDF'}
+          value={result}
+          extension={'pdf'}
+          loading={isProcessing}
+          loadingText={'Rotating pages'}
+        />
+      }
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Rotation Settings',
+          component: (
+            <Box>
+              <Typography variant="subtitle2" sx={{ mb: 1 }}>
+                Rotation Angle
+              </Typography>
+              {angleOptions.map((angleOption) => (
+                <SimpleRadio
+                  key={angleOption.value}
+                  title={angleOption.label}
+                  checked={values.rotationAngle === angleOption.value}
+                  onClick={() => {
+                    updateField('rotationAngle', angleOption.value);
+                  }}
+                />
+              ))}
+
+              <Box sx={{ mt: 2 }}>
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={values.applyToAllPages}
+                      onChange={(e) => {
+                        updateField('applyToAllPages', e.target.checked);
+                      }}
+                    />
+                  }
+                  label="Apply to all pages"
+                />
+              </Box>
+
+              {!values.applyToAllPages && (
+                <Box sx={{ mt: 2 }}>
+                  {totalPages > 0 && (
+                    <Typography variant="body2" sx={{ mb: 1 }}>
+                      PDF has {totalPages} page{totalPages !== 1 ? 's' : ''}
+                    </Typography>
+                  )}
+                  <TextFieldWithDesc
+                    value={values.pageRanges}
+                    onOwnChange={(val) => {
+                      updateField('pageRanges', val);
+                    }}
+                    description={
+                      'Enter page numbers or ranges separated by commas (e.g., 1,3,5-7)'
+                    }
+                    placeholder={'e.g., 1,5-8'}
+                  />
+                  {pageRangePreview && (
+                    <Typography
+                      variant="body2"
+                      sx={{ mt: 1, color: 'primary.main' }}
+                    >
+                      {pageRangePreview}
+                    </Typography>
+                  )}
+                </Box>
+              )}
+            </Box>
+          )
+        }
+      ]}
+      onValuesChange={onValuesChange}
+      toolInfo={{
+        title: 'How to Use the Rotate PDF Tool',
+        description: `This tool allows you to rotate pages in a PDF document. You can rotate all pages or specify individual pages to rotate.
+
+Choose a rotation angle:
+- 90° Clockwise
+- 180° (Upside down)
+- 270° (90° Counter-clockwise)
+
+To rotate specific pages:
+1. Uncheck "Apply to all pages"
+2. Enter page numbers or ranges separated by commas (e.g., 1,3,5-7)
+
+Examples:
+- "1,5,9" rotates pages 1, 5, and 9
+- "1-5" rotates pages 1 through 5
+- "1,3-5,8-10" rotates pages 1, 3, 4, 5, 8, 9, and 10
+
+${longDescription}`
+      }}
+    />
+  );
+}
diff --git a/src/pages/tools/pdf/rotate-pdf/meta.ts b/src/pages/tools/pdf/rotate-pdf/meta.ts
new file mode 100644
index 0000000..8dc71a1
--- /dev/null
+++ b/src/pages/tools/pdf/rotate-pdf/meta.ts
@@ -0,0 +1,14 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('pdf', {
+  name: 'Rotate PDF',
+  path: 'rotate-pdf',
+  icon: 'carbon:rotate',
+  description: 'Rotate PDF pages by 90, 180, or 270 degrees',
+  shortDescription: 'Rotate pages in a PDF document',
+  keywords: ['pdf', 'rotate', 'rotation', 'document', 'pages', 'orientation'],
+  longDescription:
+    'Change the orientation of PDF pages by rotating them 90, 180, or 270 degrees. Useful for fixing incorrectly scanned documents or preparing PDFs for printing.',
+  component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/pdf/rotate-pdf/rotate-pdf.service.test.ts b/src/pages/tools/pdf/rotate-pdf/rotate-pdf.service.test.ts
new file mode 100644
index 0000000..4fb2694
--- /dev/null
+++ b/src/pages/tools/pdf/rotate-pdf/rotate-pdf.service.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { parsePageRanges } from './service';
+
+describe('rotate-pdf', () => {
+  describe('parsePageRanges', () => {
+    it('should return all pages when pageRanges is empty', () => {
+      const result = parsePageRanges('', 5);
+      expect(result).toEqual([1, 2, 3, 4, 5]);
+    });
+
+    it('should parse single page numbers', () => {
+      const result = parsePageRanges('1,3,5', 5);
+      expect(result).toEqual([1, 3, 5]);
+    });
+
+    it('should parse page ranges', () => {
+      const result = parsePageRanges('2-4', 5);
+      expect(result).toEqual([2, 3, 4]);
+    });
+
+    it('should parse mixed page numbers and ranges', () => {
+      const result = parsePageRanges('1,3-5', 5);
+      expect(result).toEqual([1, 3, 4, 5]);
+    });
+
+    it('should ignore invalid page numbers', () => {
+      const result = parsePageRanges('1,8,3', 5);
+      expect(result).toEqual([1, 3]);
+    });
+
+    it('should handle whitespace', () => {
+      const result = parsePageRanges(' 1, 3 - 5 ', 5);
+      expect(result).toEqual([1, 3, 4, 5]);
+    });
+  });
+});
diff --git a/src/pages/tools/pdf/rotate-pdf/service.ts b/src/pages/tools/pdf/rotate-pdf/service.ts
new file mode 100644
index 0000000..ee72c63
--- /dev/null
+++ b/src/pages/tools/pdf/rotate-pdf/service.ts
@@ -0,0 +1,82 @@
+import { degrees, PDFDocument } from 'pdf-lib';
+import { InitialValuesType } from './types';
+
+/**
+ * Parses a page range string and returns an array of page numbers
+ * @param pageRangeStr String like "1,3-5,7" to extract pages 1, 3, 4, 5, and 7
+ * @param totalPages Total number of pages in the PDF
+ * @returns Array of page numbers to extract
+ */
+export function parsePageRanges(
+  pageRangeStr: string,
+  totalPages: number
+): number[] {
+  if (!pageRangeStr.trim()) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const pageNumbers = new Set<number>();
+  const ranges = pageRangeStr.split(',');
+
+  for (const range of ranges) {
+    const trimmedRange = range.trim();
+
+    if (trimmedRange.includes('-')) {
+      const [start, end] = trimmedRange.split('-').map(Number);
+      if (!isNaN(start) && !isNaN(end)) {
+        // Handle both forward and reversed ranges
+        const normalizedStart = Math.min(start, end);
+        const normalizedEnd = Math.max(start, end);
+
+        for (
+          let i = Math.max(1, normalizedStart);
+          i <= Math.min(totalPages, normalizedEnd);
+          i++
+        ) {
+          pageNumbers.add(i);
+        }
+      }
+    } else {
+      const pageNum = parseInt(trimmedRange, 10);
+      if (!isNaN(pageNum) && pageNum >= 1 && pageNum <= totalPages) {
+        pageNumbers.add(pageNum);
+      }
+    }
+  }
+
+  return [...pageNumbers].sort((a, b) => a - b);
+}
+
+/**
+ * Rotates pages in a PDF file
+ * @param pdfFile The input PDF file
+ * @param options Options including rotation angle and page selection
+ * @returns Promise resolving to a new PDF file with rotated pages
+ */
+export async function rotatePdf(
+  pdfFile: File,
+  options: InitialValuesType
+): Promise<File> {
+  const { rotationAngle, applyToAllPages, pageRanges } = options;
+
+  const arrayBuffer = await pdfFile.arrayBuffer();
+  const pdfDoc = await PDFDocument.load(arrayBuffer);
+  const totalPages = pdfDoc.getPageCount();
+
+  // Determine which pages to rotate
+  const pagesToRotate = applyToAllPages
+    ? Array.from({ length: totalPages }, (_, i) => i + 1)
+    : parsePageRanges(pageRanges, totalPages);
+
+  // Apply rotation to selected pages
+  for (const pageNum of pagesToRotate) {
+    const page = pdfDoc.getPage(pageNum - 1);
+    page.setRotation(degrees(rotationAngle));
+  }
+
+  // Save the modified PDF
+  const modifiedPdfBytes = await pdfDoc.save();
+  const newFileName = pdfFile.name.replace('.pdf', '-rotated.pdf');
+
+  return new File([modifiedPdfBytes], newFileName, { type: 'application/pdf' });
+}
diff --git a/src/pages/tools/pdf/rotate-pdf/types.ts b/src/pages/tools/pdf/rotate-pdf/types.ts
new file mode 100644
index 0000000..c32bbc5
--- /dev/null
+++ b/src/pages/tools/pdf/rotate-pdf/types.ts
@@ -0,0 +1,7 @@
+export type RotationAngle = 90 | 180 | 270;
+
+export type InitialValuesType = {
+  rotationAngle: RotationAngle;
+  applyToAllPages: boolean;
+  pageRanges: string;
+};

From 21ee0a7ac5cee00d00e3903c451ea8c68440d39c Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 27 Mar 2025 05:03:06 +0000
Subject: [PATCH 2/9] chore: show new tools in landing

---
 .idea/workspace.xml     | 9 +++------
 src/components/Hero.tsx | 6 +++---
 src/tools/index.ts      | 9 +++++++--
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 06cc430..548cb5e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,13 +5,10 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: text result extensions">
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/index.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/meta.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/rotate-pdf.service.test.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/service.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/pdf/rotate-pdf/types.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/pdf/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/pdf/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config/uiConfig.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index d5ff305..6406b45 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -19,9 +19,9 @@ const exampleTools: { label: string; url: string }[] = [
   { label: 'Sort a list', url: '/list/sort' },
   { label: 'Compress PNG', url: '/png/compress-png' },
   { label: 'Split a text', url: '/string/split' },
-  { label: 'Calculate number sum', url: '/number/sum' },
-  { label: 'Shuffle a list', url: '/list/shuffle' },
-  { label: 'Change colors in image', url: '/png/change-colors-in-png' }
+  { label: 'Split PDF', url: '/pdf/split-pdf' },
+  { label: 'Trim video', url: '/video/trim' },
+  { label: 'Calculate number sum', url: '/number/sum' }
 ];
 export default function Hero() {
   const [inputValue, setInputValue] = useState<string>('');
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 57596f3..e57bdcc 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -16,12 +16,12 @@ export const tools: DefinedTool[] = [
   ...imageTools,
   ...stringTools,
   ...jsonTools,
+  ...pdfTools,
   ...listTools,
   ...csvTools,
   ...videoTools,
   ...numberTools,
-  ...timeTools,
-  ...pdfTools
+  ...timeTools
 ];
 const categoriesConfig: {
   type: ToolCategory;
@@ -91,6 +91,11 @@ const categoriesConfig: {
       'Tools for working with time and date – draw clocks and calendars, generate time and date sequences, calculate average time, convert between time zones, and much more.'
   }
 ];
+// use for changelogs
+// console.log(
+//   'tools',
+//   tools.map(({ name, type }) => ({ type, name }))
+// );
 export const filterTools = (
   tools: DefinedTool[],
   query: string

From 4b2d38cae3682863b5fad4de25c1ee5d4b432a7f Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 27 Mar 2025 05:08:27 +0000
Subject: [PATCH 3/9] chore: zoom on hover

---
 .idea/workspace.xml                  | 28 +++++++++++++---------------
 src/components/allTools/ToolCard.tsx |  6 +++++-
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 548cb5e..0d3b2eb 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,11 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: text result extensions">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: show new tools in landing">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/config/uiConfig.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/uiConfig.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/tools/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/tools/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -366,14 +364,6 @@
       <workItem from="1743018497879" duration="3895000" />
       <workItem from="1743047367993" duration="986000" />
     </task>
-    <task id="LOCAL-00121" summary="fix: bg">
-      <option name="closed" value="true" />
-      <created>1740504051051</created>
-      <option name="number" value="00121" />
-      <option name="presentableId" value="LOCAL-00121" />
-      <option name="project" value="LOCAL" />
-      <updated>1740504051051</updated>
-    </task>
     <task id="LOCAL-00122" summary="fix: bg">
       <option name="closed" value="true" />
       <created>1740504100676</created>
@@ -758,7 +748,15 @@
       <option name="project" value="LOCAL" />
       <updated>1743022260639</updated>
     </task>
-    <option name="localTasksCounter" value="170" />
+    <task id="LOCAL-00170" summary="chore: show new tools in landing">
+      <option name="closed" value="true" />
+      <created>1743051792459</created>
+      <option name="number" value="00170" />
+      <option name="presentableId" value="LOCAL-00170" />
+      <option name="project" value="LOCAL" />
+      <updated>1743051792459</updated>
+    </task>
+    <option name="localTasksCounter" value="171" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -805,7 +803,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="style: optimizations" />
     <MESSAGE value="fix: replace text service" />
     <MESSAGE value="chore: smooth scroll for use this tool and examles" />
     <MESSAGE value="feat: minify json" />
@@ -830,7 +827,8 @@
     <MESSAGE value="fix: typo" />
     <MESSAGE value="chore: result file name" />
     <MESSAGE value="chore: text result extensions" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: text result extensions" />
+    <MESSAGE value="chore: show new tools in landing" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: show new tools in landing" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/allTools/ToolCard.tsx b/src/components/allTools/ToolCard.tsx
index 0767e18..c4047c8 100644
--- a/src/components/allTools/ToolCard.tsx
+++ b/src/components/allTools/ToolCard.tsx
@@ -21,7 +21,11 @@ export default function ToolCard({
         borderColor: '#5581b5',
         color: '#fff',
         boxShadow: '6px 6px 12px #b8b9be, -6px -6px 12px #fff',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        height: '100%',
+        '&:hover': {
+          transform: 'scale(1.05)'
+        }
       }}
     >
       <CardContent>

From a3d75e57edbb255c94610109e5e370c38b8ca979 Mon Sep 17 00:00:00 2001
From: Lukas Herajt <lherajt@gmail.com>
Date: Thu, 27 Mar 2025 10:14:05 -0400
Subject: [PATCH 4/9] added time between 2 dates

---
 src/pages/time/time-between-dates.tsx         |   3 +
 src/pages/tools/time/index.ts                 |   5 +-
 .../tools/time/time-between-dates/index.tsx   | 388 ++++++++++++++++++
 .../tools/time/time-between-dates/meta.ts     |  22 +
 .../tools/time/time-between-dates/service.ts  | 150 +++++++
 src/tools/defineTool.tsx                      |   1 +
 src/tools/index.ts                            |   6 +
 7 files changed, 574 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/time/time-between-dates.tsx
 create mode 100644 src/pages/tools/time/time-between-dates/index.tsx
 create mode 100644 src/pages/tools/time/time-between-dates/meta.ts
 create mode 100644 src/pages/tools/time/time-between-dates/service.ts

diff --git a/src/pages/time/time-between-dates.tsx b/src/pages/time/time-between-dates.tsx
new file mode 100644
index 0000000..5c680b9
--- /dev/null
+++ b/src/pages/time/time-between-dates.tsx
@@ -0,0 +1,3 @@
+import TimeBetweenDates from '../tools/time/time-between-dates';
+
+export default TimeBetweenDates;
diff --git a/src/pages/tools/time/index.ts b/src/pages/tools/time/index.ts
index f229937..785dfe7 100644
--- a/src/pages/tools/time/index.ts
+++ b/src/pages/tools/time/index.ts
@@ -1,13 +1,16 @@
+import { tool as timeBetweenDates } from './time-between-dates/meta';
 import { tool as daysDoHours } from './convert-days-to-hours/meta';
 import { tool as hoursToDays } from './convert-hours-to-days/meta';
 import { tool as convertSecondsToTime } from './convert-seconds-to-time/meta';
 import { tool as convertTimetoSeconds } from './convert-time-to-seconds/meta';
 import { tool as truncateClockTime } from './truncate-clock-time/meta';
 
+
 export const timeTools = [
   daysDoHours,
   hoursToDays,
   convertSecondsToTime,
   convertTimetoSeconds,
-  truncateClockTime
+  truncateClockTime,
+  timeBetweenDates
 ];
diff --git a/src/pages/tools/time/time-between-dates/index.tsx b/src/pages/tools/time/time-between-dates/index.tsx
new file mode 100644
index 0000000..15e88d8
--- /dev/null
+++ b/src/pages/tools/time/time-between-dates/index.tsx
@@ -0,0 +1,388 @@
+import { Box, Typography, Paper } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import SelectWithDesc from '@components/options/SelectWithDesc';
+import {
+  calculateTimeBetweenDates,
+  formatTimeDifference,
+  getTimeWithTimezone
+} from './service';
+import * as Yup from 'yup';
+import { CardExampleType } from '@components/examples/ToolExamples';
+
+type TimeUnit =
+  | 'milliseconds'
+  | 'seconds'
+  | 'minutes'
+  | 'hours'
+  | 'days'
+  | 'months'
+  | 'years';
+
+type InitialValuesType = {
+  startDate: string;
+  startTime: string;
+  endDate: string;
+  endTime: string;
+  startTimezone: string;
+  endTimezone: string;
+};
+
+// Helper function to format time based on largest unit
+const formatTimeWithLargestUnit = (
+  difference: any,
+  largestUnit: TimeUnit
+): string => {
+  const unitHierarchy: TimeUnit[] = [
+    'years',
+    'months',
+    'days',
+    'hours',
+    'minutes',
+    'seconds',
+    'milliseconds'
+  ];
+
+  const largestUnitIndex = unitHierarchy.indexOf(largestUnit);
+  const unitsToInclude = unitHierarchy.slice(largestUnitIndex);
+
+  // Make a deep copy of the difference object to avoid modifying the original
+  const convertedDifference = { ...difference };
+
+  // Constants for time conversions - more precise values
+  const HOURS_PER_DAY = 24;
+  const DAYS_PER_MONTH = 30; // Approximation
+  const MONTHS_PER_YEAR = 12;
+  const DAYS_PER_YEAR = 365; // Approximation
+  const MINUTES_PER_HOUR = 60;
+  const SECONDS_PER_MINUTE = 60;
+  const MS_PER_SECOND = 1000;
+
+  // Apply conversions based on the selected largest unit
+  if (largestUnit === 'months') {
+    // Convert years to months
+    convertedDifference.months += convertedDifference.years * MONTHS_PER_YEAR;
+    convertedDifference.years = 0;
+  } else if (largestUnit === 'days') {
+    // Convert years and months to days
+    convertedDifference.days +=
+      convertedDifference.years * DAYS_PER_YEAR +
+      convertedDifference.months * DAYS_PER_MONTH;
+    convertedDifference.months = 0;
+    convertedDifference.years = 0;
+  } else if (largestUnit === 'hours') {
+    // Convert years, months, and days to hours
+    convertedDifference.hours +=
+      convertedDifference.years * DAYS_PER_YEAR * HOURS_PER_DAY +
+      convertedDifference.months * DAYS_PER_MONTH * HOURS_PER_DAY +
+      convertedDifference.days * HOURS_PER_DAY;
+    convertedDifference.days = 0;
+    convertedDifference.months = 0;
+    convertedDifference.years = 0;
+  } else if (largestUnit === 'minutes') {
+    // Convert years, months, days, and hours to minutes
+    convertedDifference.minutes +=
+      convertedDifference.years *
+        DAYS_PER_YEAR *
+        HOURS_PER_DAY *
+        MINUTES_PER_HOUR +
+      convertedDifference.months *
+        DAYS_PER_MONTH *
+        HOURS_PER_DAY *
+        MINUTES_PER_HOUR +
+      convertedDifference.days * HOURS_PER_DAY * MINUTES_PER_HOUR +
+      convertedDifference.hours * MINUTES_PER_HOUR;
+    convertedDifference.hours = 0;
+    convertedDifference.days = 0;
+    convertedDifference.months = 0;
+    convertedDifference.years = 0;
+  } else if (largestUnit === 'seconds') {
+    // Convert years, months, days, hours, and minutes to seconds
+    convertedDifference.seconds +=
+      convertedDifference.years *
+        DAYS_PER_YEAR *
+        HOURS_PER_DAY *
+        MINUTES_PER_HOUR *
+        SECONDS_PER_MINUTE +
+      convertedDifference.months *
+        DAYS_PER_MONTH *
+        HOURS_PER_DAY *
+        MINUTES_PER_HOUR *
+        SECONDS_PER_MINUTE +
+      convertedDifference.days *
+        HOURS_PER_DAY *
+        MINUTES_PER_HOUR *
+        SECONDS_PER_MINUTE +
+      convertedDifference.hours * MINUTES_PER_HOUR * SECONDS_PER_MINUTE +
+      convertedDifference.minutes * SECONDS_PER_MINUTE;
+    convertedDifference.minutes = 0;
+    convertedDifference.hours = 0;
+    convertedDifference.days = 0;
+    convertedDifference.months = 0;
+    convertedDifference.years = 0;
+  } else if (largestUnit === 'milliseconds') {
+    // Convert everything to milliseconds
+    convertedDifference.milliseconds +=
+      convertedDifference.years *
+        DAYS_PER_YEAR *
+        HOURS_PER_DAY *
+        MINUTES_PER_HOUR *
+        SECONDS_PER_MINUTE *
+        MS_PER_SECOND +
+      convertedDifference.months *
+        DAYS_PER_MONTH *
+        HOURS_PER_DAY *
+        MINUTES_PER_HOUR *
+        SECONDS_PER_MINUTE *
+        MS_PER_SECOND +
+      convertedDifference.days *
+        HOURS_PER_DAY *
+        MINUTES_PER_HOUR *
+        SECONDS_PER_MINUTE *
+        MS_PER_SECOND +
+      convertedDifference.hours *
+        MINUTES_PER_HOUR *
+        SECONDS_PER_MINUTE *
+        MS_PER_SECOND +
+      convertedDifference.minutes * SECONDS_PER_MINUTE * MS_PER_SECOND +
+      convertedDifference.seconds * MS_PER_SECOND;
+    convertedDifference.seconds = 0;
+    convertedDifference.minutes = 0;
+    convertedDifference.hours = 0;
+    convertedDifference.days = 0;
+    convertedDifference.months = 0;
+    convertedDifference.years = 0;
+  }
+
+  return formatTimeDifference(convertedDifference, unitsToInclude);
+};
+
+const initialValues: InitialValuesType = {
+  startDate: new Date().toISOString().split('T')[0],
+  startTime: '00:00',
+  endDate: new Date().toISOString().split('T')[0],
+  endTime: '12:00',
+  startTimezone: 'local',
+  endTimezone: 'local'
+};
+
+const validationSchema = Yup.object({
+  startDate: Yup.string().required('Start date is required'),
+  startTime: Yup.string().required('Start time is required'),
+  endDate: Yup.string().required('End date is required'),
+  endTime: Yup.string().required('End time is required'),
+  startTimezone: Yup.string(),
+  endTimezone: Yup.string()
+});
+
+const timezoneOptions = [
+  { value: 'local', label: 'Local Time' },
+  { value: 'GMT+0000', label: 'GMT+0000 (UTC)' },
+  { value: 'GMT-0500', label: 'GMT-0500 (Eastern Standard Time)' },
+  { value: 'GMT-0600', label: 'GMT-0600 (Central Standard Time)' },
+  { value: 'GMT-0700', label: 'GMT-0700 (Mountain Standard Time)' },
+  { value: 'GMT-0800', label: 'GMT-0800 (Pacific Standard Time)' },
+  { value: 'GMT+0100', label: 'GMT+0100 (Central European Time)' },
+  { value: 'GMT+0200', label: 'GMT+0200 (Eastern European Time)' },
+  { value: 'GMT+0530', label: 'GMT+0530 (Indian Standard Time)' },
+  { value: 'GMT+0800', label: 'GMT+0800 (China Standard Time)' },
+  { value: 'GMT+0900', label: 'GMT+0900 (Japan Standard Time)' },
+  { value: 'GMT+1000', label: 'GMT+1000 (Australian Eastern Standard Time)' }
+];
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'One Year Difference',
+    description: 'Calculate the time between dates that are one year apart',
+    sampleOptions: {
+      startDate: '2023-01-01',
+      startTime: '12:00',
+      endDate: '2024-01-01',
+      endTime: '12:00',
+      startTimezone: 'local',
+      endTimezone: 'local'
+    },
+    sampleResult: '1 year'
+  },
+  {
+    title: 'Different Timezones',
+    description: 'Calculate the time difference between New York and London',
+    sampleOptions: {
+      startDate: '2023-01-01',
+      startTime: '12:00',
+      endDate: '2023-01-01',
+      endTime: '12:00',
+      startTimezone: 'GMT-0500',
+      endTimezone: 'GMT+0000'
+    },
+    sampleResult: '5 hours'
+  },
+  {
+    title: 'Detailed Time Breakdown',
+    description: 'Show a detailed breakdown of a time difference',
+    sampleOptions: {
+      startDate: '2023-01-01',
+      startTime: '09:30',
+      endDate: '2023-01-03',
+      endTime: '14:45',
+      startTimezone: 'local',
+      endTimezone: 'local'
+    },
+    sampleResult: '2 days, 5 hours, 15 minutes'
+  }
+];
+
+export default function TimeBetweenDates() {
+  const [result, setResult] = useState<string>('');
+
+  return (
+    <ToolContent
+      inputComponent={null}
+      resultComponent={
+        result ? (
+          <Paper
+            elevation={3}
+            sx={{
+              p: 3,
+              borderLeft: '5px solid',
+              borderColor: 'primary.main',
+              bgcolor: 'background.paper',
+              maxWidth: '100%',
+              mx: 'auto'
+            }}
+          >
+            <Typography
+              variant="h4"
+              align="center"
+              sx={{ fontWeight: 'bold', color: 'primary.main' }}
+            >
+              {result}
+            </Typography>
+          </Paper>
+        ) : null
+      }
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      exampleCards={exampleCards}
+      toolInfo={{
+        title: 'Time Between Dates Calculator',
+        description:
+          'Calculate the exact time difference between two dates and times, with support for different timezones. This tool provides a detailed breakdown of the time difference in various units (years, months, days, hours, minutes, and seconds).'
+      }}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Start Date & Time',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                description="Start Date"
+                value={values.startDate}
+                onOwnChange={(val) => updateField('startDate', val)}
+                type="date"
+              />
+              <TextFieldWithDesc
+                description="Start Time"
+                value={values.startTime}
+                onOwnChange={(val) => updateField('startTime', val)}
+                type="time"
+              />
+              <SelectWithDesc
+                description="Start Timezone"
+                selected={values.startTimezone}
+                onChange={(val: string) => updateField('startTimezone', val)}
+                options={timezoneOptions}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'End Date & Time',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                description="End Date"
+                value={values.endDate}
+                onOwnChange={(val) => updateField('endDate', val)}
+                type="date"
+              />
+              <TextFieldWithDesc
+                description="End Time"
+                value={values.endTime}
+                onOwnChange={(val) => updateField('endTime', val)}
+                type="time"
+              />
+              <SelectWithDesc
+                description="End Timezone"
+                selected={values.endTimezone}
+                onChange={(val: string) => updateField('endTimezone', val)}
+                options={timezoneOptions}
+              />
+            </Box>
+          )
+        }
+      ]}
+      compute={(values) => {
+        try {
+          // Create Date objects with timezone consideration
+          const startDateTime = getTimeWithTimezone(
+            values.startDate,
+            values.startTime,
+            values.startTimezone
+          );
+
+          const endDateTime = getTimeWithTimezone(
+            values.endDate,
+            values.endTime,
+            values.endTimezone
+          );
+
+          // Calculate time difference
+          const difference = calculateTimeBetweenDates(
+            startDateTime,
+            endDateTime
+          );
+
+          // Format the result - use 'years' as the default largest unit
+          if (typeof difference === 'number') {
+            setResult(`${difference} milliseconds`);
+          } else {
+            // Auto-determine the best unit to display based on the time difference
+            let bestUnit: TimeUnit = 'years';
+
+            if (difference.years > 0) {
+              bestUnit = 'years';
+            } else if (difference.months > 0) {
+              bestUnit = 'months';
+            } else if (difference.days > 0) {
+              bestUnit = 'days';
+            } else if (difference.hours > 0) {
+              bestUnit = 'hours';
+            } else if (difference.minutes > 0) {
+              bestUnit = 'minutes';
+            } else if (difference.seconds > 0) {
+              bestUnit = 'seconds';
+            } else {
+              bestUnit = 'milliseconds';
+            }
+
+            const formattedDifference = formatTimeWithLargestUnit(
+              difference,
+              bestUnit
+            );
+
+            setResult(formattedDifference);
+          }
+        } catch (error) {
+          setResult(
+            `Error: ${
+              error instanceof Error
+                ? error.message
+                : 'Failed to calculate time difference'
+            }`
+          );
+        }
+      }}
+    />
+  );
+}
diff --git a/src/pages/tools/time/time-between-dates/meta.ts b/src/pages/tools/time/time-between-dates/meta.ts
new file mode 100644
index 0000000..3676dda
--- /dev/null
+++ b/src/pages/tools/time/time-between-dates/meta.ts
@@ -0,0 +1,22 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('time', {
+  name: 'Time Between Dates',
+  path: 'time-between-dates',
+  icon: 'mdi:calendar-clock',
+  description:
+    'Calculate the exact time difference between two dates and times, with support for different timezones. This tool provides a detailed breakdown of the time difference in various units (years, months, days, hours, minutes, and seconds).',
+  shortDescription:
+    'Calculate the precise time duration between two dates with timezone support.',
+  keywords: [
+    'time',
+    'dates',
+    'difference',
+    'duration',
+    'calculator',
+    'timezones',
+    'interval'
+  ],
+  component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/time/time-between-dates/service.ts b/src/pages/tools/time/time-between-dates/service.ts
new file mode 100644
index 0000000..9341fa2
--- /dev/null
+++ b/src/pages/tools/time/time-between-dates/service.ts
@@ -0,0 +1,150 @@
+type TimeUnit =
+  | 'milliseconds'
+  | 'seconds'
+  | 'minutes'
+  | 'hours'
+  | 'days'
+  | 'months'
+  | 'years';
+
+interface TimeDifference {
+  milliseconds: number;
+  seconds: number;
+  minutes: number;
+  hours: number;
+  days: number;
+  months: number;
+  years: number;
+}
+
+export const calculateTimeBetweenDates = (
+  startDate: Date,
+  endDate: Date,
+  unit: TimeUnit = 'milliseconds'
+): TimeDifference | number => {
+  // Ensure endDate is after startDate
+  if (endDate < startDate) {
+    const temp = startDate;
+    startDate = endDate;
+    endDate = temp;
+  }
+
+  const milliseconds = endDate.getTime() - startDate.getTime();
+  const seconds = Math.floor(milliseconds / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  // Approximate months and years
+  const startYear = startDate.getFullYear();
+  const startMonth = startDate.getMonth();
+  const endYear = endDate.getFullYear();
+  const endMonth = endDate.getMonth();
+
+  const months = (endYear - startYear) * 12 + (endMonth - startMonth);
+  const years = Math.floor(months / 12);
+
+  // If specific unit requested, return just that value
+  if (unit !== 'milliseconds') {
+    return { milliseconds, seconds, minutes, hours, days, months, years }[unit];
+  }
+
+  // Otherwise return the complete breakdown
+  return {
+    milliseconds,
+    seconds,
+    minutes,
+    hours,
+    days,
+    months,
+    years
+  };
+};
+
+export const formatTimeDifference = (
+  difference: TimeDifference,
+  includeUnits: TimeUnit[] = [
+    'years',
+    'months',
+    'days',
+    'hours',
+    'minutes',
+    'seconds'
+  ]
+): string => {
+  const parts: string[] = [];
+
+  if (includeUnits.includes('years') && difference.years > 0) {
+    parts.push(
+      `${difference.years} ${difference.years === 1 ? 'year' : 'years'}`
+    );
+  }
+
+  if (includeUnits.includes('months') && difference.months % 12 > 0) {
+    const remainingMonths = difference.months % 12;
+    parts.push(
+      `${remainingMonths} ${remainingMonths === 1 ? 'month' : 'months'}`
+    );
+  }
+
+  if (includeUnits.includes('days') && difference.days % 30 > 0) {
+    const remainingDays = difference.days % 30;
+    parts.push(`${remainingDays} ${remainingDays === 1 ? 'day' : 'days'}`);
+  }
+
+  if (includeUnits.includes('hours') && difference.hours % 24 > 0) {
+    const remainingHours = difference.hours % 24;
+    parts.push(`${remainingHours} ${remainingHours === 1 ? 'hour' : 'hours'}`);
+  }
+
+  if (includeUnits.includes('minutes') && difference.minutes % 60 > 0) {
+    const remainingMinutes = difference.minutes % 60;
+    parts.push(
+      `${remainingMinutes} ${remainingMinutes === 1 ? 'minute' : 'minutes'}`
+    );
+  }
+
+  if (includeUnits.includes('seconds') && difference.seconds % 60 > 0) {
+    const remainingSeconds = difference.seconds % 60;
+    parts.push(
+      `${remainingSeconds} ${remainingSeconds === 1 ? 'second' : 'seconds'}`
+    );
+  }
+
+  if (parts.length === 0) {
+    if (includeUnits.includes('milliseconds')) {
+      parts.push(
+        `${difference.milliseconds} ${
+          difference.milliseconds === 1 ? 'millisecond' : 'milliseconds'
+        }`
+      );
+    } else {
+      parts.push('0 seconds');
+    }
+  }
+
+  return parts.join(', ');
+};
+
+export const getTimeWithTimezone = (
+  dateString: string,
+  timeString: string,
+  timezone: string
+): Date => {
+  // Combine date and time
+  const dateTimeString = `${dateString}T${timeString}`;
+
+  // Create a date object in the local timezone
+  const dateObject = new Date(dateTimeString);
+
+  // If timezone is provided, adjust the date
+  if (timezone && timezone !== 'local') {
+    // Create date string with the timezone identifier
+    const dateWithTimezone = new Date(
+      dateTimeString + timezone.replace('GMT', '')
+    );
+    return dateWithTimezone;
+  }
+
+  return dateObject;
+};
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index e32b940..5263c6f 100644
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -21,6 +21,7 @@ export type ToolCategory =
   | 'video'
   | 'list'
   | 'json'
+  | 'time'
   | 'csv'
   | 'time'
   | 'pdf';
diff --git a/src/tools/index.ts b/src/tools/index.ts
index e57bdcc..401cbb3 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -66,6 +66,12 @@ const categoriesConfig: {
     value:
       'Tools for working with JSON data structures – prettify and minify JSON objects, flatten JSON arrays, stringify JSON values, analyze data, and much more'
   },
+  {
+    type: 'time',
+    icon: 'mdi:clock-time-five',
+    value:
+      'Tools for working with time and date – calculate time differences, convert between time zones, format dates, generate date sequences, and much more.'
+  },
   {
     type: 'csv',
     icon: 'material-symbols-light:csv-outline',

From dc44f44f5365ef36b937df673b00fcb4e23a7e69 Mon Sep 17 00:00:00 2001
From: Lukas Herajt <lherajt@gmail.com>
Date: Thu, 27 Mar 2025 11:08:33 -0400
Subject: [PATCH 5/9] fixed Title of examples

---
 src/pages/tools/time/time-between-dates/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/tools/time/time-between-dates/index.tsx b/src/pages/tools/time/time-between-dates/index.tsx
index 15e88d8..d21b0d8 100644
--- a/src/pages/tools/time/time-between-dates/index.tsx
+++ b/src/pages/tools/time/time-between-dates/index.tsx
@@ -238,6 +238,7 @@ export default function TimeBetweenDates() {
 
   return (
     <ToolContent
+      title="Time Between Dates"
       inputComponent={null}
       resultComponent={
         result ? (

From 0576223aa518e0f70f6b03af31d6ff77d3c554e6 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 27 Mar 2025 20:19:43 +0000
Subject: [PATCH 6/9] refactor: time between dates

---
 .idea/workspace.xml                           | 196 ++++++++--------
 src/pages/time/time-between-dates.tsx         |   3 -
 .../tools/time/time-between-dates/index.tsx   | 209 +++---------------
 .../tools/time/time-between-dates/service.ts  | 185 ++++++++--------
 4 files changed, 232 insertions(+), 361 deletions(-)
 delete mode 100644 src/pages/time/time-between-dates.tsx

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0d3b2eb..391285d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,11 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: show new tools in landing">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: zoom on hover">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/ToolCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/time/time-between-dates.tsx" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -23,7 +25,7 @@
     <option name="PUSH_AUTO_UPDATE" value="true" />
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="chesterkxng" />
+        <entry key="$PROJECT_DIR$" value="main" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -42,59 +44,66 @@
     &quot;state&quot;: &quot;OPEN&quot;
   }
 }</component>
-  <component name="GitHubPullRequestState">{
-  &quot;prStates&quot;: [
+  <component name="GitHubPullRequestState"><![CDATA[{
+  "prStates": [
     {
-      &quot;id&quot;: {
-        &quot;id&quot;: &quot;PR_kwDOMJIfts51PkS9&quot;,
-        &quot;number&quot;: 22
+      "id": {
+        "id": "PR_kwDOMJIfts51PkS9",
+        "number": 22
       },
-      &quot;lastSeen&quot;: 1741207144695
+      "lastSeen": 1741207144695
     },
     {
-      &quot;id&quot;: {
-        &quot;id&quot;: &quot;PR_kwDOMJIfts6NiNYl&quot;,
-        &quot;number&quot;: 32
+      "id": {
+        "id": "PR_kwDOMJIfts6NiNYl",
+        "number": 32
       },
-      &quot;lastSeen&quot;: 1741209723869
+      "lastSeen": 1741209723869
     },
     {
-      &quot;id&quot;: {
-        &quot;id&quot;: &quot;PR_kwDOMJIfts6Nheyd&quot;,
-        &quot;number&quot;: 31
+      "id": {
+        "id": "PR_kwDOMJIfts6Nheyd",
+        "number": 31
       },
-      &quot;lastSeen&quot;: 1741213371410
+      "lastSeen": 1741213371410
     },
     {
-      &quot;id&quot;: {
-        &quot;id&quot;: &quot;PR_kwDOMJIfts6NmRBs&quot;,
-        &quot;number&quot;: 33
+      "id": {
+        "id": "PR_kwDOMJIfts6NmRBs",
+        "number": 33
       },
-      &quot;lastSeen&quot;: 1741282429036
+      "lastSeen": 1741282429036
     },
     {
-      &quot;id&quot;: {
-        &quot;id&quot;: &quot;PR_kwDOMJIfts5zyFTs&quot;,
-        &quot;number&quot;: 15
+      "id": {
+        "id": "PR_kwDOMJIfts5zyFTs",
+        "number": 15
       },
-      &quot;lastSeen&quot;: 1741535540953
+      "lastSeen": 1741535540953
     },
     {
-      &quot;id&quot;: {
-        &quot;id&quot;: &quot;PR_kwDOMJIfts6QQB3c&quot;,
-        &quot;number&quot;: 59
+      "id": {
+        "id": "PR_kwDOMJIfts6QQB3c",
+        "number": 59
       },
-      &quot;lastSeen&quot;: 1743018960900
+      "lastSeen": 1743018960900
     },
     {
-      &quot;id&quot;: {
-        &quot;id&quot;: &quot;PR_kwDOMJIfts6QMPEg&quot;,
-        &quot;number&quot;: 58
+      "id": {
+        "id": "PR_kwDOMJIfts6QMPEg",
+        "number": 58
       },
-      &quot;lastSeen&quot;: 1743019452983
+      "lastSeen": 1743019452983
+    },
+    {
+      "id": {
+        "id": "PR_kwDOMJIfts6QZvRI",
+        "number": 61
+      },
+      "lastSeen": 1743103196866
     }
   ]
-}</component>
+}]]></component>
   <component name="GithubPullRequestsUISettings">{
   &quot;selectedUrlAndAccountId&quot;: {
     &quot;url&quot;: &quot;https://github.com/iib0011/omni-tools.git&quot;,
@@ -123,55 +132,55 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
-    &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.Create transparent PNG.should make png color transparent.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.parsePageRanges.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.replaceText function.executor&quot;: &quot;Run&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src/components/input&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;npm.build.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;npm.lint.executor&quot;: &quot;Run&quot;,
-    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
-    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
-    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
-    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
-    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;refactai_advanced_settings&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ASKED_ADD_EXTERNAL_FILES": "true",
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "Docker.Dockerfile build.executor": "Run",
+    "Docker.Dockerfile.executor": "Run",
+    "Playwright.Create transparent PNG.should make png color transparent.executor": "Run",
+    "Playwright.JoinText Component.executor": "Run",
+    "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "Vitest.compute function (1).executor": "Run",
+    "Vitest.compute function.executor": "Run",
+    "Vitest.mergeText.executor": "Run",
+    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
+    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
+    "Vitest.parsePageRanges.executor": "Run",
+    "Vitest.removeDuplicateLines function.executor": "Run",
+    "Vitest.removeDuplicateLines function.newlines option.executor": "Run",
+    "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
+    "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
+    "Vitest.replaceText function.executor": "Run",
+    "git-widget-placeholder": "fork/TheLukasHenry/days-calculator-#51",
+    "ignore.virus.scanning.warn.message": "true",
+    "kotlin-language-version-configured": "true",
+    "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/components/input",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "npm.build.executor": "Run",
+    "npm.dev.executor": "Run",
+    "npm.lint.executor": "Run",
+    "npm.prebuild.executor": "Run",
+    "npm.script:create:tool.executor": "Run",
+    "npm.test.executor": "Run",
+    "npm.test:e2e.executor": "Run",
+    "npm.test:e2e:run.executor": "Run",
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier",
+    "project.structure.last.edited": "Problems",
+    "project.structure.proportion": "0.0",
+    "project.structure.side.proportion": "0.2",
+    "settings.editor.selected.configurable": "refactai_advanced_settings",
+    "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -363,14 +372,7 @@
       <workItem from="1741971589699" duration="371000" />
       <workItem from="1743018497879" duration="3895000" />
       <workItem from="1743047367993" duration="986000" />
-    </task>
-    <task id="LOCAL-00122" summary="fix: bg">
-      <option name="closed" value="true" />
-      <created>1740504100676</created>
-      <option name="number" value="00122" />
-      <option name="presentableId" value="LOCAL-00122" />
-      <option name="project" value="LOCAL" />
-      <updated>1740504100676</updated>
+      <workItem from="1743103182313" duration="3430000" />
     </task>
     <task id="LOCAL-00123" summary="fix: bg">
       <option name="closed" value="true" />
@@ -756,7 +758,15 @@
       <option name="project" value="LOCAL" />
       <updated>1743051792459</updated>
     </task>
-    <option name="localTasksCounter" value="171" />
+    <task id="LOCAL-00171" summary="chore: zoom on hover">
+      <option name="closed" value="true" />
+      <created>1743052111988</created>
+      <option name="number" value="00171" />
+      <option name="presentableId" value="LOCAL-00171" />
+      <option name="project" value="LOCAL" />
+      <updated>1743052111988</updated>
+    </task>
+    <option name="localTasksCounter" value="172" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -803,7 +813,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="fix: replace text service" />
     <MESSAGE value="chore: smooth scroll for use this tool and examles" />
     <MESSAGE value="feat: minify json" />
     <MESSAGE value="feat: stringify json" />
@@ -828,7 +837,8 @@
     <MESSAGE value="chore: result file name" />
     <MESSAGE value="chore: text result extensions" />
     <MESSAGE value="chore: show new tools in landing" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: show new tools in landing" />
+    <MESSAGE value="chore: zoom on hover" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: zoom on hover" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/time/time-between-dates.tsx b/src/pages/time/time-between-dates.tsx
deleted file mode 100644
index 5c680b9..0000000
--- a/src/pages/time/time-between-dates.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import TimeBetweenDates from '../tools/time/time-between-dates';
-
-export default TimeBetweenDates;
diff --git a/src/pages/tools/time/time-between-dates/index.tsx b/src/pages/tools/time/time-between-dates/index.tsx
index d21b0d8..a02ee70 100644
--- a/src/pages/tools/time/time-between-dates/index.tsx
+++ b/src/pages/tools/time/time-between-dates/index.tsx
@@ -1,12 +1,13 @@
-import { Box, Typography, Paper } from '@mui/material';
+import { Box, Paper, Typography } from '@mui/material';
 import React, { useState } from 'react';
 import ToolContent from '@components/ToolContent';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import SelectWithDesc from '@components/options/SelectWithDesc';
 import {
   calculateTimeBetweenDates,
-  formatTimeDifference,
-  getTimeWithTimezone
+  formatTimeWithLargestUnit,
+  getTimeWithTimezone,
+  unitHierarchy
 } from './service';
 import * as Yup from 'yup';
 import { CardExampleType } from '@components/examples/ToolExamples';
@@ -29,135 +30,6 @@ type InitialValuesType = {
   endTimezone: string;
 };
 
-// Helper function to format time based on largest unit
-const formatTimeWithLargestUnit = (
-  difference: any,
-  largestUnit: TimeUnit
-): string => {
-  const unitHierarchy: TimeUnit[] = [
-    'years',
-    'months',
-    'days',
-    'hours',
-    'minutes',
-    'seconds',
-    'milliseconds'
-  ];
-
-  const largestUnitIndex = unitHierarchy.indexOf(largestUnit);
-  const unitsToInclude = unitHierarchy.slice(largestUnitIndex);
-
-  // Make a deep copy of the difference object to avoid modifying the original
-  const convertedDifference = { ...difference };
-
-  // Constants for time conversions - more precise values
-  const HOURS_PER_DAY = 24;
-  const DAYS_PER_MONTH = 30; // Approximation
-  const MONTHS_PER_YEAR = 12;
-  const DAYS_PER_YEAR = 365; // Approximation
-  const MINUTES_PER_HOUR = 60;
-  const SECONDS_PER_MINUTE = 60;
-  const MS_PER_SECOND = 1000;
-
-  // Apply conversions based on the selected largest unit
-  if (largestUnit === 'months') {
-    // Convert years to months
-    convertedDifference.months += convertedDifference.years * MONTHS_PER_YEAR;
-    convertedDifference.years = 0;
-  } else if (largestUnit === 'days') {
-    // Convert years and months to days
-    convertedDifference.days +=
-      convertedDifference.years * DAYS_PER_YEAR +
-      convertedDifference.months * DAYS_PER_MONTH;
-    convertedDifference.months = 0;
-    convertedDifference.years = 0;
-  } else if (largestUnit === 'hours') {
-    // Convert years, months, and days to hours
-    convertedDifference.hours +=
-      convertedDifference.years * DAYS_PER_YEAR * HOURS_PER_DAY +
-      convertedDifference.months * DAYS_PER_MONTH * HOURS_PER_DAY +
-      convertedDifference.days * HOURS_PER_DAY;
-    convertedDifference.days = 0;
-    convertedDifference.months = 0;
-    convertedDifference.years = 0;
-  } else if (largestUnit === 'minutes') {
-    // Convert years, months, days, and hours to minutes
-    convertedDifference.minutes +=
-      convertedDifference.years *
-        DAYS_PER_YEAR *
-        HOURS_PER_DAY *
-        MINUTES_PER_HOUR +
-      convertedDifference.months *
-        DAYS_PER_MONTH *
-        HOURS_PER_DAY *
-        MINUTES_PER_HOUR +
-      convertedDifference.days * HOURS_PER_DAY * MINUTES_PER_HOUR +
-      convertedDifference.hours * MINUTES_PER_HOUR;
-    convertedDifference.hours = 0;
-    convertedDifference.days = 0;
-    convertedDifference.months = 0;
-    convertedDifference.years = 0;
-  } else if (largestUnit === 'seconds') {
-    // Convert years, months, days, hours, and minutes to seconds
-    convertedDifference.seconds +=
-      convertedDifference.years *
-        DAYS_PER_YEAR *
-        HOURS_PER_DAY *
-        MINUTES_PER_HOUR *
-        SECONDS_PER_MINUTE +
-      convertedDifference.months *
-        DAYS_PER_MONTH *
-        HOURS_PER_DAY *
-        MINUTES_PER_HOUR *
-        SECONDS_PER_MINUTE +
-      convertedDifference.days *
-        HOURS_PER_DAY *
-        MINUTES_PER_HOUR *
-        SECONDS_PER_MINUTE +
-      convertedDifference.hours * MINUTES_PER_HOUR * SECONDS_PER_MINUTE +
-      convertedDifference.minutes * SECONDS_PER_MINUTE;
-    convertedDifference.minutes = 0;
-    convertedDifference.hours = 0;
-    convertedDifference.days = 0;
-    convertedDifference.months = 0;
-    convertedDifference.years = 0;
-  } else if (largestUnit === 'milliseconds') {
-    // Convert everything to milliseconds
-    convertedDifference.milliseconds +=
-      convertedDifference.years *
-        DAYS_PER_YEAR *
-        HOURS_PER_DAY *
-        MINUTES_PER_HOUR *
-        SECONDS_PER_MINUTE *
-        MS_PER_SECOND +
-      convertedDifference.months *
-        DAYS_PER_MONTH *
-        HOURS_PER_DAY *
-        MINUTES_PER_HOUR *
-        SECONDS_PER_MINUTE *
-        MS_PER_SECOND +
-      convertedDifference.days *
-        HOURS_PER_DAY *
-        MINUTES_PER_HOUR *
-        SECONDS_PER_MINUTE *
-        MS_PER_SECOND +
-      convertedDifference.hours *
-        MINUTES_PER_HOUR *
-        SECONDS_PER_MINUTE *
-        MS_PER_SECOND +
-      convertedDifference.minutes * SECONDS_PER_MINUTE * MS_PER_SECOND +
-      convertedDifference.seconds * MS_PER_SECOND;
-    convertedDifference.seconds = 0;
-    convertedDifference.minutes = 0;
-    convertedDifference.hours = 0;
-    convertedDifference.days = 0;
-    convertedDifference.months = 0;
-    convertedDifference.years = 0;
-  }
-
-  return formatTimeDifference(convertedDifference, unitsToInclude);
-};
-
 const initialValues: InitialValuesType = {
   startDate: new Date().toISOString().split('T')[0],
   startTime: '00:00',
@@ -178,17 +50,26 @@ const validationSchema = Yup.object({
 
 const timezoneOptions = [
   { value: 'local', label: 'Local Time' },
-  { value: 'GMT+0000', label: 'GMT+0000 (UTC)' },
-  { value: 'GMT-0500', label: 'GMT-0500 (Eastern Standard Time)' },
-  { value: 'GMT-0600', label: 'GMT-0600 (Central Standard Time)' },
-  { value: 'GMT-0700', label: 'GMT-0700 (Mountain Standard Time)' },
-  { value: 'GMT-0800', label: 'GMT-0800 (Pacific Standard Time)' },
-  { value: 'GMT+0100', label: 'GMT+0100 (Central European Time)' },
-  { value: 'GMT+0200', label: 'GMT+0200 (Eastern European Time)' },
-  { value: 'GMT+0530', label: 'GMT+0530 (Indian Standard Time)' },
-  { value: 'GMT+0800', label: 'GMT+0800 (China Standard Time)' },
-  { value: 'GMT+0900', label: 'GMT+0900 (Japan Standard Time)' },
-  { value: 'GMT+1000', label: 'GMT+1000 (Australian Eastern Standard Time)' }
+  ...Intl.supportedValuesOf('timeZone')
+    .map((tz) => {
+      const formatter = new Intl.DateTimeFormat('en', {
+        timeZone: tz,
+        timeZoneName: 'shortOffset'
+      });
+
+      const offset =
+        formatter
+          .formatToParts(new Date())
+          .find((part) => part.type === 'timeZoneName')?.value || '';
+
+      return {
+        value: offset.replace('UTC', 'GMT'),
+        label: `${offset.replace('UTC', 'GMT')} (${tz})`
+      };
+    })
+    .sort((a, b) =>
+      a.value.localeCompare(b.value, undefined, { numeric: true })
+    )
 ];
 
 const exampleCards: CardExampleType<InitialValuesType>[] = [
@@ -213,8 +94,8 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
       startTime: '12:00',
       endDate: '2023-01-01',
       endTime: '12:00',
-      startTimezone: 'GMT-0500',
-      endTimezone: 'GMT+0000'
+      startTimezone: 'GMT-5',
+      endTimezone: 'GMT'
     },
     sampleResult: '5 hours'
   },
@@ -325,7 +206,6 @@ export default function TimeBetweenDates() {
       ]}
       compute={(values) => {
         try {
-          // Create Date objects with timezone consideration
           const startDateTime = getTimeWithTimezone(
             values.startDate,
             values.startTime,
@@ -344,36 +224,17 @@ export default function TimeBetweenDates() {
             endDateTime
           );
 
-          // Format the result - use 'years' as the default largest unit
-          if (typeof difference === 'number') {
-            setResult(`${difference} milliseconds`);
-          } else {
-            // Auto-determine the best unit to display based on the time difference
-            let bestUnit: TimeUnit = 'years';
+          // Auto-determine the best unit to display based on the time difference
+          const bestUnit: TimeUnit =
+            unitHierarchy.find((unit) => difference[unit] > 0) ||
+            'milliseconds';
 
-            if (difference.years > 0) {
-              bestUnit = 'years';
-            } else if (difference.months > 0) {
-              bestUnit = 'months';
-            } else if (difference.days > 0) {
-              bestUnit = 'days';
-            } else if (difference.hours > 0) {
-              bestUnit = 'hours';
-            } else if (difference.minutes > 0) {
-              bestUnit = 'minutes';
-            } else if (difference.seconds > 0) {
-              bestUnit = 'seconds';
-            } else {
-              bestUnit = 'milliseconds';
-            }
+          const formattedDifference = formatTimeWithLargestUnit(
+            difference,
+            bestUnit
+          );
 
-            const formattedDifference = formatTimeWithLargestUnit(
-              difference,
-              bestUnit
-            );
-
-            setResult(formattedDifference);
-          }
+          setResult(formattedDifference);
         } catch (error) {
           setResult(
             `Error: ${
diff --git a/src/pages/tools/time/time-between-dates/service.ts b/src/pages/tools/time/time-between-dates/service.ts
index 9341fa2..be1a5ac 100644
--- a/src/pages/tools/time/time-between-dates/service.ts
+++ b/src/pages/tools/time/time-between-dates/service.ts
@@ -1,28 +1,20 @@
-type TimeUnit =
-  | 'milliseconds'
-  | 'seconds'
-  | 'minutes'
-  | 'hours'
-  | 'days'
-  | 'months'
-  | 'years';
+export const unitHierarchy = [
+  'years',
+  'months',
+  'days',
+  'hours',
+  'minutes',
+  'seconds',
+  'milliseconds'
+] as const;
 
-interface TimeDifference {
-  milliseconds: number;
-  seconds: number;
-  minutes: number;
-  hours: number;
-  days: number;
-  months: number;
-  years: number;
-}
+export type TimeUnit = (typeof unitHierarchy)[number];
+export type TimeDifference = Record<TimeUnit, number>;
 
 export const calculateTimeBetweenDates = (
   startDate: Date,
-  endDate: Date,
-  unit: TimeUnit = 'milliseconds'
-): TimeDifference | number => {
-  // Ensure endDate is after startDate
+  endDate: Date
+): TimeDifference => {
   if (endDate < startDate) {
     const temp = startDate;
     startDate = endDate;
@@ -44,12 +36,6 @@ export const calculateTimeBetweenDates = (
   const months = (endYear - startYear) * 12 + (endMonth - startMonth);
   const years = Math.floor(months / 12);
 
-  // If specific unit requested, return just that value
-  if (unit !== 'milliseconds') {
-    return { milliseconds, seconds, minutes, hours, days, months, years }[unit];
-  }
-
-  // Otherwise return the complete breakdown
   return {
     milliseconds,
     seconds,
@@ -63,64 +49,32 @@ export const calculateTimeBetweenDates = (
 
 export const formatTimeDifference = (
   difference: TimeDifference,
-  includeUnits: TimeUnit[] = [
-    'years',
-    'months',
-    'days',
-    'hours',
-    'minutes',
-    'seconds'
-  ]
+  includeUnits: TimeUnit[] = unitHierarchy.slice(0, -1)
 ): string => {
-  const parts: string[] = [];
+  const timeUnits: { key: TimeUnit; value: number; divisor?: number }[] = [
+    { key: 'years', value: difference.years },
+    { key: 'months', value: difference.months, divisor: 12 },
+    { key: 'days', value: difference.days, divisor: 30 },
+    { key: 'hours', value: difference.hours, divisor: 24 },
+    { key: 'minutes', value: difference.minutes, divisor: 60 },
+    { key: 'seconds', value: difference.seconds, divisor: 60 }
+  ];
 
-  if (includeUnits.includes('years') && difference.years > 0) {
-    parts.push(
-      `${difference.years} ${difference.years === 1 ? 'year' : 'years'}`
-    );
-  }
-
-  if (includeUnits.includes('months') && difference.months % 12 > 0) {
-    const remainingMonths = difference.months % 12;
-    parts.push(
-      `${remainingMonths} ${remainingMonths === 1 ? 'month' : 'months'}`
-    );
-  }
-
-  if (includeUnits.includes('days') && difference.days % 30 > 0) {
-    const remainingDays = difference.days % 30;
-    parts.push(`${remainingDays} ${remainingDays === 1 ? 'day' : 'days'}`);
-  }
-
-  if (includeUnits.includes('hours') && difference.hours % 24 > 0) {
-    const remainingHours = difference.hours % 24;
-    parts.push(`${remainingHours} ${remainingHours === 1 ? 'hour' : 'hours'}`);
-  }
-
-  if (includeUnits.includes('minutes') && difference.minutes % 60 > 0) {
-    const remainingMinutes = difference.minutes % 60;
-    parts.push(
-      `${remainingMinutes} ${remainingMinutes === 1 ? 'minute' : 'minutes'}`
-    );
-  }
-
-  if (includeUnits.includes('seconds') && difference.seconds % 60 > 0) {
-    const remainingSeconds = difference.seconds % 60;
-    parts.push(
-      `${remainingSeconds} ${remainingSeconds === 1 ? 'second' : 'seconds'}`
-    );
-  }
+  const parts = timeUnits
+    .filter(({ key }) => includeUnits.includes(key))
+    .map(({ key, value, divisor }) => {
+      const remaining = divisor ? value % divisor : value;
+      return remaining > 0 ? `${remaining} ${key}` : '';
+    })
+    .filter(Boolean);
 
   if (parts.length === 0) {
     if (includeUnits.includes('milliseconds')) {
-      parts.push(
-        `${difference.milliseconds} ${
-          difference.milliseconds === 1 ? 'millisecond' : 'milliseconds'
-        }`
-      );
-    } else {
-      parts.push('0 seconds');
+      return `${difference.milliseconds} millisecond${
+        difference.milliseconds === 1 ? '' : 's'
+      }`;
     }
+    return '0 seconds';
   }
 
   return parts.join(', ');
@@ -132,19 +86,68 @@ export const getTimeWithTimezone = (
   timezone: string
 ): Date => {
   // Combine date and time
-  const dateTimeString = `${dateString}T${timeString}`;
+  const dateTimeString = `${dateString}T${timeString}Z`; // Append 'Z' to enforce UTC parsing
+  const utcDate = new Date(dateTimeString);
 
-  // Create a date object in the local timezone
-  const dateObject = new Date(dateTimeString);
-
-  // If timezone is provided, adjust the date
-  if (timezone && timezone !== 'local') {
-    // Create date string with the timezone identifier
-    const dateWithTimezone = new Date(
-      dateTimeString + timezone.replace('GMT', '')
-    );
-    return dateWithTimezone;
+  if (isNaN(utcDate.getTime())) {
+    throw new Error('Invalid date or time format');
   }
 
-  return dateObject;
+  // If timezone is "local", return the local date
+  if (timezone === 'local') {
+    return utcDate;
+  }
+
+  // Extract offset from timezone (e.g., "GMT+5:30" or "GMT-4")
+  const match = timezone.match(/^GMT(?:([+-]\d{1,2})(?::(\d{2}))?)?$/);
+  if (!match) {
+    throw new Error('Invalid timezone format');
+  }
+
+  const offsetHours = match[1] ? parseInt(match[1], 10) : 0;
+  const offsetMinutes = match[2] ? parseInt(match[2], 10) : 0;
+
+  const totalOffsetMinutes =
+    offsetHours * 60 + (offsetHours < 0 ? -offsetMinutes : offsetMinutes);
+
+  // Adjust the UTC date by the timezone offset
+  return new Date(utcDate.getTime() - totalOffsetMinutes * 60 * 1000);
+};
+
+// Helper function to format time based on largest unit
+export const formatTimeWithLargestUnit = (
+  difference: TimeDifference,
+  largestUnit: TimeUnit
+): string => {
+  const conversionFactors: Record<TimeUnit, number> = {
+    years: 365.2425, // Leap years considered
+    months: 30.436875, // Average month length
+    days: 24, // Hours per day
+    hours: 60, // Minutes per hour
+    minutes: 60, // Seconds per minute
+    seconds: 1000, // Milliseconds per second
+    milliseconds: 1
+  };
+
+  const largestUnitIndex = unitHierarchy.indexOf(largestUnit);
+  const unitsToInclude = unitHierarchy.slice(largestUnitIndex);
+
+  // Deep copy to avoid mutating original object
+  const convertedDifference = { ...difference };
+
+  let carryOver = 0;
+  for (let i = 0; i < largestUnitIndex; i++) {
+    const unit = unitHierarchy[i];
+    const nextUnit = unitHierarchy[i + 1];
+
+    if (nextUnit) {
+      carryOver =
+        (convertedDifference[unit] || 0) * (conversionFactors[unit] || 1);
+      convertedDifference[nextUnit] =
+        (convertedDifference[nextUnit] || 0) + carryOver;
+      convertedDifference[unit] = 0;
+    }
+  }
+
+  return formatTimeDifference(convertedDifference, unitsToInclude);
 };

From 6ac0f24c02ee2f28b4206d42bec2899381dd342a Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 27 Mar 2025 20:33:15 +0000
Subject: [PATCH 7/9] test: time between dates

---
 .idea/workspace.xml                           | 75 ++++++++-------
 .../tools/time/time-between-dates/service.ts  | 30 +-----
 .../time-between-dates.service.test.ts        | 96 +++++++++++++++++++
 3 files changed, 138 insertions(+), 63 deletions(-)
 create mode 100644 src/pages/tools/time/time-between-dates/time-between-dates.service.test.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 391285d..d32e2e3 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,10 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: zoom on hover">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: time between dates">
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/time-between-dates.service.test.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/time/time-between-dates.tsx" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/service.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -155,6 +154,7 @@
     "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
     "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
     "Vitest.replaceText function.executor": "Run",
+    "Vitest.timeBetweenDates.executor": "Run",
     "git-widget-placeholder": "fork/TheLukasHenry/days-calculator-#51",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
@@ -206,17 +206,17 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.dev">
-    <configuration name="Create transparent PNG.should make png color transparent" type="JavaScriptTestRunnerPlaywright" temporary="true" nameIsGenerated="true">
+  <component name="RunManager" selected="Vitest.calculateTimeBetweenDates">
+    <configuration name="calculateTimeBetweenDates" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
-      <playwright-package value="$PROJECT_DIR$/node_modules/@playwright/test" />
+      <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
       <working-dir value="$PROJECT_DIR$" />
+      <vitest-options value="--run" />
       <envs />
-      <scope-kind value="TEST" />
-      <test-file value="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/create-transparent.e2e.spec.ts" />
+      <scope-kind value="SUITE" />
+      <test-file value="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/time-between-dates.service.test.ts" />
       <test-names>
-        <test-name value="Create transparent PNG" />
-        <test-name value="should make png color transparent" />
+        <test-name value="calculateTimeBetweenDates" />
       </test-names>
       <method v="2" />
     </configuration>
@@ -247,6 +247,19 @@
       </test-names>
       <method v="2" />
     </configuration>
+    <configuration name="timeBetweenDates" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
+      <node-interpreter value="project" />
+      <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
+      <working-dir value="$PROJECT_DIR$" />
+      <vitest-options value="--run" />
+      <envs />
+      <scope-kind value="SUITE" />
+      <test-file value="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/time-between-dates.service.test.ts" />
+      <test-names>
+        <test-name value="timeBetweenDates" />
+      </test-names>
+      <method v="2" />
+    </configuration>
     <configuration default="true" type="docker-deploy" factoryName="dockerfile" temporary="true">
       <deployment type="dockerfile">
         <settings />
@@ -263,30 +276,20 @@
       <envs />
       <method v="2" />
     </configuration>
-    <configuration name="test:e2e" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
-      <package-json value="$PROJECT_DIR$/package.json" />
-      <command value="run" />
-      <scripts>
-        <script value="test:e2e" />
-      </scripts>
-      <node-interpreter value="project" />
-      <envs />
-      <method v="2" />
-    </configuration>
     <list>
-      <item itemvalue="npm.test:e2e" />
       <item itemvalue="npm.dev" />
-      <item itemvalue="Playwright.Create transparent PNG.should make png color transparent" />
+      <item itemvalue="Vitest.calculateTimeBetweenDates" />
+      <item itemvalue="Vitest.timeBetweenDates" />
       <item itemvalue="Vitest.parsePageRanges" />
       <item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" />
     </list>
     <recent_temporary>
       <list>
+        <item itemvalue="Vitest.calculateTimeBetweenDates" />
+        <item itemvalue="Vitest.timeBetweenDates" />
         <item itemvalue="npm.dev" />
         <item itemvalue="Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp" />
         <item itemvalue="Vitest.parsePageRanges" />
-        <item itemvalue="Playwright.Create transparent PNG.should make png color transparent" />
-        <item itemvalue="npm.test:e2e" />
       </list>
     </recent_temporary>
   </component>
@@ -372,15 +375,7 @@
       <workItem from="1741971589699" duration="371000" />
       <workItem from="1743018497879" duration="3895000" />
       <workItem from="1743047367993" duration="986000" />
-      <workItem from="1743103182313" duration="3430000" />
-    </task>
-    <task id="LOCAL-00123" summary="fix: bg">
-      <option name="closed" value="true" />
-      <created>1740505390205</created>
-      <option name="number" value="00123" />
-      <option name="presentableId" value="LOCAL-00123" />
-      <option name="project" value="LOCAL" />
-      <updated>1740505390205</updated>
+      <workItem from="1743103182313" duration="4264000" />
     </task>
     <task id="LOCAL-00124" summary="docs: readme">
       <option name="closed" value="true" />
@@ -766,7 +761,15 @@
       <option name="project" value="LOCAL" />
       <updated>1743052111988</updated>
     </task>
-    <option name="localTasksCounter" value="172" />
+    <task id="LOCAL-00172" summary="refactor: time between dates">
+      <option name="closed" value="true" />
+      <created>1743106796406</created>
+      <option name="number" value="00172" />
+      <option name="presentableId" value="LOCAL-00172" />
+      <option name="project" value="LOCAL" />
+      <updated>1743106796406</updated>
+    </task>
+    <option name="localTasksCounter" value="173" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -813,7 +816,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: smooth scroll for use this tool and examles" />
     <MESSAGE value="feat: minify json" />
     <MESSAGE value="feat: stringify json" />
     <MESSAGE value="feat: arithmetic sequence" />
@@ -838,7 +840,8 @@
     <MESSAGE value="chore: text result extensions" />
     <MESSAGE value="chore: show new tools in landing" />
     <MESSAGE value="chore: zoom on hover" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: zoom on hover" />
+    <MESSAGE value="refactor: time between dates" />
+    <option name="LAST_COMMIT_MESSAGE" value="refactor: time between dates" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/tools/time/time-between-dates/service.ts b/src/pages/tools/time/time-between-dates/service.ts
index be1a5ac..785f392 100644
--- a/src/pages/tools/time/time-between-dates/service.ts
+++ b/src/pages/tools/time/time-between-dates/service.ts
@@ -119,35 +119,11 @@ export const formatTimeWithLargestUnit = (
   difference: TimeDifference,
   largestUnit: TimeUnit
 ): string => {
-  const conversionFactors: Record<TimeUnit, number> = {
-    years: 365.2425, // Leap years considered
-    months: 30.436875, // Average month length
-    days: 24, // Hours per day
-    hours: 60, // Minutes per hour
-    minutes: 60, // Seconds per minute
-    seconds: 1000, // Milliseconds per second
-    milliseconds: 1
-  };
-
   const largestUnitIndex = unitHierarchy.indexOf(largestUnit);
   const unitsToInclude = unitHierarchy.slice(largestUnitIndex);
 
-  // Deep copy to avoid mutating original object
-  const convertedDifference = { ...difference };
+  // Preserve only whole values, do not apply fractional conversions
+  const adjustedDifference: TimeDifference = { ...difference };
 
-  let carryOver = 0;
-  for (let i = 0; i < largestUnitIndex; i++) {
-    const unit = unitHierarchy[i];
-    const nextUnit = unitHierarchy[i + 1];
-
-    if (nextUnit) {
-      carryOver =
-        (convertedDifference[unit] || 0) * (conversionFactors[unit] || 1);
-      convertedDifference[nextUnit] =
-        (convertedDifference[nextUnit] || 0) + carryOver;
-      convertedDifference[unit] = 0;
-    }
-  }
-
-  return formatTimeDifference(convertedDifference, unitsToInclude);
+  return formatTimeDifference(adjustedDifference, unitsToInclude);
 };
diff --git a/src/pages/tools/time/time-between-dates/time-between-dates.service.test.ts b/src/pages/tools/time/time-between-dates/time-between-dates.service.test.ts
new file mode 100644
index 0000000..5a8db7f
--- /dev/null
+++ b/src/pages/tools/time/time-between-dates/time-between-dates.service.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest';
+import {
+  calculateTimeBetweenDates,
+  formatTimeDifference,
+  formatTimeWithLargestUnit,
+  getTimeWithTimezone
+} from './service';
+
+// Utility function to create a date
+const createDate = (
+  year: number,
+  month: number,
+  day: number,
+  hours = 0,
+  minutes = 0,
+  seconds = 0
+) => new Date(Date.UTC(year, month - 1, day, hours, minutes, seconds));
+describe('calculateTimeBetweenDates', () => {
+  it('should calculate the correct time difference', () => {
+    const startDate = createDate(2023, 1, 1);
+    const endDate = createDate(2024, 1, 1);
+    const result = calculateTimeBetweenDates(startDate, endDate);
+
+    expect(result.years).toBe(1);
+    expect(result.months).toBe(12);
+    expect(result.days).toBeGreaterThanOrEqual(365);
+  });
+
+  it('should swap dates if startDate is after endDate', () => {
+    const startDate = createDate(2024, 1, 1);
+    const endDate = createDate(2023, 1, 1);
+    const result = calculateTimeBetweenDates(startDate, endDate);
+    expect(result.years).toBe(1);
+  });
+});
+
+describe('formatTimeDifference', () => {
+  it('should format time difference correctly', () => {
+    const difference = {
+      years: 1,
+      months: 2,
+      days: 10,
+      hours: 5,
+      minutes: 30,
+      seconds: 0,
+      milliseconds: 0
+    };
+    expect(formatTimeDifference(difference)).toBe(
+      '1 years, 2 months, 10 days, 5 hours, 30 minutes'
+    );
+  });
+
+  it('should return 0 seconds if all values are zero', () => {
+    expect(
+      formatTimeDifference({
+        years: 0,
+        months: 0,
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+        milliseconds: 0
+      })
+    ).toBe('0 seconds');
+  });
+});
+
+describe('getTimeWithTimezone', () => {
+  it('should convert UTC date to specified timezone', () => {
+    const date = getTimeWithTimezone('2025-03-27', '12:00:00', 'GMT+2');
+    expect(date.getUTCHours()).toBe(10); // 12:00 GMT+2 is 10:00 UTC
+  });
+
+  it('should throw error for invalid timezone', () => {
+    expect(() =>
+      getTimeWithTimezone('2025-03-27', '12:00:00', 'INVALID')
+    ).toThrow('Invalid timezone format');
+  });
+});
+
+describe('formatTimeWithLargestUnit', () => {
+  it('should format time with the largest unit', () => {
+    const difference = {
+      years: 0,
+      months: 1,
+      days: 15,
+      hours: 12,
+      minutes: 0,
+      seconds: 0,
+      milliseconds: 0
+    };
+    expect(formatTimeWithLargestUnit(difference, 'days')).toContain(
+      '15 days, 12 hours'
+    );
+  });
+});

From f9e23d528aab3c6c51e034e993cbb483e7edb69f Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 27 Mar 2025 21:31:23 +0000
Subject: [PATCH 8/9] chore: time between dates icon

---
 .idea/workspace.xml                           | 76 +++++++++----------
 .../tools/time/time-between-dates/meta.ts     |  2 +-
 2 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d32e2e3..8296def 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,9 +5,7 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: time between dates">
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/time-between-dates.service.test.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/time/time-between-dates/meta.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -43,66 +41,66 @@
     &quot;state&quot;: &quot;OPEN&quot;
   }
 }</component>
-  <component name="GitHubPullRequestState"><![CDATA[{
-  "prStates": [
+  <component name="GitHubPullRequestState">{
+  &quot;prStates&quot;: [
     {
-      "id": {
-        "id": "PR_kwDOMJIfts51PkS9",
-        "number": 22
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts51PkS9&quot;,
+        &quot;number&quot;: 22
       },
-      "lastSeen": 1741207144695
+      &quot;lastSeen&quot;: 1741207144695
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6NiNYl",
-        "number": 32
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6NiNYl&quot;,
+        &quot;number&quot;: 32
       },
-      "lastSeen": 1741209723869
+      &quot;lastSeen&quot;: 1741209723869
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6Nheyd",
-        "number": 31
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6Nheyd&quot;,
+        &quot;number&quot;: 31
       },
-      "lastSeen": 1741213371410
+      &quot;lastSeen&quot;: 1741213371410
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6NmRBs",
-        "number": 33
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6NmRBs&quot;,
+        &quot;number&quot;: 33
       },
-      "lastSeen": 1741282429036
+      &quot;lastSeen&quot;: 1741282429036
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts5zyFTs",
-        "number": 15
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts5zyFTs&quot;,
+        &quot;number&quot;: 15
       },
-      "lastSeen": 1741535540953
+      &quot;lastSeen&quot;: 1741535540953
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6QQB3c",
-        "number": 59
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6QQB3c&quot;,
+        &quot;number&quot;: 59
       },
-      "lastSeen": 1743018960900
+      &quot;lastSeen&quot;: 1743018960900
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6QMPEg",
-        "number": 58
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6QMPEg&quot;,
+        &quot;number&quot;: 58
       },
-      "lastSeen": 1743019452983
+      &quot;lastSeen&quot;: 1743019452983
     },
     {
-      "id": {
-        "id": "PR_kwDOMJIfts6QZvRI",
-        "number": 61
+      &quot;id&quot;: {
+        &quot;id&quot;: &quot;PR_kwDOMJIfts6QZvRI&quot;,
+        &quot;number&quot;: 61
       },
-      "lastSeen": 1743103196866
+      &quot;lastSeen&quot;: 1743103196866
     }
   ]
-}]]></component>
+}</component>
   <component name="GithubPullRequestsUISettings">{
   &quot;selectedUrlAndAccountId&quot;: {
     &quot;url&quot;: &quot;https://github.com/iib0011/omni-tools.git&quot;,
@@ -155,7 +153,7 @@
     "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
     "Vitest.replaceText function.executor": "Run",
     "Vitest.timeBetweenDates.executor": "Run",
-    "git-widget-placeholder": "fork/TheLukasHenry/days-calculator-#51",
+    "git-widget-placeholder": "main",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src/components/input",
diff --git a/src/pages/tools/time/time-between-dates/meta.ts b/src/pages/tools/time/time-between-dates/meta.ts
index 3676dda..a94f6ec 100644
--- a/src/pages/tools/time/time-between-dates/meta.ts
+++ b/src/pages/tools/time/time-between-dates/meta.ts
@@ -4,7 +4,7 @@ import { lazy } from 'react';
 export const tool = defineTool('time', {
   name: 'Time Between Dates',
   path: 'time-between-dates',
-  icon: 'mdi:calendar-clock',
+  icon: 'tabler:clock-minus',
   description:
     'Calculate the exact time difference between two dates and times, with support for different timezones. This tool provides a detailed breakdown of the time difference in various units (years, months, days, hours, minutes, and seconds).',
   shortDescription:

From f31b2cb35084c3770ba8ae72f3101da2b868686f Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Fri, 28 Mar 2025 13:23:49 +0000
Subject: [PATCH 9/9] Update release version

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4b25635..fb1a1c5 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
         <img src="src/assets/logo.png" width="300" />
         <br /><br />
         <a href="https://github.com/iib0011/omni-tools/releases">
-          <img src="https://img.shields.io/badge/version-0.1.0-blue?style=for-the-badge" />
+          <img src="https://img.shields.io/badge/version-0.2.0-blue?style=for-the-badge" />
         </a>
         <a href="https://hub.docker.com/r/iib0011/omni-tools">
           <img src="https://img.shields.io/docker/pulls/iib0011/omni-tools?style=for-the-badge&logo=docker" />