Test – Next Technology Srl

import { useState } from ‘react’; import { Button } from “/components/ui/button”; import { Input } from “/components/ui/input”; import { Label } from “/components/ui/label”; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from “/components/ui/select”; import { Textarea } from “/components/ui/textarea”; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from “/components/ui/card”; interface Project { id: number; name: string; description: string; hours: { [key: string]: number }; } interface User { id: number; name: string; } const App = () => { const [projects, setProjects] = useState<Project[]>([]); const [users, setUsers] = useState<User[]>([]); const [selectedProject, setSelectedProject] = useState(null); const [selectedUser, setSelectedUser] = useState(null); const [newProjectName, setNewProjectName] = useState(”); const [newProjectDescription, setNewProjectDescription] = useState(”); const [newUserName, setNewUserName] = useState(”); const [hours, setHours] = useState(0); const addProject = () => { const newProject: Project = { id: projects.length + 1, name: newProjectName, description: newProjectDescription, hours: {}, }; setProjects([…projects, newProject]); setNewProjectName(”); setNewProjectDescription(”); }; const removeProject = (id: number) => { setProjects(projects.filter((project) => project.id !== id)); }; const modifyProject = (id: number, name: string, description: string) => { setProjects( projects.map((project) => { if (project.id === id) { return { …project, name, description }; } return project; }) ); }; const addUser = () => { const newUser: User = { id: users.length + 1, name: newUserName, }; setUsers([…users, newUser]); setNewUserName(”); }; const removeUser = (id: number) => { setUsers(users.filter((user) => user.id !== id)); }; const modifyUser = (id: number, name: string) => { setUsers( users.map((user) => { if (user.id === id) { return { …user, name }; } return user; }) ); }; const addHours = () => { if (selectedProject && selectedUser) { const newHours = { …selectedProject.hours }; newHours[selectedUser.name] = (newHours[selectedUser.name] || 0) + hours; modifyProject(selectedProject.id, selectedProject.name, selectedProject.description); setProjects( projects.map((project) => { if (project.id === selectedProject.id) { return { …project, hours: newHours }; } return project; }) ); } }; const generateReport = () => { if (selectedProject) { const report = Object.keys(selectedProject.hours).map((user) => ({ user, hours: selectedProject.hours[user], })); return report; } return []; }; return (

Projects

{project.name}

setNewProjectName(e.target.value)} placeholder=”New project name” />

setNewProjectDescription(e.target.value)}
            placeholder=”New project description”
          />
          <Button variant=”primary” onClick={addProject}>
            Add project
          </Button>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Users</CardTitle>
        </CardHeader>
        <CardContent>
          <ul>
            {users.map((user) => (
              <li key={user.id}>
                <span>{user.name}</span>
                <Button variant=”secondary” onClick={() => removeUser(user.id)}>
                  Remove
                </Button>
                <Button variant=”secondary” onClick={() => modifyUser(user.id, user.name)}>
                  Modify
                </Button>
              </li>
            ))}
          </ul>
          <Input
            type=”text”
            value={newUserName}
            onChange={(e) => setNewUserName(e.target.value)}
            placeholder=”New user name”
          />
          <Button variant=”primary” onClick={addUser}>
            Add user
          </Button>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Hours</CardTitle>
        </CardHeader>
        <CardContent>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder=”Select project” />
            </SelectTrigger>
            <SelectContent>
              {projects.map((project) => (
                <SelectItem key={project.id} value={project.name} onClick={() => setSelectedProject(project)}>
                  {project.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder=”Select user” />
            </SelectTrigger>
            <SelectContent>
              {users.map((user) => (
                <SelectItem key={user.id} value={user.name} onClick={() => setSelectedUser(user)}>
                  {user.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Input
            type=”number”
            value={hours}
            onChange={(e) => setHours(Number(e.target.value))}
            placeholder=”Hours”
          />
          <Button variant=”primary” onClick={addHours}>
            Add hours
          </Button>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Report</CardTitle>
        </CardHeader>
        <CardContent>
          <ul>
            {generateReport().map((report) => (
              <li key={report.user}>
                <span>
                  {report.user}: {report.hours} hours
                </span>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
};

export default App;