- );
-}
-
-Auth.displayName = "/src/layout/Auth.jsx";
-
-export default Auth;
diff --git a/src/layouts/auth.tsx b/src/layouts/auth.tsx
new file mode 100644
index 00000000..b9e4c158
--- /dev/null
+++ b/src/layouts/auth.tsx
@@ -0,0 +1,88 @@
+import { Routes, Route } from "react-router-dom";
+import {
+ ChartPieIcon,
+ UserIcon,
+ UserPlusIcon,
+ ArrowRightOnRectangleIcon,
+} from "@heroicons/react/24/solid";
+import { Navbar, Footer } from "@/widgets/layout"; // These will be typed later
+import routes from "@/routes"; // This will be typed when @/routes is migrated
+
+import { ForwardRefExoticComponent, SVGProps, ReactNode } from 'react'; // Added ReactNode for element
+
+// Type for Heroicon components
+type HeroIconType = ForwardRefExoticComponent, "ref"> & { title?: string, titleId?: string }>;
+
+interface NavbarRoute {
+ name: string;
+ path: string;
+ icon: HeroIconType;
+}
+
+// Tentative types for the imported 'routes' structure
+interface PageConfig {
+ path: string;
+ element: ReactNode; // JSX.Element or React.ReactNode should work
+ name?: string; // Optional, based on common patterns
+ icon?: HeroIconType | JSX.Element; // Optional
+}
+
+interface RouteConfig {
+ layout: string;
+ pages: PageConfig[];
+ name?: string; // Optional
+ icon?: HeroIconType | JSX.Element; // Optional
+}
+
+export function Auth() {
+ // The 'routes' import is expected to be RouteConfig[]
+ // For now, we'll assume it matches this structure.
+ // If not, TypeScript will complain when routes.js is converted or when this is used.
+
+ const navbarRoutes: NavbarRoute[] = [
+ {
+ name: "dashboard",
+ path: "/dashboard/home",
+ icon: ChartPieIcon,
+ },
+ {
+ name: "profile",
+ path: "/dashboard/home",
+ icon: UserIcon,
+ },
+ {
+ name: "sign up",
+ path: "/auth/sign-up",
+ icon: UserPlusIcon,
+ },
+ {
+ name: "sign in",
+ path: "/auth/sign-in",
+ icon: ArrowRightOnRectangleIcon,
+ },
+ ];
+
+ return (
+
+ {/* The Navbar and Footer are commented out in the original auth.jsx, so no props to worry about here yet */}
+ {/* */}
+ {/* */}
+
+ {(routes as RouteConfig[]).map( // Cast routes to expected type for now
+ ({ layout, pages }, key: number) => // Added key for map
+ layout === "auth" &&
+ pages.map(({ path, element }: PageConfig, pageKey: number) => ( // Added key and type for page
+ // Key added to Route
+ ))
+ )}
+
+ {/*
- );
-}
-
-Dashboard.displayName = "/src/layout/dashboard.jsx";
-
-export default Dashboard;
diff --git a/src/layouts/dashboard.tsx b/src/layouts/dashboard.tsx
new file mode 100644
index 00000000..2ab12c2b
--- /dev/null
+++ b/src/layouts/dashboard.tsx
@@ -0,0 +1,94 @@
+import { Routes, Route } from "react-router-dom";
+import { Cog6ToothIcon } from "@heroicons/react/24/solid";
+import { IconButton } from "@material-tailwind/react";
+import {
+ Sidenav,
+ DashboardNavbar,
+ Configurator,
+ Footer,
+} from "@/widgets/layout"; // Sidenav, DashboardNavbar etc. will be typed later
+import routes from "@/routes"; // Will be typed when @/routes is migrated
+import { useMaterialTailwindController, setOpenConfigurator } from "@/context"; // Context functions
+
+import { ReactNode, Dispatch } from 'react'; // Added for types
+
+// Tentative types for the imported 'routes' structure (consistent with auth.tsx)
+interface PageConfig {
+ path: string;
+ element: ReactNode;
+ name?: string;
+ icon?: any; // Simplified for now
+ // other properties if they exist
+}
+
+interface RouteConfig {
+ layout: string;
+ pages: PageConfig[];
+ name?: string;
+ icon?: any; // Simplified for now
+ // other properties if they exist
+}
+
+// Simplified types for MaterialTailwindController context
+interface MaterialTailwindState {
+ sidenavType: "dark" | "white" | string; // Assuming sidenavType can be one of these
+ openConfigurator: boolean;
+ // Add other relevant state properties from the context if known
+ // e.g., fixedNavbar: boolean, sidenavColor: string etc.
+}
+
+// Define action types used by this component or relevant to it
+type MaterialTailwindAction =
+ | { type: "OPEN_CONFIGURATOR"; value: boolean }
+ | { type: "SIDENAV_TYPE"; value: "dark" | "white" }
+ // Add other action types if they are used by setOpenConfigurator or affect controller state used here
+ | { type: string; value?: any }; // Fallback for other actions
+
+type MaterialTailwindDispatch = Dispatch;
+
+
+export function Dashboard() {
+ // Assume useMaterialTailwindController returns state and dispatch matching these types
+ const [controller, dispatch] = useMaterialTailwindController() as [MaterialTailwindState, MaterialTailwindDispatch];
+ const { sidenavType } = controller; // sidenavType is now typed
+
+ return (
+
+
+
+
+
+ setOpenConfigurator(dispatch, true)} // dispatch is now typed
+ >
+
+
+
+ {(routes as RouteConfig[]).map( // Cast routes to expected type
+ ({ layout, pages }, key: number) => // Added key for map
+ layout === "dashboard" &&
+ pages.map(({ path, element }: PageConfig, pageKey: number) => ( // Added key and type for page
+ // Key added
+ ))
+ )}
+
+
+
+
+
+
+ );
+}
+
+Dashboard.displayName = "/src/layouts/dashboard.tsx"; // Updated display name
+
+export default Dashboard;
diff --git a/src/layouts/index.js b/src/layouts/index.ts
similarity index 100%
rename from src/layouts/index.js
rename to src/layouts/index.ts
diff --git a/src/main.jsx b/src/main.tsx
similarity index 93%
rename from src/main.jsx
rename to src/main.tsx
index a28f5a60..15a25023 100644
--- a/src/main.jsx
+++ b/src/main.tsx
@@ -17,7 +17,7 @@ import { ThemeProvider } from "@material-tailwind/react";
import { MaterialTailwindControllerProvider } from "@/context";
import "../public/css/tailwind.css";
-ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
diff --git a/src/pages/auth/index.js b/src/pages/auth/index.ts
similarity index 100%
rename from src/pages/auth/index.js
rename to src/pages/auth/index.ts
diff --git a/src/pages/auth/sign-in.jsx b/src/pages/auth/sign-in.tsx
similarity index 100%
rename from src/pages/auth/sign-in.jsx
rename to src/pages/auth/sign-in.tsx
diff --git a/src/pages/auth/sign-up.jsx b/src/pages/auth/sign-up.tsx
similarity index 100%
rename from src/pages/auth/sign-up.jsx
rename to src/pages/auth/sign-up.tsx
diff --git a/src/pages/dashboard/home.jsx b/src/pages/dashboard/home.tsx
similarity index 75%
rename from src/pages/dashboard/home.jsx
rename to src/pages/dashboard/home.tsx
index 2c700669..39108f87 100644
--- a/src/pages/dashboard/home.jsx
+++ b/src/pages/dashboard/home.tsx
@@ -25,18 +25,34 @@ import {
projectsTableData,
ordersOverviewData,
} from "@/data";
+// Import specific types from @/data
+import type {
+ StatisticsCard as StatisticsCardDataType,
+ StatisticsChart as StatisticsChartDataType,
+ ProjectTableRow,
+ ProjectTableMember, // Assuming this is the type for members array elements
+ OrderOverviewItem,
+ // HeroIconType is also needed if not defined locally, but it's part of StatisticsCardDataType etc.
+} from "@/data";
+
import { CheckCircleIcon, ClockIcon } from "@heroicons/react/24/solid";
+import type { ForwardRefExoticComponent, SVGProps } from 'react'; // For HeroIconType if needed explicitly
+
+// If HeroIconType is not exported from data files, define it (it's part of those data types)
+type HeroIconType = ForwardRefExoticComponent, "ref"> & { title?: string, titleId?: string }>;
+
export function Home() {
return (
- {statisticsCardsData.map(({ icon, title, footer, ...rest }) => (
+ {/* Type the item from statisticsCardsData */}
+ {(statisticsCardsData as StatisticsCardDataType[]).map(({ icon, title, footer, ...rest }: StatisticsCardDataType) => (
- {statisticsChartsData.map((props) => (
+ {/* Type the props from statisticsChartsData */}
+ {(statisticsChartsData as StatisticsChartDataType[]).map((props: StatisticsChartDataType) => (
+ {/* el is string, key is string, this is fine */}
{["companies", "members", "budget", "completion"].map(
- (el) => (
+ (el: string) => (
- {projectsTableData.map(
- ({ img, name, members, budget, completion }, key) => {
+ {/* Type the item from projectsTableData, note: key here is the index from map */}
+ {(projectsTableData as ProjectTableRow[]).map(
+ ({ img, name, members, budget, completion }: ProjectTableRow, index: number) => {
const className = `py-3 px-5 ${
- key === projectsTableData.length - 1
+ index === projectsTableData.length - 1 // Use index from map for comparison
? ""
: "border-b border-blue-gray-50"
}`;
@@ -147,15 +166,16 @@ export function Home() {
- {members.map(({ img, name }, key) => (
-
+ {/* Type the member item */}
+ {(members as ProjectTableMember[]).map(({ img: memberImg, name: memberName }, memberKey: number) => (
+
@@ -178,7 +198,7 @@ export function Home() {
{completion}%