shaily/KAFM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Constant data is added and resuable tabs added

Browse Source
This commit is contained in:
Shaily Mishra
2026-07-21 18:59:27 +05:30
parent 0c9151b3a0
commit 06bbfe06fb
10 changed files with 133 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/dashboard/equipment.tsx
View File

@@ -13,19 +13,13 @@ import {
import Button from "@/utils/button";
import StatCard from "@/utils/dashStatCard";
import LocationTable from '../../utils/table';
import NavigationTabs from '@/utils/tabs';
import { equipmentTabs } from '@/constants/constant';
export default function EquipmentPortal() {
const [activeTab, setActiveTab] = useState<string>('Site-Wise Equipment');
const tabs: string[] = [
'Equipment Groups',
'Site-Wise Equipment',
'PPM Checklist',
'AMC Checklist',
'PPM Schedule',
'AMC Schedule',
'Maintenance Calendar'
];
return (
<div className="my-15 text-slate-100 max-w-7xl mx-auto font-sans">
@@ -49,23 +43,14 @@ export default function EquipmentPortal() {
</div>
</div>
{/* --- NAVIGATION TABS --- */}
<div className="flex items-center gap-8 border-b border-slate-800/80 mb-6 text-sm font-semibold overflow-x-auto no-scrollbar">
{tabs.map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`pb-3 relative transition-colors whitespace-nowrap ${
activeTab === tab
? 'text-teal-400 border-b-2 border-teal-400 font-bold'
: 'text-slate-400 hover:text-slate-200'
}`}
>
{tab}
</button>
))}
</div>
{/* Navigation Tabs */}
<NavigationTabs
tabs={equipmentTabs}
activeTab={activeTab}
onTabChange={setActiveTab}
className="mb-6"
/>
{/* --- STAT CARDS --- */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
{/* Total Equipment */}

5
components/dashboard/helpDesk.tsx
View File

@@ -14,12 +14,13 @@ import Button from "@/utils/button";
import StatCard from "@/utils/dashStatCard";
import LocationTable from '../../utils/table';
import NavigationTabs from '@/utils/tabs';
import { helpdeskTtabs } from '@/constants/constant';
export default function HelpDeskPortal() {
const [activeTab, setActiveTab] = useState<string>('Location');
const tabs: string[] = ['Location', 'Technical', 'Missed', 'Departments', 'HSQE'];
return (
<div className="my-15 text-slate-100 max-w-7xl mx-auto font-sans">
@@ -45,7 +46,7 @@ export default function HelpDeskPortal() {
<div>
{/* Reusable Navigation Tabs */}
<NavigationTabs
tabs={tabs}
tabs={helpdeskTtabs}
activeTab={activeTab}
onTabChange={setActiveTab}
className="mb-6"

2
components/dashboard/propertyManager.tsx
View File

@@ -14,6 +14,8 @@ import {
// Import your custom Card components
import { Card } from "@/utils/cardWrapper";
import { CardHeader } from "@/utils/cardHeader";
export default function PropertyManagerPortal() {
return (
<div className=" text-slate-100 mt-15

42
components/dashboard/request.tsx
View File

@@ -3,7 +3,8 @@ import { Plus } from 'lucide-react';
import Button from "@/utils/button";
import LocationTable from '@/utils/table';
import NavigationTabs from '@/utils/tabs';
import { Reqeusttabs } from '@/constants/constant';
import { Reqeusttabs,statusFilters } from '@/constants/constant';
import FilterTabs from '@/utils/roundedFilters';
export default function ServiceRequestsPortal() {
const [activeTab, setActiveTab] = useState<string>('TFM Requests');
@@ -11,14 +12,7 @@ export default function ServiceRequestsPortal() {
const statusFilters = [
{ label: 'All', count: 18 },
{ label: 'Registered', count: 4 },
{ label: 'Assigned', count: 3 },
{ label: 'Working', count: 4 },
{ label: 'Completed', count: 3 },
{ label: 'Overdue', count: 4 },
];
return (
<div className="my-15 text-slate-100 max-w-7xl mx-auto font-sans">
@@ -65,31 +59,11 @@ export default function ServiceRequestsPortal() {
</div>
{/* --- STATUS PILL FILTERS --- */}
<div className="flex items-center gap-2.5 overflow-x-auto no-scrollbar py-1">
{statusFilters.map((filter) => {
const isActive = activeFilter === filter.label;
return (
<button
key={filter.label}
onClick={() => setActiveFilter(filter.label)}
className={`flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all ${
isActive
? 'bg-teal-950/40 text-teal-400 border border-teal-500/50'
: 'bg-[#0b1727] text-slate-400 border border-slate-800/80 hover:text-slate-200'
}`}
>
<span>{filter.label}</span>
<span
className={`font-mono text-[11px] ${
isActive ? 'text-teal-400 font-bold' : 'text-slate-400'
}`}
>
{filter.count}
</span>
</button>
);
})}
</div>
<FilterTabs
options={statusFilters}
activeFilter={activeFilter}
onChange={setActiveFilter}
/>
<LocationTable/>
</div>
);

30
constants/constant.ts
View File

@@ -1,3 +1,5 @@
import { TableRowData } from '@/constants/types';
import {
LayoutGrid,
Smile,
@@ -203,3 +205,31 @@ export const Reqeusttabs: string[] = [
'Engineering',
'Schedule Complaints'
];
export const statusFilters = [
{ label: 'All', count: 18 },
{ label: 'Registered', count: 4 },
{ label: 'Assigned', count: 3 },
{ label: 'Working', count: 4 },
{ label: 'Completed', count: 3 },
{ label: 'Overdue', count: 4 },
];
// Data model interface
// Sample data extracted from your screenshot
export const mockData: TableRowData[] = [
{ id: '1', block: 'Block 1', floor: 'G', zone: 'Z2', department: 'Electrical', location: 'Main lobby', window: '06:00–17:30', tat: '60m', sched: 8, approval: true, status: 'INACTIVE' },
{ id: '2', block: 'Block 2', floor: '3', zone: 'Z2', department: 'Electrical', location: 'Main lobby', window: '08:00–23:59', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
{ id: '3', block: 'Block 2', floor: '3', zone: 'Z1', department: 'Inspection work', location: 'Cafeteria', window: '06:00–17:30', tat: '20m', sched: 8, approval: true, status: 'ACTIVE' },
{ id: '4', block: 'Block 1', floor: 'G', zone: 'Z1', department: 'HVAC', location: 'Server room', window: '08:00–18:00', tat: '30m', sched: 4, approval: false, status: 'INACTIVE' },
{ id: '5', block: 'Block 2', floor: '3', zone: 'N', department: 'Inspection work', location: 'Server room', window: '08:00–18:00', tat: '60m', sched: 8, approval: true, status: 'ACTIVE' },
{ id: '6', block: 'Block 2', floor: 'G', zone: 'Z1', department: 'Electrical', location: 'Reception', window: '06:00–18:00', tat: '60m', sched: 6, approval: false, status: 'ACTIVE' },
{ id: '7', block: 'Block 1', floor: 'G', zone: 'Z2', department: 'Electrical', location: 'Food court', window: '06:00–17:30', tat: '60m', sched: 8, approval: true, status: 'ACTIVE' },
{ id: '8', block: 'Block 2', floor: '3', zone: 'Z2', department: 'Electrical', location: 'Cafeteria', window: '08:00–23:59', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
{ id: '9', block: 'Block 2', floor: '3', zone: 'Z1', department: 'Inspection work', location: 'Gym', window: '06:00–17:30', tat: '20m', sched: 8, approval: true, status: 'INACTIVE' },
{ id: '10', block: 'Block 1', floor: 'G', zone: 'Z1', department: 'HVAC', location: 'Lobby', window: '08:00–18:00', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
];

26
constants/types.ts
View File

@@ -17,6 +17,12 @@ export interface AuthLayoutProps {
onForgotPassword?:()=>void;
item?: any;
}
export interface ButtonProps {
children: React.ReactNode;
onClick?: () => void;
className?: string;
}
export interface FormProps {
label: string;
value?: string;
@@ -71,6 +77,26 @@ export interface StatusProgressProps {
barColor?: string;
}
export interface NavigationTabsProps {
tabs: string[];
activeTab: string;
onTabChange: (tab: string) => void;
className?: string;
}
export interface FilterItem {
label: string;
count?: number | string;
}
export interface FilterTabsProps {
options: FilterItem[];
activeFilter: string;
onChange: (label: string) => void;
className?: string;
}
// For footer banner
export interface InfoBannerProps {
boldText?: string;

9
utils/button.tsx
View File

@@ -1,14 +1,11 @@
interface Props {
children: React.ReactNode;
onClick?: () => void;
className?: string;
}
import { ButtonProps } from "@/constants/types";
export default function Button({
children,
onClick,
className,
}: Props) {
}: ButtonProps) {
return (
<button onClick={onClick} className={className}>
{children}

44
utils/roundedFilters.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { FilterTabsProps } from "@/constants/types";
export default function FilterTabs({
options = [],
activeFilter,
onChange,
className = "",
}: FilterTabsProps) {
if (!Array.isArray(options) || options.length === 0) {
return null;
}
return (
<div className={`flex items-center gap-2.5 overflow-x-auto no-scrollbar py-1 ${className}`}>
{options.map((filter) => {
const isActive = activeFilter === filter.label;
return (
<button
key={filter.label}
type="button"
onClick={() => onChange(filter.label)}
className={`flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all whitespace-nowrap cursor-pointer ${
isActive
? "bg-teal-950/40 text-teal-400 border border-teal-500/50"
: "bg-[#0b1727] text-slate-400 border border-slate-800/80 hover:text-slate-200"
}`}
>
<span>{filter.label}</span>
{filter.count !== undefined && (
<span
className={`font-mono text-[11px] ${
isActive ? "text-teal-400 font-bold" : "text-slate-400"
}`}
>
{filter.count}
</span>
)}
</button>
);
})}
</div>
);
}

31
utils/table.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import {
Pencil,
Menu,
@@ -8,35 +8,8 @@ import {
Check,
Sparkles,
} from 'lucide-react';
import { mockData } from '@/constants/constant';
// Data model interface
interface TableRowData {
id: string;
block: string;
floor: string;
zone: string;
department: string;
location: string;
window: string;
tat: string;
sched: number;
approval: boolean;
status: 'ACTIVE' | 'INACTIVE';
}
// Sample data extracted from your screenshot
const mockData: TableRowData[] = [
{ id: '1', block: 'Block 1', floor: 'G', zone: 'Z2', department: 'Electrical', location: 'Main lobby', window: '06:00–17:30', tat: '60m', sched: 8, approval: true, status: 'INACTIVE' },
{ id: '2', block: 'Block 2', floor: '3', zone: 'Z2', department: 'Electrical', location: 'Main lobby', window: '08:00–23:59', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
{ id: '3', block: 'Block 2', floor: '3', zone: 'Z1', department: 'Inspection work', location: 'Cafeteria', window: '06:00–17:30', tat: '20m', sched: 8, approval: true, status: 'ACTIVE' },
{ id: '4', block: 'Block 1', floor: 'G', zone: 'Z1', department: 'HVAC', location: 'Server room', window: '08:00–18:00', tat: '30m', sched: 4, approval: false, status: 'INACTIVE' },
{ id: '5', block: 'Block 2', floor: '3', zone: 'N', department: 'Inspection work', location: 'Server room', window: '08:00–18:00', tat: '60m', sched: 8, approval: true, status: 'ACTIVE' },
{ id: '6', block: 'Block 2', floor: 'G', zone: 'Z1', department: 'Electrical', location: 'Reception', window: '06:00–18:00', tat: '60m', sched: 6, approval: false, status: 'ACTIVE' },
{ id: '7', block: 'Block 1', floor: 'G', zone: 'Z2', department: 'Electrical', location: 'Food court', window: '06:00–17:30', tat: '60m', sched: 8, approval: true, status: 'ACTIVE' },
{ id: '8', block: 'Block 2', floor: '3', zone: 'Z2', department: 'Electrical', location: 'Cafeteria', window: '08:00–23:59', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
{ id: '9', block: 'Block 2', floor: '3', zone: 'Z1', department: 'Inspection work', location: 'Gym', window: '06:00–17:30', tat: '20m', sched: 8, approval: true, status: 'INACTIVE' },
{ id: '10', block: 'Block 1', floor: 'G', zone: 'Z1', department: 'HVAC', location: 'Lobby', window: '08:00–18:00', tat: '30m', sched: 4, approval: false, status: 'ACTIVE' },
];
export default function LocationTable(){
const [selectedIds, setSelectedIds] = useState<string[]>(['1']); // Row 1 selected by default (teal indicator bar)

11
utils/tabs.tsx
View File

@@ -1,12 +1,7 @@
// @/utils/NavigationTabs.tsx
import React from 'react';
import { NavigationTabsProps } from "@/constants/types";
interface NavigationTabsProps {
tabs: string[];
activeTab: string;
onTabChange: (tab: string) => void;
className?: string;
}
export default function NavigationTabs({
tabs,