Web AppFeatures
Units & Departments Feature
Department showcase system with teams, products, and news for organizational units.
Units & Departments Feature
The units/departments system showcases different organizational units with their teams, products, and news.
Overview
Features:
- Department directory with filtering
- Individual department pages
- Team member profiles
- Department-specific products
- News updates per department
- Social media integration
Routes
/units- Department directory/units/[id]- Individual department page with tabs
Implementation
Department Directory
// app/(public)/units/page.tsx
import { getDepartments } from 'app/actions/campus';
import { DepartmentsListClient } from '@/components/units/departments-list-client';
export default async function UnitsPage() {
const departments = await getDepartments();
return <DepartmentsListClient departments={departments} />;
}Department Page with Tabs
// app/(public)/units/[id]/page.tsx
import { getDepartmentById } from 'app/actions/campus';
import { DepartmentTabsClient } from '@/components/units/department-tabs-client';
export default async function DepartmentPage({
params
}: {
params: Promise<{ id: string }>
}) {
const { id } = await params;
const department = await getDepartmentById(id);
return (
<div>
<DepartmentHero department={department} />
<DepartmentTabsClient department={department} />
</div>
);
}Department Tabs
The department page includes tabs for:
- Overview - Department description and information
- Team - Team members with roles
- Products - Department-specific products
- News - Latest news from the department
// components/units/department-tabs-client.tsx
'use client';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@repo/ui/components/ui/tabs';
export function DepartmentTabsClient({ department }) {
return (
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="team">Team</TabsTrigger>
<TabsTrigger value="products">Products</TabsTrigger>
<TabsTrigger value="news">News</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<OverviewTab department={department} />
</TabsContent>
<TabsContent value="team">
<TeamTab members={department.team} />
</TabsContent>
<TabsContent value="products">
<ProductsTab departmentId={department.$id} />
</TabsContent>
<TabsContent value="news">
<NewsTab departmentId={department.$id} />
</TabsContent>
</Tabs>
);
}Database Schema
departments
{
"name": "string",
"slug": "string",
"description": "string",
"logoUrl": "string",
"coverImageUrl": "string",
"email": "string",
"website": "string",
"socialLinks": "object",
"campus": "enum (oslo, bergen, trondheim)"
}department_members
{
"departmentId": "string",
"userId": "string",
"role": "string",
"title": "string",
"order": "integer"
}