From 2c74a5ecb116fd5bdfb3b4168486e03235bde3ba Mon Sep 17 00:00:00 2001
From: temiport25 <temiport25@users.noreply.github.com>
Date: Sat, 30 May 2026 12:27:22 +0100
Subject: [PATCH] feat: add Asset/Department TypeORM entities, DashboardPage
 with Recharts, and BulkActionBar

---
 backend/src/opsce/assets/assets.module.ts     |   9 +
 .../src/opsce/assets/entities/asset.entity.ts |  77 +++++++
 .../opsce/departments/departments.module.ts   |   9 +
 .../departments/entities/department.entity.ts |  44 ++++
 backend/src/opsce/opsce.module.ts             |   9 +
 .../opsce/features/assets/BulkActionBar.tsx   | 163 ++++++++++++++
 .../features/dashboard/DashboardPage.tsx      | 204 ++++++++++++++++++
 7 files changed, 515 insertions(+)
 create mode 100644 backend/src/opsce/assets/assets.module.ts
 create mode 100644 backend/src/opsce/assets/entities/asset.entity.ts
 create mode 100644 backend/src/opsce/departments/departments.module.ts
 create mode 100644 backend/src/opsce/departments/entities/department.entity.ts
 create mode 100644 backend/src/opsce/opsce.module.ts
 create mode 100644 frontend/opsce/features/assets/BulkActionBar.tsx
 create mode 100644 frontend/opsce/features/dashboard/DashboardPage.tsx

diff --git a/backend/src/opsce/assets/assets.module.ts b/backend/src/opsce/assets/assets.module.ts
new file mode 100644
index 00000000..f1055a63
--- /dev/null
+++ b/backend/src/opsce/assets/assets.module.ts
@@ -0,0 +1,9 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Asset } from './entities/asset.entity';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Asset])],
+  exports: [TypeOrmModule],
+})
+export class AssetsModule {}
diff --git a/backend/src/opsce/assets/entities/asset.entity.ts b/backend/src/opsce/assets/entities/asset.entity.ts
new file mode 100644
index 00000000..2d546799
--- /dev/null
+++ b/backend/src/opsce/assets/entities/asset.entity.ts
@@ -0,0 +1,77 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  DeleteDateColumn,
+  Index,
+} from 'typeorm';
+
+export enum AssetStatus {
+  ACTIVE = 'active',
+  INACTIVE = 'inactive',
+  MAINTENANCE = 'maintenance',
+  RETIRED = 'retired',
+}
+
+export enum AssetCondition {
+  EXCELLENT = 'excellent',
+  GOOD = 'good',
+  FAIR = 'fair',
+  POOR = 'poor',
+}
+
+@Entity('assets')
+export class Asset {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column()
+  name: string;
+
+  @Column({ nullable: true })
+  description?: string;
+
+  @Index()
+  @Column()
+  category: string;
+
+  @Index()
+  @Column({ nullable: true })
+  serialNumber?: string;
+
+  @Index()
+  @Column({ type: 'enum', enum: AssetStatus, default: AssetStatus.ACTIVE })
+  status: AssetStatus;
+
+  @Column({ type: 'enum', enum: AssetCondition, default: AssetCondition.GOOD })
+  condition: AssetCondition;
+
+  @Column({ type: 'date', nullable: true })
+  purchaseDate?: Date;
+
+  @Column({ type: 'decimal', precision: 12, scale: 2, nullable: true })
+  purchaseValue?: number;
+
+  @Column({ type: 'decimal', precision: 12, scale: 2, nullable: true })
+  currentValue?: number;
+
+  @Column({ nullable: true })
+  assignedToUserId?: string;
+
+  @Column({ nullable: true })
+  departmentId?: string;
+
+  @Column({ nullable: true })
+  locationId?: string;
+
+  @CreateDateColumn()
+  createdAt: Date;
+
+  @UpdateDateColumn()
+  updatedAt: Date;
+
+  @DeleteDateColumn()
+  deletedAt?: Date;
+}
diff --git a/backend/src/opsce/departments/departments.module.ts b/backend/src/opsce/departments/departments.module.ts
new file mode 100644
index 00000000..3c135018
--- /dev/null
+++ b/backend/src/opsce/departments/departments.module.ts
@@ -0,0 +1,9 @@
+import { Module } from '@nestjs/common';
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { Department } from './entities/department.entity';
+
+@Module({
+  imports: [TypeOrmModule.forFeature([Department])],
+  exports: [TypeOrmModule],
+})
+export class DepartmentsModule {}
diff --git a/backend/src/opsce/departments/entities/department.entity.ts b/backend/src/opsce/departments/entities/department.entity.ts
new file mode 100644
index 00000000..30bc174e
--- /dev/null
+++ b/backend/src/opsce/departments/entities/department.entity.ts
@@ -0,0 +1,44 @@
+import {
+  Entity,
+  PrimaryGeneratedColumn,
+  Column,
+  CreateDateColumn,
+  UpdateDateColumn,
+  ManyToOne,
+  OneToMany,
+  JoinColumn,
+} from 'typeorm';
+
+@Entity('departments')
+export class Department {
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @Column({ unique: true })
+  name: string;
+
+  @Column({ nullable: true })
+  description?: string;
+
+  @Column({ nullable: true })
+  code?: string;
+
+  @Column({ default: true })
+  isActive: boolean;
+
+  @Column({ nullable: true })
+  parentId?: string;
+
+  @ManyToOne(() => Department, (d) => d.children, { nullable: true })
+  @JoinColumn({ name: 'parentId' })
+  parent?: Department;
+
+  @OneToMany(() => Department, (d) => d.parent)
+  children: Department[];
+
+  @CreateDateColumn()
+  createdAt: Date;
+
+  @UpdateDateColumn()
+  updatedAt: Date;
+}
diff --git a/backend/src/opsce/opsce.module.ts b/backend/src/opsce/opsce.module.ts
new file mode 100644
index 00000000..82aa0f00
--- /dev/null
+++ b/backend/src/opsce/opsce.module.ts
@@ -0,0 +1,9 @@
+import { Module } from '@nestjs/common';
+import { AssetsModule } from './assets/assets.module';
+import { DepartmentsModule } from './departments/departments.module';
+
+@Module({
+  imports: [AssetsModule, DepartmentsModule],
+  exports: [AssetsModule, DepartmentsModule],
+})
+export class OpsceModule {}
diff --git a/frontend/opsce/features/assets/BulkActionBar.tsx b/frontend/opsce/features/assets/BulkActionBar.tsx
new file mode 100644
index 00000000..fc3fc356
--- /dev/null
+++ b/frontend/opsce/features/assets/BulkActionBar.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import { useState } from 'react';
+import { X, Check } from 'lucide-react';
+
+type BulkAction = 'status' | 'department' | 'location' | 'delete';
+
+const ACTION_OPTIONS: { value: BulkAction; label: string }[] = [
+  { value: 'status', label: 'Change Status' },
+  { value: 'department', label: 'Reassign Department' },
+  { value: 'location', label: 'Change Location' },
+  { value: 'delete', label: 'Delete' },
+];
+
+interface BulkResult {
+  id: string;
+  success: boolean;
+  error?: string;
+}
+
+interface Props {
+  selectedIds: string[];
+  onClearSelection: () => void;
+  onActionComplete?: () => void;
+}
+
+export function BulkActionBar({ selectedIds, onClearSelection, onActionComplete }: Props) {
+  const [activeAction, setActiveAction] = useState<BulkAction | null>(null);
+  const [actionValue, setActionValue] = useState('');
+  const [results, setResults] = useState<BulkResult[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  if (!selectedIds.length) return null;
+
+  const handleApply = async () => {
+    if (!activeAction) return;
+    setLoading(true);
+    try {
+      const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:6003/api';
+      const token =
+        typeof window !== 'undefined' ? localStorage.getItem('accessToken') : '';
+      const res = await fetch(`${API}/assets/bulk`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          ids: selectedIds,
+          action: activeAction,
+          value: actionValue,
+        }),
+      });
+      const data = await res.json();
+      setResults(
+        data.results ?? selectedIds.map((id) => ({ id, success: res.ok })),
+      );
+      if (res.ok) onActionComplete?.();
+    } catch {
+      setResults(
+        selectedIds.map((id) => ({ id, success: false, error: 'Request failed' })),
+      );
+    }
+    setLoading(false);
+  };
+
+  return (
+    <>
+      {/* Sticky action bar */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40 bg-gray-900 text-white rounded-2xl shadow-xl px-5 py-3 flex items-center gap-4 min-w-[420px]">
+        <span className="text-sm font-medium">
+          {selectedIds.length} asset{selectedIds.length !== 1 ? 's' : ''} selected
+        </span>
+
+        <div className="flex items-center gap-2 flex-1">
+          <select
+            className="bg-gray-800 text-sm text-white rounded-lg px-2 py-1.5 border border-gray-700 flex-1"
+            value={activeAction ?? ''}
+            onChange={(e) => {
+              setActiveAction((e.target.value as BulkAction) || null);
+              setActionValue('');
+              setResults([]);
+            }}
+          >
+            <option value="">Choose action…</option>
+            {ACTION_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+
+          {activeAction && activeAction !== 'delete' && (
+            <input
+              className="bg-gray-800 text-sm text-white rounded-lg px-2 py-1.5 border border-gray-700 w-32"
+              placeholder="New value…"
+              value={actionValue}
+              onChange={(e) => setActionValue(e.target.value)}
+            />
+          )}
+
+          <button
+            disabled={
+              !activeAction || loading || (activeAction !== 'delete' && !actionValue)
+            }
+            onClick={handleApply}
+            className="px-3 py-1.5 text-sm bg-white text-gray-900 rounded-lg font-medium disabled:opacity-40 hover:bg-gray-100 transition-colors"
+          >
+            {loading ? 'Applying…' : 'Apply'}
+          </button>
+        </div>
+
+        <button
+          onClick={() => {
+            onClearSelection();
+            setResults([]);
+            setActiveAction(null);
+          }}
+          className="text-gray-400 hover:text-white"
+          aria-label="Clear selection"
+        >
+          <X size={18} />
+        </button>
+      </div>
+
+      {/* Results modal */}
+      {results.length > 0 && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/40"
+            onClick={() => setResults([])}
+          />
+          <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 max-h-96 overflow-y-auto">
+            <h3 className="text-base font-semibold text-gray-900 mb-4">
+              Bulk Action Results
+            </h3>
+            <div className="space-y-2">
+              {results.map((r) => (
+                <div
+                  key={r.id}
+                  className={`flex items-center gap-2 text-sm ${
+                    r.success ? 'text-green-600' : 'text-red-500'
+                  }`}
+                >
+                  {r.success ? <Check size={14} /> : <X size={14} />}
+                  <span>
+                    {r.id}: {r.success ? 'Success' : (r.error ?? 'Failed')}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <button
+              onClick={() => setResults([])}
+              className="mt-4 w-full px-4 py-2 text-sm bg-gray-900 text-white rounded-lg hover:bg-gray-700"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/frontend/opsce/features/dashboard/DashboardPage.tsx b/frontend/opsce/features/dashboard/DashboardPage.tsx
new file mode 100644
index 00000000..24598ead
--- /dev/null
+++ b/frontend/opsce/features/dashboard/DashboardPage.tsx
@@ -0,0 +1,204 @@
+'use client';
+
+import {
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+import { TrendingUp, TrendingDown, Package, CheckCircle2, Wrench, DollarSign } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+
+interface ReportsSummary {
+  total: number;
+  active: number;
+  maintenance: number;
+  totalValue: number;
+  byStatus: Record<string, number>;
+  byDepartment: Array<{ name: string; count: number }>;
+  recent: Array<{
+    id: string;
+    action: string;
+    entityName: string;
+    createdAt: string;
+  }>;
+}
+
+function fetchReports(): Promise<ReportsSummary> {
+  const API = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:6003/api';
+  const token = typeof window !== 'undefined' ? localStorage.getItem('accessToken') : '';
+  return fetch(`${API}/reports`, {
+    headers: { Authorization: `Bearer ${token}` },
+  }).then((r) => r.json());
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  Active: '#10b981',
+  Maintenance: '#f59e0b',
+  Retired: '#ef4444',
+  Inactive: '#6b7280',
+};
+
+function CardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5 animate-pulse">
+      <div className="h-4 w-24 bg-gray-200 rounded mb-3" />
+      <div className="h-8 w-16 bg-gray-200 rounded" />
+    </div>
+  );
+}
+
+function ChartSkeleton() {
+  return <div className="bg-white rounded-xl border border-gray-200 p-5 animate-pulse h-64" />;
+}
+
+interface TrendProps {
+  value: number;
+}
+
+function Trend({ value }: TrendProps) {
+  const up = value >= 0;
+  return (
+    <span
+      className={`flex items-center gap-0.5 text-xs ${up ? 'text-green-600' : 'text-red-500'}`}
+    >
+      {up ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
+      {Math.abs(value)}% vs last month
+    </span>
+  );
+}
+
+export function DashboardPage() {
+  const { data, isLoading } = useQuery<ReportsSummary>({
+    queryKey: ['reports', 'summary'],
+    queryFn: fetchReports,
+  });
+
+  const statCards = [
+    { label: 'Total Assets', value: data?.total ?? 0, icon: Package, trend: 5 },
+    { label: 'Active Assets', value: data?.active ?? 0, icon: CheckCircle2, trend: 2 },
+    { label: 'In Maintenance', value: data?.maintenance ?? 0, icon: Wrench, trend: -1 },
+    {
+      label: 'Total Asset Value',
+      value: `$${(data?.totalValue ?? 0).toLocaleString()}`,
+      icon: DollarSign,
+      trend: 8,
+    },
+  ];
+
+  const pieData = Object.entries(data?.byStatus ?? {}).map(([name, value]) => ({
+    name,
+    value,
+  }));
+
+  const barData = (data?.byDepartment ?? []).slice(0, 5);
+
+  return (
+    <div className="space-y-6">
+      {/* Summary cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {isLoading
+          ? statCards.map((_, i) => <CardSkeleton key={i} />)
+          : statCards.map((card) => (
+              <div key={card.label} className="bg-white rounded-xl border border-gray-200 p-5">
+                <div className="flex items-center justify-between mb-3">
+                  <p className="text-sm text-gray-500">{card.label}</p>
+                  <card.icon size={18} className="text-gray-400" />
+                </div>
+                <p className="text-2xl font-bold text-gray-900 mb-1">{card.value}</p>
+                <Trend value={card.trend} />
+              </div>
+            ))}
+      </div>
+
+      {/* Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* Assets by Status — Pie */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4">Assets by Status</h2>
+          {isLoading ? (
+            <ChartSkeleton />
+          ) : (
+            <ResponsiveContainer width="100%" height={220}>
+              <PieChart>
+                <Pie
+                  data={pieData}
+                  cx="50%"
+                  cy="50%"
+                  outerRadius={80}
+                  dataKey="value"
+                  label={({ name, percent }) =>
+                    `${name} ${(percent * 100).toFixed(0)}%`
+                  }
+                >
+                  {pieData.map((entry) => (
+                    <Cell
+                      key={entry.name}
+                      fill={STATUS_COLORS[entry.name] ?? '#6366f1'}
+                    />
+                  ))}
+                </Pie>
+                <Tooltip />
+              </PieChart>
+            </ResponsiveContainer>
+          )}
+        </div>
+
+        {/* Assets by Department — Bar */}
+        <div className="bg-white rounded-xl border border-gray-200 p-5">
+          <h2 className="text-sm font-semibold text-gray-900 mb-4">
+            Assets by Department (Top 5)
+          </h2>
+          {isLoading ? (
+            <ChartSkeleton />
+          ) : (
+            <ResponsiveContainer width="100%" height={220}>
+              <BarChart data={barData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="name" tick={{ fontSize: 11 }} />
+                <YAxis tick={{ fontSize: 11 }} />
+                <Tooltip />
+                <Bar dataKey="count" fill="#6366f1" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          )}
+        </div>
+      </div>
+
+      {/* Recent Activity */}
+      <div className="bg-white rounded-xl border border-gray-200">
+        <div className="px-5 py-4 border-b border-gray-100">
+          <h2 className="text-sm font-semibold text-gray-900">Recent Activity</h2>
+        </div>
+        <div className="divide-y divide-gray-100">
+          {isLoading
+            ? Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="px-5 py-3 animate-pulse">
+                  <div className="h-4 w-3/4 bg-gray-200 rounded" />
+                </div>
+              ))
+            : (data?.recent ?? []).slice(0, 5).map((entry, i) => (
+                <div key={i} className="px-5 py-3 flex items-center justify-between">
+                  <div>
+                    <p className="text-sm font-medium text-gray-900">{entry.entityName}</p>
+                    <p className="text-xs text-gray-400">{entry.action}</p>
+                  </div>
+                  <span className="text-xs text-gray-400">
+                    {new Date(entry.createdAt).toLocaleDateString()}
+                  </span>
+                </div>
+              ))}
+          {!isLoading && !(data?.recent?.length) && (
+            <p className="px-5 py-4 text-sm text-gray-400">No recent activity</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}