diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index 9f536c0..c60266d 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -2,6 +2,7 @@ import Sidebar from "@/components/dashboard/sidebar"; +import OperationsDashboard from "@/components/dashboard/dashboard"; export default function DashboardPage() { return ( @@ -10,8 +11,8 @@ export default function DashboardPage() {
-
- Main Content +
+
diff --git a/components/dashboard/activityFeed.tsx b/components/dashboard/activityFeed.tsx new file mode 100644 index 0000000..acf44e4 --- /dev/null +++ b/components/dashboard/activityFeed.tsx @@ -0,0 +1,28 @@ +import { ActivityFeedProps } from "@/constants/types" + + + +export default function ActivityFeed({ activities }: ActivityFeedProps) { + return ( +
+

Recent activity

+
+
+ {activities.map((activity, index) => { + const parts = activity.text.split(activity.boldText); + + return ( +
+ {activity.time} +

+ {parts[0]} + {activity.boldText} + {parts[1]} +

+
+ ); + })} +
+
+ ); +} \ No newline at end of file diff --git a/components/dashboard/barchart.tsx b/components/dashboard/barchart.tsx new file mode 100644 index 0000000..e5b2083 --- /dev/null +++ b/components/dashboard/barchart.tsx @@ -0,0 +1,34 @@ +import {BarChartProps} from "@/constants/types"; + + + +export default function BarChart({ data }: BarChartProps) { + return ( +
+
+

TFM requests · monthly

+ 2026 · auto-refresh 60s +
+
+ +
+ {/* Bars */} +
+ {data.map((item, idx) => ( +
+
+
+ ))} +
+ + {/* X-Axis */} +
+ {data.map((item, idx) => ( + {item.month} + ))} +
+
+
+ ); +} \ No newline at end of file diff --git a/components/dashboard/cardHeader.tsx b/components/dashboard/cardHeader.tsx new file mode 100644 index 0000000..be6e094 --- /dev/null +++ b/components/dashboard/cardHeader.tsx @@ -0,0 +1,14 @@ + + +export function CardHeader({ title, subtitle }: { title: string; subtitle?: string }) { + return ( +
+

{title}

+ {subtitle && ( + + {subtitle} + + )} +
+ ); +} \ No newline at end of file diff --git a/components/dashboard/cardWrapper.tsx b/components/dashboard/cardWrapper.tsx new file mode 100644 index 0000000..897db28 --- /dev/null +++ b/components/dashboard/cardWrapper.tsx @@ -0,0 +1,8 @@ +export function Card({ children, className = "" }: { children: React.ReactNode; className?: string }) { + return ( +
+ {children} +
+ ); +} \ No newline at end of file diff --git a/components/dashboard/dashboard.tsx b/components/dashboard/dashboard.tsx new file mode 100644 index 0000000..b45f361 --- /dev/null +++ b/components/dashboard/dashboard.tsx @@ -0,0 +1,189 @@ + +import { Check } from 'lucide-react'; +import Navbar from "@/components/dashboard/navbar"; +import BarChart from "@/components/dashboard/barchart"; +import StatCard from "@/components/dashboard/statCard"; +import ActivityFeed from "@/components/dashboard/activityFeed"; +import {activities, chartData} from "@/constants/constant" +import { Card } from '@/components/dashboard/cardWrapper'; +import {CardHeader} from '@/components/dashboard/cardHeader'; +import {ProgressBarRow }from '@/components/dashboard/progressBarRow'; +import {StatusProgressRow} from '@/components/dashboard/statusProgressRow'; + +export default function Dashboard() { + + + return ( +
+ + +
+ {/* Title Section */} +
+
+
+ Apple One — HQ Tower + · + Tenant + · + Apple One +
+

Operations dashboard

+

+ Live snapshot scoped to Apple One. The layout below is the dashboard published for this tenant in Administration. +

+
+ +
+ + Published layout +
+
+ + {/* 4 Cards Grid */} +
+ + + + +
+ + {/* Lower Row Grid */} +
+
+ +
+
+ +
+
+ + +
+ + {/* Schedule Performance MMR */} +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ScheduleTotalDoneOn TimeDelayed
PPM2419172
AMC8660
+
+ +
+ + {/* Energy Today */} +
+ + +
+
+ Electricity + 1,284 kwh +
+
+ Water + 312 kL +
+
+ Diesel + 48 L +
+ +
+ Vs Avg +
+ + + Completed + + -6% +
+
+
+ +
+ +
+ + {/* ROW 2: Sub-metrics and Tracking widgets */} +
+ + {/* Top 5 Requester */} + + +
+ + + + + +
+ + + {/* Asset Register */} + + +
+ 8 + assets tracked +
+
+
+ On Plan + 3 +
+
+ Attention + 5 +
+
+ Groups + 4 +
+
+ + + {/* PM Plan vs Started */} + + +
+ + + +
+ + +
+
+
+ ); +} \ No newline at end of file diff --git a/components/dashboard/navbar.tsx b/components/dashboard/navbar.tsx new file mode 100644 index 0000000..f85fc41 --- /dev/null +++ b/components/dashboard/navbar.tsx @@ -0,0 +1,80 @@ +import { Search, HelpCircle, Globe, Sun, Bell, ChevronDown, MapPin } from 'lucide-react'; + +export default function Navbar() { + return ( +
+ + {/* Left Group */} +
+ {/* Company Selector */} +
+ + Apple One + +
+ + {/* Location Selector */} +
+ + + Apple One — HQ Tower + + +
+ + {/* Search Bar */} +
+ + +
+
+ + {/* Right Utilities */} +
+ {/* Tour */} + + + {/* Language */} +
+ + English + +
+ + {/* Live Indicator */} +
+ + LIVE +
+ + {/* Theme Toggle */} + + + {/* Notifications */} +
+ + + 8 + +
+ + {/* Profile Avatar */} +
+ DH +
+
+
+ ); +} \ No newline at end of file diff --git a/components/dashboard/progressBarRow.tsx b/components/dashboard/progressBarRow.tsx new file mode 100644 index 0000000..d01bc05 --- /dev/null +++ b/components/dashboard/progressBarRow.tsx @@ -0,0 +1,18 @@ + +import { ProgressBarProps } from "@/constants/types"; +export function ProgressBarRow({ label, value, maxValue }: ProgressBarProps) { + const percentage = (value / maxValue) * 100; + + return ( +
+ {label} +
+
+
+ {value} +
+ ); +} \ No newline at end of file diff --git a/components/dashboard/sidebar.tsx b/components/dashboard/sidebar.tsx index e4886a1..d9b7760 100644 --- a/components/dashboard/sidebar.tsx +++ b/components/dashboard/sidebar.tsx @@ -1,42 +1,44 @@ import { SIDEBAR_ITEMS } from "@/constants/constant"; import SidebarItem from "./sideBarItem"; import { - - ShieldCheck, - + ShieldCheck, Activity, ChevronDown, ChevronsLeft, - - } from "lucide-react"; export default function Sidebar() { return ( -