init

src/app/(admin)/(others-pages)/(chart)/bar-chart/page.tsx

@@ -0,0 +1,24 @@
+import BarChartOne from "@/components/charts/bar/BarChartOne";
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Bar Chart | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Bar Chart page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+};
+
+export default function page() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Bar Chart" />
+      <div className="space-y-6">
+        <ComponentCard title="Bar Chart 1">
+          <BarChartOne />
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(others-pages)/(chart)/line-chart/page.tsx

@@ -0,0 +1,23 @@
+import LineChartOne from "@/components/charts/line/LineChartOne";
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Line Chart | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Line Chart page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+};
+export default function LineChart() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Line Chart" />
+      <div className="space-y-6">
+        <ComponentCard title="Line Chart 1">
+          <LineChartOne />
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(others-pages)/(forms)/form-elements/page.tsx

@@ -0,0 +1,43 @@
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import CheckboxComponents from "@/components/form/form-elements/CheckboxComponents";
+import DefaultInputs from "@/components/form/form-elements/DefaultInputs";
+import DropzoneComponent from "@/components/form/form-elements/DropZone";
+import FileInputExample from "@/components/form/form-elements/FileInputExample";
+import InputGroup from "@/components/form/form-elements/InputGroup";
+import InputStates from "@/components/form/form-elements/InputStates";
+import RadioButtons from "@/components/form/form-elements/RadioButtons";
+import SelectInputs from "@/components/form/form-elements/SelectInputs";
+import TextAreaInput from "@/components/form/form-elements/TextAreaInput";
+import ToggleSwitch from "@/components/form/form-elements/ToggleSwitch";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Form Elements | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Form Elements page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+};
+
+export default function FormElements() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="From Elements" />
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+        <div className="space-y-6">
+          <DefaultInputs />
+          <SelectInputs />
+          <TextAreaInput />
+          <InputStates />
+        </div>
+        <div className="space-y-6">
+          <InputGroup />
+          <FileInputExample />
+          <CheckboxComponents />
+          <RadioButtons />
+          <ToggleSwitch />
+          <DropzoneComponent />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(others-pages)/(tables)/basic-tables/page.tsx

@@ -0,0 +1,25 @@
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import BasicTableOne from "@/components/tables/BasicTableOne";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Basic Table | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Basic Table  page for TailAdmin  Tailwind CSS Admin Dashboard Template",
+  // other metadata
+};
+
+export default function BasicTables() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Basic Table" />
+      <div className="space-y-6">
+        <ComponentCard title="Basic Table 1">
+          <BasicTableOne />
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(others-pages)/blank/page.tsx

@@ -0,0 +1,27 @@
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Blank Page | TailAdmin - Next.js Dashboard Template",
+  description: "This is Next.js Blank Page TailAdmin Dashboard Template",
+};
+
+export default function BlankPage() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Blank Page" />
+      <div className="min-h-screen rounded-2xl border border-gray-200 bg-white px-5 py-7 dark:border-gray-800 dark:bg-white/[0.03] xl:px-10 xl:py-12">
+        <div className="mx-auto w-full max-w-[630px] text-center">
+          <h3 className="mb-4 font-semibold text-gray-800 text-theme-xl dark:text-white/90 sm:text-2xl">
+            Card Title Here
+          </h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400 sm:text-base">
+            Start putting content on grids or panels, you can also use different
+            combinations of grids.Please check out the dashboard and other pages
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(others-pages)/calendar/page.tsx

@@ -0,0 +1,19 @@
+import Calendar from "@/components/calendar/Calendar";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Calender | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Calender page for TailAdmin  Tailwind CSS Admin Dashboard Template",
+  // other metadata
+};
+export default function page() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Calendar" />
+      <Calendar />
+    </div>
+  );
+}

src/app/(admin)/(others-pages)/profile/page.tsx

@@ -0,0 +1,28 @@
+import UserAddressCard from "@/components/user-profile/UserAddressCard";
+import UserInfoCard from "@/components/user-profile/UserInfoCard";
+import UserMetaCard from "@/components/user-profile/UserMetaCard";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Profile | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Profile page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+};
+
+export default function Profile() {
+  return (
+    <div>
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:p-6">
+        <h3 className="mb-5 text-lg font-semibold text-gray-800 dark:text-white/90 lg:mb-7">
+          Profile
+        </h3>
+        <div className="space-y-6">
+          <UserMetaCard />
+          <UserInfoCard />
+          <UserAddressCard />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(ui-elements)/alerts/page.tsx

@@ -0,0 +1,86 @@
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import Alert from "@/components/ui/alert/Alert";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Alerts | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Alerts page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+  // other metadata
+};
+
+export default function Alerts() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Alerts" />
+      <div className="space-y-5 sm:space-y-6">
+        <ComponentCard title="Success Alert">
+          <Alert
+            variant="success"
+            title="Success Message"
+            message="Be cautious when performing this action."
+            showLink={true}
+            linkHref="/"
+            linkText="Learn more"
+          />
+          <Alert
+            variant="success"
+            title="Success Message"
+            message="Be cautious when performing this action."
+            showLink={false}
+          />
+        </ComponentCard>
+        <ComponentCard title="Warning Alert">
+          <Alert
+            variant="warning"
+            title="Warning Message"
+            message="Be cautious when performing this action."
+            showLink={true}
+            linkHref="/"
+            linkText="Learn more"
+          />
+          <Alert
+            variant="warning"
+            title="Warning Message"
+            message="Be cautious when performing this action."
+            showLink={false}
+          />
+        </ComponentCard>{" "}
+        <ComponentCard title="Error Alert">
+          <Alert
+            variant="error"
+            title="Error Message"
+            message="Be cautious when performing this action."
+            showLink={true}
+            linkHref="/"
+            linkText="Learn more"
+          />
+          <Alert
+            variant="error"
+            title="Error Message"
+            message="Be cautious when performing this action."
+            showLink={false}
+          />
+        </ComponentCard>{" "}
+        <ComponentCard title="Info Alert">
+          <Alert
+            variant="info"
+            title="Info Message"
+            message="Be cautious when performing this action."
+            showLink={true}
+            linkHref="/"
+            linkText="Learn more"
+          />
+          <Alert
+            variant="info"
+            title="Info Message"
+            message="Be cautious when performing this action."
+            showLink={false}
+          />
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(ui-elements)/avatars/page.tsx

@@ -0,0 +1,126 @@
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import Avatar from "@/components/ui/avatar/Avatar";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Avatars | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Avatars page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+};
+
+export default function AvatarPage() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Avatar" />
+      <div className="space-y-5 sm:space-y-6">
+        <ComponentCard title="Default Avatar">
+          {/* Default Avatar (No Status) */}
+          <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
+            <Avatar src="/images/user/user-01.jpg" size="xsmall" />
+            <Avatar src="/images/user/user-01.jpg" size="small" />
+            <Avatar src="/images/user/user-01.jpg" size="medium" />
+            <Avatar src="/images/user/user-01.jpg" size="large" />
+            <Avatar src="/images/user/user-01.jpg" size="xlarge" />
+            <Avatar src="/images/user/user-01.jpg" size="xxlarge" />
+          </div>
+        </ComponentCard>
+        <ComponentCard title="Avatar with online indicator">
+          <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xsmall"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="small"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="medium"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="large"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xlarge"
+              status="online"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xxlarge"
+              status="online"
+            />
+          </div>
+        </ComponentCard>
+        <ComponentCard title="Avatar with Offline indicator">
+          <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xsmall"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="small"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="medium"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="large"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xlarge"
+              status="offline"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xxlarge"
+              status="offline"
+            />
+          </div>
+        </ComponentCard>{" "}
+        <ComponentCard title="Avatar with busy indicator">
+          <div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xsmall"
+              status="busy"
+            />
+            <Avatar src="/images/user/user-01.jpg" size="small" status="busy" />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="medium"
+              status="busy"
+            />
+            <Avatar src="/images/user/user-01.jpg" size="large" status="busy" />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xlarge"
+              status="busy"
+            />
+            <Avatar
+              src="/images/user/user-01.jpg"
+              size="xxlarge"
+              status="busy"
+            />
+          </div>
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(ui-elements)/badge/page.tsx

@@ -0,0 +1,221 @@
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import Badge from "@/components/ui/badge/Badge";
+import { PlusIcon } from "@/icons";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Badge | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Badge page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+  // other metadata
+};
+
+export default function BadgePage() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Badges" />
+      <div className="space-y-5 sm:space-y-6">
+        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div className="px-6 py-5">
+            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
+              With Light Background
+            </h3>
+          </div>
+          <div className="p-6 border-t border-gray-100 dark:border-gray-800 xl:p-10">
+            <div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
+              {/* Light Variant */}
+              <Badge variant="light" color="primary">
+                Primary
+              </Badge>
+              <Badge variant="light" color="success">
+                Success
+              </Badge>{" "}
+              <Badge variant="light" color="error">
+                Error
+              </Badge>{" "}
+              <Badge variant="light" color="warning">
+                Warning
+              </Badge>{" "}
+              <Badge variant="light" color="info">
+                Info
+              </Badge>
+              <Badge variant="light" color="light">
+                Light
+              </Badge>
+              <Badge variant="light" color="dark">
+                Dark
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div className="px-6 py-5">
+            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
+              With Solid Background
+            </h3>
+          </div>
+          <div className="p-6 border-t border-gray-100 dark:border-gray-800 xl:p-10">
+            <div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
+              {/* Light Variant */}
+              <Badge variant="solid" color="primary">
+                Primary
+              </Badge>
+              <Badge variant="solid" color="success">
+                Success
+              </Badge>{" "}
+              <Badge variant="solid" color="error">
+                Error
+              </Badge>{" "}
+              <Badge variant="solid" color="warning">
+                Warning
+              </Badge>{" "}
+              <Badge variant="solid" color="info">
+                Info
+              </Badge>
+              <Badge variant="solid" color="light">
+                Light
+              </Badge>
+              <Badge variant="solid" color="dark">
+                Dark
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div className="px-6 py-5">
+            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
+              Light Background with Left Icon
+            </h3>
+          </div>
+          <div className="p-6 border-t border-gray-100 dark:border-gray-800 xl:p-10">
+            <div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
+              <Badge variant="light" color="primary" startIcon={<PlusIcon />}>
+                Primary
+              </Badge>
+              <Badge variant="light" color="success" startIcon={<PlusIcon />}>
+                Success
+              </Badge>{" "}
+              <Badge variant="light" color="error" startIcon={<PlusIcon />}>
+                Error
+              </Badge>{" "}
+              <Badge variant="light" color="warning" startIcon={<PlusIcon />}>
+                Warning
+              </Badge>{" "}
+              <Badge variant="light" color="info" startIcon={<PlusIcon />}>
+                Info
+              </Badge>
+              <Badge variant="light" color="light" startIcon={<PlusIcon />}>
+                Light
+              </Badge>
+              <Badge variant="light" color="dark" startIcon={<PlusIcon />}>
+                Dark
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div className="px-6 py-5">
+            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
+              Solid Background with Left Icon
+            </h3>
+          </div>
+          <div className="p-6 border-t border-gray-100 dark:border-gray-800 xl:p-10">
+            <div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
+              <Badge variant="solid" color="primary" startIcon={<PlusIcon />}>
+                Primary
+              </Badge>
+              <Badge variant="solid" color="success" startIcon={<PlusIcon />}>
+                Success
+              </Badge>{" "}
+              <Badge variant="solid" color="error" startIcon={<PlusIcon />}>
+                Error
+              </Badge>{" "}
+              <Badge variant="solid" color="warning" startIcon={<PlusIcon />}>
+                Warning
+              </Badge>{" "}
+              <Badge variant="solid" color="info" startIcon={<PlusIcon />}>
+                Info
+              </Badge>
+              <Badge variant="solid" color="light" startIcon={<PlusIcon />}>
+                Light
+              </Badge>
+              <Badge variant="solid" color="dark" startIcon={<PlusIcon />}>
+                Dark
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div className="px-6 py-5">
+            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
+              Light Background with Right Icon
+            </h3>
+          </div>
+          <div className="p-6 border-t border-gray-100 dark:border-gray-800 xl:p-10">
+            <div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
+              <Badge variant="light" color="primary" endIcon={<PlusIcon />}>
+                Primary
+              </Badge>
+              <Badge variant="light" color="success" endIcon={<PlusIcon />}>
+                Success
+              </Badge>{" "}
+              <Badge variant="light" color="error" endIcon={<PlusIcon />}>
+                Error
+              </Badge>{" "}
+              <Badge variant="light" color="warning" endIcon={<PlusIcon />}>
+                Warning
+              </Badge>{" "}
+              <Badge variant="light" color="info" endIcon={<PlusIcon />}>
+                Info
+              </Badge>
+              <Badge variant="light" color="light" endIcon={<PlusIcon />}>
+                Light
+              </Badge>
+              <Badge variant="light" color="dark" endIcon={<PlusIcon />}>
+                Dark
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+          <div className="px-6 py-5">
+            <h3 className="text-base font-medium text-gray-800 dark:text-white/90">
+              Solid Background with Right Icon
+            </h3>
+          </div>
+          <div className="p-6 border-t border-gray-100 dark:border-gray-800 xl:p-10">
+            <div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
+              <Badge variant="solid" color="primary" endIcon={<PlusIcon />}>
+                Primary
+              </Badge>
+              <Badge variant="solid" color="success" endIcon={<PlusIcon />}>
+                Success
+              </Badge>{" "}
+              <Badge variant="solid" color="error" endIcon={<PlusIcon />}>
+                Error
+              </Badge>{" "}
+              <Badge variant="solid" color="warning" endIcon={<PlusIcon />}>
+                Warning
+              </Badge>{" "}
+              <Badge variant="solid" color="info" endIcon={<PlusIcon />}>
+                Info
+              </Badge>
+              <Badge variant="solid" color="light" endIcon={<PlusIcon />}>
+                Light
+              </Badge>
+              <Badge variant="solid" color="dark" endIcon={<PlusIcon />}>
+                Dark
+              </Badge>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(ui-elements)/buttons/page.tsx

@@ -0,0 +1,89 @@
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import Button from "@/components/ui/button/Button";
+import { BoxIcon } from "@/icons";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Buttons | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Buttons page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+};
+
+export default function Buttons() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Buttons" />
+      <div className="space-y-5 sm:space-y-6">
+        {/* Primary Button */}
+        <ComponentCard title="Primary Button">
+          <div className="flex items-center gap-5">
+            <Button size="sm" variant="primary">
+              Button Text
+            </Button>
+            <Button size="md" variant="primary">
+              Button Text
+            </Button>
+          </div>
+        </ComponentCard>
+        {/* Primary Button with Start Icon */}
+        <ComponentCard title="Primary Button with Left Icon">
+          <div className="flex items-center gap-5">
+            <Button size="sm" variant="primary" startIcon={<BoxIcon />}>
+              Button Text
+            </Button>
+            <Button size="md" variant="primary" startIcon={<BoxIcon />}>
+              Button Text
+            </Button>
+          </div>
+        </ComponentCard>{" "}
+        {/* Primary Button with Start Icon */}
+        <ComponentCard title="Primary Button with Right Icon">
+          <div className="flex items-center gap-5">
+            <Button size="sm" variant="primary" endIcon={<BoxIcon />}>
+              Button Text
+            </Button>
+            <Button size="md" variant="primary" endIcon={<BoxIcon />}>
+              Button Text
+            </Button>
+          </div>
+        </ComponentCard>
+        {/* Outline Button */}
+        <ComponentCard title="Secondary Button">
+          <div className="flex items-center gap-5">
+            {/* Outline Button */}
+            <Button size="sm" variant="outline">
+              Button Text
+            </Button>
+            <Button size="md" variant="outline">
+              Button Text
+            </Button>
+          </div>
+        </ComponentCard>
+        {/* Outline Button with Start Icon */}
+        <ComponentCard title="Outline Button with Left Icon">
+          <div className="flex items-center gap-5">
+            <Button size="sm" variant="outline" startIcon={<BoxIcon />}>
+              Button Text
+            </Button>
+            <Button size="md" variant="outline" startIcon={<BoxIcon />}>
+              Button Text
+            </Button>
+          </div>
+        </ComponentCard>{" "}
+        {/* Outline Button with Start Icon */}
+        <ComponentCard title="Outline Button with Right Icon">
+          <div className="flex items-center gap-5">
+            <Button size="sm" variant="outline" endIcon={<BoxIcon />}>
+              Button Text
+            </Button>
+            <Button size="md" variant="outline" endIcon={<BoxIcon />}>
+              Button Text
+            </Button>
+          </div>
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(ui-elements)/images/page.tsx

@@ -0,0 +1,33 @@
+import ComponentCard from "@/components/common/ComponentCard";
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import ResponsiveImage from "@/components/ui/images/ResponsiveImage";
+import ThreeColumnImageGrid from "@/components/ui/images/ThreeColumnImageGrid";
+import TwoColumnImageGrid from "@/components/ui/images/TwoColumnImageGrid";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Images | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Images page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+  // other metadata
+};
+
+export default function Images() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Images" />
+      <div className="space-y-5 sm:space-y-6">
+        <ComponentCard title="Responsive image">
+          <ResponsiveImage />
+        </ComponentCard>
+        <ComponentCard title="Image in 2 Grid">
+          <TwoColumnImageGrid />
+        </ComponentCard>
+        <ComponentCard title="Image in 3 Grid">
+          <ThreeColumnImageGrid />
+        </ComponentCard>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(ui-elements)/modals/page.tsx

@@ -0,0 +1,30 @@
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import DefaultModal from "@/components/example/ModalExample/DefaultModal";
+import FormInModal from "@/components/example/ModalExample/FormInModal";
+import FullScreenModal from "@/components/example/ModalExample/FullScreenModal";
+import ModalBasedAlerts from "@/components/example/ModalExample/ModalBasedAlerts";
+import VerticallyCenteredModal from "@/components/example/ModalExample/VerticallyCenteredModal";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Modals | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Modals page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+  // other metadata
+};
+
+export default function Modals() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Modals" />
+      <div className="grid grid-cols-1 gap-5 xl:grid-cols-2 xl:gap-6">
+        <DefaultModal />
+        <VerticallyCenteredModal />
+        <FormInModal />
+        <FullScreenModal />
+        <ModalBasedAlerts />
+      </div>
+    </div>
+  );
+}

src/app/(admin)/(ui-elements)/videos/page.tsx

@@ -0,0 +1,20 @@
+import PageBreadcrumb from "@/components/common/PageBreadCrumb";
+import VideosExample from "@/components/ui/video/VideosExample";
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "Next.js Videos | TailAdmin - Next.js Dashboard Template",
+  description:
+    "This is Next.js Videos page for TailAdmin - Next.js Tailwind CSS Admin Dashboard Template",
+};
+
+export default function VideoPage() {
+  return (
+    <div>
+      <PageBreadcrumb pageTitle="Videos" />
+
+      <VideosExample />
+    </div>
+  );
+}

src/app/(admin)/layout.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useSidebar } from "@/context/SidebarContext";
+import AppHeader from "@/layout/AppHeader";
+import AppSidebar from "@/layout/AppSidebar";
+import Backdrop from "@/layout/Backdrop";
+import React from "react";
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { isExpanded, isHovered, isMobileOpen } = useSidebar();
+
+  // Dynamic class for main content margin based on sidebar state
+  const mainContentMargin = isMobileOpen
+    ? "ml-0"
+    : isExpanded || isHovered
+    ? "lg:ml-[290px]"
+    : "lg:ml-[90px]";
+
+  return (
+    <div className="min-h-screen xl:flex">
+      {/* Sidebar and Backdrop */}
+      <AppSidebar />
+      <Backdrop />
+      {/* Main Content Area */}
+      <div
+        className={`flex-1 transition-all  duration-300 ease-in-out ${mainContentMargin}`}
+      >
+        {/* Header */}
+        <AppHeader />
+        {/* Page Content */}
+        <div className="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">{children}</div>
+      </div>
+    </div>
+  );
+}

src/app/(admin)/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { EcommerceMetrics } from "@/components/ecommerce/EcommerceMetrics";
+import React from "react";
+import MonthlyTarget from "@/components/ecommerce/MonthlyTarget";
+import MonthlySalesChart from "@/components/ecommerce/MonthlySalesChart";
+import StatisticsChart from "@/components/ecommerce/StatisticsChart";
+import RecentOrders from "@/components/ecommerce/RecentOrders";
+import DemographicCard from "@/components/ecommerce/DemographicCard";
+
+export const metadata: Metadata = {
+  title:
+    "Next.js E-commerce Dashboard | TailAdmin - Next.js Dashboard Template",
+  description: "This is Next.js Home for TailAdmin Dashboard Template",
+};
+
+export default function Ecommerce() {
+  return (
+    <div className="grid grid-cols-12 gap-4 md:gap-6">
+      <div className="col-span-12 space-y-6 xl:col-span-7">
+        <EcommerceMetrics />
+
+        <MonthlySalesChart />
+      </div>
+
+      <div className="col-span-12 xl:col-span-5">
+        <MonthlyTarget />
+      </div>
+
+      <div className="col-span-12">
+        <StatisticsChart />
+      </div>
+
+      <div className="col-span-12 xl:col-span-5">
+        <DemographicCard />
+      </div>
+
+      <div className="col-span-12 xl:col-span-7">
+        <RecentOrders />
+      </div>
+    </div>
+  );
+}