feat: Add Unix Timestamp (Epoch) Converter Utility

app/components/developmentToolsComponent/epochConverter.tsx

@@ -0,0 +1,207 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Button, Input, DatePicker, message, Tooltip, Card, Typography, Space, Row, Col, ConfigProvider, theme } from "antd";
+import dayjs, { Dayjs } from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import utc from "dayjs/plugin/utc";
+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);
+
+const { Title, Text } = Typography;
+
+const EpochConverter = () => {
+  // Timestamp in seconds (string to allow clear/typing)
+  const [timestamp, setTimestamp] = useState<string>(Math.floor(Date.now() / 1000).toString());
+  // Date object for DatePicker
+  const [date, setDate] = useState<Dayjs | null>(dayjs());
+  // Input mode: 'seconds' or 'milliseconds'
+  const [isMilliseconds, setIsMilliseconds] = useState<boolean>(false);
+
+  // Update inputs when timestamp changes
+  const handleTimestampChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setTimestamp(val);
+
+    if (!val) {
+      setDate(null);
+      return;
+    }
+
+    const num = Number(val);
+    if (!isNaN(num)) {
+      // Auto-detect milliseconds if value is large (simple heuristic: > 10000000000 implies likely ms for recent dates)
+      // Standard unix timestamp for today is ~1.7e9 (10 digits). MS is ~1.7e12 (13 digits).
+      // However, user might toggle the switch manually.
+      // We'll trust the toggle or update the date based on current toggle.
+      const timestampInMs = isMilliseconds ? num : num * 1000;
+      setDate(dayjs(timestampInMs));
+    }
+  };
+
+  const handleDateChange = (value: Dayjs | null) => {
+    setDate(value);
+    if (value) {
+      const ms = value.valueOf();
+      setTimestamp(isMilliseconds ? ms.toString() : Math.floor(ms / 1000).toString());
+    } else {
+      setTimestamp("");
+    }
+  };
+
+  const setNow = () => {
+    const now = dayjs();
+    setDate(now);
+    const ms = now.valueOf();
+    setTimestamp(isMilliseconds ? ms.toString() : Math.floor(ms / 1000).toString());
+  };
+
+  const clear = () => {
+    setTimestamp("");
+    setDate(null);
+  };
+
+  const toggleUnit = () => {
+    const newVal = !isMilliseconds;
+    setIsMilliseconds(newVal);
+    // Adjust current timestamp value
+    if (timestamp) {
+        const num = Number(timestamp);
+        if (!isNaN(num)) {
+            if (newVal) {
+                // sec -> ms
+                setTimestamp((num * 1000).toString());
+            } else {
+                // ms -> sec
+                setTimestamp(Math.floor(num / 1000).toString());
+            }
+        }
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    message.success("Copied to clipboard!");
+  };
+
+  // Derived values for display
+  const currentDayjs = timestamp ? dayjs(isMilliseconds ? Number(timestamp) : Number(timestamp) * 1000) : null;
+  const isValid = currentDayjs && currentDayjs.isValid();
+
+  return (
+    <div className={`${DevelopmentToolsStyles.developmentToolsContainer} w-full bg-[#FFFFFF1A] rounded-2xl shadow-lg p-8 md:mt-8 mt-4`}>
+     <ConfigProvider
+        theme={{
+          algorithm: theme.darkAlgorithm,
+          components: {
+            Input: {
+              colorBgContainer: '#000',
+              colorBorder: '#444',
+            },
+            DatePicker: {
+              colorBgContainer: '#000',
+              colorBorder: '#444',
+            },
+          }
+        }}
+      >
+      <div className="md:w-[90%] mx-auto">
+        <Space direction="vertical" size="large" style={{ width: '100%' }}>
+
+          {/* Controls */}
+          <Row gutter={[16, 16]} align="middle">
+             <Col xs={24} md={12}>
+                <Space>
+                    <Button type="primary" onClick={setNow} icon={<ReloadOutlined />}>Now</Button>
+                    <Button onClick={clear} icon={<DeleteOutlined />}>Clear</Button>
+                    <Button onClick={toggleUnit}>
+                        Switch to {isMilliseconds ? "Seconds" : "Milliseconds"}
+                    </Button>
+                </Space>
+             </Col>
+          </Row>
+
+          {/* Inputs */}
+          <Row gutter={[24, 24]}>
+            <Col xs={24} md={12}>
+              <Text strong className="text-white block mb-2">Unix Timestamp ({isMilliseconds ? "Milliseconds" : "Seconds"})</Text>
+              <Input 
+                value={timestamp} 
+                onChange={handleTimestampChange} 
+                placeholder={`Enter timestamp in ${isMilliseconds ? "milliseconds" : "seconds"}...`}
+                size="large"
+                style={{ marginTop: 8 }}
+              />
+            </Col>
+            <Col xs={24} md={12}>
+              <Text strong className="text-white block mb-2">Date & Time (Local)</Text>
+              <DatePicker 
+                showTime 
+                value={date} 
+                onChange={handleDateChange} 
+                style={{ width: '100%', marginTop: 8 }} 
+                size="large"
+              />
+            </Col>
+          </Row>
+
+          {/* Outputs */}
+          {isValid ? (
+             <div className="bg-black/40 p-6 rounded-xl mt-6 border border-gray-800">
+                <Row gutter={[16, 16]}>
+                    <Col xs={24} sm={12}>
+                        <div className="bg-black p-4 rounded-lg border border-gray-800">
+                             <Text type="secondary" className="block mb-2 text-xs uppercase tracking-wider">Local Time</Text>
+                             <div className="flex justify-between items-center">
+                                <Text copyable={{ text: currentDayjs.format('YYYY-MM-DD HH:mm:ss') }} className="text-lg font-mono text-green-400">
+                                    {currentDayjs.format('YYYY-MM-DD HH:mm:ss')}
+                                </Text>
+                             </div>
+                        </div>
+                    </Col>
+                    <Col xs={24} sm={12}>
+                        <div className="bg-black p-4 rounded-lg border border-gray-800">
+                            <Text type="secondary" className="block mb-2 text-xs uppercase tracking-wider">UTC Time</Text>
+                            <div className="flex justify-between items-center">
+                                <Text copyable={{ text: currentDayjs.utc().format('YYYY-MM-DD HH:mm:ss') + " UTC" }} className="text-lg font-mono text-blue-400">
+                                    {currentDayjs.utc().format('YYYY-MM-DD HH:mm:ss')} UTC
+                                </Text>
+                            </div>
+                        </div>
+                    </Col>
+                    <Col xs={24} sm={12}>
+                       <div className="bg-black p-4 rounded-lg border border-gray-800">
+                            <Text type="secondary" className="block mb-2 text-xs uppercase tracking-wider">ISO 8601</Text>
+                            <div className="flex justify-between items-center">
+                                <Text copyable={{ text: currentDayjs.toISOString() }} className="text-sm font-mono text-yellow-500 break-all">
+                                    {currentDayjs.toISOString()}
+                                </Text>
+                            </div>
+                        </div>
+                    </Col>
+                    <Col xs={24} sm={12}>
+                        <div className="bg-black p-4 rounded-lg border border-gray-800 h-full flex flex-col justify-center">
+                            <Text type="secondary" className="block mb-2 text-xs uppercase tracking-wider">Relative Time</Text>
+                            <Text className="text-xl font-bold text-white">
+                                {currentDayjs.fromNow()}
+                            </Text>
+                        </div>
+                    </Col>
+                </Row>
+             </div>
+          ) : (
+            timestamp && <Text type="danger">Invalid Timestamp</Text>
+          )}
+
+        </Space>
+      </div>
+      </ConfigProvider>
+    </div>
+  );
+};
+
+export default EpochConverter;

app/libs/constants.tsx

@@ -188,6 +188,7 @@ import XmlToJsonConverter from '../components/developmentToolsComponent/xmlToJso
 import XorCalculator from '../components/developmentToolsComponent/xorCalculator';
 import CurlToCodeConverter from '../components/developmentToolsComponent/curlToCodeConverter';
 import YAMLFormatterAndBeautifier from '../components/developmentToolsComponent/yamlFormatterAndBeautifier';
+import EpochConverter from '../components/developmentToolsComponent/epochConverter';
 
 export const WEB_URL = 'https://www.betterbugs.io';
 
@@ -1798,6 +1799,7 @@ export const PATHS = {
   CRONTAB_GENERATOR: '/crontab-generator',
   MORSE_CODE_TRANSLATOR: '/morse-code-translator',
   CURL_TO_CODE_CONVERTER: '/curl-to-code-converter',
+  UNIX_TIMESTAMP_CONVERTER: '/unix-timestamp-converter',
 };
 
 export const developmentToolsRoutes = [
@@ -2513,6 +2515,10 @@ export const developmentToolsRoutes = [
     path: PATHS.CURL_TO_CODE_CONVERTER,
     component: <CurlToCodeConverter />,
   },
+  {
+    path: PATHS.UNIX_TIMESTAMP_CONVERTER,
+    component: <EpochConverter />,
+  },
 ];
 
 // lorem ipsum text

app/libs/developmentToolsConstant.tsx

@@ -17553,4 +17553,90 @@ family[1]: "Beth"`,
       og_image: '/images/og-images/Cover.png',
     },
   },
+  ['unix-timestamp-converter']: {
+    hero_section: {
+      title: 'Unix Timestamp Converter',
+      description:
+        'The Unix Timestamp Converter on BetterBugs.io is a free tool to convert Unix timestamps to human-readable dates and vice versa.',
+    },
+    development_tools_list: [
+      { tool: 'Date Generator', url: PATHS.RANDOM_DATE_GENERATOR },
+      { tool: 'Time Generator', url: PATHS.RANDOM_CLOCK_TIME_GENERATOR },
+    ],
+    development_tools_about_details: {
+      about_title: 'What is the Unix Timestamp Converter?',
+      about_description: [
+        {
+          description:
+            'The Unix Timestamp Converter allows you to instantly convert Unix timestamps (seconds or milliseconds) to human-readable dates, or dates to timestamps.',
+        },
+        {
+          description:
+            'This tool is essential for developers debugging logs, database entries, or working with time-series data.',
+        },
+      ],
+    },
+    development_tools_steps_guide: {
+      guide_title: 'Step-by-Step Guide',
+      guide_description: 'Using the converter is simple:',
+      steps: [
+        {
+          step_key: 'Step 1:',
+          step_title: 'Enter Timestamp or Select Date:',
+          step_description:
+            'Input a Unix timestamp in the text field, or pick a date and time from the calendar.',
+        },
+        {
+          step_key: 'Step 2:',
+          step_title: 'Select Unit (Optional):',
+          step_description:
+            'Toggle between Seconds and Milliseconds if needed.',
+        },
+        {
+          step_key: 'Step 3:',
+          step_title: 'View Results:',
+          step_description:
+            'See the converted Local Time, UTC Time, ISO 8601 string, and relative time instantly.',
+        },
+      ],
+    },
+    development_tools_how_use: {
+      how_use_title: 'Common Use Cases:',
+      how_use_description:
+        'The Unix Timestamp Converter is useful for:',
+      point: [
+        {
+          title: 'Debugging Logs',
+          description:
+            'Convert timestamps from server logs to readable dates to understand when events occurred.',
+        },
+        {
+          title: 'Database Management',
+          description:
+            'Verify and interpret timestamp columns in databases.',
+        },
+        {
+          title: 'API Development',
+          description:
+            'Validate timestamp formats exchanged between services.',
+        },
+        {
+          title: 'Time Calculation',
+          description:
+            'Quickly check relative times (e.g., "how long ago was this timestamp?").',
+        },
+      ],
+    },
+    meta_data: {
+      meta_title: 'Unix Timestamp Converter - Developer Utility',
+      meta_description:
+        'Free online Unix Timestamp Converter. Convert between Epoch time and human-readable dates easily. Supports seconds and milliseconds.',
+      og_title: 'Unix Timestamp Converter - Developer Utility',
+      og_description:
+        'Convert between Epoch time and human-readable dates instantly. Supports seconds and milliseconds.',
+      og_image: '/images/og-images/Cover.png',
+    },
+  },
 };
+
+