first commit

frontend/app/main/configuration/company-data/components/grade-table/index.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Search, Award } from "lucide-react";
+import {
+  ColumnDef,
+  DataTableLayout,
+  Card,
+  Input,
+} from "ikoncomponents";
+import { getAllGrade } from "@/app/utils/api/companyData/gradeApi.ts";
+import { GradeResponseDto } from "@/app/utils/api/companyData/gradeApi.ts/type";
+
+function GradeDataTable() {
+  const [gradeTableData, setGradeTableData] = useState<GradeResponseDto[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [search, setSearch] = useState("");
+
+  // DataTableLayout defaults to list view and has no prop to start in grid, so
+  // once mounted we click its built-in "Grid View" toggle once to default to cards.
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const defaultedToGrid = useRef(false);
+
+  const filteredGradeTableData = useMemo(() => {
+    if (!search.trim()) return gradeTableData;
+    return gradeTableData.filter((gradeData) =>
+      gradeData.grade?.toLowerCase().includes(search.toLowerCase()),
+    );
+  }, [gradeTableData, search]);
+
+  const fetchGradeTableData = async () => {
+    setIsLoading(true);
+    try {
+      const gradeData = await getAllGrade();
+      setGradeTableData(gradeData?.content || []);
+    } catch (error) {
+      console.error("Error fetching grade data:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchGradeTableData();
+  }, []);
+
+  // Switch DataTableLayout into grid (card) view as soon as it mounts, once.
+  useEffect(() => {
+    if (isLoading || defaultedToGrid.current) return;
+    const gridButton =
+      tableContainerRef.current?.querySelector<HTMLButtonElement>(
+        'button[title="Grid View"]',
+      );
+    if (gridButton) {
+      gridButton.click();
+      defaultedToGrid.current = true;
+    }
+  }, [isLoading]);
+
+  // ikoncomponents passes the row object directly to cell(), not { row }.
+  const columns: ColumnDef<GradeResponseDto>[] = [
+    {
+      accessorKey: "grade",
+      header: "Grade",
+      cell: (row) => <span>{row.grade || "n/a"}</span>,
+    },
+  ];
+
+  return (
+    <div className="space-y-5 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold">Grades</h1>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {filteredGradeTableData.length} of {gradeTableData.length} grades
+          </p>
+        </div>
+      </div>
+
+      <div ref={tableContainerRef}>
+        <DataTableLayout
+          data={filteredGradeTableData}
+          columns={columns}
+          extraTools={{
+            keyExtractor: (row: GradeResponseDto) => row.id,
+            totalPages: 1,
+            currentPage: 1,
+            isLoading,
+            onReload: fetchGradeTableData,
+            actionNode: (
+              <div className="flex w-full min-w-[260px] flex-1 items-center gap-2 rounded-lg border px-3 h-9">
+                <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <div className="h-4 w-px shrink-0 bg-border" />
+                <Input
+                  placeholder="Search grades..."
+                  className="h-8 border-none p-0 text-sm shadow-none placeholder:text-muted-foreground focus-visible:ring-0"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                />
+              </div>
+            ),
+            gridComponent: (data: GradeResponseDto[]) => (
+              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+                {data.length > 0 ? (
+                  data.map((gradeItem) => (
+                    <Card
+                      key={gradeItem.id}
+                      // flex-row + py-4 explicitly override the base Card's
+                      // `flex flex-col gap-6 py-6`, otherwise the icon stacks on
+                      // top and the content centers with a lot of empty space.
+                      className="group relative flex flex-row items-center gap-3.5 overflow-hidden rounded-xl border py-4! px-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md"
+                    >
+                      {/* Left accent rail */}
+                      <span className="absolute inset-y-0 left-0 w-1 bg-primary/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+                      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary transition-transform duration-200 group-hover:scale-105">
+                        <Award className="h-5 w-5" />
+                      </div>
+                      <div className="min-w-0">
+                        <p className="text-[10px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+                          Grade
+                        </p>
+                        <p
+                          className="truncate text-sm font-semibold leading-tight text-foreground"
+                          title={gradeItem.grade}
+                        >
+                          {gradeItem.grade || "-"}
+                        </p>
+                      </div>
+                    </Card>
+                  ))
+                ) : (
+                  <div className="col-span-2 flex items-center justify-center rounded-lg border border-dashed p-8 text-muted-foreground sm:col-span-3 lg:col-span-4">
+                    No grades found.
+                  </div>
+                )}
+              </div>
+            ),
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default GradeDataTable;

frontend/app/main/configuration/company-data/components/role-table/index.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Search, Briefcase } from "lucide-react";
+import {
+  ColumnDef,
+  DataTableLayout,
+  Card,
+  Input,
+} from "ikoncomponents";
+import { getAllRoles } from "@/app/utils/api/companyData/roleApi.ts";
+
+interface RoleData {
+  id: string;
+  role: string;
+}
+
+function RoleDataTable() {
+  const [roleTableData, setRoleTableData] = useState<RoleData[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [search, setSearch] = useState("");
+
+  // DataTableLayout defaults to list view and has no prop to start in grid, so
+  // once mounted we click its built-in "Grid View" toggle once to default to cards.
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const defaultedToGrid = useRef(false);
+
+  const filteredRoleTableData = useMemo(() => {
+    if (!search.trim()) return roleTableData;
+    return roleTableData.filter((roleData) =>
+      roleData.role?.toLowerCase().includes(search.toLowerCase()),
+    );
+  }, [roleTableData, search]);
+
+  const fetchRoleTableData = async () => {
+    setIsLoading(true);
+    try {
+      const roleData = await getAllRoles();
+      setRoleTableData(roleData || []);
+    } catch (error) {
+      console.error("Error fetching role data:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRoleTableData();
+  }, []);
+
+  // Switch DataTableLayout into grid (card) view as soon as it mounts, once.
+  useEffect(() => {
+    if (isLoading || defaultedToGrid.current) return;
+    const gridButton =
+      tableContainerRef.current?.querySelector<HTMLButtonElement>(
+        'button[title="Grid View"]',
+      );
+    if (gridButton) {
+      gridButton.click();
+      defaultedToGrid.current = true;
+    }
+  }, [isLoading]);
+
+  // ikoncomponents passes the row object directly to cell(), not { row }.
+  const columns: ColumnDef<RoleData>[] = [
+    {
+      accessorKey: "role",
+      header: "Role",
+      cell: (row) => <span>{row.role || "n/a"}</span>,
+    },
+  ];
+
+  return (
+    <div className="space-y-5 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold">Roles</h1>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {filteredRoleTableData.length} of {roleTableData.length} roles
+          </p>
+        </div>
+      </div>
+
+      <div ref={tableContainerRef}>
+        <DataTableLayout
+          data={filteredRoleTableData}
+          columns={columns}
+          extraTools={{
+            keyExtractor: (row: RoleData) => row.id,
+            totalPages: 1,
+            currentPage: 1,
+            isLoading,
+            onReload: fetchRoleTableData,
+            actionNode: (
+              <div className="flex w-full min-w-[260px] flex-1 items-center gap-2 rounded-lg border px-3 h-9">
+                <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <div className="h-4 w-px shrink-0 bg-border" />
+                <Input
+                  placeholder="Search roles..."
+                  className="h-8 border-none p-0 text-sm shadow-none placeholder:text-muted-foreground focus-visible:ring-0"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                />
+              </div>
+            ),
+            gridComponent: (data: RoleData[]) => (
+              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+                {data.length > 0 ? (
+                  data.map((roleItem) => (
+                    <Card
+                      key={roleItem.id}
+                      // flex-row + py-4 explicitly override the base Card's
+                      // `flex flex-col gap-6 py-6`, otherwise the icon stacks on
+                      // top and the content centers with a lot of empty space.
+                      className="group relative flex flex-row items-center gap-3.5 overflow-hidden rounded-xl border py-4! px-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-primary/40 hover:shadow-md"
+                    >
+                      {/* Left accent rail */}
+                      <span className="absolute inset-y-0 left-0 w-1 bg-primary/60 opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+                      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary transition-transform duration-200 group-hover:scale-105">
+                        <Briefcase className="h-5 w-5" />
+                      </div>
+                      <div className="min-w-0">
+                        <p className="text-[10px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+                          Role
+                        </p>
+                        <p
+                          className="truncate text-sm font-semibold leading-tight text-foreground"
+                          title={roleItem.role}
+                        >
+                          {roleItem.role || "-"}
+                        </p>
+                      </div>
+                    </Card>
+                  ))
+                ) : (
+                  <div className="col-span-2 flex items-center justify-center rounded-lg border border-dashed p-8 text-muted-foreground sm:col-span-3 lg:col-span-4">
+                    No roles found.
+                  </div>
+                )}
+              </div>
+            ),
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default RoleDataTable;

frontend/app/main/configuration/company-data/components/tabs/index.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { CustomTabs, TabArray } from "ikoncomponents";
+import GradeDataTable from "../grade-table";
+import RoleDataTable from "../role-table";
+
+const tabArray: TabArray[] = [
+  {
+    tabName: "Role",
+    tabId: "tab-role",
+    default: true,
+    tabContent: <RoleDataTable />,
+  },
+  {
+    tabName: "Grade",
+    tabId: "tab-grade",
+    default: false,
+    tabContent: <GradeDataTable />,
+  },
+];
+
+export default function CompanyDataTab() {
+  return (
+    <div className="p-4">
+      <CustomTabs tabArray={tabArray} />
+    </div>
+  );
+}

frontend/app/main/configuration/company-data/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { RenderAppBreadcrumb } from "ikoncomponents";
+
+export default function CompanyDataLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>){
+    return (
+        <>
+            <RenderAppBreadcrumb breadcrumb={{ level: 2, title: "Company Data", href: "/configuration/company-data" }} />
+            {children}
+        </>
+    );
+}

frontend/app/main/configuration/company-data/page.tsx

@@ -0,0 +1,9 @@
+import CompanyDataTab from "./components/tabs";
+
+export default async function CompanyData() {
+  return (
+    <div className="py-4 space-y-4 w-full h-full">
+      <CompanyDataTab />
+    </div>
+  );
+}

frontend/app/main/configuration/employee-data/components/employee-table/index.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { ColumnDef, DataTableLayout } from "ikoncomponents";
+import { useSearchParams } from "next/navigation";
+
+import { getEmployees } from "@/app/utils/api/employeeDetails";
+
+interface EmployeeResponseDto {
+  accountId: string;
+  empId: string;
+  name: string;
+  email: string;
+  organizationEmail: string;
+  role: string;
+  grade: string;
+  active: boolean;
+}
+
+interface RoleDto {
+  id: string;
+  accountId: string;
+  role: string;
+}
+
+interface GradeDto {
+  id: string;
+  grade: string;
+}
+
+interface ResolvedEmployee extends EmployeeResponseDto {
+  roleName: string;
+  gradeName: string;
+}
+
+function EmployeePage({
+  roleData,
+  gradeData,
+}: {
+  roleData: RoleDto[];
+  gradeData: GradeDto[];
+}) {
+  const [employees, setEmployees] = useState<ResolvedEmployee[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // This table is list-only, so hide DataTableLayout's built-in List/Grid toggle
+  // (it has no prop to disable it). Once mounted we find the grid button and hide
+  // the whole toggle group, so a lone list button isn't left dangling.
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const hidGridToggle = useRef(false);
+
+  const searchParams = useSearchParams();
+  const currentSearch = (searchParams.get("search") || "").toLowerCase().trim();
+
+  const fetchEmployees = useCallback(async () => {
+    setIsLoading(true);
+
+    try {
+      const data = await getEmployees();
+      console.log("emp data", data);
+
+      const empList: EmployeeResponseDto[] = data || [];
+
+      const roleMap = new Map(
+        roleData?.map((role) => [role.id, role.role]) || [],
+      );
+
+      const gradeMap = new Map(
+        gradeData?.map((grade) => [grade.id, grade.grade]) || [],
+      );
+      console.log("emp", empList, roleMap, gradeMap);
+
+      const resolved: ResolvedEmployee[] = empList.map((emp) => ({
+        ...emp,
+        roleName: roleMap.get(emp.role) || "n/a",
+        gradeName: gradeMap.get(emp.grade) || "n/a",
+      }));
+      console.log("emp data", resolved);
+      setEmployees(resolved);
+    } catch (error) {
+      console.error("Failed to fetch employees:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [roleData, gradeData]);
+
+  useEffect(() => {
+    if (roleData && gradeData) {
+      fetchEmployees();
+    }
+  }, [fetchEmployees, roleData, gradeData]);
+
+  // Hide the List/Grid toggle once the table has mounted.
+  useEffect(() => {
+    if (isLoading || hidGridToggle.current) return;
+    const gridButton =
+      tableContainerRef.current?.querySelector<HTMLButtonElement>(
+        'button[title="Grid View"]',
+      );
+    if (gridButton?.parentElement) {
+      gridButton.parentElement.style.display = "none";
+      hidGridToggle.current = true;
+    }
+  }, [isLoading]);
+
+  const filteredEmployees = currentSearch
+    ? employees.filter(
+        (emp) =>
+          (emp.name || "").toLowerCase().includes(currentSearch) ||
+          (emp.empId || "").toLowerCase().includes(currentSearch) ||
+          (emp.email || "").toLowerCase().includes(currentSearch) ||
+          (emp.roleName || "").toLowerCase().includes(currentSearch) ||
+          (emp.gradeName || "").toLowerCase().includes(currentSearch),
+      )
+    : employees;
+
+  const columns: ColumnDef<ResolvedEmployee>[] = [
+    {
+      accessorKey: "empId",
+      header: "Employee ID",
+      cell: (row) => <span>{row.empId || "n/a"}</span>,
+    },
+    {
+      accessorKey: "name",
+      header: "Employee Name",
+      cell: (row) => <span>{row.name || "n/a"}</span>,
+    },
+    {
+      accessorKey: "roleName",
+      header: "Role",
+      cell: (row) => <span>{row.roleName || "n/a"}</span>,
+    },
+    {
+      accessorKey: "gradeName",
+      header: "Grade",
+      cell: (row) => <span>{row.gradeName || "n/a"}</span>,
+    },
+    {
+      accessorKey: "email",
+      header: "Email",
+      cell: (row) => <span>{row.email || "n/a"}</span>,
+    },
+    {
+      accessorKey: "organizationEmail",
+      header: "Organization Email",
+      cell: (row) => <span>{row.organizationEmail || "n/a"}</span>,
+    },
+    {
+      accessorKey: "active",
+      header: "Status",
+      cell: (row) => <span>{row.active ? "Active" : "Inactive"}</span>,
+    },
+  ];
+
+  return (
+    <div ref={tableContainerRef}>
+      <DataTableLayout
+        data={filteredEmployees}
+        columns={columns}
+        extraTools={{
+          keyExtractor: (row: ResolvedEmployee) => row.empId,
+          totalPages: 1,
+          currentPage: 1,
+          isLoading,
+          onReload: fetchEmployees,
+        }}
+      />
+    </div>
+  );
+}
+
+export default EmployeePage;

frontend/app/main/configuration/employee-data/components/employeeCard/index.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Badge,
+  Avatar,
+  AvatarFallback,
+  Separator,
+} from "ikoncomponents";
+
+interface EmployeeResponseDto {
+  accountId: string;
+  empId: string;
+  name: string;
+  email: string;
+  organizationEmail: string;
+  role: string;
+  grade: string;
+  active: boolean;
+}
+
+const EmployeeCard = ({
+  empId,
+  name,
+  email,
+  organizationEmail,
+  role,
+  grade,
+  active,
+}: EmployeeResponseDto) => {
+  const initials = name
+    ?.split(" ")
+    .map((n: string) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+
+  return (
+    <Card className="w-full shadow-md hover:shadow-lg transition-shadow duration-200">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Avatar className="h-12 w-12">
+              <AvatarFallback className="bg-primary text-primary-foreground font-semibold text-sm">
+                {initials}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="font-semibold text-base leading-tight">{name}</p>
+              <p className="text-xs text-muted-foreground mt-0.5">{empId}</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Badge variant={active ? "default" : "secondary"}>
+              {active ? "Active" : "Inactive"}
+            </Badge>
+          </div>
+        </div>
+      </CardHeader>
+
+      <Separator />
+
+      <CardContent className="pt-4 space-y-3">
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
+              Role
+            </p>
+            <p className="text-sm font-medium mt-0.5">{role || "n/a"}</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
+              Grade
+            </p>
+            <p className="text-sm font-medium mt-0.5">{grade || "n/a"}</p>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="space-y-2">
+          <div>
+            <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
+              Personal Email
+            </p>
+            <p className="text-sm truncate mt-0.5">{email || "n/a"}</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
+              Work Email
+            </p>
+            <p className="text-sm truncate mt-0.5">{organizationEmail || "n/a"}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default EmployeeCard;

frontend/app/main/configuration/employee-data/layout.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { RenderAppBreadcrumb } from "ikoncomponents";
+
+export default function EmployeeDataLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <RenderAppBreadcrumb
+        breadcrumb={{
+          level: 2,
+          title: "Employee Data",
+          href: "/configuration/employee-data",
+        }}
+      />
+      {children}
+    </>
+  );
+}

frontend/app/main/configuration/employee-data/page.tsx

@@ -0,0 +1,19 @@
+import { getAllGrade } from "@/app/utils/api/companyData/gradeApi.ts";
+import EmployeeDataTable from "./components/employee-table";
+import { getAllRoles } from "@/app/utils/api/companyData/roleApi.ts";
+
+export const dynamic = "force-dynamic";
+
+export default async function EmployeeData() {
+  const gradeData = await getAllGrade();
+  const roleData = await getAllRoles();
+
+  return (
+    <div className="py-4 space-y-4 w-full h-full">
+      <EmployeeDataTable
+        roleData={roleData || []}
+        gradeData={gradeData || []}
+      />
+    </div>
+  );
+}

frontend/app/main/configuration/fx-rate/components/fx-rate-table/index.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+import { ColumnDef, DataTableLayout } from "ikoncomponents";
+import { useAppCache } from "@/app/utils/context/AppCacheContext";
+
+export interface FXRateData {
+  id: string;
+  year: string;
+  currency: string;
+  fxRate: number;
+  activeStatus: boolean;
+}
+
+function FXRateDataTable() {
+  // FX rate data comes from the shared app-wide cache.
+  const { fxRateResponse, isLoading, refresh } = useAppCache();
+
+  const fxRateTableData = useMemo<FXRateData[]>(() => {
+    const rows: FXRateData[] = [];
+    (fxRateResponse?.content || []).forEach((item: any) => {
+      const fxRateDetails = item.fxRateDetails || {};
+      Object.values(fxRateDetails).forEach((yearGroup: any) => {
+        Object.values(yearGroup).forEach((detail: any) => {
+          rows.push({
+            id: detail.id,
+            year: detail.year,
+            currency: detail.currency,
+            fxRate: detail.fxRate,
+            activeStatus: detail.activeStatus,
+          });
+        });
+      });
+    });
+    return rows;
+  }, [fxRateResponse]);
+
+  // This table is list-only, so hide DataTableLayout's built-in List/Grid toggle
+  // (it has no prop to disable it). Once mounted we find the grid button and hide
+  // the whole toggle group, so a lone list button isn't left dangling.
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const hidGridToggle = useRef(false);
+
+  useEffect(() => {
+    if (isLoading || hidGridToggle.current) return;
+    const gridButton =
+      tableContainerRef.current?.querySelector<HTMLButtonElement>(
+        'button[title="Grid View"]',
+      );
+    if (gridButton?.parentElement) {
+      gridButton.parentElement.style.display = "none";
+      hidGridToggle.current = true;
+    }
+  }, [isLoading]);
+
+  const columns: ColumnDef<FXRateData>[] = [
+    {
+      accessorKey: "year",
+      header: "Year",
+      cell: (row) => <span>{row.year ?? "n/a"}</span>,
+    },
+    {
+      accessorKey: "currency",
+      header: "Currency",
+      cell: (row) => <span>{row.currency ?? "n/a"}</span>,
+    },
+    {
+      accessorKey: "fxRate",
+      header: "FX Rate",
+      cell: (row) => <span>{row.fxRate ?? "n/a"}</span>,
+    },
+    {
+      accessorKey: "activeStatus",
+      header: "Status",
+      cell: (row) => (
+        <span>{row.activeStatus ? "Active" : "Inactive"}</span>
+      ),
+    },
+  ];
+
+  return (
+    <div ref={tableContainerRef}>
+      <DataTableLayout
+        data={fxRateTableData}
+        columns={columns}
+        extraTools={{
+          keyExtractor: (row: FXRateData) => row.id,
+          totalPages: 1,
+          currentPage: 1,
+          isLoading,
+          onReload: refresh,
+        }}
+      />
+    </div>
+  );
+}
+
+export default FXRateDataTable;

frontend/app/main/configuration/fx-rate/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { RenderAppBreadcrumb } from "ikoncomponents";
+
+export default function FXRateLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>){
+    return (
+        <>
+            <RenderAppBreadcrumb breadcrumb={{ level: 2, title: "FX Rate", href: "/configuration/fx-rate" }} />
+            {children}
+        </>
+    );
+}

frontend/app/main/configuration/fx-rate/page.tsx

@@ -0,0 +1,9 @@
+import FXRateDataTable from "./components/fx-rate-table";
+
+export default async function CompanyData() {
+  return (
+    <div className="py-4 space-y-4 w-full h-full">
+      <FXRateDataTable />
+    </div>
+  );
+}

frontend/app/main/configuration/integration/components/AddIntegrationModal.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  Button,
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  Input,
+  Textarea,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "ikoncomponents";
+
+/* ---------------- Schema ---------------- */
+const integrationSchema = z.object({
+  name: z.string().min(1, "Integration name is required"),
+  systemType: z.string().min(1, "System type is required"),
+  connectionMethod: z.string().min(1, "Connection method is required"),
+  endpointUrl: z.string().url("Invalid URL").optional().or(z.literal("")),
+  description: z.string().optional(),
+});
+
+type IntegrationFormValues = z.infer<typeof integrationSchema>;
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (data: IntegrationFormValues) => void;
+}
+
+/* ---------------- Component ---------------- */
+export default function AddIntegrationModal({
+  open,
+  onClose,
+  onSubmit,
+}: Props) {
+  const form = useForm<IntegrationFormValues>({
+    resolver: zodResolver(integrationSchema),
+    defaultValues: {
+      name: "",
+      systemType: "",
+      connectionMethod: "",
+      endpointUrl: "",
+      description: "",
+    },
+  });
+
+  const handleClose = () => {
+    form.reset();
+    onClose();
+  };
+
+  const handleCreateIntegration = (data: IntegrationFormValues) => {
+  console.log("Integration form data:", {
+    ...data,
+  });
+
+  onSubmit(data);   // pass to parent if needed
+  handleClose();    // close + reset modal
+};
+
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-lg">
+        {/* Header */}
+        <DialogHeader>
+          <DialogTitle>Add External Integration</DialogTitle>
+          <DialogDescription>
+           
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Form */}
+        <Form {...form}>
+          <form
+           onSubmit={form.handleSubmit(handleCreateIntegration)}
+            className="space-y-4"
+          >
+            {/* Integration Name */}
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    Integration Name <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="e.g., Company HRMS"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* System Type */}
+            <FormField
+              control={form.control}
+              name="systemType"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    System Type <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    value={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select system type" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="HRMS">HRMS</SelectItem>
+                      <SelectItem value="CRM">Sales CRM</SelectItem>
+                      {/* <SelectItem value="ERP">ERP</SelectItem> */}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Connection Method */}
+            <FormField
+              control={form.control}
+              name="connectionMethod"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    Connection Method{" "}
+                    <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    value={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select data" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="Grade">Grade</SelectItem>
+                      <SelectItem value="Role">Role</SelectItem>
+                      <SelectItem value="Working Days">Working Days</SelectItem>
+                       <SelectItem value="Employee">Employee</SelectItem>
+                        <SelectItem value="FX rates">FX rates</SelectItem>
+                        {/* <SelectItem value="Risk">Risk</SelectItem> */}
+
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Endpoint URL */}
+            <FormField
+              control={form.control}
+              name="endpointUrl"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Endpoint URL</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="https://api.example.com/v1"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Description */}
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      rows={3}
+                      placeholder="Describe what this integration does..."
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Actions */}
+            <div className="flex justify-end gap-3 pt-4">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={handleClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                
+              >
+                Create Integration
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/app/main/configuration/integration/components/IntegratinTable.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import {
+  DataTable,
+  DTExtraParamsProps,
+  IconTextButtonWithTooltip,
+} from "ikoncomponents";
+import { RefreshCcw } from "lucide-react";
+import { useEffect, useState } from "react";
+
+/**
+ * Type for Integration data
+ */
+export interface ConnectorData {
+  connectorId: string;
+  connectorName: string;
+  appName: string;
+}
+
+function IntegrationTable() {
+  const [data, setData] = useState<ConnectorData[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Dummy fetch (replace with API call)
+  useEffect(() => {
+    const fetchConnectors = async () => {
+      try {
+        setLoading(true);
+
+        // Replace this with your actual API
+        const response: ConnectorData[] = [
+          {
+            connectorId: "1",
+            connectorName: "Salesforce Connector",
+            appName: "Sales CRM",
+          },
+          {
+            connectorId: "2",
+            connectorName: "Zoho Connector",
+            appName: "Project Management",
+          },
+        ];
+
+        setData(response);
+      } catch (error) {
+        console.error("Failed to fetch integrations", error);
+        setData([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchConnectors();
+  }, []);
+
+  const handleSync = () => {
+    console.log("Sync button clicked");
+    //  Call sync API here
+  };
+
+  const columns: ColumnDef<ConnectorData>[] = [
+    {
+      accessorKey: "connectorName",
+      header: () => <div className="text-center">Connector Name</div>,
+      cell: ({ row }) => (
+        <span className="font-medium">
+          {row.original.connectorName}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "appName",
+      header: () => <div className="text-center">App Name</div>,
+      cell: ({ row }) => <span>{row.original.appName}</span>,
+    },
+  ];
+
+  const extraParams: DTExtraParamsProps = {
+    extraTools: [
+      <IconTextButtonWithTooltip
+        key="sync"
+        tooltipContent="Sync Data"
+        variant="outline"
+        onClick={handleSync}
+      >
+        <RefreshCcw className="h-4 w-4" />
+      </IconTextButtonWithTooltip>,
+    ],
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-[250px]">
+        <div className="animate-spin rounded-full h-10 w-10 border-t-4 border-blue-500" />
+      </div>
+    );
+  }
+
+  return <DataTable columns={columns} data={data} extraParams={extraParams} />;
+}
+
+export default IntegrationTable;

frontend/app/main/configuration/integration/components/IntegrationMainPage.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import { Plus, Database } from "lucide-react";
+import AddIntegrationModal from "./AddIntegrationModal";
+import IntegrationTable from "./IntegratinTable";
+import { useState } from "react";
+
+function IntegrationMainPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-gray-500">
+            External Integrations
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Connect to external systems like HRMS, CRM, and ERP
+          </p>
+        </div>
+
+        <button
+          className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+          onClick={() => setIsModalOpen(true)}
+        >
+          <Plus size={16} />
+          Add Integration
+        </button>
+      </div>
+      <div className="border border-dashed border-gray-300 rounded-lg p-12 flex flex-col items-center justify-center text-center">
+        <div className="w-14 h-14 flex items-center justify-center rounded-full bg-gray-100 mb-4">
+          <Database className="text-gray-500" size={28} />
+        </div>
+
+        <h2 className="text-lg font-semibold text-gray-500">
+          No integrations yet
+        </h2>
+
+        <p className="text-sm text-gray-500 mt-2 max-w-md">
+          Connect your external systems to sync data with your project
+          management platform.
+        </p>
+
+        <button
+          className="mt-6 flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-md text-sm font-medium"
+          onClick={() => setIsModalOpen(true)}
+        >
+          <Plus size={16} />
+          Add Your First Integration
+        </button>
+      </div>
+      {/* {isModalOpen && <AddIntegrationModal onClose={() => setIsModalOpen(false)} onSubmit={() => {
+              setIsModalOpen(false);
+              console.log("Integration created");
+          } } open={false} />} */}
+      <IntegrationTable />
+      {isModalOpen && (
+        <AddIntegrationModal
+          open={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSubmit={(data) => {
+            console.log("Received in parent:", data);
+          }}
+        />
+      )}{" "}
+    </div>
+  );
+}
+
+export default IntegrationMainPage;
+
+

frontend/app/main/configuration/integration/layout.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+ function IntegrationLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div>{children}</div>;
+}
+
+export default IntegrationLayout;

frontend/app/main/configuration/integration/page.tsx

@@ -0,0 +1,15 @@
+import { SearchInput } from "ikoncomponents";
+import IntegrationMainPage from "./components/IntegrationMainPage";
+
+function IntegrationPage() {
+  return <div>
+    
+    <SearchInput
+    className="mt-3 w-4xl pt-1"/>
+
+
+    <IntegrationMainPage />
+    </div>;
+}
+
+export default IntegrationPage;

frontend/app/main/configuration/layout.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function ConfigurationLayout({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>;
+}
+
+export default ConfigurationLayout;

frontend/app/main/configuration/office-details/components/tab/index.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import WorkingDaysDetailsTable from "../working-days-table";
+
+const OfficeDetailsDataTab = () => {
+  return (
+    <div className="w-full">
+      <WorkingDaysDetailsTable />
+    </div>
+  );
+};
+
+export default OfficeDetailsDataTab;

frontend/app/main/configuration/office-details/components/working-days-table/index.tsx

@@ -0,0 +1,125 @@
+"use client";
+import { ColumnDef, DataTableLayout } from "ikoncomponents";
+import { useEffect, useRef, useState } from "react";
+import { getAllWorkingDays } from "@/app/utils/api/workingDays";
+
+interface WorkingDaysDetailsData {
+  id: string;
+  year: string;
+  month: string;
+  workingDays: string;
+}
+
+function WorkingDaysDetailsTable() {
+  const [workingDaysDetails, setWorkingDaysDetails] = useState<
+    WorkingDaysDetailsData[]
+  >([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchWorkingDaysDetailsData = async () => {
+    setIsLoading(true);
+    try {
+      const workingDayData = await getAllWorkingDays();
+
+      let flatData: WorkingDaysDetailsData[] = [];
+      if (workingDayData?.content) {
+        workingDayData.content.forEach((item: any) => {
+          if (item.workingDaysDetails) {
+            Object.values(item.workingDaysDetails).forEach((yearObj: any) => {
+              Object.values(yearObj).forEach((monthObj: any) => {
+                flatData.push({
+                  id: `${monthObj.year}-${monthObj.month}`,
+                  year: monthObj.year,
+                  month: monthObj.month,
+                  workingDays: String(monthObj.workingDays),
+                });
+              });
+            });
+          }
+        });
+      }
+
+      setWorkingDaysDetails(flatData);
+    } catch (error) {
+      console.error("Error fetching WorkingDaysDetails data:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Headers must be plain strings: DataTableLayout's grouping resolver maps the
+  // grouped header string back to its accessorKey, and only string headers expose
+  // the drag handle. Function headers (e.g. a centered <div>) can't be grouped.
+  const columns: ColumnDef<WorkingDaysDetailsData>[] = [
+    {
+      accessorKey: "year",
+      header: "Year",
+    },
+    {
+      accessorKey: "month",
+      header: "Month",
+    },
+    {
+      accessorKey: "workingDays",
+      header: "Number of working days",
+    },
+  ];
+
+  // DataTableLayout keeps its grouping state internal with no prop to seed it —
+  // grouping is only triggered by dragging a column onto the grouping bar. To
+  // default-group by year, once the table has mounted we synthesise that drop
+  // (a "drop" event carrying columnHeader=Year) on the grouping drop zone once.
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const groupedByYear = useRef(false);
+
+  useEffect(() => {
+    fetchWorkingDaysDetailsData();
+  }, []);
+
+  useEffect(() => {
+    if (isLoading || groupedByYear.current) return;
+
+    const container = tableContainerRef.current;
+    if (!container) return;
+
+    // This table is list-only, so hide DataTableLayout's built-in List/Grid
+    // toggle (it has no prop to disable it). Hide the whole toggle group rather
+    // than just the grid button so a lone list button isn't left dangling.
+    const gridButton = container.querySelector<HTMLButtonElement>(
+      'button[title="Grid View"]',
+    );
+    if (gridButton?.parentElement) {
+      gridButton.parentElement.style.display = "none";
+    }
+
+    const dropZone = container.querySelector<HTMLDivElement>(
+      'div[class*="border-dashed"]',
+    );
+    if (!dropZone) return;
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.setData("columnHeader", "Year");
+    dropZone.dispatchEvent(
+      new DragEvent("drop", { bubbles: true, cancelable: true, dataTransfer }),
+    );
+    groupedByYear.current = true;
+  }, [isLoading]);
+
+  return (
+    <div ref={tableContainerRef} className="p-6 space-y-6">
+      <DataTableLayout
+        columns={columns}
+        data={workingDaysDetails}
+        extraTools={{
+          keyExtractor: (row: WorkingDaysDetailsData) => row.id,
+          totalPages: 1,
+          currentPage: 1,
+          isLoading,
+          onReload: fetchWorkingDaysDetailsData,
+        }}
+      />
+    </div>
+  );
+}
+
+export default WorkingDaysDetailsTable;

frontend/app/main/configuration/office-details/layout.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { RenderAppBreadcrumb } from "ikoncomponents";
+
+
+export default function OfficeDetailsLayout({children,}: Readonly<{children: React.ReactNode;}>){
+    return (
+        <>
+            <RenderAppBreadcrumb breadcrumb={{ level: 2, title: "Working Days", href: "/configuration/office-details" }} />
+            {children}
+        </>
+    );
+}

frontend/app/main/configuration/office-details/page.tsx

@@ -0,0 +1,10 @@
+import OfficeDetailsDataTab from "./components/tab";
+
+export default async function OfficeDetails() {
+
+  return (
+    <div className="py-4 space-y-4 w-full h-full">
+      <OfficeDetailsDataTab />
+    </div>
+  );
+}