Weekly Activity Report (Add new Link modal)

[MelakuGirma13]

Figma DesignLink

Components:

• <LinkModal>
• <Input>
• <Select>
• <Button>

Link modal components:

<LinkModal 
isOpen={isModalOpen} 
title={"Add Link"}
onClose={() => setIsModalOpen(false)} />

Link URL component:

<Input
  id="url"
  value={linkData.url}
  onChange={(e) => setLinkData({ ...linkData, url: e.target.value })}
  placeholder="https://www.figma.com/file/WADcmvj1hSADv2D9..."
  className={errors.url ? "border-red-500" : ""}
/>

• input is valid if the URL is valid
• input is required with an asterisk or a visual indicator

Link Title component:

<Input
  id="title"
  value={linkData.title}
  onChange={(e) => setLinkData({ ...linkData, title: e.target.value })}
  placeholder="Activity Report Form Design v6"
/>

• input is not required

Category or File Type component:

<Select value={linkData.category} onValueChange={(value) => setLinkData({ ...linkData, category: value })}>
  <SelectTrigger id="category" className={errors.category ? "border-red-500" : ""}>
	<SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
	<SelectItem value="code">Code / Code Repository</SelectItem>
	<SelectItem value="communication">Communication</SelectItem>
	<SelectItem value="design">Design Files</SelectItem>
	<SelectItem value="docs">Files (docs, sheets, etc.)</SelectItem>
	<SelectItem value="project">Project Management</SelectItem>
	<SelectItem value="website">Website (live, staging, etc.)</SelectItem>
	<SelectItem value="other">Other</SelectItem>
  </SelectContent>
</Select>

• input is required
• the selected item shoud be higliged

Buttons:
<Button variant="outline" onClick={onClose}>Cancel</Button>

• Clears the form properly before closing the modal.

<Button onClick={handleSave} className="bg-amber-500 hover:bg-amber-600 text-white">Save</Button>

• Ensures form validation before submission.
• Disables the button while submitting.
• send the input data to backend