Merge pull request #5 from jasonMPM/fix4

Add files via upload

backend/app/models.py

@@ -8,6 +8,7 @@ class Project(db.Model):
     name        = db.Column(db.String(200), nullable=False)
     color       = db.Column(db.String(7), nullable=False, default='#C9A84C')
     description = db.Column(db.Text)
+    drive_url   = db.Column(db.String(500))
     created_at  = db.Column(db.DateTime, default=datetime.utcnow)
 
     deliverables = db.relationship(
@@ -21,6 +22,7 @@ class Project(db.Model):
             'name':        self.name,
             'color':       self.color,
             'description': self.description,
+            'drive_url':   self.drive_url,
             'created_at':  self.created_at.isoformat() if self.created_at else None,
         }
         if include_deliverables:

backend/app/routes/projects.py

@@ -22,6 +22,7 @@ def create_project():
         name=data['name'],
         color=data.get('color', '#C9A84C'),
         description=data.get('description', ''),
+        drive_url=data.get('drive_url', ''),
     )
     db.session.add(project)
     db.session.flush()
@@ -40,7 +41,7 @@ def create_project():
 def update_project(id):
     project = Project.query.get_or_404(id)
     data = request.get_json()
-    for field in ('name', 'color', 'description'):
+    for field in ('name', 'color', 'description', 'drive_url'):
         if field in data:
             setattr(project, field, data[field])
     db.session.commit()

frontend/src/components/Projects/ProjectCard.jsx

@@ -2,25 +2,57 @@ import Badge from '../UI/Badge'
 import { formatDate } from '../../utils/dateHelpers'
 import useFocusStore from '../../store/useFocusStore'
 
+function DriveIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" className="w-3.5 h-3.5">
+      <path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+      <path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
+      <path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
+      <path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+      <path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+      <path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 27h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+    </svg>
+  )
+}
+
 export default function ProjectCard({ project, onEdit, onDelete }) {
   const openFocus = useFocusStore(s => s.openFocus)
+
   return (
     <div className="bg-surface-elevated border border-surface-border rounded-lg overflow-hidden transition-all hover:border-gold/20">
       <div className="h-1 w-full" style={{ backgroundColor: project.color }} />
       <div className="p-3">
-        <div className="flex items-start justify-between mb-2">
+
+        {/* Header row */}
+        <div className="flex items-start justify-between mb-1.5">
           <div className="flex items-center gap-2 min-w-0">
             <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: project.color }} />
             <span className="text-sm font-semibold text-text-primary truncate">{project.name}</span>
           </div>
-          <div className="flex gap-0.5 flex-shrink-0 ml-1">
+          <div className="flex items-center gap-0.5 flex-shrink-0 ml-1">
+            {project.drive_url && (
+              <a
+                href={project.drive_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Open Google Drive folder"
+                onClick={e => e.stopPropagation()}
+                className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary bg-surface hover:bg-surface-border/40 border border-surface-border hover:border-gold/30 rounded px-1.5 py-1 transition-all mr-1"
+              >
+                <DriveIcon />
+                <span>Drive</span>
+              </a>
+            )}
             <button onClick={() => onEdit(project)} className="text-text-muted hover:text-gold p-1 transition-colors text-sm">✎</button>
             <button onClick={() => onDelete(project)} className="text-text-muted hover:text-red-400 p-1 transition-colors text-sm">✕</button>
           </div>
         </div>
+
         {project.description && (
           <p className="text-xs text-text-muted mb-2 line-clamp-1">{project.description}</p>
         )}
+
+        {/* Deliverable rows */}
         <div className="space-y-1">
           {(project.deliverables || []).map(d => (
             <button key={d.id} onClick={() => openFocus(project.id, d.id)}
@@ -36,6 +68,7 @@ export default function ProjectCard({ project, onEdit, onDelete }) {
             <p className="text-[11px] text-text-muted/40 italic text-center py-1">No deliverables</p>
           )}
         </div>
+
       </div>
     </div>
   )

frontend/src/components/Projects/ProjectModal.jsx

@@ -13,6 +13,7 @@ export default function ProjectModal({ isOpen, onClose, project }) {
   const [name, setName]         = useState('')
   const [desc, setDesc]         = useState('')
   const [color, setColor]       = useState('#4A90D9')
+  const [driveUrl, setDriveUrl] = useState('')
   const [rows, setRows]         = useState([emptyRow()])
   const [saving, setSaving]     = useState(false)
   const isEditing = !!project
@@ -22,11 +23,12 @@ export default function ProjectModal({ isOpen, onClose, project }) {
       setName(project.name || '')
       setDesc(project.description || '')
       setColor(project.color || '#4A90D9')
+      setDriveUrl(project.drive_url || '')
       setRows(project.deliverables?.length
         ? project.deliverables.map(d => ({ id: d.id, title: d.title, due_date: d.due_date?.substring(0,10)||'', status: d.status }))
         : [emptyRow()])
     } else {
-      setName(''); setDesc(''); setColor('#4A90D9'); setRows([emptyRow()])
+      setName(''); setDesc(''); setColor('#4A90D9'); setDriveUrl(''); setRows([emptyRow()])
     }
   }, [project, isOpen])
 
@@ -37,11 +39,11 @@ export default function ProjectModal({ isOpen, onClose, project }) {
     setSaving(true)
     try {
       if (isEditing) {
-        const updated = await updateProject(project.id, { name, description: desc, color })
+        const updated = await updateProject(project.id, { name, description: desc, color, drive_url: driveUrl })
         storeUpdate({ ...updated, deliverables: project.deliverables })
       } else {
         const valid = rows.filter(r => r.title.trim() && r.due_date)
-        const created = await createProject({ name, description: desc, color, deliverables: valid })
+        const created = await createProject({ name, description: desc, color, drive_url: driveUrl, deliverables: valid })
         addProject(created)
       }
       onClose()
@@ -51,16 +53,44 @@ export default function ProjectModal({ isOpen, onClose, project }) {
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={isEditing ? 'Edit Project' : 'New Project'} size="lg">
       <div className="space-y-4">
+
         <div>
           <label className="block text-xs text-text-muted mb-1 font-medium">Project Name *</label>
           <input className="w-full bg-surface border border-surface-border rounded-lg px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-gold transition-colors"
             value={name} onChange={e => setName(e.target.value)} placeholder="e.g. CODA" />
         </div>
+
         <div>
           <label className="block text-xs text-text-muted mb-1 font-medium">Description</label>
           <textarea className="w-full bg-surface border border-surface-border rounded-lg px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-gold transition-colors resize-none"
-            rows={2} value={desc} onChange={e => setDesc(e.target.value)} placeholder="Optional..." />
+            rows={2} value={desc} onChange={e => setDesc(e.target.value)} placeholder="Optional project description..." />
         </div>
+
+        <div>
+          <label className="block text-xs text-text-muted mb-1 font-medium">
+            Google Drive Link
+            <span className="ml-1.5 text-text-muted/50 font-normal">(optional)</span>
+          </label>
+          <div className="relative">
+            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-base leading-none">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.3 78" className="w-4 h-4 opacity-60">
+                <path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/>
+                <path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47"/>
+                <path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z" fill="#ea4335"/>
+                <path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/>
+                <path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/>
+                <path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 27h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/>
+              </svg>
+            </span>
+            <input
+              className="w-full bg-surface border border-surface-border rounded-lg pl-9 pr-3 py-2 text-sm text-text-primary focus:outline-none focus:border-gold transition-colors"
+              value={driveUrl}
+              onChange={e => setDriveUrl(e.target.value)}
+              placeholder="https://drive.google.com/drive/folders/..."
+            />
+          </div>
+        </div>
+
         <div>
           <label className="block text-xs text-text-muted mb-2 font-medium">Color</label>
           <div className="flex flex-wrap gap-2 items-center">
@@ -73,6 +103,7 @@ export default function ProjectModal({ isOpen, onClose, project }) {
               className="w-7 h-7 rounded cursor-pointer border-0 bg-transparent" title="Custom color" />
           </div>
         </div>
+
         {!isEditing && (
           <div>
             <div className="flex items-center justify-between mb-2">
@@ -100,6 +131,7 @@ export default function ProjectModal({ isOpen, onClose, project }) {
             </div>
           </div>
         )}
+
         <div className="flex justify-end gap-2 pt-2 border-t border-surface-border">
           <Button variant="secondary" onClick={onClose}>Cancel</Button>
           <Button onClick={handleSubmit} disabled={saving || !name.trim()}>