From 5c76a8b44407b7c3b1cbe9e198688b06ff242b53 Mon Sep 17 00:00:00 2001
From: mehedi-hasan <mdmehedihasan2810@gmail.com>
Date: Fri, 3 May 2024 18:15:24 +0600
Subject: [PATCH] feat: add breadcrumbs

---
 .../dashboard/accounts/add/page.tsx           | 12 ++++++-
 .../dashboard/api-communications/add/page.tsx | 34 ++++++++++++-------
 .../dashboard/change-password/page.tsx        | 19 ++++++-----
 .../dashboard/configurations/add/page.tsx     | 12 ++++++-
 .../dashboard/organizations/add/page.tsx      | 34 ++++++++++++-------
 .../dashboard/preferences/page.tsx            | 15 ++++++--
 .../(dashboard)/dashboard/users/add/page.tsx  | 14 ++++++--
 src/components/add-account-form.tsx           |  2 +-
 src/components/add-api-communication-form.tsx |  2 +-
 src/components/add-configuration-form.tsx     |  2 +-
 src/components/add-criteria-form.tsx          |  2 +-
 src/components/add-organization-form.tsx      |  2 +-
 src/components/add-skill-form.tsx             |  2 +-
 src/components/add-user-form.tsx              |  2 +-
 src/components/change-password-form.tsx       |  7 +++-
 src/components/evaluation-form.tsx            |  2 +-
 16 files changed, 114 insertions(+), 49 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/accounts/add/page.tsx b/src/app/(dashboard)/dashboard/accounts/add/page.tsx
index 66bb764..f8e77c7 100644
--- a/src/app/(dashboard)/dashboard/accounts/add/page.tsx
+++ b/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>
   );
diff --git a/src/app/(dashboard)/dashboard/api-communications/add/page.tsx b/src/app/(dashboard)/dashboard/api-communications/add/page.tsx
index 324814c..9ce6ca7 100644
--- a/src/app/(dashboard)/dashboard/api-communications/add/page.tsx
+++ b/src/app/(dashboard)/dashboard/api-communications/add/page.tsx
@@ -1,24 +1,34 @@
 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">
-        <Card className="max-w-[700px] w-full">
-          <CardHeader>
-            <CardTitle className="mb-4 font-bold text-xl">
-              Create API Communication
-            </CardTitle>
-            <Separator />
-          </CardHeader>
+      <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 mb-8">
+            <CardHeader>
+              <CardTitle className="mb-4 font-bold text-xl">
+                Create API Communication
+              </CardTitle>
+              <Separator />
+            </CardHeader>
 
-          <CardContent>
-            <AddAPICommunicationForm />
-          </CardContent>
-        </Card>
+            <CardContent>
+              <AddAPICommunicationForm />
+            </CardContent>
+          </Card>
+        </div>
       </div>
       <ScrollBar />
     </ScrollArea>
diff --git a/src/app/(dashboard)/dashboard/change-password/page.tsx b/src/app/(dashboard)/dashboard/change-password/page.tsx
index d0ffa86..ed32d8e 100644
--- a/src/app/(dashboard)/dashboard/change-password/page.tsx
+++ b/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>
-        <h3 className="text-lg font-medium">Change Password</h3>
-        <p className="text-sm text-muted-foreground">
-          Change your password carefully.
-        </p>
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full">
+      <Breadcrumb items={breadcrumbItems} />
+      <div className="w-full flex justify-center">
+        <ChangePasswordForm />
       </div>
-      <Separator /> */}
-      <ChangePasswordForm />
     </div>
   );
 }
diff --git a/src/app/(dashboard)/dashboard/configurations/add/page.tsx b/src/app/(dashboard)/dashboard/configurations/add/page.tsx
index 39f2c3d..cef60ac 100644
--- a/src/app/(dashboard)/dashboard/configurations/add/page.tsx
+++ b/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>
   );
diff --git a/src/app/(dashboard)/dashboard/organizations/add/page.tsx b/src/app/(dashboard)/dashboard/organizations/add/page.tsx
index f585d84..0c81302 100644
--- a/src/app/(dashboard)/dashboard/organizations/add/page.tsx
+++ b/src/app/(dashboard)/dashboard/organizations/add/page.tsx
@@ -2,23 +2,33 @@ 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">
-        <Card className="max-w-[700px] w-full">
-          <CardHeader>
-            <CardTitle className="mb-4 font-bold text-xl">
-              Create Organization
-            </CardTitle>
-            <Separator />
-          </CardHeader>
+      <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">
+                Create Organization
+              </CardTitle>
+              <Separator />
+            </CardHeader>
 
-          <CardContent>
-            <AddOrganizationForm />
-          </CardContent>
-        </Card>
+            <CardContent>
+              <AddOrganizationForm />
+            </CardContent>
+          </Card>
+        </div>
       </div>
       <ScrollBar />
     </ScrollArea>
diff --git a/src/app/(dashboard)/dashboard/preferences/page.tsx b/src/app/(dashboard)/dashboard/preferences/page.tsx
index 5adb41a..9efd1e8 100644
--- a/src/app/(dashboard)/dashboard/preferences/page.tsx
+++ b/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">
-      <Card className="max-w-[600px] w-full">
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-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>
   );
 };
 
diff --git a/src/app/(dashboard)/dashboard/users/add/page.tsx b/src/app/(dashboard)/dashboard/users/add/page.tsx
index 27e0f26..17aba0d 100644
--- a/src/app/(dashboard)/dashboard/users/add/page.tsx
+++ b/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">
-        <Card className="max-w-[700px] w-full">
+      <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 mb-8">
           <CardHeader>
             <CardTitle className="mb-4 font-bold text-xl">
               Create User
@@ -26,6 +35,7 @@ export default function SettingsDisplayPage() {
             <AddUserForm />
           </CardContent>
         </Card>
+        </div>
       </div>
       <ScrollBar />
     </ScrollArea>
diff --git a/src/components/add-account-form.tsx b/src/components/add-account-form.tsx
index c310355..8bb9687 100644
--- a/src/components/add-account-form.tsx
+++ b/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>
diff --git a/src/components/add-api-communication-form.tsx b/src/components/add-api-communication-form.tsx
index e9b0ac7..e43b566 100644
--- a/src/components/add-api-communication-form.tsx
+++ b/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>
diff --git a/src/components/add-configuration-form.tsx b/src/components/add-configuration-form.tsx
index 52b045c..646892c 100644
--- a/src/components/add-configuration-form.tsx
+++ b/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>
diff --git a/src/components/add-criteria-form.tsx b/src/components/add-criteria-form.tsx
index 725dd38..ac9a887 100644
--- a/src/components/add-criteria-form.tsx
+++ b/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>
diff --git a/src/components/add-organization-form.tsx b/src/components/add-organization-form.tsx
index bff3532..0f683b6 100644
--- a/src/components/add-organization-form.tsx
+++ b/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>
diff --git a/src/components/add-skill-form.tsx b/src/components/add-skill-form.tsx
index ceaca23..9fdf7ea 100644
--- a/src/components/add-skill-form.tsx
+++ b/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>
diff --git a/src/components/add-user-form.tsx b/src/components/add-user-form.tsx
index c145311..a3f3e98 100644
--- a/src/components/add-user-form.tsx
+++ b/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>
diff --git a/src/components/change-password-form.tsx b/src/components/change-password-form.tsx
index 576edc5..03dea10 100644
--- a/src/components/change-password-form.tsx
+++ b/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>
diff --git a/src/components/evaluation-form.tsx b/src/components/evaluation-form.tsx
index e4400aa..f0a66c0 100644
--- a/src/components/evaluation-form.tsx
+++ b/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>