462 lines
17 KiB
React
462 lines
17 KiB
React
|
import React, { useState } from 'react';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
import { DatePicker, Select, Input } from 'antd';
|
||
|
|
import {
|
||
|
|
ArrowLeft,
|
||
|
|
Calendar,
|
||
|
|
Users,
|
||
|
|
DollarSign,
|
||
|
|
Target,
|
||
|
|
Clock,
|
||
|
|
FileText
|
||
|
|
} from 'feather-icons-react';
|
||
|
|
import { LoadingButton } from '../../components/Loading';
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
|
||
|
|
const { Option } = Select;
|
||
|
|
const { TextArea } = Input;
|
||
|
|
|
||
|
|
const CreateProject = () => {
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const [formData, setFormData] = useState({
|
||
|
|
projectName: '',
|
||
|
|
description: '',
|
||
|
|
category: '',
|
||
|
|
priority: 'medium',
|
||
|
|
status: 'planning',
|
||
|
|
startDate: dayjs(),
|
||
|
|
endDate: dayjs().add(1, 'month'),
|
||
|
|
budget: '',
|
||
|
|
client: '',
|
||
|
|
manager: [],
|
||
|
|
teamMembers: [],
|
||
|
|
tags: [],
|
||
|
|
attachments: []
|
||
|
|
});
|
||
|
|
|
||
|
|
const [errors, setErrors] = useState({});
|
||
|
|
|
||
|
|
// Avatar component with initials fallback
|
||
|
|
const UserAvatar = ({ initials, name }) => (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: '24px',
|
||
|
|
height: '24px',
|
||
|
|
borderRadius: '50%',
|
||
|
|
background: 'linear-gradient(135deg, #ff9f43, #e8890a)',
|
||
|
|
color: 'white',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
fontSize: '10px',
|
||
|
|
fontWeight: '600',
|
||
|
|
marginRight: '8px',
|
||
|
|
flexShrink: 0
|
||
|
|
}}
|
||
|
|
title={name}
|
||
|
|
>
|
||
|
|
{initials}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
// Sample data
|
||
|
|
const categories = [
|
||
|
|
{ value: 'web-development', label: 'Web Development', color: 'blue' },
|
||
|
|
{ value: 'mobile-app', label: 'Mobile App', color: 'green' },
|
||
|
|
{ value: 'design', label: 'Design', color: 'purple' },
|
||
|
|
{ value: 'marketing', label: 'Marketing', color: 'orange' },
|
||
|
|
{ value: 'devops', label: 'DevOps', color: 'cyan' },
|
||
|
|
{ value: 'data-science', label: 'Data Science', color: 'red' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const managers = [
|
||
|
|
{ value: 'john-smith', label: 'John Smith', initials: 'JS' },
|
||
|
|
{ value: 'sarah-johnson', label: 'Sarah Johnson', initials: 'SJ' },
|
||
|
|
{ value: 'mike-wilson', label: 'Mike Wilson', initials: 'MW' },
|
||
|
|
{ value: 'lisa-chen', label: 'Lisa Chen', initials: 'LC' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const teamMembers = [
|
||
|
|
{ value: 'alex-rodriguez', label: 'Alex Rodriguez', initials: 'AR' },
|
||
|
|
{ value: 'maria-garcia', label: 'Maria Garcia', initials: 'MG' },
|
||
|
|
{ value: 'david-brown', label: 'David Brown', initials: 'DB' },
|
||
|
|
{ value: 'emma-davis', label: 'Emma Davis', initials: 'ED' },
|
||
|
|
{ value: 'james-miller', label: 'James Miller', initials: 'JM' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const handleInputChange = (field, value) => {
|
||
|
|
setFormData(prev => ({
|
||
|
|
...prev,
|
||
|
|
[field]: value
|
||
|
|
}));
|
||
|
|
|
||
|
|
// Clear error when user starts typing
|
||
|
|
if (errors[field]) {
|
||
|
|
setErrors(prev => ({
|
||
|
|
...prev,
|
||
|
|
[field]: ''
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const validateForm = () => {
|
||
|
|
const newErrors = {};
|
||
|
|
|
||
|
|
if (!formData.projectName.trim()) {
|
||
|
|
newErrors.projectName = 'Project name is required';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!formData.description.trim()) {
|
||
|
|
newErrors.description = 'Project description is required';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!formData.category) {
|
||
|
|
newErrors.category = 'Please select a category';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!formData.client.trim()) {
|
||
|
|
newErrors.client = 'Client name is required';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!formData.budget.trim()) {
|
||
|
|
newErrors.budget = 'Budget is required';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (formData.manager.length === 0) {
|
||
|
|
newErrors.manager = 'Please assign at least one manager';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (dayjs(formData.endDate).isBefore(dayjs(formData.startDate))) {
|
||
|
|
newErrors.endDate = 'End date must be after start date';
|
||
|
|
}
|
||
|
|
|
||
|
|
setErrors(newErrors);
|
||
|
|
return Object.keys(newErrors).length === 0;
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSubmit = async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if (!validateForm()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setLoading(true);
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Simulate API call
|
||
|
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
||
|
|
|
||
|
|
console.log('Project created:', formData);
|
||
|
|
|
||
|
|
// Reset form or redirect
|
||
|
|
alert('Project created successfully!');
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error creating project:', error);
|
||
|
|
alert('Error creating project. Please try again.');
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="page-wrapper">
|
||
|
|
<div className="content">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="page-header">
|
||
|
|
<div className="add-item d-flex">
|
||
|
|
<div className="page-title">
|
||
|
|
<h4>Create New Project</h4>
|
||
|
|
<h6>Add a new project to your workspace</h6>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="page-btn">
|
||
|
|
<Link to="/project-tracker" className="btn btn-secondary">
|
||
|
|
<ArrowLeft size={16} className="me-2" />
|
||
|
|
Back to Projects
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Form */}
|
||
|
|
<div className="card">
|
||
|
|
<div className="card-body">
|
||
|
|
<form onSubmit={handleSubmit}>
|
||
|
|
<div className="row">
|
||
|
|
{/* Project Basic Info */}
|
||
|
|
<div className="col-lg-12">
|
||
|
|
<div className="form-group-header">
|
||
|
|
<div className="form-group-icon">
|
||
|
|
<FileText size={20} />
|
||
|
|
</div>
|
||
|
|
<h5>Project Information</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-6">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Project Name <span className="text-danger">*</span></label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className={`form-control ${errors.projectName ? 'is-invalid' : ''}`}
|
||
|
|
value={formData.projectName}
|
||
|
|
onChange={(e) => handleInputChange('projectName', e.target.value)}
|
||
|
|
placeholder="Enter project name"
|
||
|
|
/>
|
||
|
|
{errors.projectName && <div className="invalid-feedback">{errors.projectName}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-6">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Client Name <span className="text-danger">*</span></label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className={`form-control ${errors.client ? 'is-invalid' : ''}`}
|
||
|
|
value={formData.client}
|
||
|
|
onChange={(e) => handleInputChange('client', e.target.value)}
|
||
|
|
placeholder="Enter client name"
|
||
|
|
/>
|
||
|
|
{errors.client && <div className="invalid-feedback">{errors.client}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-12">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Project Description <span className="text-danger">*</span></label>
|
||
|
|
<TextArea
|
||
|
|
rows={4}
|
||
|
|
className={`form-control ${errors.description ? 'is-invalid' : ''}`}
|
||
|
|
value={formData.description}
|
||
|
|
onChange={(e) => handleInputChange('description', e.target.value)}
|
||
|
|
placeholder="Describe your project goals, requirements, and deliverables..."
|
||
|
|
/>
|
||
|
|
{errors.description && <div className="invalid-feedback">{errors.description}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="row">
|
||
|
|
{/* Project Settings */}
|
||
|
|
<div className="col-lg-12">
|
||
|
|
<div className="form-group-header">
|
||
|
|
<div className="form-group-icon">
|
||
|
|
<Target size={20} />
|
||
|
|
</div>
|
||
|
|
<h5>Project Settings</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-4">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Category <span className="text-danger">*</span></label>
|
||
|
|
<Select
|
||
|
|
value={formData.category}
|
||
|
|
onChange={(value) => handleInputChange('category', value)}
|
||
|
|
className={`project-select ${errors.category ? 'is-invalid' : ''}`}
|
||
|
|
placeholder="Select category"
|
||
|
|
>
|
||
|
|
{categories.map(cat => (
|
||
|
|
<Option key={cat.value} value={cat.value}>
|
||
|
|
<span className={`badge badge-${cat.color} me-2`}></span>
|
||
|
|
{cat.label}
|
||
|
|
</Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
{errors.category && <div className="invalid-feedback d-block">{errors.category}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-4">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Priority</label>
|
||
|
|
<Select
|
||
|
|
value={formData.priority}
|
||
|
|
onChange={(value) => handleInputChange('priority', value)}
|
||
|
|
className="project-select"
|
||
|
|
>
|
||
|
|
<Option value="low">
|
||
|
|
<span className="badge badge-success me-2"></span>
|
||
|
|
Low Priority
|
||
|
|
</Option>
|
||
|
|
<Option value="medium">
|
||
|
|
<span className="badge badge-warning me-2"></span>
|
||
|
|
Medium Priority
|
||
|
|
</Option>
|
||
|
|
<Option value="high">
|
||
|
|
<span className="badge badge-danger me-2"></span>
|
||
|
|
High Priority
|
||
|
|
</Option>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-4">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Status</label>
|
||
|
|
<Select
|
||
|
|
value={formData.status}
|
||
|
|
onChange={(value) => handleInputChange('status', value)}
|
||
|
|
className="project-select"
|
||
|
|
>
|
||
|
|
<Option value="planning">Planning</Option>
|
||
|
|
<Option value="in-progress">In Progress</Option>
|
||
|
|
<Option value="review">Review</Option>
|
||
|
|
<Option value="completed">Completed</Option>
|
||
|
|
<Option value="on-hold">On Hold</Option>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="row">
|
||
|
|
{/* Timeline & Budget */}
|
||
|
|
<div className="col-lg-12">
|
||
|
|
<div className="form-group-header">
|
||
|
|
<div className="form-group-icon">
|
||
|
|
<Clock size={20} />
|
||
|
|
</div>
|
||
|
|
<h5>Timeline & Budget</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-4">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Start Date</label>
|
||
|
|
<DatePicker
|
||
|
|
value={formData.startDate}
|
||
|
|
onChange={(date) => handleInputChange('startDate', date)}
|
||
|
|
className="form-control project-date-picker"
|
||
|
|
format="DD/MM/YYYY"
|
||
|
|
suffixIcon={<Calendar size={16} />}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-4">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">End Date</label>
|
||
|
|
<DatePicker
|
||
|
|
value={formData.endDate}
|
||
|
|
onChange={(date) => handleInputChange('endDate', date)}
|
||
|
|
className={`form-control project-date-picker ${errors.endDate ? 'is-invalid' : ''}`}
|
||
|
|
format="DD/MM/YYYY"
|
||
|
|
suffixIcon={<Calendar size={16} />}
|
||
|
|
/>
|
||
|
|
{errors.endDate && <div className="invalid-feedback d-block">{errors.endDate}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-4">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Budget <span className="text-danger">*</span></label>
|
||
|
|
<div className="input-group">
|
||
|
|
<span className="input-group-text">
|
||
|
|
<DollarSign size={16} />
|
||
|
|
</span>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className={`form-control ${errors.budget ? 'is-invalid' : ''}`}
|
||
|
|
value={formData.budget}
|
||
|
|
onChange={(e) => handleInputChange('budget', e.target.value)}
|
||
|
|
placeholder="0.00"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{errors.budget && <div className="invalid-feedback">{errors.budget}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="row">
|
||
|
|
{/* Team Assignment */}
|
||
|
|
<div className="col-lg-12">
|
||
|
|
<div className="form-group-header">
|
||
|
|
<div className="form-group-icon">
|
||
|
|
<Users size={20} />
|
||
|
|
</div>
|
||
|
|
<h5>Team Assignment</h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-6">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Project Manager <span className="text-danger">*</span></label>
|
||
|
|
<Select
|
||
|
|
mode="multiple"
|
||
|
|
value={formData.manager}
|
||
|
|
onChange={(value) => handleInputChange('manager', value)}
|
||
|
|
className={`project-select ${errors.manager ? 'is-invalid' : ''}`}
|
||
|
|
placeholder="Select project manager(s)"
|
||
|
|
optionLabelProp="label"
|
||
|
|
>
|
||
|
|
{managers.map(manager => (
|
||
|
|
<Option key={manager.value} value={manager.value} label={manager.label}>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
|
|
<UserAvatar initials={manager.initials} name={manager.label} />
|
||
|
|
{manager.label}
|
||
|
|
</div>
|
||
|
|
</Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
{errors.manager && <div className="invalid-feedback d-block">{errors.manager}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-lg-6">
|
||
|
|
<div className="mb-3">
|
||
|
|
<label className="form-label">Team Members</label>
|
||
|
|
<Select
|
||
|
|
mode="multiple"
|
||
|
|
value={formData.teamMembers}
|
||
|
|
onChange={(value) => handleInputChange('teamMembers', value)}
|
||
|
|
className="project-select"
|
||
|
|
placeholder="Select team members"
|
||
|
|
optionLabelProp="label"
|
||
|
|
>
|
||
|
|
{teamMembers.map(member => (
|
||
|
|
<Option key={member.value} value={member.value} label={member.label}>
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
|
|
<UserAvatar initials={member.initials} name={member.label} />
|
||
|
|
{member.label}
|
||
|
|
</div>
|
||
|
|
</Option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Submit Buttons */}
|
||
|
|
<div className="row">
|
||
|
|
<div className="col-lg-12">
|
||
|
|
<div className="btn-addproduct mb-4 d-flex align-items-center gap-3">
|
||
|
|
<LoadingButton
|
||
|
|
type="submit"
|
||
|
|
variant="primary"
|
||
|
|
size="medium"
|
||
|
|
loading={loading}
|
||
|
|
loadingText="Creating Project..."
|
||
|
|
className="create-project-btn"
|
||
|
|
>
|
||
|
|
Create Project
|
||
|
|
</LoadingButton>
|
||
|
|
|
||
|
|
<Link to="/project-tracker" className="btn btn-cancel btn-cancel-project">
|
||
|
|
Cancel
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CreateProject;
|