Building Employee Management System with Spring Boot and Vue.js

 1Frontend Layer (Client)
 2├── Vue.js 3.x (Progressive Framework)
 3├── Vue Router (SPA Navigation)
 4├── Vuex (State Management)
 5├── Axios (HTTP Client)
 6├── Element UI/Vuetify (Component Library)
 7└── Webpack (Build Tool)
 8
 9Backend Services (Server)
10├── Spring Boot 2.7+ (Application Framework)
11├── Spring Security (Authentication/Authorization)
12├── Spring Data JPA (Data Access Layer)
13├── Spring Web MVC (REST Controllers)
14├── Swagger/OpenAPI 3 (API Documentation)
15├── Maven (Build Management)
16└── Jackson (JSON Processing)
17
18Data Layer
19├── MySQL/PostgreSQL (Primary Database)
20├── JPA/Hibernate (ORM)
21├── Connection Pooling (HikariCP)
22├── Database Migrations (Flyway)
23└── Data Validation (Bean Validation)
24
25Infrastructure & DevOps
26├── Docker & Docker Compose
27├── Nginx (Reverse Proxy)
28├── Maven (Backend Build)
29├── npm/Yarn (Frontend Build)
30└── Environment Configuration

 1@Entity
 2@Table(name = "employees")
 3public class Employee {
 4
 5    @Id
 6    @GeneratedValue(strategy = GenerationType.IDENTITY)
 7    private Long id;
 8
 9    @Column(nullable = false)
10    private String firstName;
11
12    @Column(nullable = false)
13    private String lastName;
14
15    @Column(unique = true, nullable = false)
16    private String employeeId;
17
18    @Column(unique = true, nullable = false)
19    private String email;
20
21    @ManyToOne(fetch = FetchType.LAZY)
22    @JoinColumn(name = "department_id")
23    private Department department;
24
25    @ManyToOne(fetch = FetchType.LAZY)
26    @JoinColumn(name = "manager_id")
27    private Employee manager;
28
29    @Enumerated(EnumType.STRING)
30    private EmploymentStatus status;
31
32    @Column(name = "hire_date")
33    private LocalDate hireDate;
34
35    @Column(name = "photo_url")
36    private String photoUrl;
37
38    @CreationTimestamp
39    private LocalDateTime createdAt;
40
41    @UpdateTimestamp
42    private LocalDateTime updatedAt;
43
44    // Constructors, getters, setters, equals, hashCode
45}

  1@RestController
  2@RequestMapping("/api/employees")
  3@CrossOrigin(origins = "${app.cors.allowed-origins}")
  4@Validated
  5public class EmployeeController {
  6
  7    @Autowired
  8    private EmployeeService employeeService;
  9
 10    /**
 11     * Get paginated list of employees with filtering and sorting
 12     */
 13    @GetMapping
 14    public ResponseEntity<PagedResponse<EmployeeDto>> getAllEmployees(
 15            @RequestParam(defaultValue = "0") int page,
 16            @RequestParam(defaultValue = "20") int size,
 17            @RequestParam(defaultValue = "lastName") String sortBy,
 18            @RequestParam(defaultValue = "asc") String sortDir,
 19            @RequestParam(required = false) Long departmentId,
 20            @RequestParam(required = false) String searchTerm) {
 21
 22        try {
 23            PageRequest pageable = PageRequest.of(page, size,
 24                Sort.Direction.fromString(sortDir), sortBy);
 25
 26            PagedResponse<EmployeeDto> response = employeeService.getAllEmployees(
 27                pageable, departmentId, searchTerm);
 28
 29            return ResponseEntity.ok(response);
 30
 31        } catch (Exception e) {
 32            log.error("Error fetching employees", e);
 33            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
 34                .body(PagedResponse.error("Failed to fetch employees"));
 35        }
 36    }
 37
 38    /**
 39     * Get employee details by ID
 40     */
 41    @GetMapping("/{id}")
 42    @PreAuthorize("hasRole('HR_ADMIN') or @employeeService.canAccessEmployee(authentication.name, #id)")
 43    public ResponseEntity<EmployeeDetailDto> getEmployeeById(@PathVariable Long id) {
 44        try {
 45            EmployeeDetailDto employee = employeeService.getEmployeeById(id);
 46            return ResponseEntity.ok(employee);
 47        } catch (EmployeeNotFoundException e) {
 48            return ResponseEntity.notFound().build();
 49        } catch (AccessDeniedException e) {
 50            return ResponseEntity.status(HttpStatus.FORBIDDEN).build();
 51        }
 52    }
 53
 54    /**
 55     * Create new employee (HR Admin only)
 56     */
 57    @PostMapping
 58    @PreAuthorize("hasRole('HR_ADMIN')")
 59    public ResponseEntity<EmployeeDto> createEmployee(
 60            @Valid @RequestBody CreateEmployeeRequest request) {
 61        try {
 62            EmployeeDto createdEmployee = employeeService.createEmployee(request);
 63            return ResponseEntity.status(HttpStatus.CREATED).body(createdEmployee);
 64        } catch (DuplicateEmployeeException e) {
 65            return ResponseEntity.status(HttpStatus.CONFLICT).build();
 66        } catch (ValidationException e) {
 67            return ResponseEntity.badRequest().build();
 68        }
 69    }
 70
 71    /**
 72     * Update employee information
 73     */
 74    @PutMapping("/{id}")
 75    @PreAuthorize("hasRole('HR_ADMIN') or @employeeService.canModifyEmployee(authentication.name, #id)")
 76    public ResponseEntity<EmployeeDto> updateEmployee(
 77            @PathVariable Long id,
 78            @Valid @RequestBody UpdateEmployeeRequest request) {
 79        try {
 80            EmployeeDto updatedEmployee = employeeService.updateEmployee(id, request);
 81            return ResponseEntity.ok(updatedEmployee);
 82        } catch (EmployeeNotFoundException e) {
 83            return ResponseEntity.notFound().build();
 84        } catch (ValidationException e) {
 85            return ResponseEntity.badRequest().build();
 86        }
 87    }
 88
 89    /**
 90     * Upload employee photo
 91     */
 92    @PostMapping("/{id}/photo")
 93    @PreAuthorize("hasRole('HR_ADMIN') or @employeeService.canModifyEmployee(authentication.name, #id)")
 94    public ResponseEntity<PhotoUploadResponse> uploadPhoto(
 95            @PathVariable Long id,
 96            @RequestParam("file") MultipartFile file) {
 97        try {
 98            // Validate file type and size
 99            if (!isValidImageFile(file)) {
100                return ResponseEntity.badRequest()
101                    .body(PhotoUploadResponse.error("Invalid file format"));
102            }
103
104            PhotoUploadResponse response = employeeService.uploadEmployeePhoto(id, file);
105            return ResponseEntity.ok(response);
106
107        } catch (Exception e) {
108            log.error("Photo upload failed for employee: {}", id, e);
109            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
110                .body(PhotoUploadResponse.error("Photo upload failed"));
111        }
112    }
113
114    /**
115     * Get employees by department
116     */
117    @GetMapping("/department/{departmentId}")
118    public ResponseEntity<List<EmployeeDto>> getEmployeesByDepartment(
119            @PathVariable Long departmentId) {
120        try {
121            List<EmployeeDto> employees = employeeService.getEmployeesByDepartment(departmentId);
122            return ResponseEntity.ok(employees);
123        } catch (DepartmentNotFoundException e) {
124            return ResponseEntity.notFound().build();
125        }
126    }
127
128    /**
129     * Get employee's direct reports (for managers)
130     */
131    @GetMapping("/{id}/reports")
132    @PreAuthorize("hasRole('HR_ADMIN') or @employeeService.isManagerOf(authentication.name, #id)")
133    public ResponseEntity<List<EmployeeDto>> getDirectReports(@PathVariable Long id) {
134        try {
135            List<EmployeeDto> reports = employeeService.getDirectReports(id);
136            return ResponseEntity.ok(reports);
137        } catch (EmployeeNotFoundException e) {
138            return ResponseEntity.notFound().build();
139        }
140    }
141
142    private boolean isValidImageFile(MultipartFile file) {
143        String contentType = file.getContentType();
144        return contentType != null &&
145               (contentType.equals("image/jpeg") ||
146                contentType.equals("image/png") ||
147                contentType.equals("image/gif"));
148    }
149}

  1@Service
  2@Transactional
  3public class DepartmentService {
  4
  5    @Autowired
  6    private DepartmentRepository departmentRepository;
  7
  8    @Autowired
  9    private EmployeeRepository employeeRepository;
 10
 11    /**
 12     * Get department hierarchy with employee counts
 13     */
 14    public List<DepartmentHierarchyDto> getDepartmentHierarchy() {
 15        List<Department> rootDepartments = departmentRepository.findByParentDepartmentIsNull();
 16
 17        return rootDepartments.stream()
 18            .map(this::buildDepartmentHierarchy)
 19            .collect(Collectors.toList());
 20    }
 21
 22    /**
 23     * Create new department with validation
 24     */
 25    public DepartmentDto createDepartment(CreateDepartmentRequest request) {
 26        // Validate parent department exists if specified
 27        if (request.getParentDepartmentId() != null) {
 28            Department parent = departmentRepository.findById(request.getParentDepartmentId())
 29                .orElseThrow(() -> new DepartmentNotFoundException("Parent department not found"));
 30
 31            // Prevent circular dependencies
 32            validateNoCyclicalDependency(request.getParentDepartmentId(), request.getName());
 33        }
 34
 35        Department department = new Department();
 36        department.setName(request.getName());
 37        department.setDescription(request.getDescription());
 38        department.setLocation(request.getLocation());
 39        department.setBudget(request.getBudget());
 40
 41        if (request.getParentDepartmentId() != null) {
 42            Department parent = departmentRepository.findById(request.getParentDepartmentId()).get();
 43            department.setParentDepartment(parent);
 44        }
 45
 46        if (request.getManagerId() != null) {
 47            Employee manager = employeeRepository.findById(request.getManagerId())
 48                .orElseThrow(() -> new EmployeeNotFoundException("Manager not found"));
 49            department.setManager(manager);
 50        }
 51
 52        Department savedDepartment = departmentRepository.save(department);
 53        return convertToDto(savedDepartment);
 54    }
 55
 56    /**
 57     * Move employees when department is restructured
 58     */
 59    public void transferEmployees(Long fromDepartmentId, Long toDepartmentId) {
 60        Department fromDepartment = departmentRepository.findById(fromDepartmentId)
 61            .orElseThrow(() -> new DepartmentNotFoundException("Source department not found"));
 62
 63        Department toDepartment = departmentRepository.findById(toDepartmentId)
 64            .orElseThrow(() -> new DepartmentNotFoundException("Target department not found"));
 65
 66        List<Employee> employees = employeeRepository.findByDepartment(fromDepartment);
 67
 68        employees.forEach(employee -> {
 69            employee.setDepartment(toDepartment);
 70            employeeRepository.save(employee);
 71        });
 72
 73        // Log department transfer for audit
 74        auditService.logDepartmentTransfer(fromDepartmentId, toDepartmentId, employees.size());
 75    }
 76
 77    /**
 78     * Get department statistics and analytics
 79     */
 80    public DepartmentStatsDto getDepartmentStatistics(Long departmentId) {
 81        Department department = departmentRepository.findById(departmentId)
 82            .orElseThrow(() -> new DepartmentNotFoundException("Department not found"));
 83
 84        int totalEmployees = employeeRepository.countByDepartment(department);
 85        int activeEmployees = employeeRepository.countByDepartmentAndStatus(
 86            department, EmploymentStatus.ACTIVE);
 87
 88        List<Employee> employees = employeeRepository.findByDepartment(department);
 89
 90        double avgTenure = employees.stream()
 91            .mapToLong(emp -> ChronoUnit.DAYS.between(emp.getHireDate(), LocalDate.now()))
 92            .average()
 93            .orElse(0.0);
 94
 95        return DepartmentStatsDto.builder()
 96            .departmentId(departmentId)
 97            .departmentName(department.getName())
 98            .totalEmployees(totalEmployees)
 99            .activeEmployees(activeEmployees)
100            .averageTenureDays(avgTenure)
101            .managerName(department.getManager() != null ?
102                department.getManager().getFirstName() + " " + department.getManager().getLastName() : null)
103            .build();
104    }
105
106    private DepartmentHierarchyDto buildDepartmentHierarchy(Department department) {
107        DepartmentHierarchyDto dto = new DepartmentHierarchyDto();
108        dto.setId(department.getId());
109        dto.setName(department.getName());
110        dto.setDescription(department.getDescription());
111        dto.setEmployeeCount(employeeRepository.countByDepartment(department));
112
113        if (department.getManager() != null) {
114            dto.setManagerName(department.getManager().getFirstName() + " " +
115                             department.getManager().getLastName());
116        }
117
118        // Recursively build child departments
119        List<Department> children = departmentRepository.findByParentDepartment(department);
120        dto.setSubDepartments(children.stream()
121            .map(this::buildDepartmentHierarchy)
122            .collect(Collectors.toList()));
123
124        return dto;
125    }
126
127    private void validateNoCyclicalDependency(Long parentId, String newDepartmentName) {
128        // Implementation to prevent circular department hierarchies
129        // This prevents A -> B -> C -> A type relationships
130    }
131}

 1@Configuration
 2@EnableWebSecurity
 3@EnableGlobalMethodSecurity(prePostEnabled = true)
 4public class SecurityConfig {
 5
 6    @Autowired
 7    private UserDetailsService userDetailsService;
 8
 9    @Autowired
10    private JwtAuthenticationEntryPoint jwtAuthenticationEntryPoint;
11
12    @Bean
13    public PasswordEncoder passwordEncoder() {
14        return new BCryptPasswordEncoder(12); // Higher strength for HR data
15    }
16
17    @Bean
18    public JwtTokenProvider jwtTokenProvider() {
19        return new JwtTokenProvider();
20    }
21
22    @Bean
23    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
24        http.cors().and().csrf().disable()
25            .authorizeHttpRequests(authz -> authz
26                // Public endpoints
27                .requestMatchers("/api/auth/**").permitAll()
28                .requestMatchers("/api/public/**").permitAll()
29                .requestMatchers("/swagger-ui/**", "/v3/api-docs/**").permitAll()
30
31                // HR Admin only endpoints
32                .requestMatchers("/api/admin/**").hasRole("HR_ADMIN")
33                .requestMatchers(HttpMethod.POST, "/api/employees").hasRole("HR_ADMIN")
34                .requestMatchers(HttpMethod.DELETE, "/api/employees/**").hasRole("HR_ADMIN")
35
36                // Manager endpoints
37                .requestMatchers("/api/departments/*/reports").hasAnyRole("HR_ADMIN", "MANAGER")
38                .requestMatchers("/api/employees/*/reports").hasAnyRole("HR_ADMIN", "MANAGER")
39
40                // Employee self-service endpoints
41                .requestMatchers(HttpMethod.GET, "/api/employees/me").hasAnyRole("EMPLOYEE", "MANAGER", "HR_ADMIN")
42                .requestMatchers(HttpMethod.PUT, "/api/employees/me").hasAnyRole("EMPLOYEE", "MANAGER", "HR_ADMIN")
43
44                // All other endpoints require authentication
45                .anyRequest().authenticated())
46
47            .exceptionHandling()
48                .authenticationEntryPoint(jwtAuthenticationEntryPoint)
49            .and()
50            .sessionManagement()
51                .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
52
53        http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
54
55        return http.build();
56    }
57
58    @Bean
59    public JwtAuthenticationFilter jwtAuthenticationFilter() {
60        return new JwtAuthenticationFilter();
61    }
62}
63
64@Service
65public class UserDetailsServiceImpl implements UserDetailsService {
66
67    @Autowired
68    private UserRepository userRepository;
69
70    @Override
71    @Transactional(readOnly = true)
72    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
73        User user = userRepository.findByUsernameOrEmail(username, username)
74            .orElseThrow(() -> new UsernameNotFoundException("User not found: " + username));
75
76        return UserPrincipal.create(user);
77    }
78
79    public UserDetails loadUserById(Long id) {
80        User user = userRepository.findById(id)
81            .orElseThrow(() -> new UsernameNotFoundException("User not found with id: " + id));
82
83        return UserPrincipal.create(user);
84    }
85}

  1<template>
  2  <div class="employee-management">
  3    <!-- Search and Filters -->
  4    <div class="toolbar">
  5      <el-input
  6        v-model="searchQuery"
  7        placeholder="Search employees..."
  8        prefix-icon="el-icon-search"
  9        @input="debounceSearch"
 10        class="search-input"
 11      />
 12
 13      <el-select v-model="selectedDepartment" placeholder="Department" clearable>
 14        <el-option
 15          v-for="dept in departments"
 16          :key="dept.id"
 17          :label="dept.name"
 18          :value="dept.id"
 19        />
 20      </el-select>
 21
 22      <el-button
 23        type="primary"
 24        icon="el-icon-plus"
 25        @click="openCreateDialog"
 26        v-if="canCreateEmployee"
 27      >
 28        Add Employee
 29      </el-button>
 30    </div>
 31
 32    <!-- Employee Table -->
 33    <el-table
 34      :data="employees"
 35      :loading="loading"
 36      @sort-change="handleSort"
 37      stripe
 38      class="employee-table"
 39    >
 40      <el-table-column prop="employeeId" label="Employee ID" width="120" sortable="custom" />
 41
 42      <el-table-column label="Photo" width="80">
 43        <template #default="scope">
 44          <el-avatar
 45            :src="scope.row.photoUrl"
 46            :alt="scope.row.fullName"
 47            size="small"
 48          >
 49            {{ scope.row.initials }}
 50          </el-avatar>
 51        </template>
 52      </el-table-column>
 53
 54      <el-table-column prop="fullName" label="Name" sortable="custom">
 55        <template #default="scope">
 56          <router-link
 57            :to="`/employees/${scope.row.id}`"
 58            class="employee-link"
 59          >
 60            {{ scope.row.fullName }}
 61          </router-link>
 62        </template>
 63      </el-table-column>
 64
 65      <el-table-column prop="department.name" label="Department" sortable="custom" />
 66      <el-table-column prop="jobTitle" label="Job Title" />
 67
 68      <el-table-column label="Status" width="100">
 69        <template #default="scope">
 70          <el-tag
 71            :type="getStatusType(scope.row.status)"
 72            size="small"
 73          >
 74            {{ scope.row.status }}
 75          </el-tag>
 76        </template>
 77      </el-table-column>
 78
 79      <el-table-column label="Actions" width="150" fixed="right">
 80        <template #default="scope">
 81          <el-button
 82            type="primary"
 83            icon="el-icon-view"
 84            size="mini"
 85            @click="viewEmployee(scope.row.id)"
 86          />
 87          <el-button
 88            type="warning"
 89            icon="el-icon-edit"
 90            size="mini"
 91            @click="editEmployee(scope.row.id)"
 92            v-if="canEditEmployee(scope.row)"
 93          />
 94          <el-button
 95            type="danger"
 96            icon="el-icon-delete"
 97            size="mini"
 98            @click="confirmDelete(scope.row)"
 99            v-if="canDeleteEmployee"
100          />
101        </template>
102      </el-table-column>
103    </el-table>
104
105    <!-- Pagination -->
106    <div class="pagination-container">
107      <el-pagination
108        :current-page="currentPage"
109        :page-sizes="[10, 20, 50, 100]"
110        :page-size="pageSize"
111        :total="totalEmployees"
112        layout="total, sizes, prev, pager, next, jumper"
113        @size-change="handleSizeChange"
114        @current-change="handleCurrentChange"
115      />
116    </div>
117
118    <!-- Create/Edit Employee Dialog -->
119    <employee-form-dialog
120      :visible="showDialog"
121      :employee="selectedEmployee"
122      :is-edit-mode="isEditMode"
123      @close="closeDialog"
124      @saved="handleEmployeeSaved"
125    />
126  </div>
127</template>
128
129<script>
130import { mapState, mapActions } from 'vuex'
131import { debounce } from 'lodash'
132import EmployeeFormDialog from '@/components/EmployeeFormDialog.vue'
133
134export default {
135  name: 'EmployeeManagement',
136  components: {
137    EmployeeFormDialog
138  },
139  data() {
140    return {
141      searchQuery: '',
142      selectedDepartment: null,
143      currentPage: 1,
144      pageSize: 20,
145      sortBy: 'lastName',
146      sortOrder: 'asc',
147      showDialog: false,
148      selectedEmployee: null,
149      isEditMode: false,
150      loading: false
151    }
152  },
153  computed: {
154    ...mapState('employee', ['employees', 'totalEmployees']),
155    ...mapState('department', ['departments']),
156    ...mapState('auth', ['user', 'permissions']),
157
158    canCreateEmployee() {
159      return this.permissions.includes('CREATE_EMPLOYEE')
160    },
161
162    canDeleteEmployee() {
163      return this.permissions.includes('DELETE_EMPLOYEE')
164    }
165  },
166  methods: {
167    ...mapActions('employee', [
168      'fetchEmployees',
169      'deleteEmployee'
170    ]),
171    ...mapActions('department', ['fetchDepartments']),
172
173    async loadEmployees() {
174      try {
175        this.loading = true
176        await this.fetchEmployees({
177          page: this.currentPage - 1,
178          size: this.pageSize,
179          sortBy: this.sortBy,
180          sortOrder: this.sortOrder,
181          departmentId: this.selectedDepartment,
182          searchTerm: this.searchQuery
183        })
184      } catch (error) {
185        this.$message.error('Failed to load employees')
186      } finally {
187        this.loading = false
188      }
189    },
190
191    debounceSearch: debounce(function() {
192      this.currentPage = 1
193      this.loadEmployees()
194    }, 500),
195
196    handleSort({ column, prop, order }) {
197      this.sortBy = prop
198      this.sortOrder = order === 'ascending' ? 'asc' : 'desc'
199      this.loadEmployees()
200    },
201
202    handleSizeChange(size) {
203      this.pageSize = size
204      this.currentPage = 1
205      this.loadEmployees()
206    },
207
208    handleCurrentChange(page) {
209      this.currentPage = page
210      this.loadEmployees()
211    },
212
213    canEditEmployee(employee) {
214      // HR Admin can edit anyone, managers can edit their reports, employees can edit themselves
215      return this.permissions.includes('EDIT_ALL_EMPLOYEES') ||
216             (this.permissions.includes('EDIT_TEAM_EMPLOYEES') && employee.managerId === this.user.employeeId) ||
217             (employee.id === this.user.employeeId)
218    },
219
220    getStatusType(status) {
221      const statusTypes = {
222        'ACTIVE': 'success',
223        'INACTIVE': 'warning',
224        'TERMINATED': 'danger',
225        'ON_LEAVE': 'info'
226      }
227      return statusTypes[status] || 'info'
228    },
229
230    openCreateDialog() {
231      this.selectedEmployee = null
232      this.isEditMode = false
233      this.showDialog = true
234    },
235
236    editEmployee(employeeId) {
237      const employee = this.employees.find(e => e.id === employeeId)
238      this.selectedEmployee = employee
239      this.isEditMode = true
240      this.showDialog = true
241    },
242
243    closeDialog() {
244      this.showDialog = false
245      this.selectedEmployee = null
246    },
247
248    handleEmployeeSaved() {
249      this.closeDialog()
250      this.loadEmployees()
251      this.$message.success(
252        this.isEditMode ? 'Employee updated successfully' : 'Employee created successfully'
253      )
254    },
255
256    async confirmDelete(employee) {
257      try {
258        await this.$confirm(
259          `Are you sure you want to delete ${employee.fullName}? This action cannot be undone.`,
260          'Confirm Delete',
261          {
262            confirmButtonText: 'Delete',
263            cancelButtonText: 'Cancel',
264            type: 'warning'
265          }
266        )
267
268        await this.deleteEmployee(employee.id)
269        this.$message.success('Employee deleted successfully')
270        this.loadEmployees()
271
272      } catch (error) {
273        if (error !== 'cancel') {
274          this.$message.error('Failed to delete employee')
275        }
276      }
277    },
278
279    viewEmployee(employeeId) {
280      this.$router.push(`/employees/${employeeId}`)
281    }
282  },
283
284  watch: {
285    selectedDepartment() {
286      this.currentPage = 1
287      this.loadEmployees()
288    }
289  },
290
291  async created() {
292    await Promise.all([
293      this.loadEmployees(),
294      this.fetchDepartments()
295    ])
296  }
297}
298</script>
299
300<style scoped>
301.employee-management {
302  padding: 20px;
303}
304
305.toolbar {
306  display: flex;
307  gap: 12px;
308  margin-bottom: 20px;
309  align-items: center;
310}
311
312.search-input {
313  width: 300px;
314}
315
316.employee-table {
317  width: 100%;
318  margin-bottom: 20px;
319}
320
321.employee-link {
322  color: #409eff;
323  text-decoration: none;
324}
325
326.employee-link:hover {
327  text-decoration: underline;
328}
329
330.pagination-container {
331  display: flex;
332  justify-content: center;
333}
334</style>

  1// store/modules/employee.js
  2const state = {
  3  employees: [],
  4  currentEmployee: null,
  5  totalEmployees: 0,
  6  loading: false,
  7  error: null
  8}
  9
 10const mutations = {
 11  SET_EMPLOYEES(state, { employees, total }) {
 12    state.employees = employees
 13    state.totalEmployees = total
 14  },
 15
 16  SET_CURRENT_EMPLOYEE(state, employee) {
 17    state.currentEmployee = employee
 18  },
 19
 20  ADD_EMPLOYEE(state, employee) {
 21    state.employees.push(employee)
 22    state.totalEmployees++
 23  },
 24
 25  UPDATE_EMPLOYEE(state, updatedEmployee) {
 26    const index = state.employees.findIndex(emp => emp.id === updatedEmployee.id)
 27    if (index !== -1) {
 28      Vue.set(state.employees, index, updatedEmployee)
 29    }
 30    if (state.currentEmployee && state.currentEmployee.id === updatedEmployee.id) {
 31      state.currentEmployee = updatedEmployee
 32    }
 33  },
 34
 35  REMOVE_EMPLOYEE(state, employeeId) {
 36    state.employees = state.employees.filter(emp => emp.id !== employeeId)
 37    state.totalEmployees--
 38  },
 39
 40  SET_LOADING(state, loading) {
 41    state.loading = loading
 42  },
 43
 44  SET_ERROR(state, error) {
 45    state.error = error
 46  }
 47}
 48
 49const actions = {
 50  async fetchEmployees({ commit }, params) {
 51    try {
 52      commit('SET_LOADING', true)
 53      commit('SET_ERROR', null)
 54
 55      const response = await employeeApi.getEmployees(params)
 56
 57      commit('SET_EMPLOYEES', {
 58        employees: response.data.content,
 59        total: response.data.totalElements
 60      })
 61
 62    } catch (error) {
 63      commit('SET_ERROR', 'Failed to fetch employees')
 64      throw error
 65    } finally {
 66      commit('SET_LOADING', false)
 67    }
 68  },
 69
 70  async fetchEmployeeById({ commit }, employeeId) {
 71    try {
 72      commit('SET_LOADING', true)
 73      const response = await employeeApi.getEmployeeById(employeeId)
 74      commit('SET_CURRENT_EMPLOYEE', response.data)
 75      return response.data
 76    } catch (error) {
 77      commit('SET_ERROR', 'Failed to fetch employee details')
 78      throw error
 79    } finally {
 80      commit('SET_LOADING', false)
 81    }
 82  },
 83
 84  async createEmployee({ commit }, employeeData) {
 85    try {
 86      const response = await employeeApi.createEmployee(employeeData)
 87      commit('ADD_EMPLOYEE', response.data)
 88      return response.data
 89    } catch (error) {
 90      commit('SET_ERROR', 'Failed to create employee')
 91      throw error
 92    }
 93  },
 94
 95  async updateEmployee({ commit }, { id, employeeData }) {
 96    try {
 97      const response = await employeeApi.updateEmployee(id, employeeData)
 98      commit('UPDATE_EMPLOYEE', response.data)
 99      return response.data
100    } catch (error) {
101      commit('SET_ERROR', 'Failed to update employee')
102      throw error
103    }
104  },
105
106  async deleteEmployee({ commit }, employeeId) {
107    try {
108      await employeeApi.deleteEmployee(employeeId)
109      commit('REMOVE_EMPLOYEE', employeeId)
110    } catch (error) {
111      commit('SET_ERROR', 'Failed to delete employee')
112      throw error
113    }
114  },
115
116  async uploadEmployeePhoto({ commit }, { employeeId, photoFile }) {
117    try {
118      const response = await employeeApi.uploadPhoto(employeeId, photoFile)
119
120      // Update employee photo URL in state
121      const employee = state.employees.find(emp => emp.id === employeeId)
122      if (employee) {
123        commit('UPDATE_EMPLOYEE', {
124          ...employee,
125          photoUrl: response.data.photoUrl
126        })
127      }
128
129      return response.data
130    } catch (error) {
131      commit('SET_ERROR', 'Failed to upload photo')
132      throw error
133    }
134  }
135}
136
137const getters = {
138  employeeById: (state) => (id) => {
139    return state.employees.find(employee => employee.id === id)
140  },
141
142  employeesByDepartment: (state) => (departmentId) => {
143    return state.employees.filter(employee =>
144      employee.department && employee.department.id === departmentId
145    )
146  },
147
148  activeEmployees: (state) => {
149    return state.employees.filter(employee => employee.status === 'ACTIVE')
150  },
151
152  managers: (state) => {
153    return state.employees.filter(employee =>
154      employee.isManager || employee.directReports?.length > 0
155    )
156  }
157}
158
159export default {
160  namespaced: true,
161  state,
162  mutations,
163  actions,
164  getters
165}

  1# docker-compose.yml
  2version: '3.8'
  3
  4services:
  5  # MySQL Database
  6  mysql:
  7    image: mysql:8.0
  8    container_name: employee-system-mysql
  9    environment:
 10      MYSQL_DATABASE: employee_management
 11      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
 12      MYSQL_USER: ${DB_USER}
 13      MYSQL_PASSWORD: ${DB_PASSWORD}
 14    ports:
 15      - "3306:3306"
 16    volumes:
 17      - mysql_data:/var/lib/mysql
 18      - ./sql/init:/docker-entrypoint-initdb.d
 19    networks:
 20      - employee-network
 21    restart: unless-stopped
 22    healthcheck:
 23      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
 24      timeout: 10s
 25      retries: 5
 26
 27  # Spring Boot Backend
 28  backend:
 29    build:
 30      context: ./backend
 31      dockerfile: Dockerfile
 32    container_name: employee-system-backend
 33    environment:
 34      - SPRING_PROFILES_ACTIVE=docker
 35      - DB_HOST=mysql
 36      - DB_PORT=3306
 37      - DB_NAME=employee_management
 38      - DB_USER=${DB_USER}
 39      - DB_PASSWORD=${DB_PASSWORD}
 40      - JWT_SECRET=${JWT_SECRET}
 41      - FILE_UPLOAD_DIR=/app/uploads
 42    ports:
 43      - "9998:9998"
 44    depends_on:
 45      mysql:
 46        condition: service_healthy
 47    volumes:
 48      - uploads_data:/app/uploads
 49      - ./logs:/app/logs
 50    networks:
 51      - employee-network
 52    restart: unless-stopped
 53    healthcheck:
 54      test: ["CMD", "curl", "-f", "http://localhost:9998/actuator/health"]
 55      interval: 30s
 56      timeout: 10s
 57      retries: 3
 58
 59  # Vue.js Frontend
 60  frontend:
 61    build:
 62      context: ./frontend
 63      dockerfile: Dockerfile
 64      args:
 65        VUE_APP_API_BASE_URL: http://localhost:9998/api
 66    container_name: employee-system-frontend
 67    ports:
 68      - "8080:80"
 69    depends_on:
 70      - backend
 71    networks:
 72      - employee-network
 73    restart: unless-stopped
 74    healthcheck:
 75      test: ["CMD", "curl", "-f", "http://localhost:80"]
 76      interval: 30s
 77      timeout: 10s
 78      retries: 3
 79
 80  # Nginx Reverse Proxy
 81  nginx:
 82    image: nginx:alpine
 83    container_name: employee-system-nginx
 84    ports:
 85      - "80:80"
 86      - "443:443"
 87    volumes:
 88      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
 89      - ./nginx/ssl:/etc/nginx/ssl:ro
 90      - uploads_data:/var/www/uploads:ro
 91    depends_on:
 92      - frontend
 93      - backend
 94    networks:
 95      - employee-network
 96    restart: unless-stopped
 97
 98volumes:
 99  mysql_data:
100    driver: local
101  uploads_data:
102    driver: local
103
104networks:
105  employee-network:
106    driver: bridge