feat: Add Unix Timestamp (Epoch) Converter Utility

[udaykiran243]

Feature: Unix Timestamp (Epoch) Converter Utility

Description

This PR introduces a new utility tool, Unix Timestamp Converter, to the development tools suite. This tool allows users to seamlessly convert between Unix timestamps (Seconds/Milliseconds) and human-readable dates. It's designed to help developers, QAs, and investigators debugging logs or working with time-series data.

fixes #16

Key Features

• Dual-Mode Conversion:
  • Timestamp → Date: Input a numeric timestamp (auto-detects seconds vs milliseconds for large values).
  • Date → Timestamp: Pick a date & time from a calendar to get the epoch value.
• Unit Toggle: Explicit switch between Seconds and Milliseconds.
• Formatted Outputs:
  • Local Time
  • UTC Time
  • ISO 8601 Format
  • Relative Time (e.g., "2 minutes ago")
• Quick Actions: "Now" button, "Clear", and "Copy to Clipboard" for all outputs.
• Dark Mode UI: Fully styled with Ant Design's dark algorithm to match the application's aesthetic.

Implementation Details

• New Component: app/components/developmentToolsComponent/epochConverter.tsx
• Route Added: /unix-timestamp-converter in app/libs/constants.tsx
• Content & SEO: Metadata and usage guide added to app/libs/developmentToolsConstant.tsx
• Dependencies: Uses dayjs for robust date manipulation and timezone handling.

checklist

• Component implemented with dark mode support.
• Route registered and page accessible.
• SEO metadata and content added.
• Responsive design verified (mobile/desktop).

hey @rishima17 raised on develop branch

[rishima17]

@udaykiran243 also attach a reference video of the tool implemented.

[udaykiran243]

https://drive.google.com/file/d/1X9T9cysvlUFFgTY3OSvrVf76Cx9z1VRt/view?usp=sharing

the video size is more, so I'm sharing the drive link.

[udaykiran243]

hey @rishima17 @SyedFahad7 @mohitmalibetterbugs resolved the merge conflicts please review.

[SyedFahad7]

Hi @udaykiran243, I’m seeing a TypeScript error in epochConverter.tsx related to the Ant Design ConfigProvider theme config..

borderColor is not a valid component token for Input or DatePicker in AntD v5, which causes a type error.

Please replace borderColor with the correct token (with likely colorBorder) or remove it if not needed. We should keep the codebase type safe.

Once updated, I’ll re-review.

[udaykiran243]

hey @SyedFahad7 made the changes.

[Copilot]

Pull request overview

Adds a new “Unix Timestamp Converter” tool page to the BetterBugs development tools suite, including routing and SEO/content metadata.

Changes:

• Added EpochConverter React component to convert between epoch timestamps (sec/ms) and dates with multiple formatted outputs.
• Registered the new route (/unix-timestamp-converter) in PATHS and developmentToolsRoutes.
• Added tool metadata/content to DEVELOPMENTTOOLS and introduced dayjs dependency.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
package.json	Adds dayjs dependency needed by the new converter component.
package-lock.json	Locks dayjs (and other dependency graph changes) for reproducible installs.
app/libs/developmentToolsConstant.tsx	Adds SEO + usage content entry for the new converter slug.
app/libs/constants.tsx	Registers the new path constant and route component mapping.
app/components/developmentToolsComponent/epochConverter.tsx	Implements the Unix timestamp ↔ date converter UI/logic.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

CopyOutlined is imported but not used anywhere in this component. Please remove it (or wire it into the UI) to keep lint clean.

Suggested change

	import { CopyOutlined, ReloadOutlined, DeleteOutlined } from "@ant-design/icons";
	import { ReloadOutlined, DeleteOutlined } from "@ant-design/icons";

[Copilot]

copyToClipboard is currently unused (the UI uses Text's copyable prop instead). Please remove this helper (or switch the UI to call it) to avoid unused-function lint errors and potential unhandled clipboard promise rejections.

Suggested change

	const copyToClipboard = (text: string) => {
	navigator.clipboard.writeText(text);
	message.success("Copied to clipboard!");
	};

[Copilot]

With strict: true, currentDayjs is typed as Dayjs | null, but later it’s used as non-null (currentDayjs.format(), utc(), etc.). This will cause TypeScript errors; consider restructuring to explicitly guard (if (!currentDayjs || !currentDayjs.isValid()) ...) so TS can narrow the type in the render branch (or use a non-null assertion if you’re certain).

Suggested change

	const currentDayjs = timestamp ? dayjs(isMilliseconds ? Number(timestamp) : Number(timestamp) * 1000) : null;
	const isValid = currentDayjs && currentDayjs.isValid();
	const num = timestamp ? Number(timestamp) : NaN;
	const currentDayjs = dayjs(isMilliseconds ? num : num * 1000);
	const isValid = !!timestamp && !Number.isNaN(num) && currentDayjs.isValid();

[Copilot]

dayjs/plugin/timezone is imported, but the component doesn’t use .tz() anywhere. If timezone conversion isn’t needed, consider removing the timezone plugin import/usage to reduce bundle size.

Suggested change

	import timezone from "dayjs/plugin/timezone";
	import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
	import { CopyOutlined, ReloadOutlined, DeleteOutlined } from "@ant-design/icons";
	dayjs.extend(relativeTime);
	dayjs.extend(utc);
	dayjs.extend(timezone);
	import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
	import { CopyOutlined, ReloadOutlined, DeleteOutlined } from "@ant-design/icons";
	dayjs.extend(relativeTime);
	dayjs.extend(utc);

[Copilot]

dayjs.extend(timezone) is currently unused since the component doesn’t call .tz(). Consider dropping this extend call (and the plugin import) unless you plan to add explicit timezone selection/conversion.

Suggested change

	import timezone from "dayjs/plugin/timezone";
	import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
	import { CopyOutlined, ReloadOutlined, DeleteOutlined } from "@ant-design/icons";
	dayjs.extend(relativeTime);
	dayjs.extend(utc);
	dayjs.extend(timezone);
	import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
	import { CopyOutlined, ReloadOutlined, DeleteOutlined } from "@ant-design/icons";
	dayjs.extend(relativeTime);
	dayjs.extend(utc);

[Copilot]

Unused imports here (useEffect and several AntD exports like Tooltip/Card) should be removed to avoid next lint failures. Please trim the import list to only what the component uses.

Suggested change

	import React, { useState, useEffect } from "react";
	import { Button, Input, DatePicker, message, Tooltip, Card, Typography, Space, Row, Col, ConfigProvider, theme } from "antd";
	import React, { useState } from "react";
	import { Button, Input, DatePicker, message, Typography, Space, Row, Col, ConfigProvider, theme } from "antd";

[Copilot]

Title is destructured from Typography but not used. Please remove it (or render a heading with it) to avoid unused-variable lint errors.

Suggested change

	const { Title, Text } = Typography;
	const { Text } = Typography;

[Copilot]

The PR description mentions auto-detecting seconds vs milliseconds, and this block’s comment suggests a heuristic, but the implementation always relies on the current isMilliseconds toggle and never updates it based on the input size. Either implement the heuristic (e.g., switch to ms for 13-digit values / >1e11) or update/remove the comment and PR description to match the actual behavior.

[Copilot]

If the user enters a non-numeric timestamp (e.g. abc), timestamp updates but date is left unchanged, so the DatePicker can show a stale value while the output says "Invalid Timestamp". Consider setting date to null (or otherwise clearing/invalidating it) when Number(val) is NaN to keep the two inputs consistent.

Suggested change

	setDate(dayjs(timestampInMs));
	setDate(dayjs(timestampInMs));
	} else {
	// Clear date when timestamp is non-numeric to avoid stale DatePicker value
	setDate(null);