Refactor dashboard layout for improved styling and responsiveness. Updated Header and Footer components with Tailwind CSS classes, adjusted Content padding, and streamlined Breadcrumb implementation.

src/app/(dashboard)/layout.tsx

@@ -192,16 +192,13 @@ export default function DashboardLayout({
       </Sider>
       <Layout>
         <Header
+          className="flex items-center justify-end"
           style={{
-            padding: "0 24px",
             background: colorBgContainer,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "flex-end",
           }}
         >
           <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
-            <Space style={{ cursor: "pointer" }}>
+            <Space className="cursor-pointer">
               <Avatar
                 style={{ backgroundColor: "#667eea" }}
                 icon={<UserOutlined />}
@@ -211,11 +208,11 @@ export default function DashboardLayout({
           </Dropdown>
         </Header>
         <TabBar />
-        <Content style={{ margin: "0 16px" }}>
-          <Breadcrumb style={{ margin: "16px 0" }} items={breadcrumbItems} />
+        <Content className="mx-4 pt-4">
+          <Breadcrumb items={breadcrumbItems} />
           <div
+            className="p-4 rounded-lg mt-4"
             style={{
-              padding: 24,
               minHeight: 360,
               background: colorBgContainer,
               borderRadius: borderRadiusLG,
@@ -224,7 +221,7 @@ export default function DashboardLayout({
             {children}
           </div>
         </Content>
-        <Footer style={{ textAlign: "center" }}>
+        <Footer className="text-center">
           Lanu ©{new Date().getFullYear()} Created by Lanu FE Team
         </Footer>
       </Layout>