@seamapi/react 1.5.1 → 1.7.0

package/src/lib/seam/access-codes/use-access-codes.ts

@@ -6,9 +6,9 @@ import type {
   SeamError,
 } from 'seamapi'
 
+import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
-import { byCreatedAt } from 'lib/sort-by.js'
 
 export type UseAccessCodesParams = AccessCodesListRequest | string
 export type UseAccessCodesData = AccessCode[]
@@ -29,7 +29,7 @@ export function useAccessCodes(
     queryFn: async () => {
       if (client == null) return []
       const accessCodes = await client?.accessCodes.list(normalizedParams)
-      return accessCodes.sort(byCreatedAt)
+      return accessCodes.sort(compareByCreatedAtDesc)
     },
   })
 

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.element.ts

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { AccessCodeDetailsProps } from './AccessCodeDetails.js'
+
+export const name = 'seam-access-code-details'
+
+export const props: ElementProps<AccessCodeDetailsProps> = {
+  accessCodeId: 'string',
+  onBack: 'function',
+}
+
+export { AccessCodeDetails as Component } from './AccessCodeDetails.js'

package/src/lib/{ui → seam/components}/AccessCodeDetails/AccessCodeDetails.tsx

@@ -2,12 +2,11 @@ import { DateTime } from 'luxon'
 import { useState } from 'react'
 import type { AccessCode } from 'seamapi'
 
-import { useAccessCode } from 'lib/index.js'
-
-import { AccessCodeDevice } from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
-import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
+import { useAccessCode } from 'lib/seam/access-codes/use-access-code.js'
+import { AccessCodeDevice } from 'lib/seam/components/AccessCodeDetails/AccessCodeDevice.js'
+import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { useIsDateInPast } from 'lib/use-is-date-in-past.js'
+import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
 export interface AccessCodeDetailsProps {
   accessCodeId: string

package/src/lib/{ui → seam/components}/AccessCodeDetails/AccessCodeDevice.tsx

@@ -1,11 +1,11 @@
 import type { LockDevice } from 'seamapi'
 
+import { getDeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
 import { Button } from 'lib/ui/Button.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
-import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { TextButton } from 'lib/ui/TextButton.js'
 
 export function AccessCodeDevice({
@@ -27,7 +27,7 @@ export function AccessCodeDevice({
 function LockDeviceDetails(props: {
   device: LockDevice
   onSelectDevice: (deviceId: string) => void
-}) {
+}): JSX.Element {
   const { device, onSelectDevice } = props
   const toggleLock = useToggleLock(device)
   const model = getDeviceModel(device)

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { AccessCodeTableProps } from './AccessCodeTable.js'
+
+export const name = 'seam-access-code-table'
+
+export const props: ElementProps<AccessCodeTableProps> = {
+  deviceId: 'string',
+  onBack: 'function',
+}
+
+export { AccessCodeTable as Component } from './AccessCodeTable.js'

package/src/lib/{ui → seam/components}/AccessCodeTable/AccessCodeTable.tsx

@@ -1,15 +1,16 @@
 import { useState } from 'react'
 import type { AccessCode } from 'seamapi'
 
-import { copyToClipboard } from 'lib/copy-to-clipboard.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { CopyIcon } from 'lib/icons/Copy.js'
+import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import {
   useAccessCodes,
   type UseAccessCodesData,
 } from 'lib/seam/access-codes/use-access-codes.js'
-import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
-import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
+import { AccessCodeDetails } from 'lib/seam/components/AccessCodeDetails/AccessCodeDetails.js'
+import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
+import { copyToClipboard } from 'lib/ui/clipboard.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
 import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
@@ -89,7 +90,7 @@ export function AccessCodeTable(
 function Body(props: {
   accessCodes: Array<UseAccessCodesData[number]>
   selectAccessCode: (accessCode: AccessCode) => void
-}) {
+}): JSX.Element {
   const { accessCodes, selectAccessCode } = props
 
   if (accessCodes.length === 0) {
@@ -114,8 +115,15 @@ function Body(props: {
 function AccessCodeRow(props: {
   accessCode: UseAccessCodesData[number]
   onClick: () => void
-}) {
+}): JSX.Element {
   const { onClick, accessCode } = props
+
+  const errorCount = accessCode.errors?.length ?? 0
+  const isPlural = errorCount === 0 || errorCount > 1
+  const issueIconTitle = isPlural
+    ? `${errorCount} ${t.codeIssues}`
+    : `${errorCount} ${t.codeIssue}`
+
   return (
     <TableRow key={accessCode.access_code_id} onClick={onClick}>
       <TableCell className='seam-icon-cell'>
@@ -128,6 +136,11 @@ function AccessCodeRow(props: {
         <CodeDetails accessCode={accessCode} />
       </TableCell>
       <TableCell className='seam-action-cell'>
+        {errorCount > 0 && (
+          <div className='seam-code-issue-icon-wrap' title={issueIconTitle}>
+            <ExclamationCircleOutlineIcon />
+          </div>
+        )}
         <MoreActionsMenu
           menuProps={{
             backgroundProps: {
@@ -157,4 +170,6 @@ const t = {
   accessCodes: 'Access Codes',
   copyCode: 'Copy code',
   noAccessCodesMessage: 'Sorry, no access codes were found',
+  codeIssue: 'code issue',
+  codeIssues: 'code issues',
 }

package/src/lib/{ui → seam/components}/AccessCodeTable/CodeDetails.tsx

@@ -1,10 +1,9 @@
 import { DateTime } from 'luxon'
 import type { AccessCode } from 'seamapi'
 
-import { useDevice } from 'lib/index.js'
-
+import { useDevice } from 'lib/seam/devices/use-device.js'
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
-import { useIsDateInPast } from 'lib/use-is-date-in-past.js'
+import { useIsDateInPast } from 'lib/ui/use-is-date-in-past.js'
 
 export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
   const { accessCode } = props

package/src/lib/seam/components/DeviceDetails/DeviceDetails.element.ts

@@ -0,0 +1,12 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { DeviceDetailsProps } from './DeviceDetails.js'
+
+export const name = 'seam-device-details'
+
+export const props: ElementProps<DeviceDetailsProps> = {
+  deviceId: 'string',
+  onBack: 'function',
+}
+
+export { DeviceDetails as Component } from './DeviceDetails.js'

package/src/lib/{ui → seam/components}/DeviceDetails/DeviceDetails.tsx

@@ -1,20 +1,19 @@
 import type { LockDevice } from 'seamapi'
 
-import { useDevice } from 'lib/index.js'
-
 import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
 import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeTable } from 'lib/seam/components/AccessCodeTable/AccessCodeTable.js'
+import { DeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
+import { useDevice } from 'lib/seam/devices/use-device.js'
 import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
-import { AccessCodeTable } from 'lib/ui/AccessCodeTable/AccessCodeTable.js'
 import { Alerts } from 'lib/ui/Alert/Alerts.js'
 import { Button } from 'lib/ui/Button.js'
 import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
-import { DeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { useToggle } from 'lib/use-toggle.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
 
 export interface DeviceDetailsProps {
   deviceId: string
@@ -39,7 +38,10 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element | null {
   return <LockDeviceDetails device={device} onBack={onBack} />
 }
 
-function LockDeviceDetails(props: { device: LockDevice; onBack?: () => void }) {
+function LockDeviceDetails(props: {
+  device: LockDevice
+  onBack?: () => void
+}): JSX.Element | null {
   const { device, onBack } = props
 
   const [accessCodesOpen, toggleAccessCodesOpen] = useToggle()

package/src/lib/{ui → seam/components}/DeviceTable/DeviceHealthBar.tsx

@@ -16,7 +16,7 @@ export function DeviceHealthBar({
   devices,
   filter,
   onFilterSelect,
-}: DeviceHealthBarProps) {
+}: DeviceHealthBarProps): JSX.Element {
   const erroredDevices = devices.filter((device) => device.errors.length > 0)
   const issueCount = erroredDevices.length
 

package/src/lib/{ui → seam/components}/DeviceTable/DeviceRow.tsx

@@ -1,3 +1,4 @@
+import { getDeviceModel } from 'lib/seam/components/DeviceDetails/DeviceModel.js'
 import { isLockDevice } from 'lib/seam/devices/types.js'
 import type {
   UseDevicesData,
@@ -7,7 +8,6 @@ import { BatteryStatus } from 'lib/ui/device/BatteryStatus.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { LockStatus } from 'lib/ui/device/LockStatus.js'
 import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js'
-import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js'
 import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableRow } from 'lib/ui/Table/TableRow.js'
 import { Title } from 'lib/ui/typography/Title.js'

package/src/lib/seam/components/DeviceTable/DeviceTable.element.ts

@@ -0,0 +1,11 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { DeviceTableProps } from './DeviceTable.js'
+
+export const name = 'seam-device-table'
+
+export const props: ElementProps<DeviceTableProps> = {
+  onBack: 'function',
+}
+
+export { DeviceTable as Component } from './DeviceTable.js'

package/src/lib/{ui → seam/components}/DeviceTable/DeviceTable.tsx

@@ -1,16 +1,16 @@
 import { useState } from 'react'
 
+import { DeviceDetails } from 'lib/seam/components/DeviceDetails/DeviceDetails.js'
+import {
+  type DeviceFilter,
+  DeviceHealthBar,
+} from 'lib/seam/components/DeviceTable/DeviceHealthBar.js'
+import { DeviceRow } from 'lib/seam/components/DeviceTable/DeviceRow.js'
 import {
   useDevices,
   type UseDevicesData,
   type UseDevicesParams,
 } from 'lib/seam/devices/use-devices.js'
-import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
-import {
-  type DeviceFilter,
-  DeviceHealthBar,
-} from 'lib/ui/DeviceTable/DeviceHealthBar.js'
-import { DeviceRow } from 'lib/ui/DeviceTable/DeviceRow.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
@@ -90,7 +90,7 @@ export function DeviceTable({
 function Body(props: {
   devices: Array<UseDevicesData[number]>
   selectDevice: (id: string) => void
-}) {
+}): JSX.Element {
   const { devices, selectDevice } = props
   const [filter, setFilter] = useState<DeviceFilter | null>(null)
 

package/src/lib/{ui → seam/components}/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -2,6 +2,24 @@ import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
 
+export type FilterCategoryMenuProps =
+  | FilterCategoryMenuPropsWithAllOption
+  | FilterCategoryMenuPropsWithoutAllOption
+
+interface FilterCategoryMenuPropsWithAllOption
+  extends FilterCategoryMenuBaseProps {
+  hideAllOption?: false
+  allLabel: string
+  onAllOptionSelect: () => void
+}
+
+interface FilterCategoryMenuPropsWithoutAllOption
+  extends FilterCategoryMenuBaseProps {
+  hideAllOption: true
+  allLabel: never
+  onAllOptionSelect?: never
+}
+
 interface FilterCategoryMenuBaseProps {
   label: string
   options: string[]
@@ -9,24 +27,15 @@ interface FilterCategoryMenuBaseProps {
   buttonLabel?: string
 }
 
-export type FilterCategoryMenuProps =
-  | (FilterCategoryMenuBaseProps & {
-      hideAllOption?: false
-      onAllOptionSelect: () => void
-    })
-  | (FilterCategoryMenuBaseProps & {
-      hideAllOption: true
-      onAllOptionSelect?: never
-    })
-
 export function FilterCategoryMenu({
-  label = 'Filter',
+  label = t.filter,
+  allLabel,
   options,
   hideAllOption = false,
   onSelect,
   onAllOptionSelect,
   buttonLabel,
-}: FilterCategoryMenuProps) {
+}: FilterCategoryMenuProps): JSX.Element {
   const usableOptions = hideAllOption ? options : ['All', ...options]
 
   return (
@@ -44,7 +53,7 @@ export function FilterCategoryMenu({
           <MenuItem
             key={`${index}:${option}`}
             onClick={() => {
-              if (option === 'All') {
+              if (option === allLabel) {
                 onAllOptionSelect?.()
               } else {
                 onSelect(option)
@@ -58,3 +67,7 @@ export function FilterCategoryMenu({
     </div>
   )
 }
+
+const t = {
+  filter: 'Filter',
+}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -0,0 +1,120 @@
+import { SupportedDeviceHeader } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.js'
+import { SupportedDeviceRow } from 'lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.js'
+import {
+  type DeviceModelFilters,
+  useFilteredDeviceModels,
+} from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
+import { Button } from 'lib/ui/Button.js'
+
+interface SupportedDeviceContentProps {
+  filterValue: string
+  resetFilterValue: () => void
+  filters: DeviceModelFilters
+}
+
+export function SupportedDeviceContent({
+  resetFilterValue,
+  filterValue,
+  filters,
+}: SupportedDeviceContentProps): JSX.Element | null {
+  const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
+    filterValue,
+    filters
+  )
+
+  if (isLoading) {
+    return (
+      <div className='seam-supported-device-table-content-state-block'>
+        <p>{t.loading}</p>
+      </div>
+    )
+  }
+
+  if (isError) {
+    return (
+      <div className='seam-supported-device-table-content-state-block'>
+        <p>{t.error}</p>
+        <Button
+          variant='solid'
+          size='small'
+          onClick={() => {
+            void refetch()
+          }}
+        >
+          {t.retry}
+        </Button>
+      </div>
+    )
+  }
+
+  if (deviceModels == null) {
+    return null
+  }
+
+  return (
+    <table className='seam-supported-device-table-content'>
+      <SupportedDeviceHeader />
+      <tbody>
+        {deviceModels.map((deviceModel, index) => (
+          <SupportedDeviceRow
+            key={[
+              deviceModel.main_category,
+              deviceModel.brand,
+              deviceModel.model_name,
+              deviceModel.manufacturer_model_id,
+              index,
+            ].join(':')}
+            deviceModel={deviceModel}
+          />
+        ))}
+        {deviceModels.length === 0 && (
+          <EmptyResult
+            filterValue={filterValue}
+            resetFilterValue={resetFilterValue}
+          />
+        )}
+      </tbody>
+    </table>
+  )
+}
+
+function EmptyResult({
+  filterValue,
+  resetFilterValue,
+}: Pick<
+  SupportedDeviceContentProps,
+  'filterValue' | 'resetFilterValue'
+>): JSX.Element {
+  const noMatchingRows = (
+    <>
+      <p>{t.noMatch}</p>
+      <Button
+        variant='outline'
+        size='small'
+        onClick={resetFilterValue}
+        className='seam-supported-device-table-content-message-clear-search'
+      >
+        {t.clear}
+      </Button>
+    </>
+  )
+
+  return (
+    <tr className='seam-supported-device-table-content-message-row'>
+      <td colSpan={6}>
+        <div className='seam-supported-device-table-content-message'>
+          {filterValue.length === 0 ? <p>{t.noneFound}</p> : noMatchingRows}
+        </div>
+      </td>
+    </tr>
+  )
+}
+
+const t = {
+  loading: 'Loading device models...',
+  retry: 'Retry',
+  error: 'There was an error fetching device models.',
+  noneFound: 'No device models found.',
+  noMatch: 'No device models matched your search.',
+  clear: 'Clear search terms',
+}

package/src/lib/{ui → seam/components}/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -1,58 +1,45 @@
 import type { Dispatch, SetStateAction } from 'react'
+import type { DeviceModel } from 'seamapi'
 
-import { capitalize } from 'lib/capitalize.js'
+import { FilterCategoryMenu } from 'lib/seam/components/SupportedDeviceTable/FilterCategoryMenu.js'
+import type { DeviceModelFilters } from 'lib/seam/components/SupportedDeviceTable/use-filtered-device-models.js'
+import { useDeviceModels } from 'lib/seam/device-models/use-device-models.js'
+import { capitalize } from 'lib/strings.js'
 import { Button } from 'lib/ui/Button.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
-import { FilterCategoryMenu } from 'lib/ui/SupportedDeviceTable/FilterCategoryMenu.js'
-import type { DeviceModel, Filters } from 'lib/ui/SupportedDeviceTable/types.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 
-interface SupportedDeviceFilterAreaProps {
-  deviceModels: DeviceModel[]
+export interface SupportedDeviceFilterAreaProps {
   filterValue: string
   setFilterValue: (filter: string) => void
-  filters: Filters
-  setFilters: Dispatch<SetStateAction<Filters>>
+  filters: DeviceModelFilters
+  setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
 }
 
 export function SupportedDeviceFilterArea({
-  deviceModels,
   filterValue,
   setFilterValue,
   filters,
   setFilters,
-}: SupportedDeviceFilterAreaProps) {
-  const appliedFilters = Object.keys(filters).filter((key) => {
-    const filterProperty = filters[key as keyof Filters]
-    return (
-      filterProperty !== undefined &&
-      filterProperty !== null &&
-      filterProperty !== false
-    )
-  })
-  const appliedFiltersCount = appliedFilters.length
+}: SupportedDeviceFilterAreaProps): JSX.Element {
+  const appliedFiltersCount = Object.values(filters).filter(
+    (v) => v != null && v !== false
+  ).length
 
-  const getAvailablePropertiesFromDeviceModels = (
-    property: keyof DeviceModel
-  ) => {
-    const properties = new Set<string>()
-    deviceModels.forEach((deviceModel) => {
-      properties.add(capitalize(deviceModel[property]))
-    })
-    return Array.from(properties)
-  }
+  const filterProperty = 'brand'
+  const availableProperties = useAvailableProperties(filterProperty)
 
-  const resetFilter = (filterType: keyof Filters) => {
+  const resetFilter = (filterType: keyof DeviceModelFilters): void => {
     setFilters((filters) => ({
       ...filters,
       [filterType]: null,
     }))
   }
 
-  const isPlural = appliedFiltersCount > 1
-  const filterButtonLabel = isPlural
-    ? `Filters (${appliedFiltersCount})`
-    : 'Filter'
+  const filterButtonLabel =
+    appliedFiltersCount > 0 ? `${t.filters} (${appliedFiltersCount})` : t.filter
+
+  const allLabel = t.all
 
   return (
     <div className='seam-supported-device-table-filter-area'>
@@ -77,27 +64,27 @@ export function SupportedDeviceFilterArea({
           >
             <div className='seam-filter-menu-row'>
               <FilterCategoryMenu
-                label='Brand'
-                options={getAvailablePropertiesFromDeviceModels('brand')}
+                label={t.brand}
+                allLabel={allLabel}
+                options={availableProperties}
                 onSelect={(brand: string) => {
                   setFilters((filters) => ({
                     ...filters,
                     brand,
                   }))
                 }}
-                buttonLabel={filters.brand ?? 'All'}
+                buttonLabel={filters.brand ?? allLabel}
                 onAllOptionSelect={() => {
-                  resetFilter('brand')
+                  resetFilter(filterProperty)
                 }}
               />
             </div>
-
             <div className='seam-filter-menu-row'>
               <label
                 htmlFor='supportedOnly'
                 className='seam-filter-checkbox-label'
               >
-                <p>Supported</p>
+                <p>{t.supported}</p>
                 <input
                   id='supportedOnly'
                   name='supportedOnly'
@@ -115,7 +102,6 @@ export function SupportedDeviceFilterArea({
             </div>
           </div>
         </Menu>
-
         <div className='seam-supported-device-table-filter-area-search-bar-wrap'>
           <SearchTextField
             value={filterValue}
@@ -129,3 +115,21 @@ export function SupportedDeviceFilterArea({
     </div>
   )
 }
+
+const useAvailableProperties = (property: keyof DeviceModel): string[] => {
+  const { deviceModels } = useDeviceModels()
+  if (deviceModels == null) return []
+  const properties = new Set<string>()
+  for (const deviceModel of deviceModels) {
+    properties.add(capitalize(deviceModel[property]))
+  }
+  return Array.from(properties)
+}
+
+const t = {
+  all: 'All',
+  brand: 'Brand',
+  supported: 'Supported',
+  filter: 'Filter',
+  filters: 'Filters',
+}

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceHeader.tsx

@@ -0,0 +1,22 @@
+export function SupportedDeviceHeader(): JSX.Element {
+  return (
+    <thead>
+      <tr>
+        <th />
+        <th>{t.category}</th>
+        <th>{t.modelName}</th>
+        <th>{t.manufacturerModelId}</th>
+        <th>{t.connectionType}</th>
+        <th>{t.status}</th>
+      </tr>
+    </thead>
+  )
+}
+
+const t = {
+  category: 'Category',
+  modelName: 'Model Name',
+  manufacturerModelId: 'Manufacturer Model ID',
+  connectionType: 'Connection Type',
+  status: 'Status',
+}