diff --git a/edit-mode/function/ganttConfig.js b/edit-mode/function/ganttConfig.js
index 7b988d6..d6333c1 100644
--- a/edit-mode/function/ganttConfig.js
+++ b/edit-mode/function/ganttConfig.js
@@ -171,6 +171,7 @@ const editor = {
 	end_date: { type: "end_date", map_to: "end_date", min: new Date(2018, 0, 1) },
 	planned_start: { type: "date", map_to: "planned_start", min: new Date(2018, 0, 1) },
 	planned_end: { type: "date", map_to: "planned_end", min: new Date(2018, 0, 1) },
+	planned_duration: { type: "duration", map_to: "planned_duration", min: 0, max: 365, formatter: formatter },
 	duration: { type: "duration", map_to: "duration", min: 0, max: 365, formatter: formatter },
 	cost: { type: "number", map_to: "rencana_biaya", min: 0 },
 	costActual: { type: "number", map_to: "biaya_actual", min: 0 },
@@ -331,7 +332,17 @@ var allColumns = [
 			return roundToTwo(progress);
 		}, resize: true
 	},
-	{ name: "duration", label: "Duration (Day)", align: "center", min_width: 50, resize: true, editor: editor.duration },
+	{ name: "planned_duration", label: "Planned Duration (Day)", align: "center", min_width: 50, resize: true, editor: editor.duration, template: function (text) {
+		let start;
+		text.planned_start ? start = text.planned_start : start = text.start_date;
+
+		let plannedDuration = gantt.calculateDuration({
+			start_date: new Date(start),
+			end_date: new Date(text.end_date)
+		})
+		return plannedDuration;
+	}},
+	{ name: "duration", label: "Actual Duration (Day)", align: "center", min_width: 50, resize: true, editor: editor.duration },
 	{
 		name: "rencana_biaya", label: "Cost Planning", align: "right", min_width: 100, resize: true, template: function (text) {
 			if (!text.rencana_biaya) {
@@ -498,6 +509,7 @@ gantt.config.columns = createColumnsConfig({
 	end_date: true,
 	planned_start: true,
 	planned_end: true,
+	planned_duration: true,
 	duration: true,
 	rencana_biaya: true,
 	cost_actual: true,