1-
2- import React , { useState } from 'react' ;
3- import { Dialog , DialogContent , DialogHeader , DialogTitle , DialogFooter } from '@/components/ui/dialog' ;
4- import { Button } from '@/components/ui/button' ;
5- import { Input } from '@/components/ui/input' ;
6- import { Textarea } from '@/components/ui/textarea' ;
7- import { Label } from '@/components/ui/label' ;
8- import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from '@/components/ui/select' ;
9- import { Epic } from '../DigitalColleagues/types' ;
1+ import React , { useState } from 'react'
2+ import {
3+ Dialog ,
4+ DialogContent ,
5+ DialogHeader ,
6+ DialogTitle ,
7+ DialogFooter ,
8+ } from '@/components/ui/dialog'
9+ import { Button } from '@/components/ui/button'
10+ import { Input } from '@/components/ui/input'
11+ import { Textarea } from '@/components/ui/textarea'
12+ import { Label } from '@/components/ui/label'
13+ import {
14+ Select ,
15+ SelectContent ,
16+ SelectItem ,
17+ SelectTrigger ,
18+ SelectValue ,
19+ } from '@/components/ui/select'
20+ import { Epic } from '../DigitalColleagues/types'
1021
1122interface AddEpicModalProps {
12- isOpen : boolean ;
13- onClose : ( ) => void ;
14- onAddEpic : ( epic : Omit < Epic , 'id' > ) => void ;
23+ isOpen : boolean
24+ onClose : ( ) => void
25+ onAddEpic : ( epic : Omit < Epic , 'id' > ) => void
1526}
1627
17- export const AddEpicModal : React . FC < AddEpicModalProps > = ( {
18- isOpen,
19- onClose,
20- onAddEpic,
21- } ) => {
28+ export const AddEpicModal : React . FC < AddEpicModalProps > = ( { isOpen, onClose, onAddEpic } ) => {
2229 const [ formData , setFormData ] = useState ( {
2330 name : '' ,
2431 description : '' ,
@@ -28,7 +35,7 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
2835 startDate : new Date ( ) . toISOString ( ) . split ( 'T' ) [ 0 ] ,
2936 endDate : new Date ( ) . toISOString ( ) . split ( 'T' ) [ 0 ] ,
3037 progress : 0 ,
31- } ) ;
38+ } )
3239
3340 const colorOptions = [
3441 'bg-blue-500' ,
@@ -39,23 +46,23 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
3946 'bg-yellow-500' ,
4047 'bg-pink-500' ,
4148 'bg-indigo-500' ,
42- ] ;
49+ ]
4350
4451 const confidenceOptions = [
4552 { value : 'low' , label : 'Low' } ,
4653 { value : 'medium' , label : 'Medium' } ,
4754 { value : 'high' , label : 'High' } ,
48- ] ;
55+ ]
4956
5057 const phaseOptions = [
5158 { value : 1 , label : 'Planning' } ,
5259 { value : 2 , label : 'Development' } ,
5360 { value : 3 , label : 'Testing' } ,
5461 { value : 4 , label : 'Done' } ,
55- ] ;
62+ ]
5663
5764 const handleSubmit = ( e : React . FormEvent ) => {
58- e . preventDefault ( ) ;
65+ e . preventDefault ( )
5966 if ( formData . name . trim ( ) ) {
6067 onAddEpic ( {
6168 name : formData . name . trim ( ) ,
@@ -67,7 +74,7 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
6774 endDate : new Date ( formData . endDate ) ,
6875 progress : formData . progress ,
6976 isSelected : true ,
70- } ) ;
77+ } )
7178 setFormData ( {
7279 name : '' ,
7380 description : '' ,
@@ -77,22 +84,22 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
7784 startDate : new Date ( ) . toISOString ( ) . split ( 'T' ) [ 0 ] ,
7885 endDate : new Date ( ) . toISOString ( ) . split ( 'T' ) [ 0 ] ,
7986 progress : 0 ,
80- } ) ;
81- onClose ( ) ;
87+ } )
88+ onClose ( )
8289 }
83- } ;
90+ }
8491
8592 const handleChange = ( field : string , value : any ) => {
86- setFormData ( prev => ( { ...prev , [ field ] : value } ) ) ;
87- } ;
93+ setFormData ( ( prev ) => ( { ...prev , [ field ] : value } ) )
94+ }
8895
8996 return (
9097 < Dialog open = { isOpen } onOpenChange = { onClose } >
9198 < DialogContent className = "sm:max-w-md" >
9299 < DialogHeader >
93100 < DialogTitle > Add New Epic</ DialogTitle >
94101 </ DialogHeader >
95-
102+
96103 < form onSubmit = { handleSubmit } className = "space-y-4" >
97104 < div className = "space-y-2" >
98105 < Label htmlFor = "name" > Epic Name</ Label >
@@ -104,7 +111,7 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
104111 required
105112 />
106113 </ div >
107-
114+
108115 < div className = "space-y-2" >
109116 < Label htmlFor = "description" > Description</ Label >
110117 < Textarea
@@ -115,11 +122,11 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
115122 rows = { 3 }
116123 />
117124 </ div >
118-
125+
119126 < div className = "space-y-2" >
120127 < Label > Color</ Label >
121128 < div className = "flex gap-2 flex-wrap" >
122- { colorOptions . map ( color => (
129+ { colorOptions . map ( ( color ) => (
123130 < button
124131 key = { color }
125132 type = "button"
@@ -135,12 +142,17 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
135142 < div className = "grid grid-cols-2 gap-4" >
136143 < div className = "space-y-2" >
137144 < Label > Confidence</ Label >
138- < Select value = { formData . confidence } onValueChange = { ( value : 'low' | 'medium' | 'high' ) => handleChange ( 'confidence' , value ) } >
145+ < Select
146+ value = { formData . confidence }
147+ onValueChange = { ( value : 'low' | 'medium' | 'high' ) =>
148+ handleChange ( 'confidence' , value )
149+ }
150+ >
139151 < SelectTrigger >
140152 < SelectValue />
141153 </ SelectTrigger >
142154 < SelectContent >
143- { confidenceOptions . map ( option => (
155+ { confidenceOptions . map ( ( option ) => (
144156 < SelectItem key = { option . value } value = { option . value } >
145157 { option . label }
146158 </ SelectItem >
@@ -151,12 +163,15 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
151163
152164 < div className = "space-y-2" >
153165 < Label > Phase</ Label >
154- < Select value = { formData . phase . toString ( ) } onValueChange = { ( value ) => handleChange ( 'phase' , parseInt ( value ) ) } >
166+ < Select
167+ value = { formData . phase . toString ( ) }
168+ onValueChange = { ( value ) => handleChange ( 'phase' , parseInt ( value ) ) }
169+ >
155170 < SelectTrigger >
156171 < SelectValue />
157172 </ SelectTrigger >
158173 < SelectContent >
159- { phaseOptions . map ( option => (
174+ { phaseOptions . map ( ( option ) => (
160175 < SelectItem key = { option . value } value = { option . value . toString ( ) } >
161176 { option . label }
162177 </ SelectItem >
@@ -196,7 +211,7 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
196211 onChange = { ( e ) => handleChange ( 'progress' , parseInt ( e . target . value ) || 0 ) }
197212 />
198213 </ div >
199-
214+
200215 < DialogFooter >
201216 < Button type = "button" variant = "outline" onClick = { onClose } >
202217 Cancel
@@ -208,5 +223,5 @@ export const AddEpicModal: React.FC<AddEpicModalProps> = ({
208223 </ form >
209224 </ DialogContent >
210225 </ Dialog >
211- ) ;
212- } ;
226+ )
227+ }
0 commit comments