mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-03-28 03:29:25 +01:00
165 lines
4.6 KiB
TypeScript
165 lines
4.6 KiB
TypeScript
import {
|
|
IconBolt,
|
|
IconHelp,
|
|
IconMapRoute,
|
|
IconPlus,
|
|
IconSettings,
|
|
IconWifiOff,
|
|
} from '@tabler/icons-react'
|
|
import { Head } from '@inertiajs/react'
|
|
import AppLayout from '~/layouts/AppLayout'
|
|
import { getServiceLink } from '~/lib/navigation'
|
|
import { ServiceSlim } from '../../types/services'
|
|
import DynamicIcon, { DynamicIconName } from '~/components/DynamicIcon'
|
|
import { useUpdateAvailable } from '~/hooks/useUpdateAvailable'
|
|
import Alert from '~/components/Alert'
|
|
|
|
// Maps is a Core Capability (display_order: 4)
|
|
const MAPS_ITEM = {
|
|
label: 'Maps',
|
|
to: '/maps',
|
|
target: '',
|
|
description: 'View offline maps',
|
|
icon: <IconMapRoute size={48} />,
|
|
installed: true,
|
|
displayOrder: 4,
|
|
poweredBy: null,
|
|
}
|
|
|
|
// System items shown after all apps
|
|
const SYSTEM_ITEMS = [
|
|
{
|
|
label: 'Easy Setup',
|
|
to: '/easy-setup',
|
|
target: '',
|
|
description:
|
|
'Not sure where to start? Use the setup wizard to quickly configure your N.O.M.A.D.!',
|
|
icon: <IconBolt size={48} />,
|
|
installed: true,
|
|
displayOrder: 50,
|
|
poweredBy: null,
|
|
},
|
|
{
|
|
label: 'Install Apps',
|
|
to: '/settings/apps',
|
|
target: '',
|
|
description: 'Not seeing your favorite app? Install it here!',
|
|
icon: <IconPlus size={48} />,
|
|
installed: true,
|
|
displayOrder: 51,
|
|
poweredBy: null,
|
|
},
|
|
{
|
|
label: 'Docs',
|
|
to: '/docs/home',
|
|
target: '',
|
|
description: 'Read Project N.O.M.A.D. manuals and guides',
|
|
icon: <IconHelp size={48} />,
|
|
installed: true,
|
|
displayOrder: 52,
|
|
poweredBy: null,
|
|
},
|
|
{
|
|
label: 'Settings',
|
|
to: '/settings/system',
|
|
target: '',
|
|
description: 'Configure your N.O.M.A.D. settings',
|
|
icon: <IconSettings size={48} />,
|
|
installed: true,
|
|
displayOrder: 53,
|
|
poweredBy: null,
|
|
},
|
|
]
|
|
|
|
interface DashboardItem {
|
|
label: string
|
|
to: string
|
|
target: string
|
|
description: string
|
|
icon: React.ReactNode
|
|
installed: boolean
|
|
displayOrder: number
|
|
poweredBy: string | null
|
|
}
|
|
|
|
export default function Home(props: {
|
|
system: {
|
|
services: ServiceSlim[]
|
|
}
|
|
}) {
|
|
const items: DashboardItem[] = []
|
|
const updateInfo = useUpdateAvailable();
|
|
|
|
// Add installed services (non-dependency services only)
|
|
props.system.services
|
|
.filter((service) => service.installed && service.ui_location)
|
|
.forEach((service) => {
|
|
items.push({
|
|
label: service.friendly_name || service.service_name,
|
|
to: service.ui_location ? getServiceLink(service.ui_location) : '#',
|
|
target: '_blank',
|
|
description:
|
|
service.description ||
|
|
`Access the ${service.friendly_name || service.service_name} application`,
|
|
icon: service.icon ? (
|
|
<DynamicIcon icon={service.icon as DynamicIconName} className="!size-12" />
|
|
) : (
|
|
<IconWifiOff size={48} />
|
|
),
|
|
installed: service.installed,
|
|
displayOrder: service.display_order ?? 100,
|
|
poweredBy: service.powered_by ?? null,
|
|
})
|
|
})
|
|
|
|
// Add Maps as a Core Capability
|
|
items.push(MAPS_ITEM)
|
|
|
|
// Add system items
|
|
items.push(...SYSTEM_ITEMS)
|
|
|
|
// Sort all items by display order
|
|
items.sort((a, b) => a.displayOrder - b.displayOrder)
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Command Center" />
|
|
{
|
|
updateInfo?.updateAvailable && (
|
|
<div className='flex justify-center items-center p-4 w-full'>
|
|
<Alert
|
|
title="An update is available for Project N.O.M.A.D.!"
|
|
type="info"
|
|
variant="solid"
|
|
className="w-full"
|
|
buttonProps={{
|
|
variant: 'secondary',
|
|
children: 'Go to Settings',
|
|
icon: 'IconSettings',
|
|
onClick: () => {
|
|
window.location.href = '/settings/update'
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
|
{items.map((item) => (
|
|
<a key={item.label} href={item.to} target={item.target}>
|
|
<div
|
|
key={item.label}
|
|
className="rounded border-desert-green border-2 bg-desert-green hover:bg-transparent hover:text-black text-white transition-colors shadow-sm h-48 flex flex-col items-center justify-center cursor-pointer text-center px-4"
|
|
>
|
|
<div className="flex items-center justify-center mb-2">{item.icon}</div>
|
|
<h3 className="font-bold text-2xl">{item.label}</h3>
|
|
{item.poweredBy && <p className="text-sm opacity-80">Powered by {item.poweredBy}</p>}
|
|
<p className="xl:text-lg mt-2">{item.description}</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</AppLayout>
|
|
)
|
|
}
|