# ADD PROJECT START & END DATES TO DASHBOARD

## 📋 Code Snippet to Add Project Dates

This will display project start and end dates on each project card in the dashboard.

---

## 📍 LOCATION: dashboard.php

**Line 115-124** - Inside the `<div class="project-meta">` section

---

## ✂️ CODE TO ADD

### OPTION 1: Simple Date Display (Recommended)

**PASTE THIS CODE** after line 124 (before the closing `</div>` of project-meta):

```php
                            <?php if ($project['quarter_start_date'] || $project['quarter_end_date']): ?>
                                <span class="meta-item">
                                    🗓️ 
                                    <?php if ($project['quarter_start_date']): ?>
                                        <?php echo date('M d', strtotime($project['quarter_start_date'])); ?>
                                    <?php else: ?>
                                        TBD
                                    <?php endif; ?>
                                    - 
                                    <?php if ($project['quarter_end_date']): ?>
                                        <?php echo date('M d, Y', strtotime($project['quarter_end_date'])); ?>
                                    <?php else: ?>
                                        TBD
                                    <?php endif; ?>
                                </span>
                            <?php endif; ?>
```

**Result:** 🗓️ Jan 15 - Mar 31, 2026

---

### OPTION 2: Separate Start & End Dates

**PASTE THIS CODE** after line 124:

```php
                            <?php if ($project['quarter_start_date']): ?>
                                <span class="meta-item">
                                    ▶️ Start: <?php echo date('M d, Y', strtotime($project['quarter_start_date'])); ?>
                                </span>
                            <?php endif; ?>
                            <?php if ($project['quarter_end_date']): ?>
                                <span class="meta-item">
                                    🏁 End: <?php echo date('M d, Y', strtotime($project['quarter_end_date'])); ?>
                                </span>
                            <?php endif; ?>
```

**Result:** 
▶️ Start: Jan 15, 2026
🏁 End: Mar 31, 2026

---

### OPTION 3: Duration Display

**PASTE THIS CODE** after line 124:

```php
                            <?php if ($project['quarter_start_date'] && $project['quarter_end_date']): ?>
                                <?php
                                $startDate = new DateTime($project['quarter_start_date']);
                                $endDate = new DateTime($project['quarter_end_date']);
                                $duration = $startDate->diff($endDate);
                                $durationDays = $duration->days;
                                $durationWeeks = round($durationDays / 7);
                                ?>
                                <span class="meta-item">
                                    🗓️ <?php echo date('M d', strtotime($project['quarter_start_date'])); ?> - <?php echo date('M d, Y', strtotime($project['quarter_end_date'])); ?>
                                    (<?php echo $durationWeeks; ?> weeks)
                                </span>
                            <?php endif; ?>
```

**Result:** 🗓️ Jan 15 - Mar 31, 2026 (11 weeks)

---

## 📝 STEP-BY-STEP INSTALLATION

### Step 1: Open dashboard.php

Via cPanel File Manager or FTP, open:
```
/public_html/project-planner/dashboard.php
```

### Step 2: Locate the Section

Find this section around **line 115-124**:

```php
                        <div class="project-meta">
                            <?php if ($daysRemaining !== null): ?>
                                <span class="meta-item <?php echo $daysRemaining < 0 ? 'text-danger' : ($daysRemaining <= 7 ? 'text-warning' : ''); ?>">
                                    📅 <?php echo $daysRemaining >= 0 ? "$daysRemaining days remaining" : abs($daysRemaining) . " days overdue"; ?>
                                </span>
                            <?php endif; ?>
                            <?php if ($project['quarter']): ?>
                                <span class="meta-item">📊 <?php echo htmlspecialchars($project['quarter']); ?></span>
                            <?php endif; ?>
                        </div>
```

### Step 3: Add the Code

**Position:** Right after line 124 (after the quarter display), **BEFORE** the closing `</div>`

**Add your chosen option from above**

### Step 4: Save the File

Save changes to dashboard.php

### Step 5: Test

1. Refresh your dashboard
2. Dates should appear on project cards
3. Make sure dates are formatted correctly

---

## 🎨 STYLING (Optional Enhancement)

If you want to style the dates differently, add this to **css/style.css**:

### Find the `.project-meta` section (around line 670) and add:

```css
.project-dates {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-gray-200);
    margin-top: 0.75rem;
}

.date-item {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
}

.date-label {
    color: var(--color-gray-500);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.date-value {
    color: var(--color-gray-900);
    font-weight: 500;
}
```

### Then use this enhanced HTML in dashboard.php:

```php
                            <?php if ($project['quarter_start_date'] || $project['quarter_end_date']): ?>
                                <div class="project-dates">
                                    <?php if ($project['quarter_start_date']): ?>
                                        <div class="date-item">
                                            <span class="date-label">Start Date</span>
                                            <span class="date-value"><?php echo date('M d, Y', strtotime($project['quarter_start_date'])); ?></span>
                                        </div>
                                    <?php endif; ?>
                                    <?php if ($project['quarter_end_date']): ?>
                                        <div class="date-item">
                                            <span class="date-label">End Date</span>
                                            <span class="date-value"><?php echo date('M d, Y', strtotime($project['quarter_end_date'])); ?></span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>
```

**Result:** Clean, organized date display with labels

---

## 🔍 VISUAL GUIDE

### BEFORE (Line 115-124):
```
115:                        <div class="project-meta">
116:                            <?php if ($daysRemaining !== null): ?>
117:                                <span class="meta-item">
118:                                    📅 X days remaining
119:                                </span>
120:                            <?php endif; ?>
121:                            <?php if ($project['quarter']): ?>
122:                                <span class="meta-item">📊 Q1 2026</span>
123:                            <?php endif; ?>
124:                        </div>    ← INSERT CODE RIGHT BEFORE THIS LINE
```

### AFTER (with new code):
```
115:                        <div class="project-meta">
116:                            <?php if ($daysRemaining !== null): ?>
117:                                <span class="meta-item">
118:                                    📅 X days remaining
119:                                </span>
120:                            <?php endif; ?>
121:                            <?php if ($project['quarter']): ?>
122:                                <span class="meta-item">📊 Q1 2026</span>
123:                            <?php endif; ?>
124:                            
                                <!-- NEW CODE STARTS HERE -->
                                <?php if ($project['quarter_start_date'] || $project['quarter_end_date']): ?>
                                    <span class="meta-item">
                                        🗓️ Jan 15 - Mar 31, 2026
                                    </span>
                                <?php endif; ?>
                                <!-- NEW CODE ENDS HERE -->

125:                        </div>
```

---

## 💡 DATE FORMAT OPTIONS

You can customize the date format using PHP's `date()` function:

| Format Code | Example Output |
|-------------|----------------|
| `M d, Y` | Jan 15, 2026 |
| `m/d/Y` | 01/15/2026 |
| `d/m/Y` | 15/01/2026 |
| `F j, Y` | January 15, 2026 |
| `M j` | Jan 15 |
| `Y-m-d` | 2026-01-15 |

**Change the format in the code:**
```php
date('M d, Y', strtotime($project['quarter_start_date']))
     ^^^^^^^^ Change this part
```

---

## 🎯 COMPARISON OF OPTIONS

### Option 1: Date Range (Recommended)
✅ Clean and compact
✅ Shows date range at a glance
✅ Minimal space usage
❌ Less detailed

**Best for:** Most users, clean look

### Option 2: Separate Dates
✅ Very clear and explicit
✅ Easy to read
❌ Takes more vertical space
❌ Can clutter the card

**Best for:** When exact dates are critical

### Option 3: With Duration
✅ Shows time span
✅ Helpful for planning
❌ More calculation overhead
❌ Slightly more complex

**Best for:** Timeline-focused projects

---

## ⚠️ IMPORTANT NOTES

1. **Backup First:** Make a copy of dashboard.php before editing
2. **Exact Location:** Code must go inside `<div class="project-meta">` section
3. **Line Numbers:** May vary slightly if you've made other changes
4. **Test After:** Always refresh and check the dashboard after saving

---

## 🐛 TROUBLESHOOTING

### Dates Don't Show Up?

**Check:**
1. Are start/end dates set in projects? (Edit project to add dates)
2. Did you paste inside the correct `</div>`?
3. Did you save the file after editing?
4. Did you refresh the browser (Ctrl+F5)?

### Dates Show Wrong Format?

**Fix:** Change the date format:
```php
date('M d, Y', ...)  // Change 'M d, Y' to your preferred format
```

### Layout Breaks?

**Fix:** You may have pasted outside the project-meta div. 
- Make sure code is **before** line 125 (the closing `</div>`)
- Check for missing closing tags

### PHP Errors?

**Fix:** 
- Check for missing `<?php` or `?>` tags
- Make sure all quotes match (`'` or `"`)
- Look for typos in variable names

---

## ✅ VERIFICATION CHECKLIST

After adding the code:

- [ ] Dashboard loads without errors
- [ ] Dates appear on project cards (if dates are set)
- [ ] Date format looks good
- [ ] Dates don't break card layout
- [ ] Dates show for all projects with start/end dates
- [ ] Cards without dates still display normally

---

## 📸 EXPECTED RESULT

Each project card will now show:

```
┌─────────────────────────────────────────┐
│ Project Name                   [Active] │
│ Description here...                     │
│                                         │
│ [5 Total] [3 Completed] [2 In Progress]│
│ ████████░░░░░░ 60% Complete            │
│                                         │
│ 📅 45 days remaining                    │
│ 📊 Q1 2026                              │
│ 🗓️ Jan 15 - Mar 31, 2026    ← NEW!    │
│                                         │
│ [View Details] [Edit]                   │
└─────────────────────────────────────────┘
```

---

## 🎉 SUMMARY

**What:** Add project start and end dates to dashboard cards
**Where:** dashboard.php, line 124 (inside project-meta div)
**How:** Copy and paste one of the 3 options provided
**Time:** 2 minutes to implement
**Impact:** Better project timeline visibility

**Recommended:** Use Option 1 (Date Range) for the cleanest look!
