feature: custom time range

[putradpangestu]

❗ Important Announcements

Click here for more details:

⚠️ Please Note: We do not accept all types of pull requests, and we want to ensure we don’t waste your time. Before submitting, make sure you have read our pull request guidelines: Pull Request Rules

🚫 Please Avoid Unnecessary Pinging of Maintainers

We kindly ask you to refrain from pinging maintainers unless absolutely necessary. Pings are for critical/urgent pull requests that require immediate attention.

📋 Overview

• Smart datetime inputs: Full-width with proper "From:" and "To:" labels
• Real-time duration display: Shows "Duration: 2d 5h 30m" as you select dates
• Auto-validation: Prevents invalid ranges, auto-corrects if "from" > "to"
• Reordered sections: Custom range at top, Quick ranges at bottom
• Persistent dropdown: Added @click.stop to prevent closing while editing dates
• Clean design: Removed duplicate labels, consistent font sizing (0.875rem)
• Mobile-friendly: Responsive design with proper spacing

Smart Date Formatting

• DD MM format: Zero-padded days (07 Sep instead of 7 Sep)

Intelligent year display:

• Different years: 07 Sep 2024, 00:00 - 25 Feb 2025, 01:00
• Same year: 07 Sep, 00:00 - 25 Feb, 01:00
• Same day: 07 Sep, 00:00 - 01:00

🛠️ Type of change

• 🐛 Bugfix (a non-breaking change that resolves an issue)
• ✨ New feature (a non-breaking change that adds new functionality)
• ⚠️ Breaking change (a fix or feature that alters existing functionality in a way that could cause issues)
• 🎨 User Interface (UI) updates
• 📄 New Documentation (addition of new documentation)
• 📄 Documentation Update (modification of existing documentation)
• 📄 Documentation Update Required (the change requires updates to related documentation)
• 🔧 Other (please specify):
  • Provide additional details here.

📄 Checklist

• 🔍 My code adheres to the style guidelines of this project.
• 🦿 I have indicated where (if any) I used an LLM for the contributions
• ✅ I ran ESLint and other code linters for modified files.
• 🛠️ I have reviewed and tested my code.
• 📝 I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
• ⚠️ My changes generate no new warnings.
• 🤖 My code needed automated testing. I have added them (this is an optional task).
• 📄 Documentation updates are included (if applicable).
• 🔒 I have considered potential security impacts and mitigated risks.
• 🧰 Dependency updates are listed and explained.
• 📚 I have read and understood the Pull Request guidelines.

📷 Screenshots or Visual Changes

• UI Modifications: Highlight any changes made to the user interface.
• Before & After: Include screenshots or comparisons (if applicable).

Event	Before	After
UP
DOWN
Certificate-expiry
Testing

[michaelact]

Can we change this query to calculate the uptime percentage directly, instead of using lines 84–108? What is the recommended way to do this with better performance?

[CommanderStorm]

Please cut the feature down to the minimum product. 700 lines is a bit too much for me to review currently and this adds too many features in one go.

Also make sure to thoroughly self-review any code created by an LLM and indicate where you did so that I can adjust my review accordingly.