feat: add breadcrumbs

src/app/(dashboard)/dashboard/accounts/add/page.tsx

@@ -1,12 +1,21 @@
 import AddAccountForm from "@/components/add-account-form";
+import Breadcrumb from "@/components/breadcrumb";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Accounts", link: "/dashboard/accounts" },
+  { title: "Add" },
+];
+
 export default function SettingsDisplayPage() {
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
-      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+     <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="w-full h-full flex justify-center items-center">
         <Card className="max-w-[700px] w-full">
           <CardHeader>
             <CardTitle className="mb-4 font-bold text-xl">
@@ -20,6 +29,7 @@ export default function SettingsDisplayPage() {
           </CardContent>
         </Card>
       </div>
+      </div>
       <ScrollBar />
     </ScrollArea>
   );

src/app/(dashboard)/dashboard/api-communications/add/page.tsx

@@ -1,13 +1,22 @@
 import AddAPICommunicationForm from "@/components/add-api-communication-form";
+import Breadcrumb from "@/components/breadcrumb";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Api Communications", link: "/dashboard/api-communications" },
+  { title: "Add" },
+];
+
 export default function SettingsDisplayPage() {
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
-      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
-        <Card className="max-w-[700px] w-full">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="w-full h-full flex justify-center items-center">
+          <Card className="max-w-[700px] w-full mb-8">
             <CardHeader>
               <CardTitle className="mb-4 font-bold text-xl">
                 Create API Communication
@@ -20,6 +29,7 @@ export default function SettingsDisplayPage() {
             </CardContent>
           </Card>
         </div>
+      </div>
       <ScrollBar />
     </ScrollArea>
   );

src/app/(dashboard)/dashboard/change-password/page.tsx

@@ -1,17 +1,18 @@
+import Breadcrumb from "@/components/breadcrumb";
 import ChangePasswordForm from "@/components/change-password-form";
-import { Separator } from "@/components/ui/separator";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Change Password" },
+];
 
 export default function SettingsProfilePage() {
   return (
-    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 h-full w-full flex justify-center items-center">
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full">
-      {/* <div>
+      <Breadcrumb items={breadcrumbItems} />
-        <h3 className="text-lg font-medium">Change Password</h3>
+      <div className="w-full flex justify-center">
-        <p className="text-sm text-muted-foreground">
-          Change your password carefully.
-        </p>
-      </div>
-      <Separator /> */}
         <ChangePasswordForm />
       </div>
+    </div>
   );
 }

src/app/(dashboard)/dashboard/configurations/add/page.tsx

@@ -2,11 +2,20 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import AddConfigurationForm from "@/components/add-configuration-form";
+import Breadcrumb from "@/components/breadcrumb";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Configurations", link: "/dashboard/configurations" },
+  { title: "Add" },
+];
 
 export default function SettingsDisplayPage() {
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
-      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+       <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="w-full h-full flex justify-center items-center">
         <Card className="max-w-[700px] w-full">
           <CardHeader>
             <CardTitle className="mb-4 font-bold text-xl">
@@ -20,6 +29,7 @@ export default function SettingsDisplayPage() {
           </CardContent>
         </Card>
       </div>
+      </div>
       <ScrollBar />
     </ScrollArea>
   );

src/app/(dashboard)/dashboard/organizations/add/page.tsx

@@ -2,11 +2,20 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import AddOrganizationForm from "@/components/add-organization-form";
+import Breadcrumb from "@/components/breadcrumb";
+
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Organizations", link: "/dashboard/organizations" },
+  { title: "Add" },
+];
 
 export default function SettingsDisplayPage() {
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
-      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="w-full h-full flex justify-center items-center">
           <Card className="max-w-[700px] w-full">
             <CardHeader>
               <CardTitle className="mb-4 font-bold text-xl">
@@ -20,6 +29,7 @@ export default function SettingsDisplayPage() {
             </CardContent>
           </Card>
         </div>
+      </div>
       <ScrollBar />
     </ScrollArea>
   );

src/app/(dashboard)/dashboard/preferences/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Breadcrumb from "@/components/breadcrumb";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -76,6 +77,11 @@ const dummyPreferences = [
   },
 ];
 
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Preferences" },
+];
+
 const Page = () => {
   const [preference, setPreference] = useState({
     readability: [50],
@@ -91,8 +97,10 @@ const Page = () => {
   });
 
   return (
-    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full">
-      <Card className="max-w-[600px] w-full">
+      <Breadcrumb items={breadcrumbItems} />
+      <div className="w-full h-full flex justify-center">
+      <Card className="max-w-[600px] w-full h-fit">
         <CardHeader>
           <CardTitle className="mb-4 font-bold text-xl">
             Code Evaluation Criteria
@@ -106,7 +114,7 @@ const Page = () => {
               (item: { id: number; name: string; description: string }) => (
                 <div key={item.id} className="space-y-6">
                   <div className="flex items-center gap-2">
-                    <h4 className="capitalize font-semibold">{item.name}</h4>
+                    <h4 className="capitalize font-semibold text-sm sm:text-base">{item.name}</h4>
                     <Tooltip>
                       <TooltipTrigger>
                         <CircleHelp className="size-4" />
@@ -137,6 +145,7 @@ const Page = () => {
         </CardFooter>
       </Card>
     </div>
+    </div>
   );
 };
 

src/app/(dashboard)/dashboard/users/add/page.tsx

@@ -1,4 +1,5 @@
 import AddUserForm from "@/components/add-user-form";
+import Breadcrumb from "@/components/breadcrumb";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -10,11 +11,19 @@ import {
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 
+const breadcrumbItems = [
+  { title: "Dashboard", link: "/dashboard" },
+  { title: "Users", link: "/dashboard/users" },
+  { title: "Add" },
+];
+
 export default function SettingsDisplayPage() {
   return (
     <ScrollArea className="h-[calc(100vh-53px)]">
-      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
-        <Card className="max-w-[700px] w-full">
+      <Breadcrumb items={breadcrumbItems} />
+        <div className="w-full h-full flex justify-center items-center">
+        <Card className="max-w-[700px] w-full mb-8">
           <CardHeader>
             <CardTitle className="mb-4 font-bold text-xl">
               Create User
@@ -27,6 +36,7 @@ export default function SettingsDisplayPage() {
           </CardContent>
         </Card>
         </div>
+      </div>
       <ScrollBar />
     </ScrollArea>
   );

src/components/add-account-form.tsx

@@ -132,7 +132,7 @@ export default function AddAccountForm() {
           )}
         />
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
             Create
           </Button>

src/components/add-api-communication-form.tsx

@@ -227,7 +227,7 @@ export default function AddAPICommunicationForm() {
           )}
         />
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
             Create
           </Button>

src/components/add-configuration-form.tsx

@@ -76,7 +76,7 @@ export default function AddConfigurationForm() {
           )}
         />
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
             Create
           </Button>

src/components/add-criteria-form.tsx

@@ -92,7 +92,7 @@ export default function AddCriteriaForm() {
           )}
         />
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
             Create
           </Button>

src/components/add-organization-form.tsx

@@ -61,7 +61,7 @@ export default function AddOrganizationForm() {
           )}
         />
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
             Create
           </Button>

src/components/add-skill-form.tsx

@@ -61,7 +61,7 @@ export default function AddSkillForm() {
           )}
         />
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
             Create
           </Button>

src/components/add-user-form.tsx

@@ -209,7 +209,7 @@ export default function AddUserForm() {
             </FormItem>
           )}
         />
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
             Create
           </Button>

src/components/change-password-form.tsx

@@ -87,6 +87,7 @@ export default function ChangePasswordForm() {
                   <FormLabel>Current Password</FormLabel>
                   <FormControl>
                     <Input
+                      type="password"
                       placeholder="Enter your current password..."
                       {...field}
                     />
@@ -103,6 +104,7 @@ export default function ChangePasswordForm() {
                   <FormLabel>New Password</FormLabel>
                   <FormControl>
                     <Input
+                      type="password"
                       placeholder="Enter your new password..."
                       {...field}
                     />
@@ -119,6 +121,7 @@ export default function ChangePasswordForm() {
                   <FormLabel>Confirm New Password</FormLabel>
                   <FormControl>
                     <Input
+                      type="password"
                       placeholder="Confirm the new password..."
                       {...field}
                     />
@@ -127,7 +130,9 @@ export default function ChangePasswordForm() {
                 </FormItem>
               )}
             />
-            <Button type="submit" className="w-full" size="lg">Reset Password</Button>
+            <Button type="submit" className="w-full" size="lg">
+              Reset Password
+            </Button>
           </form>
         </Form>
       </CardContent>

src/components/evaluation-form.tsx

@@ -310,7 +310,7 @@ export default function AddEvaluationForm() {
           )}
         />
 
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-4 flex-col sm:flex-row">
           <Button className="w-full" size="lg">
             Create
           </Button>