Resolve merge conflicts: accept incoming changes (theirs)
This commit is contained in:
unknown
parent
f4e955ade4
commit
549e926493
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { RoleBasedRender } from '@/components/role-based/role-based-render'
|
||||||
|
import { DeviceDeleteDialog } from './device-delete-dialog'
|
||||||
|
import { DeviceEditDialog } from './device-edit-dialog'
|
||||||
|
import { PortSettingsModal } from './port-settings-modal'
|
||||||
|
import { DeviceBulkCreateDialog } from './device-bulk-create-dialog'
|
||||||
|
|
||||||
|
export function DevicesDialogs() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DeviceEditDialog />
|
||||||
|
<DeviceDeleteDialog />
|
||||||
|
<RoleBasedRender allowedRoles={['Super Admin', 'Admin']}>
|
||||||
|
<PortSettingsModal />
|
||||||
|
<DeviceBulkCreateDialog />
|
||||||
|
</RoleBasedRender>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { IconPlus, IconUpload } from '@tabler/icons-react'
|
||||||
|
import { useNavigate } from '@tanstack/react-router'
|
||||||
|
import { useDevicesContext } from '../context/devices-context'
|
||||||
|
|
||||||
|
export function DevicesPrimaryButtons() {
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const { setIsBulkCreateDialogOpen } = useDevicesContext()
|
||||||
|
|
||||||
|
const handleCreateDevice = () => {
|
||||||
|
navigate({ to: '/devices/create' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBulkCreate = () => {
|
||||||
|
setIsBulkCreateDialogOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex gap-2'>
|
||||||
|
<Button size='sm' onClick={handleCreateDevice}>
|
||||||
|
<IconPlus className='h-4 w-4' /> Tambah perangkat
|
||||||
|
</Button>
|
||||||
|
<Button size='sm' variant='outline' onClick={handleBulkCreate}>
|
||||||
|
<IconUpload className='h-4 w-4' /> Bulk Import
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
import React, { createContext, useContext, useState } from 'react'
|
||||||
|
import { DeviceComplete, DeviceFilters, DeviceSorting } from '../types/device'
|
||||||
|
|
||||||
|
interface DevicesContextType {
|
||||||
|
// UI State
|
||||||
|
selectedDevices: string[]
|
||||||
|
setSelectedDevices: (devices: string[]) => void
|
||||||
|
|
||||||
|
// Dialog states
|
||||||
|
isEditDialogOpen: boolean
|
||||||
|
setIsEditDialogOpen: (open: boolean) => void
|
||||||
|
|
||||||
|
isDeleteDialogOpen: boolean
|
||||||
|
setIsDeleteDialogOpen: (open: boolean) => void
|
||||||
|
|
||||||
|
isPortSettingsModalOpen: boolean
|
||||||
|
setIsPortSettingsModalOpen: (open: boolean) => void
|
||||||
|
|
||||||
|
isBulkCreateDialogOpen: boolean
|
||||||
|
setIsBulkCreateDialogOpen: (open: boolean) => void
|
||||||
|
|
||||||
|
// Current device for edit/delete
|
||||||
|
currentDevice: DeviceComplete | null
|
||||||
|
setCurrentDevice: (device: DeviceComplete | null) => void
|
||||||
|
|
||||||
|
// Frontend filtering and sorting
|
||||||
|
filters: DeviceFilters
|
||||||
|
setFilters: (filters: DeviceFilters) => void
|
||||||
|
|
||||||
|
sorting: DeviceSorting | null
|
||||||
|
setSorting: (sorting: DeviceSorting | null) => void
|
||||||
|
|
||||||
|
// Pagination (frontend)
|
||||||
|
currentPage: number
|
||||||
|
setCurrentPage: (page: number) => void
|
||||||
|
|
||||||
|
pageSize: number
|
||||||
|
setPageSize: (size: number) => void
|
||||||
|
|
||||||
|
// Region filtering state
|
||||||
|
selectedProvince: string
|
||||||
|
setSelectedProvince: (province: string) => void
|
||||||
|
selectedCity: string
|
||||||
|
setSelectedCity: (city: string) => void
|
||||||
|
selectedDistrict: string
|
||||||
|
setSelectedDistrict: (district: string) => void
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
openEditDialog: (device: DeviceComplete) => void
|
||||||
|
openDeleteDialog: (device: DeviceComplete) => void
|
||||||
|
closeAllDialogs: () => void
|
||||||
|
|
||||||
|
resetFilters: () => void
|
||||||
|
|
||||||
|
// Bulk operations
|
||||||
|
isBulkMode: boolean
|
||||||
|
setIsBulkMode: (mode: boolean) => void
|
||||||
|
toggleDeviceSelection: (deviceId: string) => void
|
||||||
|
selectAllDevices: (deviceIds: string[]) => void
|
||||||
|
clearSelection: () => void
|
||||||
|
bulkDeleteSelected: () => void
|
||||||
|
|
||||||
|
// Settings Port
|
||||||
|
portSettingsDevice: DeviceComplete | null
|
||||||
|
isPortSettingsOpen: boolean
|
||||||
|
setIsPortSettingsOpen: (open: boolean) => void
|
||||||
|
openPortSettingsDialog: (device: DeviceComplete) => void
|
||||||
|
|
||||||
|
// Region filter handlers
|
||||||
|
handleProvinceChange: (provinceId: string, provinceName?: string) => void
|
||||||
|
handleCityChange: (cityId: string, cityName?: string) => void
|
||||||
|
handleDistrictChange: (districtId: string, districtName?: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const DevicesContext = createContext<DevicesContextType | undefined>(undefined)
|
||||||
|
|
||||||
|
interface DevicesProviderProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialFilters: DeviceFilters = {
|
||||||
|
search: '',
|
||||||
|
status: '',
|
||||||
|
device_type: '',
|
||||||
|
province: '',
|
||||||
|
city: '',
|
||||||
|
district: '',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DevicesProvider({ children }: DevicesProviderProps) {
|
||||||
|
// UI State
|
||||||
|
const [selectedDevices, setSelectedDevices] = useState<string[]>([])
|
||||||
|
|
||||||
|
// Dialog states
|
||||||
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
|
||||||
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
|
||||||
|
const [isBulkCreateDialogOpen, setIsBulkCreateDialogOpen] = useState(false)
|
||||||
|
|
||||||
|
// Current device
|
||||||
|
const [currentDevice, setCurrentDevice] = useState<DeviceComplete | null>(null)
|
||||||
|
|
||||||
|
// Frontend filtering and sorting
|
||||||
|
const [filters, setFilters] = useState<DeviceFilters>(initialFilters)
|
||||||
|
const [sorting, setSorting] = useState<DeviceSorting | null>(null)
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const [pageSize, setPageSize] = useState(10)
|
||||||
|
|
||||||
|
// Region filtering state
|
||||||
|
const [selectedProvince, setSelectedProvince] = useState('')
|
||||||
|
const [selectedCity, setSelectedCity] = useState('')
|
||||||
|
const [selectedDistrict, setSelectedDistrict] = useState('')
|
||||||
|
|
||||||
|
// Bulk operations state
|
||||||
|
const [isBulkMode, setIsBulkMode] = useState(false)
|
||||||
|
|
||||||
|
// Settings port
|
||||||
|
const [portSettingsDevice, setPortSettingsDevice] = useState<DeviceComplete | null>(null)
|
||||||
|
const [isPortSettingsOpen, setIsPortSettingsOpen] = useState(false)
|
||||||
|
const [isPortSettingsModalOpen, setIsPortSettingsModalOpen] = useState(false)
|
||||||
|
|
||||||
|
// Actions
|
||||||
|
const openEditDialog = (device: DeviceComplete) => {
|
||||||
|
setCurrentDevice(device)
|
||||||
|
setIsEditDialogOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const openDeleteDialog = (device: DeviceComplete) => {
|
||||||
|
setCurrentDevice(device)
|
||||||
|
setIsDeleteDialogOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeAllDialogs = () => {
|
||||||
|
setIsEditDialogOpen(false)
|
||||||
|
setIsDeleteDialogOpen(false)
|
||||||
|
setCurrentDevice(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetFilters = () => {
|
||||||
|
setFilters(initialFilters)
|
||||||
|
setSorting(null)
|
||||||
|
setCurrentPage(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const openPortSettingsDialog = (device: DeviceComplete) => {
|
||||||
|
setPortSettingsDevice(device)
|
||||||
|
setIsPortSettingsOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Region filter handlers
|
||||||
|
const handleProvinceChange = (provinceId: string, provinceName?: string) => {
|
||||||
|
setSelectedProvince(provinceId) // ID for API calls
|
||||||
|
setSelectedCity('')
|
||||||
|
setSelectedDistrict('')
|
||||||
|
setFilters(prev => ({
|
||||||
|
...prev,
|
||||||
|
province: provinceName || provinceId, // Name for filtering
|
||||||
|
city: '',
|
||||||
|
district: ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCityChange = (cityId: string, cityName?: string) => {
|
||||||
|
setSelectedCity(cityId) // ID for API calls
|
||||||
|
setSelectedDistrict('')
|
||||||
|
setFilters(prev => ({
|
||||||
|
...prev,
|
||||||
|
city: cityName || cityId, // Name for filtering
|
||||||
|
district: ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDistrictChange = (districtId: string, districtName?: string) => {
|
||||||
|
setSelectedDistrict(districtId) // ID for API calls
|
||||||
|
setFilters(prev => ({
|
||||||
|
...prev,
|
||||||
|
district: districtName || districtId // Name for filtering
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bulk operations functions
|
||||||
|
const toggleDeviceSelection = (deviceId: string) => {
|
||||||
|
setSelectedDevices(prev =>
|
||||||
|
prev.includes(deviceId)
|
||||||
|
? prev.filter(id => id !== deviceId)
|
||||||
|
: [...prev, deviceId]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectAllDevices = (deviceIds: string[]) => {
|
||||||
|
setSelectedDevices(deviceIds)
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearSelection = () => {
|
||||||
|
setSelectedDevices([])
|
||||||
|
setIsBulkMode(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const bulkDeleteSelected = () => {
|
||||||
|
// This will be handled by the bulk delete hook
|
||||||
|
// The actual deletion logic is in the component that calls this
|
||||||
|
console.log('Bulk delete selected devices:', selectedDevices)
|
||||||
|
}
|
||||||
|
|
||||||
|
const value: DevicesContextType = {
|
||||||
|
selectedDevices,
|
||||||
|
setSelectedDevices,
|
||||||
|
isEditDialogOpen,
|
||||||
|
setIsEditDialogOpen,
|
||||||
|
isDeleteDialogOpen,
|
||||||
|
setIsDeleteDialogOpen,
|
||||||
|
isPortSettingsModalOpen,
|
||||||
|
setIsPortSettingsModalOpen,
|
||||||
|
isBulkCreateDialogOpen,
|
||||||
|
setIsBulkCreateDialogOpen,
|
||||||
|
currentDevice,
|
||||||
|
setCurrentDevice,
|
||||||
|
filters,
|
||||||
|
setFilters,
|
||||||
|
sorting,
|
||||||
|
setSorting,
|
||||||
|
currentPage,
|
||||||
|
setCurrentPage,
|
||||||
|
pageSize,
|
||||||
|
setPageSize,
|
||||||
|
selectedProvince,
|
||||||
|
setSelectedProvince,
|
||||||
|
selectedCity,
|
||||||
|
setSelectedCity,
|
||||||
|
selectedDistrict,
|
||||||
|
setSelectedDistrict,
|
||||||
|
openEditDialog,
|
||||||
|
openDeleteDialog,
|
||||||
|
closeAllDialogs,
|
||||||
|
resetFilters,
|
||||||
|
portSettingsDevice,
|
||||||
|
isPortSettingsOpen,
|
||||||
|
setIsPortSettingsOpen,
|
||||||
|
openPortSettingsDialog,
|
||||||
|
handleProvinceChange,
|
||||||
|
handleCityChange,
|
||||||
|
handleDistrictChange,
|
||||||
|
isBulkMode,
|
||||||
|
setIsBulkMode,
|
||||||
|
toggleDeviceSelection,
|
||||||
|
selectAllDevices,
|
||||||
|
clearSelection,
|
||||||
|
bulkDeleteSelected
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DevicesContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</DevicesContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useDevicesContext = () => {
|
||||||
|
const context = useContext(DevicesContext)
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useDevicesContext must be used within a DevicesProvider')
|
||||||
|
}
|
||||||
|
return context
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||||
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
import { devicesService } from '../services/devices-service'
|
||||||
|
import { DevicePortsUpdateRequest } from '../types/device'
|
||||||
|
|
||||||
|
export const useDevices = ({
|
||||||
|
type = 'all',
|
||||||
|
}: { type?: 'otb' | 'closure' | 'odp' | 'all' } = {}) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['devices'],
|
||||||
|
queryFn: devicesService.getDevices,
|
||||||
|
select: (data) => {
|
||||||
|
if (type === 'otb') {
|
||||||
|
return data.data.filter(d => d.device_type.toLowerCase() === 'otb') || []
|
||||||
|
}
|
||||||
|
if (type === 'closure') {
|
||||||
|
return data.data.filter(d => d.device_type.toLowerCase() === 'closure') || []
|
||||||
|
}
|
||||||
|
if (type === 'odp') {
|
||||||
|
return data.data.filter(d => d.device_type.toLowerCase() === 'odp') || []
|
||||||
|
}
|
||||||
|
return data.data || []
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useDevice = (id: string) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['device', id],
|
||||||
|
queryFn: () => devicesService.getDevice(id),
|
||||||
|
select: (data) => data.data,
|
||||||
|
enabled: !!id,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useDeviceWithPorts = (id: string) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['device-with-ports', id],
|
||||||
|
queryFn: () => devicesService.getDeviceWithPorts(id),
|
||||||
|
select: (data) => data.data,
|
||||||
|
enabled: !!id,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useCreateDevice = () => {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (data: FormData) => devicesService.createDevice(data),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices'] })
|
||||||
|
toast.success('Device created successfully')
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.status?.description || 'Failed to create device')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useUpdateDevice = () => {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ id, formData }: { id: string; formData: FormData }) => devicesService.updateDevice(id, formData),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices'] })
|
||||||
|
toast.success('Device updated successfully')
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.status?.description || 'Failed to update device')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useDeleteDeviceImage = () => {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ deviceId, imageName }: { deviceId: string; imageName: string }) =>
|
||||||
|
devicesService.deleteDeviceImage(deviceId, imageName),
|
||||||
|
onSuccess: (_, variables) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices'] })
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['device', variables.deviceId] })
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['device-with-ports', variables.deviceId] })
|
||||||
|
toast.success('Image deleted successfully')
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.status?.description || 'Failed to delete image')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Updated hook to use the new assign-customer endpoint
|
||||||
|
export const useAssignCustomersToPorts = () => {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (data: DevicePortsUpdateRequest) => devicesService.assignCustomersToPorts(data),
|
||||||
|
onSuccess: (_, variables) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices'] })
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['device-with-ports', variables.device_id] })
|
||||||
|
toast.success('Customer assignments updated successfully')
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.status?.description || 'Failed to update customer assignments')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keep the old hook name for backward compatibility
|
||||||
|
export const useUpdateDevicePorts = useAssignCustomersToPorts
|
||||||
|
|
||||||
|
export const useDeleteDevice = () => {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (id: string) => devicesService.deleteDevice(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices'] })
|
||||||
|
toast.success('Device deleted successfully')
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.status?.description || 'Failed to delete device')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useBulkDeleteDevices = () => {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (ids: string[]) => devicesService.bulkDeleteDevices(ids),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices'] })
|
||||||
|
toast.success('Devices deleted successfully')
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.status?.description || 'Failed to delete devices')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useBulkCreateDevices = () => {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (devices: any[]) => devicesService.bulkCreateDevices(devices),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices'] })
|
||||||
|
const successCount = data.data?.success_count || 0
|
||||||
|
const failureCount = data.data?.failure_count || 0
|
||||||
|
|
||||||
|
if (failureCount > 0) {
|
||||||
|
toast.warning(`${successCount} devices created successfully, ${failureCount} failed`)
|
||||||
|
} else {
|
||||||
|
toast.success(`${successCount} devices created successfully`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
toast.error(error.response?.data?.status?.description || 'Failed to create devices')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
import { useState, useMemo } from 'react'
|
||||||
|
import { Header } from '@/components/layout/header'
|
||||||
|
import { Main } from '@/components/layout/main'
|
||||||
|
import { ProfileDropdown } from '@/components/profile-dropdown'
|
||||||
|
import { Search } from '@/components/search'
|
||||||
|
import { ThemeSwitch } from '@/components/theme-switch'
|
||||||
|
import { columns } from './components/columns'
|
||||||
|
import { DataTable } from './components/data-table'
|
||||||
|
import { DevicesDialogs } from './components/devices-dialogs'
|
||||||
|
import { DevicesPrimaryButtons } from './components/devices-primary-buttons'
|
||||||
|
import { ViewSwitcher } from './components/view-switcher'
|
||||||
|
import { DevicesCards } from './components/devices-cards'
|
||||||
|
import { DevicesRegionFilter } from './components/devices-region-filter'
|
||||||
|
import DevicesProvider, { useDevicesContext } from './context/devices-context'
|
||||||
|
import { useDevices } from './hooks/use-devices'
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton'
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
import { handleServerError } from '@/utils/handle-server-error'
|
||||||
|
|
||||||
|
|
||||||
|
function DevicesContent() {
|
||||||
|
const { data: devices, isLoading, error } = useDevices()
|
||||||
|
const { filters } = useDevicesContext()
|
||||||
|
const [view, setView] = useState<'table' | 'cards'>('table')
|
||||||
|
|
||||||
|
// Filter devices based on region filters
|
||||||
|
const filteredDevices = useMemo(() => {
|
||||||
|
if (!devices) return []
|
||||||
|
|
||||||
|
return devices.filter((device) => {
|
||||||
|
const matchesProvince = !filters.province || device.province === filters.province
|
||||||
|
const matchesCity = !filters.city || device.city === filters.city
|
||||||
|
const matchesDistrict = !filters.district || device.district === filters.district
|
||||||
|
|
||||||
|
return matchesProvince && matchesCity && matchesDistrict
|
||||||
|
})
|
||||||
|
}, [devices, filters.province, filters.city, filters.district])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (error) {
|
||||||
|
handleServerError(error)
|
||||||
|
}
|
||||||
|
}, [error])
|
||||||
|
|
||||||
|
const renderSkeletons = () => {
|
||||||
|
if (view === 'table') {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Skeleton className="h-10 w-full" />
|
||||||
|
<Skeleton className="h-64 w-full" />
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<Skeleton className="h-8 w-32" />
|
||||||
|
<Skeleton className="h-8 w-64" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||||
|
{Array.from({ length: 8 }).map((_, i) => (
|
||||||
|
<Skeleton key={i} className="h-48 w-full" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header fixed>
|
||||||
|
<Search />
|
||||||
|
<div className='ml-auto flex items-center space-x-4'>
|
||||||
|
<ThemeSwitch />
|
||||||
|
<ProfileDropdown />
|
||||||
|
</div>
|
||||||
|
</Header>
|
||||||
|
|
||||||
|
<Main>
|
||||||
|
<div className='mb-2 flex flex-wrap items-center justify-between space-y-2 gap-x-4'>
|
||||||
|
<div>
|
||||||
|
<h2 className='text-2xl font-bold tracking-tight'>Perangkat</h2>
|
||||||
|
<p className='text-muted-foreground'>
|
||||||
|
Berikut adalah daftar perangkat Anda!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<ViewSwitcher view={view} onViewChange={setView} />
|
||||||
|
<DevicesPrimaryButtons />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Region Filter */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<DevicesRegionFilter />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-y-0 lg:space-x-12'>
|
||||||
|
{isLoading ? (
|
||||||
|
renderSkeletons()
|
||||||
|
) : view === 'table' ? (
|
||||||
|
<DataTable
|
||||||
|
data={filteredDevices || []}
|
||||||
|
columns={columns}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<DevicesCards devices={filteredDevices || []} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Main>
|
||||||
|
|
||||||
|
<DevicesDialogs />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Devices() {
|
||||||
|
return (
|
||||||
|
<DevicesProvider>
|
||||||
|
<DevicesContent />
|
||||||
|
</DevicesProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
import { apiClient } from '@/lib/api'
|
||||||
|
import { ApiResponse } from '@/lib/api/types'
|
||||||
|
import {
|
||||||
|
DeviceResponse,
|
||||||
|
DevicePortsUpdateRequest,
|
||||||
|
DeviceComplete,
|
||||||
|
DevicesWithoutConnectionsResponse,
|
||||||
|
DevicesWithoutTowersResponse
|
||||||
|
} from '../types/device'
|
||||||
|
|
||||||
|
export const devicesService = {
|
||||||
|
// Get all devices (no query params - get everything)
|
||||||
|
getDevices: async (): Promise<ApiResponse<DeviceComplete[]>> => {
|
||||||
|
return apiClient.get<DeviceComplete[]>('/device-details')
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get single device by ID
|
||||||
|
getDevice: async (id: string): Promise<ApiResponse<DeviceComplete>> => {
|
||||||
|
return apiClient.get<DeviceComplete>(`/device-details/${id}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Create new device
|
||||||
|
createDevice: async (data: FormData): Promise<ApiResponse<DeviceResponse>> => {
|
||||||
|
return apiClient.postFormData<DeviceResponse>('/devices', data)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Update device
|
||||||
|
updateDevice: async (id: string, data: FormData): Promise<ApiResponse<DeviceResponse>> => {
|
||||||
|
return apiClient.putFormData<DeviceResponse>(`/device-details/${id}`, data)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Delete device
|
||||||
|
deleteDevice: async (id: string): Promise<ApiResponse<null>> => {
|
||||||
|
return apiClient.delete<null>(`/devices/${id}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Delete device image - NEW
|
||||||
|
deleteDeviceImage: async (deviceId: string, imageName: string): Promise<ApiResponse<null>> => {
|
||||||
|
return apiClient.delete<null>(`/device-details/${deviceId}/images/${imageName}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Bulk delete devices
|
||||||
|
bulkDeleteDevices: async (ids: string[]): Promise<ApiResponse<null>> => {
|
||||||
|
return apiClient.post<null>('/devices/bulk-delete', { ids })
|
||||||
|
},
|
||||||
|
|
||||||
|
// Bulk create devices
|
||||||
|
bulkCreateDevices: async (devices: any[]): Promise<ApiResponse<{ success_count: number; failure_count: number; errors?: any[] }>> => {
|
||||||
|
return apiClient.post<{ success_count: number; failure_count: number; errors?: any[] }>('/devices/bulk-create', { devices })
|
||||||
|
},
|
||||||
|
|
||||||
|
// Assign customers to device ports - new endpoint
|
||||||
|
assignCustomersToPorts: async (data: DevicePortsUpdateRequest): Promise<ApiResponse<DeviceComplete>> => {
|
||||||
|
const payload = data.ports.map(port => ({
|
||||||
|
new_customer_name: port.customer_name,
|
||||||
|
port_number: port.port_number,
|
||||||
|
bandwidth: port.bandwidth,
|
||||||
|
is_occupied: port.is_occupied,
|
||||||
|
status: port.status,
|
||||||
|
}))
|
||||||
|
|
||||||
|
return apiClient.put<DeviceComplete>(`/device-details/${data.device_id}/bulk-update-customers-by-port`, { updates: payload })
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get device with port assignments - uses device-details endpoint
|
||||||
|
getDeviceWithPorts: async (deviceId: string): Promise<ApiResponse<DeviceComplete>> => {
|
||||||
|
return apiClient.get<DeviceComplete>(`/device-details/${deviceId}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get devices without connections (not used by fishbone or backbone)
|
||||||
|
getDevicesWithoutConnections: async (deviceTypes: string[]): Promise<ApiResponse<DevicesWithoutConnectionsResponse>> => {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
params.append('device_types', deviceTypes.join(','))
|
||||||
|
|
||||||
|
return apiClient.get<DevicesWithoutConnectionsResponse>(`/device-details/without-connections?${params.toString()}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Get devices without towers
|
||||||
|
getDevicesWithoutTowers: async (deviceTypes: string[]): Promise<ApiResponse<DevicesWithoutTowersResponse>> => {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
params.append('device_types', deviceTypes.join(','))
|
||||||
|
|
||||||
|
return apiClient.get<DevicesWithoutTowersResponse>(`/device-details/without-towers?${params.toString()}`)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
import { Backbone } from '@/features/backbones/types/backbone'
|
||||||
|
import { Fishbone } from '@/features/fishbones/types/fishbone'
|
||||||
|
import { Olt } from '@/features/olts/types/olt'
|
||||||
|
import { Tower } from '@/features/towers/types/tower'
|
||||||
|
|
||||||
|
export interface Device {
|
||||||
|
id: string
|
||||||
|
device_code: string
|
||||||
|
device_type: string
|
||||||
|
longitude: number
|
||||||
|
latitude: number
|
||||||
|
address: string
|
||||||
|
port_amount: number
|
||||||
|
total_used_port: number
|
||||||
|
province?: string
|
||||||
|
city?: string
|
||||||
|
district?: string
|
||||||
|
status: 'active' | 'inactive' | 'maintenance'
|
||||||
|
created_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PortAssignment {
|
||||||
|
port_number: number
|
||||||
|
customer_name: string | null
|
||||||
|
is_occupied: boolean
|
||||||
|
status: "dyingGasp" | "los" | "on" | "off"
|
||||||
|
bandwidth: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeviceComplete {
|
||||||
|
id: string
|
||||||
|
olt: Olt | null
|
||||||
|
device_code: string
|
||||||
|
device_type: string
|
||||||
|
address: string
|
||||||
|
longitude: number
|
||||||
|
latitude: number
|
||||||
|
status: 'active' | 'inactive' | 'maintenance'
|
||||||
|
port_amount: number
|
||||||
|
port_used: number
|
||||||
|
port_available: number
|
||||||
|
customer_names: string[] | null
|
||||||
|
port_assignments: PortAssignment[]
|
||||||
|
province: string | null
|
||||||
|
city: string | null
|
||||||
|
district: string | null
|
||||||
|
image_urls: string[]
|
||||||
|
backbones: (Pick<Backbone, 'id' | 'backbone_code' | 'core_amount'> & {
|
||||||
|
is_start_device: boolean
|
||||||
|
connected_to: string
|
||||||
|
})[]
|
||||||
|
fishbones: (Pick<Fishbone, 'id' | 'fishbone_code' | 'core_amount' | 'backbone_code'> & {
|
||||||
|
is_start_device: boolean
|
||||||
|
connected_to: string
|
||||||
|
})[]
|
||||||
|
towers: (Omit<
|
||||||
|
Tower,
|
||||||
|
'latitude' | 'longitude' | 'device_code' | 'address' | 'created_at'
|
||||||
|
> & { distance_km: number })[]
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeviceCreateRequest {
|
||||||
|
device_code: string
|
||||||
|
device_type: string
|
||||||
|
longitude: number
|
||||||
|
latitude: number
|
||||||
|
port_amount?: number | null
|
||||||
|
status: 'active' | 'inactive' | 'maintenance'
|
||||||
|
province?: string
|
||||||
|
city?: string
|
||||||
|
district?: string
|
||||||
|
image_urls?: File[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeviceUpdateRequest extends Partial<DeviceCreateRequest> {
|
||||||
|
id: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DevicesListResponse {
|
||||||
|
devices: Device[]
|
||||||
|
// Remove pagination fields since we get all data
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeviceResponse {
|
||||||
|
device: Device
|
||||||
|
}
|
||||||
|
|
||||||
|
// Frontend filtering state
|
||||||
|
export interface DeviceFilters {
|
||||||
|
search: string
|
||||||
|
status: string
|
||||||
|
device_type: string
|
||||||
|
port_status?: string // Add this new field
|
||||||
|
province?: string
|
||||||
|
city?: string
|
||||||
|
district?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeviceSorting {
|
||||||
|
field: keyof Device
|
||||||
|
direction: 'asc' | 'desc'
|
||||||
|
}
|
||||||
|
|
||||||
|
export type PortAssignmentStatus = 'no_customer' | 'in_use'
|
||||||
|
|
||||||
|
// Add connection status from API
|
||||||
|
export type PortConnectionStatus = 'dyingGasp' | 'los' | 'on' | 'off'
|
||||||
|
|
||||||
|
export interface Port {
|
||||||
|
port_number: number
|
||||||
|
assignment_status: PortAssignmentStatus
|
||||||
|
connection_status?: PortConnectionStatus
|
||||||
|
customer_name?: string
|
||||||
|
is_occupied: boolean
|
||||||
|
bandwidth?: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DevicePort extends Device {
|
||||||
|
ports?: Port[]
|
||||||
|
}
|
||||||
|
export interface DevicePortAssignmentRequest {
|
||||||
|
customer_name: string | null
|
||||||
|
port_number: number
|
||||||
|
is_occupied: boolean
|
||||||
|
status: "dyingGasp" | "los" | "on" | "off"
|
||||||
|
bandwidth: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DevicePortsUpdateRequest {
|
||||||
|
device_id: string
|
||||||
|
ports: DevicePortAssignmentRequest[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeviceBreakdown {
|
||||||
|
closure: {
|
||||||
|
count: number
|
||||||
|
devices: DeviceComplete[]
|
||||||
|
}
|
||||||
|
otb: {
|
||||||
|
count: number
|
||||||
|
devices: DeviceComplete[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DevicesWithoutConnectionsFilter {
|
||||||
|
criteria: string
|
||||||
|
device_types: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DevicesWithoutConnectionsResponse {
|
||||||
|
breakdown: DeviceBreakdown
|
||||||
|
devices: DeviceComplete[]
|
||||||
|
filter: DevicesWithoutConnectionsFilter
|
||||||
|
total: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DevicesWithoutTowersFilter {
|
||||||
|
criteria: string
|
||||||
|
device_types: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DevicesWithoutTowersResponse {
|
||||||
|
devices: DeviceComplete[]
|
||||||
|
filter: DevicesWithoutTowersFilter
|
||||||
|
total: number
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue