Clover Map

Clover Map is a powerful and intuitive project management tool that leverages treemap visualization to give you a clear, hierarchical overview of your projects. It helps you track, manage, and optimize workflows with ease, making complex project structures easier to understand and navigate. Originally designed for Information System migrations, Clover Map is now a versatile solution for any industry dealing with multi-level data and intricate hierarchies.

Ready to take control of your projects? Try Clover Map today and experience seamless project management with treemap visualization!

🎨 Visual Overview

Here's a sneak peek of Clover Map in action:

Explore the interface and see how easy it is to manage complex projects with a visual treemap overview.

✨ Features

• 🌳 Treemap Visualization: Represent complex project hierarchies with an intuitive overview
• 🛠️ Dynamic Status Management: Create and customize statuses to adapt to various project types
• 🔄 Interactive Navigation: Easily move from overview to task details
• ⚡ Real-time Updates: Instantly refresh task status with a single click
• 🗂️ Multi-project Support: Manage multiple projects and switch between them effortlessly
• 📱 Responsive Design: Enjoy a consistent experience across desktop and mobile
• 📂 Data Import/Export: Easily import and export your project structures in JSON
• 🚀 Drag-and-Drop: Intuitively reorganize your project structure
• 📑 Collapsible Sections: Optimize your view by folding/unfolding project sections
• ✏️ Editing Tools: Add, rename, or delete sections and tasks directly in the interface
• 🟢 Visual Indicators: Quickly assess progress through color-coded status indicators
• 🎛️ Customizable Views: Toggle between different display modes based on your preferences
• 💾 No Database: All data is stored locally in your browser

🛠️ Installation

To install and run Clover Map locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/heristop/clover-map.git
   cd clover-map

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm run dev

4. Open your browser and navigate to http://localhost:3000.

📚 Usage

Getting Started

1. Load a Project:

   • On first launch, click "Load Sample Data" to start with a pre-configured project.
   • Or, use the "Upload" button to import your own JSON project file.

2. Navigate the Treemap:

   • Click on sections to expand/collapse them.

Managing Your Project

• Update Statuses: Click on a task to cycle through available statuses.
• Edit Structure: Use the edit mode to add, rename, or delete sections and tasks.
• Customize Workflow: Modify statuses in the configuration panel to match your process.

Data Management

• Import: Click the "Upload" button to load a project from a JSON file.
• Export: Use the "Export" button to save your current project as a JSON file.

Tip

• Toggle between dark and light modes for comfortable viewing.
• Use the collapse/expand feature in the project panel for a cleaner interface.
• Regularly export your project to backup your work.

For more detailed information on JSON structure and advanced features, please refer to our documentation.

Stay tuned for updates, and feel free to suggest features!

💬 Feedback and Contributions

We highly value your feedback to help improve Clover Map! Whether you encounter a bug, have a feature request, or want to contribute code, here’s how you can get involved:

• 💡 Suggestions: Open an issue for new feature ideas or improvements.
• 🐛 Bug Reports: If you find any bugs, please open a bug report on the GitHub Issues page.
• 🔧 Contributions: We welcome pull requests! Feel free to fork the repo and submit your changes for review.