Skip to content

Vibe coded Gantt Scheduling POC #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NagariaHussain wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Vibe coded Gantt Scheduling POC #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7cf888f
feat: Withdraw Inquiry
NagariaHussain Aug 19, 2025
e1af0d4
feat: Gantt Based Scheduling POC
NagariaHussain Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletions .github/instructions/frappe-gantt.instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
applyTo: '**'
---

<div align="center" markdown="1">
<img src=".github/gantt-logo.jpg" width="80">
<h1>Frappe Gantt</h1>

**A modern, configurable, Gantt library for the web.**
</div>

![Hero Image](.github/hero-image.png)

## Frappe Gantt
Gantt charts are bar charts that visually illustrate a project's tasks, schedule, and dependencies. With Frappe Gantt, you can build beautiful, customizable, Gantt charts with ease.

You can use it anywhere from hobby projects to tracking the goals of your team at the worksplace.

[ERPNext](https://erpnext.com/) uses Frappe Gantt.


### Motivation
We needed a Gantt View for ERPNext. Surprisingly, we couldn't find a visually appealing Gantt library that was open source - so we decided to build it. Initially, the design was heavily inspired by Google Gantt and DHTMLX.


### Key Features
- **Customizable Views**: customize the timeline based on various time periods - day, hour, or year, you have it. You can also create your own views.
- **Ignore Periods**: exclude weekends and other holidays from your tasks' progress calculation.
- **Configure Anything**: spacing, edit access, labels, you can control it all. Change both the style and functionality to meet your needs.
- **Multi-lingual Support**: suitable for companies with an international base.

## Usage

Install with:
```bash
npm install frappe-gantt
```

Include it in your HTML:

```html
<script src="frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="frappe-gantt.css">
```

Or from the CDN:
```html
<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css">
```

Start using Gantt:
```js
let tasks = [
{
id: '1',
name: 'Redesign website',
start: '2016-12-28',
end: '2016-12-31',
progress: 20
},
...
]
let gantt = new Gantt("#gantt", tasks);
```

### Configuration
Frappe Gantt offers a wide range of options to customize your chart.


| **Option** | **Description** | **Possible Values** | **Default** |
|---------------------------|---------------------------------------------------------------------------------|----------------------------------------------------|------------------------------------|
| `arrow_curve` | Curve radius of arrows connecting dependencies. | Any positive integer. | `5` |
| `auto_move_label` | Move task labels when user scrolls horizontally. | `true`, `false` | `false` |
| `bar_corner_radius` | Radius of the task bar corners (in pixels). | Any positive integer. | `3` |
| `bar_height` | Height of task bars (in pixels). | Any positive integer. | `30` |
| `container_height` | Height of the container. | `auto` - dynamic container height to fit all tasks - _or_ any positive integer (for pixels). | `auto` |
| `column_width` | Width of each column in the timeline. | Any positive integer. | 45 |
| `date_format` | Format for displaying dates. | Any valid JS date format string. | `YYYY-MM-DD` |
| `upper_header_height` | Height of the upper header in the timeline (in pixels). | Any positive integer. | `45` |
| `lower_header_height` | Height of the lower header in the timeline (in pixels). | Any positive integer. | `30` |
| `snap_at` | Snap tasks at particular intervel while resizing or dragging. | Any _interval_ (see below) | `1d` |
| `infinite_padding` | Whether to extend timeline infinitely when user scrolls. | `true`, `false` | `true` |
| `holidays` | Highlighted holidays on the timeline. | Object mapping CSS colors to holiday types. Types can either be a) 'weekend', or b) array of _strings_ or _date objects_ or _objects_ in the format `{date: ..., label: ...}` | `{ 'var(--g-weekend-highlight-color)': 'weekend' }` |
| `ignore` | Ignored areas in the rendering | `weekend` _or_ Array of strings or date objects (`weekend` can be present to the array also). | `[]` |
| `language` | Language for localization. | ISO 639-1 codes like `en`, `fr`, `es`. | `en` |
| `lines` | Determines which grid lines to display. | `none` for no lines, `vertical` for only vertical lines, `horizontal` for only horizontal lines, `both` for complete grid. | `both` |
| `move_dependencies` | Whether moving a task automatically moves its dependencies. | `true`, `false` | `true` |
| `padding` | Padding around task bars (in pixels). | Any positive integer. | `18` |
| `popup_on` | Event to trigger the popup display. | `click` _or_ `hover` | `click` |
| `readonly_progress` | Disables editing task progress. | `true`, `false` | `false` |
| `readonly_dates` | Disables editing task dates. | `true`, `false` | `false` |
| `readonly` | Disables all editing features. | `true`, `false` | `false` |
| `scroll_to` | Determines the starting point when chart is rendered. | `today`, `start`, `end`, or a date string. | `today` |
| `show_expected_progress` | Shows expected progress for tasks. | `true`, `false` | `false` |
| `today_button` | Adds a button to navigate to today’s date. | `true`, `false` | `true` |
| `view_mode` | The initial view mode of the Gantt chart. | `Day`, `Week`, `Month`, `Year`. | `Day` |
| `view_mode_select` | Allows selecting the view mode from a dropdown. | `true`, `false` | `false` |

Apart from these ones, two options - `popup` and `view_modes` (plural, not singular) - are available. They have "sub"-APIs, and thus are listed separately.

#### View Mode Configuration
The `view_modes` option determines all the available view modes for the chart. It should be an array of objects.

Each object can have the following properties:
- `name` (string) - the name of view mode.
- `padding` (interval) - the time above.
- `step` - the interval of each column
- `lower_text` (date format string _or_ function) - the format for text in lower header. Blank string for none. The function takes in `currentDate`, `previousDate`, and `lang`, and should return a string.
- `upper_text` (date format string _or_ function) - the format for text in upper header. Blank string for none. The function takes in `currentDate`, `previousDate`, and `lang`, and should return a string.
- `upper_text_frequency` (number) - how often the upper text has a value. Utilized in internal calculation to improve performance.
- `thick_line` (function) - takes in `currentDate`, returns Boolean determining whether the line for that date should be thicker than the others.

Three other options allow you to override general configuration for this view mode alone:
- `date_format`
- `column_width`
- `snap_at`
For details, see the above table.

#### Popup Configuration
`popup` is a function. If it returns
- `false`, there will be no popup.
- `undefined`, the popup will be rendered based on manipulation within the function
- a HTML string, the popup will be that string.

The function receives one object as an argument, containing:
- `task` - the task as an object
- `chart` - the entire Gantt chart
- `get_title`, `get_subtitle`, `get_details` (functions) - get the relevant section as a HTML node.
- `set_title`, `set_subtitle`, `set_details` (functions) - take in the HTML of the relevant section
- `add_action` (function) - accepts two parameters, `html` and `func` - respectively determining the HTML of the action and the callback when the action is pressed.

### API
Frappe Gantt exposes a few helpful methods for you to interact with the chart:

| **Name** | **Description** | **Parameters** |
|---------------------------|---------------------------------------------------------------------------------|------------------------------------------|
| `.update_options` | Re-renders the chart after updating specific options. | `new_options` - object containing new options. |
| `.change_view_mode` | Updates the view mode. | `view_mode` - Name of view mode _or_ view mode object (see above) and `maintain_pos` - whether to go back to current scroll position after rerendering, defaults to `false`. |
| `.scroll_current` | Scrolls to the current date | No parameters. |
| `.update_task` | Re-renders a specific task bar alone | `task_id` - id of task and `new_details` - object containing the task properties to be updated. |

## Development Setup
If you want to contribute enhancements or fixes:

1. Clone this repo.
2. `cd` into project directory.
3. Run `pnpm i` to install dependencies.
4. `pnpm run build` to build files - or `pnpm run build-dev` to build and watch for changes.
5. Open `index.html` in your browser.
6. Make your code changes and test them.

<br />
<br />
<div align="center" style="padding-top: 0.75rem;">
<a href="https://frappe.io" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
</picture>
</a>
</div>
38 changes: 38 additions & 0 deletions POC_SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
## Event Schedule Gantt POC - Quick Summary

🎯 **Objective**: Replace manual child table scheduling with visual Gantt chart experience

### What We Built:
✅ **Full Vue.js POC Component** (`ScheduleGanttPOC.vue`)
✅ **Frappe Gantt Integration** with interactive features
✅ **Multi-Track Support** (Day 1/2, Track 1/2, different rooms)
✅ **CRUD Operations** - Add, Edit, Delete talks/breaks
✅ **Drag & Drop Scheduling** - Visual rescheduling
✅ **Data Export** - JSON format for backend integration
✅ **Responsive UI** - Tailwind styling

### Key Features:
- **Visual Timeline**: See all tracks and schedules at once
- **Conflict Detection**: Immediately spot overlapping sessions
- **Interactive Editing**: Click to edit, drag to reschedule
- **Modal Forms**: User-friendly add/edit experience
- **Track Filtering**: Focus on specific tracks
- **Multiple View Modes**: Day/Week views
- **Real-time Updates**: Changes reflect immediately

### Current vs POC:
**Before**: Manual form fields, no visual context, prone to conflicts
**After**: Visual timeline, drag-drop, instant feedback, better UX

### Demo Setup:
1. Server running at: http://localhost:8081
2. Access via: `/schedule-gantt-poc`
3. Dashboard link added for easy navigation
4. Sample data included (4 tracks, talks, breaks)

### Integration Ready:
- Maps to existing Frappe doctypes (FE Event, Schedule Item, Event Track)
- JSON export matches current data structure
- Ready for backend API integration

**Result**: A complete POC demonstrating how Gantt charts can revolutionize event scheduling UX! 🚀
113 changes: 113 additions & 0 deletions SCHEDULE_GANTT_POC.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
# Event Schedule Gantt POC

## Overview
This is a Proof of Concept (POC) that demonstrates how Frappe Gantt can be used to improve the event scheduling experience. Instead of manually selecting tracks, start times, and end times in a child table format, this POC provides an intuitive visual scheduling interface.

## Current Problem
The existing scheduling system uses a child table approach where users must:
1. Manually select a track from a dropdown
2. Manually enter start time
3. Manually enter end time
4. Repeat for each talk/break
5. No visual representation of schedule conflicts or timeline

## POC Solution
This POC uses Frappe Gantt to provide:
1. **Visual Timeline**: See all tracks and their schedules at a glance
2. **Drag & Drop**: Move talks between time slots easily
3. **Conflict Detection**: Visual indication of overlapping sessions
4. **Multi-Track Support**: Handle multiple tracks (Day 1 Track 1, Day 2 Track 2, etc.)
5. **Interactive Editing**: Click to edit, drag to reschedule
6. **Export Functionality**: Export schedule data for backend integration

## Features Demonstrated

### 1. Data Structure Mapping
- **Current**: Child table with separate track, start_time, end_time fields
- **POC**: Gantt tasks with start/end datetime, visual track grouping

### 2. Track Management
- Support for multiple tracks (Main Hall, Workshop Room, etc.)
- Color-coded tracks for visual distinction
- Filter by specific track

### 3. Schedule Item Types
- **Talks**: Linked to Event Talk doctype
- **Breaks**: Custom descriptions (Coffee Break, Lunch, etc.)

### 4. Interactive Features
- Add new talks/breaks through modal forms
- Edit existing items by clicking
- Delete items with confirmation
- Drag to reschedule (updates start/end times automatically)
- View mode switching (Day/Week views)

### 5. Data Export
- Export current schedule as JSON
- Ready for backend integration
- Maintains original data structure for compatibility

## Technical Implementation

### Dependencies
- `frappe-gantt`: Core Gantt chart library
- `vue 3`: Frontend framework with Composition API
- `tailwindcss`: Styling

### Key Components
1. **Gantt Configuration**: Custom view modes, popup handling, event callbacks
2. **Data Transformation**: Convert schedule items to Gantt tasks format
3. **CRUD Operations**: Add, edit, delete schedule items
4. **Real-time Updates**: Sync changes between Gantt and data model

### Integration Points
The POC is designed to integrate with existing Frappe doctypes:
- `FE Event`: Parent event document
- `Event Track`: Track definitions
- `Schedule Item`: Individual schedule entries (child table)
- `Event Talk`: Talk details

## Usage

1. **Access**: Navigate to `/schedule-gantt-poc` in the dashboard
2. **View**: See the current schedule across all tracks
3. **Add**: Use "Add New Talk" or "Add Break" buttons
4. **Edit**: Click on any schedule item to edit details
5. **Move**: Drag items to different time slots
6. **Filter**: Select specific tracks from dropdown
7. **Export**: Download schedule data as JSON

## Benefits Over Current System

1. **Visual Context**: See entire schedule at once
2. **Conflict Prevention**: Immediately see overlapping sessions
3. **Efficiency**: Drag-and-drop vs manual time entry
4. **User Experience**: Intuitive vs form-heavy interface
5. **Planning**: Better for schedule coordination and planning

## Next Steps for Integration

1. **Backend API**: Create endpoints to fetch/save schedule data
2. **Real-time Sync**: WebSocket integration for collaborative editing
3. **Validation**: Add business rules (minimum talk duration, break requirements)
4. **Speaker Integration**: Link to speaker availability
5. **Room Capacity**: Factor in venue capacity constraints
6. **Mobile Responsive**: Optimize for mobile schedule management

## File Structure

```
dashboard/src/pages/ScheduleGanttPOC.vue - Main POC component
dashboard/src/router.js - Route configuration
dashboard/src/index.css - Frappe Gantt CSS import
```

## Demo Data

The POC includes sample data representing:
- 4 tracks across 2 days
- Mix of talks and breaks
- Different durations and timing patterns
- Color-coded tracks for visual distinction

This demonstrates how the system would work with real event data while providing a complete scheduling experience.
1 change: 1 addition & 0 deletions dashboard/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ declare module 'vue' {
EventSponsorForm: typeof import('./src/components/EventSponsorForm.vue')['default']
LucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
LucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
LucideXCircle: typeof import('~icons/lucide/x-circle')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SponsorLogoUploader: typeof import('./src/components/SponsorLogoUploader.vue')['default']
Expand Down
1 change: 1 addition & 0 deletions dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@vueuse/core": "^13.6.0",
"canvas-confetti": "^1.9.3",
"feather-icons": "^4.29.2",
"frappe-gantt": "^1.0.3",
"frappe-ui": "^0.1.188",
"socket.io-client": "^4.7.2",
"vue": "^3.5.13",
Expand Down
Loading